修复文件格式，修复拖拽异常问题

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

@@ -1,12 +1,12 @@
<template>
  <div class="p-24" ref="box">
  <div ref="box" class="p-24">
    <div style="min-height:280px; height:auto!important;">
      <div class="masonry__item div-float">
        <div class="card card-has-shadowed" style="height: 226px; width: 260px">
          <div
            class="card-block d-flex justify-content-center align-items-center"
            @click="handleCreate"
            style="cursor: pointer"
            @click="handleCreate"
          >
            <t-icon icon="plus-outline"></t-icon>
            <span>新增监控</span>
@@ -23,7 +23,7 @@
            v-for="item in areaMonitorList"
            :key="item.areaMonitorId"
            :data="item"
            :itemWidth="itemWidth"
            :item-width="itemWidth"
            @edit="handleEdit"
            @deleted="handleDeleted"
          />
@@ -37,7 +37,7 @@
        :page-size="limit"
        show-elevator
        @on-change="onChange"
        >>
      >>
      </t-pager>
    </div>
@@ -48,13 +48,11 @@
  </div>
</template>
<script>
import CameraCard from "./Card";
import sysapi from "@/api/system";
import ShiftCameraDialog from "./ShiftCameraDialog";
import Vue from "vue";
import draggable from "vuedraggable";
import CameraCard from './Card'
import sysapi from '@/api/system'
import ShiftCameraDialog from './ShiftCameraDialog'
import draggable from 'vuedraggable'
export default {
  components: { CameraCard, ShiftCameraDialog, draggable },
@@ -62,29 +60,29 @@ export default {
    return {
      areaMonitorList: [
        {
          title: "摄像头001",
          cameraId: "001",
          areaMonitorId: "001",
          title: '摄像头001',
          cameraId: '001',
          areaMonitorId: '001',
          sortOrder: 0,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头002",
          cameraId: "002",
          areaMonitorId: "002",
          title: '摄像头002',
          cameraId: '002',
          areaMonitorId: '002',
          sortOrder: 1,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头003",
          cameraId: "003",
          areaMonitorId: "003",
          title: '摄像头003',
          cameraId: '003',
          areaMonitorId: '003',
          sortOrder: 2,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
        },
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        }
        // {
        //   title: "摄像头004",
        //   cameraId: "004",
@@ -126,22 +124,22 @@ export default {
      // 数据总数
      total: 70,
      dragging: null,
      itemWidth: null,
    };
      itemWidth: null
    }
  },
  mounted() {
    let dom = this.$refs.box;
    this.itemWidth = dom.clientWidth / 4 - 25;
    let dom = this.$refs.box
    this.itemWidth = dom.clientWidth / 4 - 25
  },
  methods: {
    getAreaMonitors() {
      sysapi.getAreaMonitors().then((resp) => {
        this.areaMonitorList = resp.data || [];
      });
        this.areaMonitorList = resp.data || []
      })
    },
    handleEdit(item) {
      this.dialogData = Object.assign({}, item);
      console.log(item.title);
      this.dialogData = Object.assign({}, item)
      console.log(item.title)
    },
    handleCreate() {
      this.dialogData = {
@@ -149,32 +147,32 @@ export default {
        cameraId: null,
        areaMonitorId: null,
        sortOrder: 5,
        imgsrc: null,
      };
        imgsrc: null
      }
    },
    handleDeleted(index) {
      this.areaMonitorList.splice(index, 1);
      this.areaMonitorList.splice(index, 1)
    },
    handleCameraSubmit(data) {
      if (this.dialogData.areaMonitorId != null) {
        const target = this.areaMonitorList.find(
          (item) => item.areaMonitorId === this.dialogData.areaMonitorId
        );
        Object.assign(target, data);
        )
        Object.assign(target, data)
      } else {
        this.areaMonitorList.unshift(data);
        this.areaMonitorList.unshift(data)
      }
    },
    onChange(page) {
      this.page = page;
      this.getAreaMonitors();
      this.page = page
      this.getAreaMonitors()
    },
    datadragEnd(evt) {
      console.log("拖动前的索引 :" + this.areaMonitorList[evt.oldIndex].title);
      console.log("拖动后的索引 :" + this.areaMonitorList[evt.newIndex].title);
    },
  },
};
      console.log('拖动前的索引 :' + this.areaMonitorList[evt.oldIndex].title)
      console.log('拖动后的索引 :' + this.areaMonitorList[evt.newIndex].title)
    }
  }
}
</script>
<style lang="scss">
@@ -189,4 +187,4 @@ export default {
  justify-content: flex-end;
  float: right;
}
</style>
</style>

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

@@ -1,7 +1,7 @@
<template>
  <div class="masonry__item div-block" :class="{ active: showConfirm, lock: loadingDelete }">
    <div class="card card-has-shadowed" :style="{ width: gridWidth }">
      <div class="card-block" style="margin: 0px; padding: 0px" :style="{ height: gridHeight }">
  <div :class="{ active: showConfirm, lock: loadingDelete }" class="masonry__item div-block">
    <div :style="{ width: gridWidth }" class="card card-has-shadowed">
      <div :style="{ height: gridHeight }" class="card-block" style="margin: 0px; padding: 0px">
        <img :style="{ height: gridHeight, width: gridWidth }" :src="data.imgsrc" alt="" />
      </div>
      <div class="opt">
@@ -18,83 +18,82 @@
        </div>
      </div>
    </div>
    <div class="card card-has-shadowed div-footer" :style="{ width: gridWidth }">
    <div :style="{ width: gridWidth }" class="card card-has-shadowed div-footer">
      <div>
        <update-name v-bind:name="data.title" v-on:nameSubmit="nameChange" />
        <update-name :name="data.title" @nameSubmit="nameChange" />
      </div>
    </div>
  </div>
</template>
<script>
  import UpdateName from "./UpdateName";
  export default {
    components: {
      UpdateName
import UpdateName from './UpdateName'
export default {
  components: {
    UpdateName
  },
  props: {
    data: {
      type: Object,
      require: true
    },
    props: {
      data: {
        type: Object,
        require: true,
      },
      itemWidth: null,
    itemWidth: null
  },
  data() {
    return {
      showConfirm: false,
      loadingDelete: false
    }
  },
  computed: {
    gridWidth: function () {
      return this.itemWidth - 20 + 'px'
    },
    data() {
      return {
        showConfirm: false,
        loadingDelete: false,
      };
    gridHeight: function () {
      return this.itemWidth * 0.9 - 20 - 6 - 32 + 'px'
    }
  },
  mounted() {
  },
  methods: {
    nameChange: function (name) {
      // 修改名称
      alert(name)
    },
    computed: {
      gridWidth: function () {
        return this.itemWidth - 20 + "px";
      },
      gridHeight: function () {
        return this.itemWidth * 0.9 - 20 - 6 - 32 + "px";
      },
    handleDelete() {
      this.showConfirm = true
    },
    mounted() {
    handleConfirm() {},
    handleCancelDelete() {
      this.showConfirm = false
    },
    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);
      },
    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">
@@ -185,4 +184,4 @@
    height: 32px;
    margin-top: 6px;
  }
</style>
</style>

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

@@ -1,12 +1,12 @@
<template>
  <div class="p-24" ref="box">
  <div ref="box" class="p-24">
    <div style="min-height:280px; height:auto!important;">
      <div class="masonry__item div-float">
        <div class="card card-has-shadowed" style="height: 226px; width: 260px">
          <div
            class="card-block d-flex justify-content-center align-items-center"
            @click="handleCreate"
            style="cursor: pointer"
            @click="handleCreate"
          >
            <t-icon icon="plus-outline"></t-icon>
            <span>新增人脸终端</span>
@@ -22,7 +22,7 @@
            v-for="item in identificationTerminalList"
            :key="item.identificationTerminalId"
            :data="item"
            :itemWidth="itemWidth"
            :item-width="itemWidth"
            @edit="handleEdit"
            @deleted="handleDeleted"
          />
@@ -36,7 +36,7 @@
        :page-size="limit"
        show-elevator
        @on-change="onChange"
        >>
      >>
      </t-pager>
    </div>
@@ -44,13 +44,11 @@
  </div>
</template>
<script>
import TerminalCard from "./Card";
import sysapi from "@/api/system";
import ShiftTerminalDialog from "./ShiftTerminalDialog";
import Vue from "vue";
import draggable from "vuedraggable";
import TerminalCard from './Card'
import sysapi from '@/api/system'
import ShiftTerminalDialog from './ShiftTerminalDialog'
import draggable from 'vuedraggable'
export default {
  components: { TerminalCard, ShiftTerminalDialog, draggable },
@@ -58,61 +56,61 @@ export default {
    return {
      identificationTerminalList: [
        {
          title: "终端001",
          terminalId: "001",
          identificationTerminalId: "001",
          title: '终端001',
          terminalId: '001',
          identificationTerminalId: '001',
          sortOrder: 0,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "终端002",
          terminalId: "002",
          identificationTerminalId: "002",
          title: '终端002',
          terminalId: '002',
          identificationTerminalId: '002',
          sortOrder: 1,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "终端003",
          terminalId: "003",
          identificationTerminalId: "003",
          title: '终端003',
          terminalId: '003',
          identificationTerminalId: '003',
          sortOrder: 2,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "终端004",
          terminalId: "004",
          identificationTerminalId: "004",
          title: '终端004',
          terminalId: '004',
          identificationTerminalId: '004',
          sortOrder: 3,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "终端005",
          terminalId: "005",
          identificationTerminalId: "005",
          title: '终端005',
          terminalId: '005',
          identificationTerminalId: '005',
          sortOrder: 4,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "终端006",
          terminalId: "006",
          identificationTerminalId: "006",
          title: '终端006',
          terminalId: '006',
          identificationTerminalId: '006',
          sortOrder: 5,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "终端007",
          terminalId: "007",
          identificationTerminalId: "007",
          title: '终端007',
          terminalId: '007',
          identificationTerminalId: '007',
          sortOrder: 6,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
        },
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        }
      ],
      dialogData: {},
      // 当前页
@@ -122,22 +120,22 @@ export default {
      // 数据总数
      total: 70,
      dragging: null,
      itemWidth: null,
    };
      itemWidth: null
    }
  },
  mounted() {
    let dom = this.$refs.box;
    this.itemWidth = dom.clientWidth / 4 - 25;
    let dom = this.$refs.box
    this.itemWidth = dom.clientWidth / 4 - 25
  },
  methods: {
    getIdentificationTerminals() {
      sysapi.getIdentificationTerminals().then((resp) => {
        this.identificationTerminalList = resp.data || [];
      });
        this.identificationTerminalList = resp.data || []
      })
    },
    handleEdit(item) {
      this.dialogData = Object.assign({}, item);
      console.log(item.title);
      this.dialogData = Object.assign({}, item)
      console.log(item.title)
    },
    handleCreate() {
      this.dialogData = {
@@ -145,11 +143,11 @@ export default {
        terminalId: null,
        identificationTerminalId: null,
        sortOrder: 5,
        imgsrc: null,
      };
        imgsrc: null
      }
    },
    handleDeleted(index) {
      this.identificationTerminalList.splice(index, 1);
      this.identificationTerminalList.splice(index, 1)
    },
    handleterminalSubmit(data) {
      if (this.dialogData.identificationTerminalId != null) {
@@ -157,25 +155,24 @@ export default {
          (item) =>
            item.identificationTerminalId ===
            this.dialogData.identificationTerminalId
        );
        Object.assign(target, data);
        )
        Object.assign(target, data)
      } else {
        this.identificationTerminalList.unshift(data);
        this.identificationTerminalList.unshift(data)
      }
    },
    onChange(page) {
      this.page = page;
      this.getIdentificationTerminals();
      this.page = page
      this.getIdentificationTerminals()
    },
     datadragEnd(evt) {
      console.log("拖动前的索引 :" + this.identificationTerminalList[evt.oldIndex].title);
      console.log("拖动后的索引 :" + this.identificationTerminalList[evt.newIndex].title);
    },
  },
};
    datadragEnd(evt) {
      console.log('拖动前的索引 :' + this.identificationTerminalList[evt.oldIndex].title)
      console.log('拖动后的索引 :' + this.identificationTerminalList[evt.newIndex].title)
    }
  }
}
</script>
<style lang="scss">
.div-float {
  float: left;
@@ -188,4 +185,4 @@ export default {
  justify-content: flex-end;
  float: right;
}
</style>
</style>

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

@@ -2,10 +2,10 @@
  <t-modal
    :visibled.sync="visibled"
    :title="title"
    width="780px"
    height="590px"
    :mask-closable="false"
    :ok="handleSubmit"
    width="780px"
    height="590px"
  >
    <div>
      <div style="display: flex">
@@ -20,18 +20,18 @@
        <t-button color="primary">搜索</t-button>
      </div>
      <div
        class="masonry__item div-float"
        v-for="item in cameraList"
        :key="item.cameraId"
        :data="item"
        class="masonry__item div-float"
        @click="groupClick(item)"
      >
        <div class="card-has-shadowed" style="width: 158px">
          <div>
            <img
              :class="item.cameraId == form.cameraId ? 'hover' : ''"
              style="height: 120px; width: 158px"
              :src="item.imgsrc"
              style="height: 120px; width: 158px"
              alt=""
            />
          </div>
@@ -49,7 +49,7 @@
          :page-size="limit"
          show-elevator
          @on-change="onChange"
          >>
        >>
        </t-pager>
      </div>
    </div>
@@ -57,17 +57,17 @@
</template>
<script>
import sysapi from "@/api/system";
import sysapi from '@/api/system'
export default {
  name: "ShiftCameraDialog",
  name: 'ShiftCameraDialog',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
        return {}
      }
    }
  },
  data() {
    return {
@@ -83,112 +83,112 @@ export default {
      total: 70,
      cameraList: [
        {
          title: "摄像头001",
          cameraId: "001",
          title: '摄像头001',
          cameraId: '001',
          sortOrder: 0,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头002",
          cameraId: "002",
          title: '摄像头002',
          cameraId: '002',
          sortOrder: 1,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头003",
          cameraId: "003",
          title: '摄像头003',
          cameraId: '003',
          sortOrder: 2,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头004",
          cameraId: "004",
          title: '摄像头004',
          cameraId: '004',
          sortOrder: 3,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头005",
          cameraId: "005",
          title: '摄像头005',
          cameraId: '005',
          sortOrder: 4,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头006",
          cameraId: "006",
          title: '摄像头006',
          cameraId: '006',
          sortOrder: 5,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头007",
          cameraId: "007",
          title: '摄像头007',
          cameraId: '007',
          sortOrder: 6,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
        },
      ],
    };
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        }
      ]
    }
  },
  computed: {
    title() {
      return this.data.areaMonitorId == null ? "新增监控" : "更换监控设备";
    },
      return this.data.areaMonitorId == null ? '新增监控' : '更换监控设备'
    }
  },
  watch: {
    data(val) {
      //侦听data属性
      this.form = this.data;
      this.visibled = true;
    },
      // 侦听data属性
      this.form = this.data
      this.visibled = true
    }
  },
  methods: {
    getCameras() {
      sysapi.getCameras().then((resp) => {
        alert(11);
        this.cameraList = resp.data || [];
      });
        alert(11)
        this.cameraList = resp.data || []
      })
    },
    groupClick(item) {
      //选中更换摄像头
      // 选中更换摄像头
      if (this.form.title == null) {
        this.form.title = item.title;
        this.form.title = item.title
      }
      this.form.cameraId = item.cameraId;
      this.form.imgsrc = item.imgsrc;
      this.form.cameraId = item.cameraId
      this.form.imgsrc = item.imgsrc
    },
    handleSubmit() {
      this.loadingSubmit = true;
      this.loadingSubmit = true
      sysapi
        .submitSchedule(this.form)
        .then(
          (resp) => {
            if (resp.data.areaMonitorId == null) {
              this.form.areaMonitorId = resp.data.areaMonitorId;
              this.form.areaMonitorId = resp.data.areaMonitorId
            }
            this.$emit("submit", this.form);
            this.visibled = false;
            this.$Message.success("提交成功");
            this.$emit('submit', this.form)
            this.visibled = false
            this.$Message.success('提交成功')
          },
          (err) => {
            console.log(err);
            this.$Message.danger("提交失败");
            console.log(err)
            this.$Message.danger('提交失败')
          }
        )
        .finally(() => {
          this.loadingSubmit = false;
        });
          this.loadingSubmit = false
        })
    },
    onChange(page) {
      this.page = page;
      this.getAreaMonitors();
    },
  },
};
      this.page = page
      this.getAreaMonitors()
    }
  }
}
</script>
<style lang="scss">

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

@@ -2,10 +2,10 @@
  <t-modal
    :visibled.sync="visibled"
    :title="title"
    width="780px"
    height="590px"
    :mask-closable="false"
    :ok="handleSubmit"
    width="780px"
    height="590px"
  >
    <div>
      <div style="display: flex">
@@ -20,18 +20,18 @@
        <t-button color="primary">搜索</t-button>
      </div>
      <div
        class="masonry__item div-float"
        v-for="item in terminalList"
        :key="item.terminalId"
        :data="item"
        class="masonry__item div-float"
        @click="groupClick(item)"
      >
        <div class="card-has-shadowed" style="width: 158px">
          <div>
            <img
              :class="item.terminalId == form.terminalId ? 'hover' : ''"
              style="height: 120px; width: 158px"
              :src="item.imgsrc"
              style="height: 120px; width: 158px"
              alt=""
            />
          </div>
@@ -49,7 +49,7 @@
          :page-size="limit"
          show-elevator
          @on-change="onChange"
          >>
        >>
        </t-pager>
      </div>
    </div>
@@ -57,17 +57,17 @@
</template>
<script>
import sysapi from "@/api/system";
import sysapi from '@/api/system'
export default {
  name: "ShiftTerminalDialog",
  name: 'ShiftTerminalDialog',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
        return {}
      }
    }
  },
  data() {
    return {
@@ -83,112 +83,112 @@ export default {
      total: 70,
      terminalList: [
        {
          title: "摄像头001",
          terminalId: "001",
          title: '摄像头001',
          terminalId: '001',
          sortOrder: 0,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头002",
          terminalId: "002",
          title: '摄像头002',
          terminalId: '002',
          sortOrder: 1,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头003",
          terminalId: "003",
          title: '摄像头003',
          terminalId: '003',
          sortOrder: 2,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头004",
          terminalId: "004",
          title: '摄像头004',
          terminalId: '004',
          sortOrder: 3,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头005",
          terminalId: "005",
          title: '摄像头005',
          terminalId: '005',
          sortOrder: 4,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头006",
          terminalId: "006",
          title: '摄像头006',
          terminalId: '006',
          sortOrder: 5,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        },
        {
          title: "摄像头007",
          terminalId: "007",
          title: '摄像头007',
          terminalId: '007',
          sortOrder: 6,
          imgsrc:
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
        },
      ],
    };
            'https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26'
        }
      ]
    }
  },
  computed: {
    title() {
      return this.data.identificationTerminalId == null ? "新增人脸终端" : "更换人脸终端";
    },
      return this.data.identificationTerminalId == null ? '新增人脸终端' : '更换人脸终端'
    }
  },
  watch: {
    data(val) {
      //侦听data属性
      this.form = this.data;
      this.visibled = true;
    },
      // 侦听data属性
      this.form = this.data
      this.visibled = true
    }
  },
  methods: {
    getCameras() {
      sysapi.getCameras().then((resp) => {
        alert(11);
        this.terminalList = resp.data || [];
      });
        alert(11)
        this.terminalList = resp.data || []
      })
    },
    groupClick(item) {
      //选中更换摄像头
      // 选中更换摄像头
      if (this.form.title == null) {
        this.form.title = item.title;
        this.form.title = item.title
      }
      this.form.terminalId = item.terminalId;
      this.form.imgsrc = item.imgsrc;
      this.form.terminalId = item.terminalId
      this.form.imgsrc = item.imgsrc
    },
    handleSubmit() {
      this.loadingSubmit = true;
      this.loadingSubmit = true
      sysapi
        .submitSchedule(this.form)
        .then(
          (resp) => {
            if (resp.data.identificationTerminalId == null) {
              this.form.identificationTerminalId = resp.data.identificationTerminalId;
              this.form.identificationTerminalId = resp.data.identificationTerminalId
            }
            this.$emit("submit", this.form);
            this.visibled = false;
            this.$Message.success("提交成功");
            this.$emit('submit', this.form)
            this.visibled = false
            this.$Message.success('提交成功')
          },
          (err) => {
            console.log(err);
            this.$Message.danger("提交失败");
            console.log(err)
            this.$Message.danger('提交失败')
          }
        )
        .finally(() => {
          this.loadingSubmit = false;
        });
          this.loadingSubmit = false
        })
    },
    onChange(page) {
      this.page = page;
      this.getAreaMonitors();
    },
  },
};
      this.page = page
      this.getAreaMonitors()
    }
  }
}
</script>
<style lang="scss">

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

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

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

@@ -2,14 +2,14 @@
  <div class="app-monitor">
    <t-button-group>
      <t-button
        @click="btnOnClick('areaMonitor')"
        :class="['base', btnIsClicked ? 'active' : '']"
        >重点区域监控</t-button
        @click="btnOnClick('areaMonitor')"
      >重点区域监控</t-button
      >
      <t-button
        @click="btnOnClick('personnelAccess')"
        :class="['base', btnIsClicked ? '' : 'active']"
        >人员进出识别</t-button
        @click="btnOnClick('personnelAccess')"
      >人员进出识别</t-button
      >
    </t-button-group>
@@ -22,36 +22,35 @@
  </div>
</template>
<script>
import AreaMonitor from "./AreaMonitor";
import PersonnelAccess from "./PersonnelAccess";
import AreaMonitor from './AreaMonitor'
import PersonnelAccess from './PersonnelAccess'
// import sysapi from '@/api/system'
export default {
  components: { AreaMonitor, PersonnelAccess },
  data() {
    return {
      btnIsClicked: true,
    };
      btnIsClicked: true
    }
  },
  mounted() {
  },
  methods: {
    btnOnClick(tag) {
      if (tag == "areaMonitor") {
        this.btnIsClicked = true;
      if (tag === 'areaMonitor') {
        this.btnIsClicked = true
      } else {
        this.btnIsClicked = false;
        this.btnIsClicked = false
      }
    },
  },
};
    }
  }
}
</script>
<style lang="scss">
.btn-base {
  width: 116px;
}
</style>
</style>

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

@@ -2,10 +2,10 @@
  <t-modal
    :visibled.sync="visibled"
    :title="title"
    width="500px"
    height="300px"
    :mask-closable="false"
    :ok="handleSubmit"
    width="500px"
    height="300px"
  >
    <div>
      <t-row>
@@ -21,26 +21,26 @@
      </t-row>
      <t-row style="margin-top: 10px; margin-bottom: 10px">
        <t-col style="text-align: center" span="3"
          >布&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;局：</t-col
        >布&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;局：</t-col
        >
        <t-col span="9">
          <t-radio-group v-model="data.displayType" type="button">
            <t-radio value="1" label="1X1"></t-radio>
            <t-radio value="2" label="2X2"></t-radio>
            <t-radio value="3" label="3X3"></t-radio>
            <t-radio value="4" label="4X4"></t-radio> </t-radio-group
          <t-radio value="4" label="4X4"></t-radio> </t-radio-group
        ></t-col>
      </t-row>
      <t-row>
        <t-col span="3"></t-col>
        <t-col span="9"
          ><t-button
            ghost
            color="info"
            icon="delete-outline"
            @click="handleDelete"
            >删除场景</t-button
          >
        ><t-button
          ghost
          color="info"
          icon="delete-outline"
          @click="handleDelete"
        >删除场景</t-button
        >
          <div v-show="showConfirm" class="popover">
            <t-icon
              color="warning"
@@ -54,14 +54,14 @@
                size="sm"
                color="primary"
                @click="handleConfirmDelete"
                >确定</t-button
              >确定</t-button
              >
              <t-button
                size="sm"
                color="secondary"
                style="margin-right: 8px"
                @click="handleCancelDelete"
                >取消</t-button
              >取消</t-button
              >
            </div>
          </div>
@@ -72,15 +72,16 @@
</template>
<script>
import sysapi from '@/api/system'
export default {
  name: "ShiftSceneDialog",
  name: 'ShiftSceneDialog',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
        return {}
      }
    }
  },
  data() {
    return {
@@ -89,72 +90,71 @@ export default {
      searchValue: null,
      loadingSubmit: false,
      showConfirm: false,
      loadingDelete: false,
    };
      loadingDelete: false
    }
  },
  computed: {
    title() {
      return this.data.id == null ? "新增场景" : "编辑场景";
    },
      return this.data.id == null ? '新增场景' : '编辑场景'
    }
  },
  watch: {
    data(val) {
      //侦听data属性
      this.form = this.data;
      this.visibled = true;
    },
      // 侦听data属性
      this.form = this.data
      this.visibled = true
    }
  },
  methods: {
    getCameras() {
      sysapi.getCameras().then((resp) => {
        alert(11);
        this.cameraList = resp.data || [];
      });
        this.cameraList = resp.data || []
      })
    },
    groupClick(item) {
      //选中更换摄像头
      // 选中更换摄像头
      if (this.form.title == null) {
        this.form.title = item.title;
        this.form.title = item.title
      }
      this.form.cameraId = item.cameraId;
      this.form.imgsrc = item.imgsrc;
      this.form.cameraId = item.cameraId
      this.form.imgsrc = item.imgsrc
    },
    handleDelete() {
      this.showConfirm = true;
      this.showConfirm = true
    },
    handleSubmit() {
      this.loadingSubmit = true;
      this.loadingSubmit = true
      sysapi
        .submitSchedule(this.form)
        .then(
          (resp) => {
            if (resp.data.areaMonitorId == null) {
              this.form.areaMonitorId = resp.data.areaMonitorId;
              this.form.areaMonitorId = resp.data.areaMonitorId
            }
            this.$emit("submit", this.form);
            this.visibled = false;
            this.$Message.success("提交成功");
            this.$emit('submit', this.form)
            this.visibled = false
            this.$Message.success('提交成功')
          },
          (err) => {
            console.log(err);
            this.$Message.danger("提交失败");
            console.log(err)
            this.$Message.danger('提交失败')
          }
        )
        .finally(() => {
          this.loadingSubmit = false;
        });
          this.loadingSubmit = false
        })
    },
    onChange(page) {
      this.page = page;
      this.getAreaMonitors();
      this.page = page
      this.getAreaMonitors()
    },
    handleCancelDelete() {
      this.showConfirm = false;
      this.showConfirm = false
    },
    handleConfirmDelete() {
      //this.loadingDelete = true;
      // this.loadingDelete = true;
      this.$emit("deleted", this.data);
      this.$emit('deleted', this.data)
      //   sysapi
      //     .deleteSchedule(this.data.scheduleId)
      //     .then(
@@ -171,9 +171,9 @@ export default {
      //       this.loadingDelete = false;
      //       this.showConfirm = false;
      //     });
    },
  },
};
    }
  }
}
</script>
<style lang="scss">

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

@@ -1,11 +1,14 @@
<template>
  <div class="p-24" ref="box">
  <div ref="box" class="p-24">
    <div>
      <t-row>
        <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>
@@ -14,224 +17,272 @@
        <t-col>
          <div style="float: right">
            <t-button-group>
              <t-button @click="btnOnClick('areaMonitor')" :class="['base', btnIsClicked ? 'active' : '']">
              <t-button
                :class="['base', btnIsClicked ? 'active' : '']"
                @click="btnOnClick('areaMonitor')"
              >
                <span>大门</span>
                <div @click="handleSceneEdit('123')" v-if="dialogSceneData.id == '1'"
                  style="float: right; width: 14px; height: 14px">
                <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 @click="btnOnClick('areaMonitor')" :class="['base', btnIsClicked ? 'active' : '']">
              <t-button
                :class="['base', btnIsClicked ? 'active' : '']"
                @click="btnOnClick('areaMonitor')"
              >
                <span>值班室</span>
                <div @click="handleSceneEdit('456')" style="float: right; width: 14px; height: 14px"
                  v-if="dialogSceneData.id == '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>
            </t-button-group>
            <t-button @click="btnAddClick()" style="width: 48px">＋</t-button>
            <t-button style="width: 48px" @click="btnAddClick()">＋</t-button>
          </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-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: 280px; height: auto !important">
      <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>
            <camera-card v-for="item in viewArray" :key="item.areaMonitorId" :data="item" :itemWidth="itemWidth"
              @edit="handleEdit" @deleted="handleDeleted" />
          </div>
        </transition-group>
      </draggable>
      <shift-scene-dialog :data="dialogSceneData" @submit="handleCameraSubmit" />
    <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"
            @edit="handleEdit"
            @deleted="handleDeleted"
          />
        </draggable>
      </div>
      <!-- </draggable> -->
      <shift-scene-dialog
        :data="dialogSceneData"
        @submit="handleCameraSubmit"
      />
      <shift-camera-dialog :data="dialogData" @submit="handleCameraSubmit" />
    </div>
  </div>
</template>
<script>
  import CameraCard from "../HomePageSettings/Card";
  import draggable from "vuedraggable";
  import ShiftSceneDialog from "./ShiftSceneDialog";
  import ShiftCameraDialog from "../HomePageSettings/ShiftCameraDialog";
  export default {
    components: {
      CameraCard,
      draggable,
      ShiftSceneDialog,
      ShiftCameraDialog
import CameraCard from '../HomePageSettings/Card'
import draggable from 'vuedraggable'
import ShiftSceneDialog from './ShiftSceneDialog'
import ShiftCameraDialog from '../HomePageSettings/ShiftCameraDialog'
export default {
  components: {
    CameraCard,
    draggable,
    ShiftSceneDialog,
    ShiftCameraDialog
  },
  data() {
    return {
      currentWindPlaceValue: '2',
      currentitem: {},
      btnIsClicked: true,
      dialogSceneData: {},
      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'
        }
      ],
      rows: []
    }
  },
  computed: {
    gridWidth: function () {
      return this.itemWidth - 20 + 'px'
    },
    data() {
      return {
        currentWindPlaceValue: "2",
        currentitem: {},
        btnIsClicked: true,
        dialogSceneData: {},
        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",
          },
        ],
      };
    gridHeight: function () {
      return this.itemWidth * 0.9 - 20 - 6 - 32 + 'px'
    },
    computed: {
      gridWidth: function () {
        return this.itemWidth - 20 + "px";
      },
      gridHeight: function () {
        return this.itemWidth * 0.9 - 20 - 6 - 32 + "px";
      },
      viewDataList: function () {
        let tempDataList = [];
        for (
          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
          );
        }
        return tempDataList;
      },
    viewDataList: function () {
      let tempDataList = []
      for (
        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
        )
      }
      return tempDataList
    }
  },
  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) {
      alert(item)
      event.stopPropagation()
    },
    mounted() {
      let dom = this.$refs.box;
      this.itemWidth = dom.clientWidth / this.currentType - 25;
    btnOnClick(item) {
      this.dialogSceneData = item
    },
    methods: {
      handleSceneEdit(item) {
        alert(item);
        event.stopPropagation();
      },
      btnOnClick(item) {
        this.dialogSceneData = item;
      },
      btnAddClick() {
        this.dialogSceneData = {
          sceneName: null,
          id: null,
          parentId: this.currentWindPlaceValue,
          displayType: null,
        };
      },
      handleEdit(item) {
        this.dialogData = Object.assign({}, item);
        console.log(item.title);
      },
      handleCreate() {
        this.dialogData = {
          title: null,
          cameraId: null,
          areaMonitorId: null,
          sortOrder: 5,
          imgsrc: null,
        };
      },
      handleDeleted(index) {
        this.areaMonitorList.splice(index, 1);
      },
      datadragEnd(evt) {
        console.log("拖动前的索引 :" + this.areaMonitorList[evt.oldIndex].title);
        console.log("拖动后的索引 :" + this.areaMonitorList[evt.newIndex].title);
      },
      handleCameraSubmit(data) {
        if (this.dialogData.areaMonitorId != null) {
          const target = this.areaMonitorList.find(
            (item) => item.areaMonitorId === this.dialogData.areaMonitorId
          );
          Object.assign(target, data);
        } else {
          this.areaMonitorList.unshift(data);
        }
      },
    btnAddClick() {
      this.dialogSceneData = {
        sceneName: null,
        id: null,
        parentId: this.currentWindPlaceValue,
        displayType: null
      }
    },
  };
    handleEdit(item) {
      this.dialogData = Object.assign({}, item)
      console.log(item.title)
    },
    handleCreate() {
      this.dialogData = {
        title: null,
        cameraId: null,
        areaMonitorId: null,
        sortOrder: 5,
        imgsrc: null
      }
    },
    handleDeleted(index) {
      this.areaMonitorList.splice(index, 1)
    },
    datadragEnd(evt) {
      this.updateData()
      this.$forceUpdate()
    },
    handleCameraSubmit(data) {
      if (this.dialogData.areaMonitorId != null) {
        const target = this.areaMonitorList.find(
          (item) => item.areaMonitorId === this.dialogData.areaMonitorId
        )
        Object.assign(target, data)
      } 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;
  }
</style>
.table-pager {
  justify-content: flex-end;
  float: right;
}
</style>

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

@@ -1,9 +1,9 @@
<template>
<div class="app-monitor">
  <div class="app-monitor">
    <t-tabs :animated="false" class="sys-monitor__tabs">
      <t-tab-panel label="首页" panel-id="tab-1">
        <home-page-settings class="sys-attendance__page" />
        
      </t-tab-panel>
      <t-tab-panel label="视频监控" panel-id="tab-2">
        <video-monitor class="sys-attendance__page" />
@@ -55,4 +55,4 @@ export default {
.sys-attendance__page {
  padding: 24px 0;
}
</style>
</style>