feat: DraggableGrid

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

@@ -0,0 +1,13 @@
<template>
  <div>首页</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>

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

@@ -47,9 +47,11 @@ export default {
  },
  computed: {
    gridWidth: function () {
      if (this.itemWidth == null) return '100%'
      return this.itemWidth - 20 + 'px'
    },
    gridHeight: function () {
      if (this.itemWidth == null) return '100%'
      return this.itemWidth * 0.9 - 20 - 6 - 32 + 'px'
    }
  },

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

@@ -5,10 +5,7 @@
        <t-col>
          <div style="float: left">
            <span>风场： </span>
            <t-select
              v-model="currentWindPlaceValue"
              style="width: 200px; height: 32px"
            >
            <t-select v-model="currentWindPlaceValue" style="width: 200px; height: 32px">
              <t-option value="1">风场1</t-option>
              <t-option value="2">风场2</t-option>
            </t-select>
@@ -17,30 +14,16 @@
        <t-col>
          <div style="float: right">
            <t-button-group>
              <t-button
                :class="['base', btnIsClicked ? 'active' : '']"
                @click="btnOnClick('areaMonitor')"
              >
              <t-button :class="['base', btnIsClicked ? 'active' : '']" @click="btnOnClick('areaMonitor')">
                <span>大门</span>
                <div
                  v-if="dialogSceneData.id == '1'"
                  style="float: right; width: 14px; height: 14px"
                  @click="handleSceneEdit('123')"
                >
                <div v-if="dialogSceneData.id == '1'" style="float: right; width: 14px; height: 14px" @click="handleSceneEdit('123')">
                  <t-icon icon="edit" shape="circle" class="ico"></t-icon>
                </div>
              </t-button>
              <t-button
                :class="['base', btnIsClicked ? 'active' : '']"
                @click="btnOnClick('areaMonitor')"
              >
              <t-button :class="['base', btnIsClicked ? 'active' : '']" @click="btnOnClick('areaMonitor')">
                <span>值班室</span>
                <div
                  v-if="dialogSceneData.id == '456'"
                  style="float: right; width: 14px; height: 14px"
                  @click="handleSceneEdit('456')"
                >
                <div v-if="dialogSceneData.id == '456'" style="float: right; width: 14px; height: 14px" @click="handleSceneEdit('456')">
                  <t-icon icon="edit" shape="circle" class="ico"></t-icon>
                </div>
              </t-button>
@@ -50,41 +33,48 @@
        </t-col>
      </t-row>
      <t-row>
        <t-col style="margin-top: 10px">
          <t-button color="info" icon="plus-circle" @click="handleCreate" >新增监控</t-button
          >
        <t-col style="margin-top:10px;">
          <t-button color="info" icon="plus-circle" @click="handleCreate">新增监控</t-button>
        </t-col>
      </t-row>
      <!--header-->
    </div>
    <div style="min-height: 290px; height: auto !important">
      <!-- <draggable v-model="rows"> -->
      <div v-for="(row,index) in viewDataList" :key="index" @update="datadragEnd">
        <div style="text-align: right">
          <span style="width: 300px" >第{{ index + 1 }}/{{ viewDataList.length }}页</span
          >
        </div>
        <draggable
          :list="row"
          :group="{ name: 'row' }"
          @update="datadragEnd"
          @add="datadragEnd"
        >
          <camera-card
            v-for="item in row"
            :key="item.areaMonitorId"
            :data="item"
            :item-width="itemWidth"
    <div style="min-height: 280px; height: auto !important">
      <draggable-grid v-model="areaMonitorList" :show-page="true" key-word="areaMonitorId" @update="datadragEnd">
        <template v-slot:prepend="{scope}">
          <create-card key="create-card" :style="{ width: scope.width + 'px', height: scope.height + 'px' }"/>
        </template>
        <template v-slot="{scope}">
          <view-card
            :data="scope.data"
            :width="scope.width + 'px'"
            :height="scope.height + 'px'"
            @edit="handleEdit"
            @deleted="handleDeleted"
          />
        </draggable>
      </div>
        </template>
      </draggable-grid>
      <!-- <draggable v-model="areaMonitorList" @update="datadragEnd"> -->
      <!-- <transition-group>
          <div v-for="(viewArray,index) in viewDataList" :key="index">
            <div style="text-align: right;">
              <span style="width:300px">第{{ index+1 }}/{{ viewDataList.length }}页</span>
            </div>
            <draggable v-model="viewDataList[index]" v-bind="dragOptions" @update="datadragEnd">
              <camera-card
                v-for="item in viewArray"
                :key="item.areaMonitorId"
                :data="item"
                :item-width="itemWidth"
                @edit="handleEdit"
                @deleted="handleDeleted"
              />
            </draggable>
          </div>
        </transition-group> -->
      <!-- </draggable> -->
      <shift-scene-dialog
        :data="dialogSceneData"
        @submit="handleCameraSubmit"
      />
      <shift-scene-dialog :data="dialogSceneData" @submit="handleCameraSubmit" />
      <shift-camera-dialog :data="dialogData" @submit="handleCameraSubmit" />
    </div>
  </div>
@@ -95,12 +85,19 @@ import CameraCard from '../HomePageSettings/Card'
import draggable from 'vuedraggable'
import ShiftSceneDialog from './ShiftSceneDialog'
import ShiftCameraDialog from '../HomePageSettings/ShiftCameraDialog'
import DraggableGrid from '../components/DraggableGrid'
import ViewCard from '../components/ViewCard'
import CreateCard from '../components/CreateCard'
export default {
  components: {
    CameraCard,
    draggable,
    ShiftSceneDialog,
    ShiftCameraDialog
    ShiftCameraDialog,
    DraggableGrid,
    ViewCard,
    CreateCard
  },
  data() {
    return {
@@ -111,80 +108,70 @@ export default {
      dialogData: {},
      currentType: 3,
      itemWidth: null,
      sceneList: [
        {
          sceneName: '大门',
          id: '1',
          parentId: '1',
          displayType: '4'
        },
        {
          sceneName: '值班室',
          id: '2',
          parentId: '1',
          displayType: '3'
        }
      ],
      areaMonitorList: [
        {
          title: '摄像头001',
          cameraId: '001',
          areaMonitorId: '001',
          sceneId: '1',
          sortOrder: 0,
          imgsrc:
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: '摄像头002',
          cameraId: '002',
          areaMonitorId: '002',
          sortOrder: 1,
          imgsrc:
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: '摄像头003',
          cameraId: '003',
          areaMonitorId: '003',
          sortOrder: 2,
          imgsrc:
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: '摄像头004',
          cameraId: '004',
          areaMonitorId: '004',
          sortOrder: 3,
          imgsrc:
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: '摄像头005',
          cameraId: '005',
          areaMonitorId: '005',
          sortOrder: 4,
          imgsrc:
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: '摄像头006',
          cameraId: '006',
          areaMonitorId: '006',
          sortOrder: 5,
          imgsrc:
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: '摄像头007',
          cameraId: '007',
          areaMonitorId: '007',
          sortOrder: 6,
          imgsrc:
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        }
      sceneList: [{
        sceneName: '大门',
        id: '1',
        parentId: '1',
        displayType: '4'
      },
      {
        sceneName: '值班室',
        id: '2',
        parentId: '1',
        displayType: '3'
      }
      ],
      rows: []
      areaMonitorList: [{
        title: '摄像头001',
        cameraId: '001',
        areaMonitorId: '001',
        sceneId: '1',
        sortOrder: 0,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头002',
        cameraId: '002',
        areaMonitorId: '002',
        sortOrder: 1,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头003',
        cameraId: '003',
        areaMonitorId: '003',
        sortOrder: 2,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头004',
        cameraId: '004',
        areaMonitorId: '004',
        sortOrder: 3,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头005',
        cameraId: '005',
        areaMonitorId: '005',
        sortOrder: 4,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头006',
        cameraId: '006',
        areaMonitorId: '006',
        sortOrder: 5,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      },
      {
        title: '摄像头007',
        cameraId: '007',
        areaMonitorId: '007',
        sortOrder: 6,
        imgsrc: 'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
      }
      ]
    }
  },
  computed: {
@@ -197,11 +184,8 @@ export default {
    viewDataList: function () {
      let tempDataList = []
      for (
        let i = 0;
        i < Math.ceil(this.areaMonitorList.length / this.currentType);
        i++
      ) {
        // this.currentType需要*this.currentType，测试减少一个组的数据
        let i = 0; i < Math.ceil(this.areaMonitorList.length / this.currentType); i++
      ) { // this.currentType需要*this.currentType，测试减少一个组的数据
        tempDataList[i] = this.areaMonitorList.slice(
          i * this.currentType,
          (i + 1) * this.currentType
@@ -213,10 +197,6 @@ export default {
  mounted() {
    let dom = this.$refs.box
    this.itemWidth = dom.clientWidth / this.currentType - 25
    document.body.ondrop = function (event) {
      event.preventDefault()
      event.stopPropagation()
    }
  },
  methods: {
    handleSceneEdit(item) {
@@ -251,8 +231,9 @@ export default {
      this.areaMonitorList.splice(index, 1)
    },
    datadragEnd(evt) {
      this.updateData()
      this.$forceUpdate()
      console.log(evt)
      console.log('拖动前的索引 :' + this.areaMonitorList[evt.oldIndex].title)
      console.log('拖动后的索引 :' + this.areaMonitorList[evt.newIndex].title)
    },
    handleCameraSubmit(data) {
      if (this.dialogData.areaMonitorId != null) {
@@ -263,26 +244,21 @@ export default {
      } else {
        this.areaMonitorList.unshift(data)
      }
    },
    updateData() {
      this.areaMonitorList = this.viewDataList.reduce((prev, next) => {
        return prev.concat(next)
      })
    }
  }
}
</script>
<style lang="scss">
.ico {
  width: 14px;
  height: 14px;
  line-height: 14px !important;
  margin: 2px;
}
  .ico {
    width: 14px;
    height: 14px;
    line-height: 14px !important;
    margin: 2px;
  }
.table-pager {
  justify-content: flex-end;
  float: right;
}
  .table-pager {
    justify-content: flex-end;
    float: right;
  }
</style>

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

@@ -0,0 +1,37 @@
<template>
  <div class="create-card">
    <div class="create-card-block" @click="$emit('click')">
      <t-icon icon="plus-outline"></t-icon>
      <span>新增监控</span>
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.create-card {
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  padding: 10px;
  margin-bottom: 10px;
  &-block {
    display: flex;
    height: calc(100% - 0px);
    justify-content: center;
    align-items: center;
    border: 1px dotted #D9D9D9;
    &:hover {
      border-color: transparent;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15), -1px -1px 5px rgba(0, 0, 0, 0.15);
    }
  }
}
</style>

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

@@ -0,0 +1,117 @@
<template>
  <div ref="box" class="draggable-container">
    <draggable :list="list" v-bind="dragOptions" v-on="$listeners">
      <transition-group>
        <slot :scope="{width: gridWidth, height: gridHeight}" name="prepend"></slot>
        <template v-for="item in list">
          <div v-if="item && keyWord in item" :key="item[keyWord]" :style="{width: gridWidth + 'px', height: gridHeight + 'px'}" class="draggable-item">
            <slot :scope="{data: item, width: gridWidth, height: gridHeight}"></slot>
          </div>
        </template>
      </transition-group>
    </draggable>
    <template v-if="showPage">
      <div v-for="descr in pageDescrs" :key="descr.text" :style="descr.style" class="page-descr">
        <span>{{ descr.text }}</span>
      </div>
    </template>
  </div>
</template>
<script>
import ViewCard from '../ViewCard'
import Draggable from 'vuedraggable'
export default {
  components: { ViewCard, Draggable },
  model: {
    prop: 'list',
    event: 'input'
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    keyWord: {
      type: String,
      required: true
    },
    grid: {
      type: Array,
      default: () => [4, 1]
    },
    gridPer: { // 长宽比
      type: Number,
      default: 1.3
    },
    showPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      boxWidth: 0,
      dragOptions: {
        animation: 300,
        group: 'viewData',
        draggable: '.draggable-item',
        filter: '.page-descr',
        // disabled: this.disabled,
        ghostClass: 'ghost'
      }
    }
  },
  computed: {
    gridHeight() {
      return this.boxWidth / this.grid[0] / this.gridPer
    },
    gridWidth() {
      return this.boxWidth / this.grid[0]
    },
    pageSize() {
      return this.grid[0] * this.grid[1]
    },
    pageDescrs() {
      let pageSum = Math.ceil(this.list.length / this.pageSize)
      const descrs = []
      for (let i = 0; i < pageSum; i++) {
        descrs.push({
          text: `第 ${i + 1} / ${pageSum} 页`,
          style: {
            // 分页高 + 分页间隔和 + 基础偏移
            top: (this.gridHeight * this.grid[1] * (i + 1)) + (10 * i) + 5 + 'px'
          }
        })
      }
      return descrs
    }
  },
  mounted() {
    this.boxWidth = this.$refs.box.clientWidth
  },
  methods: {
  }
}
</script>
<style lang="scss">
.draggable-container {
  position: relative;
  line-height: 0;
  .page-descr {
    text-align: right;
    position: absolute;
    right: 0;
  }
}
.draggable-item {
  display: inline-block;
  overflow: hidden;
  margin-bottom: 10px;
}
</style>

security-protection-platform/src/modules/system/monitor/components/ViewCard/UpdateName.vue

@@ -0,0 +1,70 @@
<template>
  <div class="update-name">
    <div v-if="text_tatus == 0" @mouseover="mouseOver">
      {{ name }}
    </div>
    <div v-else-if="text_tatus == 1" @mouseleave="mouseLeave">
      {{ name }}
      <div class="iconChange" @click="iconChange">
        <t-icon icon="edit-outline" size="24"> </t-icon>
      </div>
    </div>
    <div v-else @mouseleave="mouseLeave">
      <t-input
        v-model="name"
        size="sm"
        icon="check-outline"
        icon-placement="right"
        @icon-click="iconSubmit"
      >
      </t-input>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UpdateName',
  props: {
    name: String
  },
  data() {
    return {
      text_tatus: 0
    }
  },
  watch: {},
  mounted() {},
  methods: {
    // 移入
    mouseOver() {
      this.text_tatus = 1
    },
    // 移出
    mouseLeave() {
      this.text_tatus = 0
    },
    // 修改
    iconChange() {
      this.text_tatus = 2
    },
    // 提交
    iconSubmit() {
      this.text_tatus = 1
      this.$emit('nameSubmit', this.name)
    }
  }
}
</script>
<style lang="scss">
.update-name {
  font-size: 14px;
  padding: 0 5px;
  .iconChange {
    height: 20px;
    float: right;
  }
}
</style>

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

@@ -0,0 +1,199 @@
<template>
  <div :class="{ active: showConfirm, lock: loadingDelete }" :style="{ width, height }" class="masonry__item div-block">
    <div class="card card-has-shadowed card-main">
      <div :style="`backgroundImage:url(${data.imgsrc})`" class="card-bg" />
      <div class="opt">
        <t-button shape="round" icon="arrow-expand-all-outline" style="margin: 0px 0px 0px 0px">移动</t-button>
        <t-button shape="round" icon="swap-outline" style="margin: 0px 2px 0px 2px" @click="handleEdit">替换</t-button>
        <t-button shape="round" icon="delete" @click="handleDelete">删除</t-button>
        <div v-show="showConfirm" class="popover">
          <t-icon color="warning" icon="alert-circle" style="vertical-align: middle" />
          你确定删除该监控吗？
          <div class="btn-block">
            <t-button :loading="loadingDelete" size="sm" color="primary" @click="handleConfirmDelete">确定</t-button>
            <t-button size="sm" color="secondary" style="margin-right: 8px" @click="handleCancelDelete">取消</t-button>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-has-shadowed card-title">
      <update-name :name="data.title" @nameSubmit="nameChange" />
    </div>
  </div>
</template>
<script>
import UpdateName from './UpdateName'
export default {
  components: {
    UpdateName
  },
  props: {
    data: {
      type: Object,
      require: true
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      showConfirm: false,
      loadingDelete: false
    }
  },
  mounted() {
  },
  methods: {
    nameChange: function (name) {
      // 修改名称
      alert(name)
    },
    handleDelete() {
      this.showConfirm = true
    },
    handleConfirm() {},
    handleCancelDelete() {
      this.showConfirm = false
    },
    handleConfirmDelete() {
      // this.loadingDelete = true;
      // 把事件抛出去，保持控件的干净
      this.$emit('deleted', this.data)
      //   sysapi
      //     .deleteSchedule(this.data.scheduleId)
      //     .then(
      //       (resp) => {
      //         console.log(resp);
      //         this.$emit("deleted", this.data);
      //       },
      //       (err) => {
      //         console.log(err);
      //         this.$Message.danger("删除失败，请稍后再试！", 3);
      //       }
      //     )
      //     .finally(() => {
      //       this.loadingDelete = false;
      //       this.showConfirm = false;
      //     });
    },
    handleEdit() {
      this.$emit('edit', this.data)
    }
  }
}
</script>
<style lang="scss">
  @import "@/assets/styles/aid-theme/_variable.scss";
  .div-block {
    display: inline-block;
    .card-bg {
      background-size: cover;
      height: 100%;
      width: 100%;
    }
    .card-main {
      height: calc(100% - 37px);
      margin-bottom: 5px;
    }
    .card-title {
      padding: 5px;
      height: 32px;
      line-height: 22px;
    }
    .opt {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      &::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        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);
        &:hover {
          color: white;
          background-color: $brand-primary;
        }
      }
      &:hover {
        opacity: 1;
      }
    }
    &.active &__opt {
      opacity: 1;
    }
    &.lock &__opt::after {
      display: block;
    }
    .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;
    }
    .btn-block {
      display: flex;
      flex-direction: row-reverse;
      margin-top: 14px;
    }
  }
  .div-footer {
    height: 32px;
    margin-top: 6px;
  }
</style>

security-protection-platform/src/routes.js

@@ -18,6 +18,19 @@ export const constantRoutes = [
    hidden: true
  },
  {
    path: '/dashboard',
    component: Layout,
    meta: { icon: 'home' },
    children: [
      {
        name: 'dashboard',
        path: '',
        component: () => import(/* webpackChunkName: "dashboard" */ './modules/dashboard'),
        meta: { title: '首页', icon: 'home' }
      }
    ]
  },
  {
    path: '/videoSurveillance',
    component: Layout,
    meta: { icon: 'home' },