Home Explore Help
Sign In
asiainfo
/
ebc
Watch 4
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 348 Releases 0 Wiki
Browse Source

更新视频配置

(cherry picked from commit 899688f2c19934ec1f357318bc532a89f0cb28cf)
(cherry picked from commit f6e27ec2df6810c2e27245a3c3fa0892b602f48d)
liuchang 4 years ago
parent
b4fce4e26f
commit
bfef089fbd
12 changed files with 1637 additions and 2 deletions
Split View Show Diff Stats
  1. 2 1
      security-protection-platform/package.json
  2. 1 0
      security-protection-platform/src/index.html
  3. 192 0
      security-protection-platform/src/modules/system/monitor/HomePageSettings/AreaMonitor.vue
  4. 188 0
      security-protection-platform/src/modules/system/monitor/HomePageSettings/Card.vue
  5. 191 0
      security-protection-platform/src/modules/system/monitor/HomePageSettings/PersonnelAccess.vue
  6. 215 0
      security-protection-platform/src/modules/system/monitor/HomePageSettings/ShiftCameraDialog.vue
  7. 215 0
      security-protection-platform/src/modules/system/monitor/HomePageSettings/ShiftTerminalDialog.vue
  8. 70 0
      security-protection-platform/src/modules/system/monitor/HomePageSettings/UpdateName.vue
  9. 57 0
      security-protection-platform/src/modules/system/monitor/HomePageSettings/index.vue
  10. 219 0
      security-protection-platform/src/modules/system/monitor/VideoMonitor/ShiftSceneDialog.vue
  11. 237 0
      security-protection-platform/src/modules/system/monitor/VideoMonitor/index.vue
  12. 50 1
      security-protection-platform/src/modules/system/monitor/index.vue

+ 2 - 1
security-protection-platform/package.json
View File 

@ -61,7 +61,8 @@
61 61 
    "stylelint-order": "^0.7.0",
62 62 
    "stylelint-scss": "^2.1.0",
63 63 
    "vue-loader": "^14.2.3",
64 
    "vue-template-compiler": "^2.2.1"
64 
    "vue-template-compiler": "^2.2.1",
65 
    "vuedraggable": "2.19"
65 66 
  },
66 67 
  "dependencies": {
67 68 
    "aid-elements-desktop": "latest",

+ 1 - 0
security-protection-platform/src/index.html
View File 

@ -3,6 +3,7 @@
3 3 
<head>
4 4 
  <meta charset="UTF-8">
5 5 
  <meta http-equiv="x-ua-compatible" content="IE=Edge">
6 
  <meta name="referrer" content="no-referrer">
6 7 
  <title>Ai Design Project</title>
7 8 
  <link rel="icon" href="/static/images/aid-favicon.ico" type="image/x-icon" />
8 9 
  <link rel="shortcut icon" href="/static/images/aid-favicon.ico" type="image/x-icon" />

+ 192 - 0
security-protection-platform/src/modules/system/monitor/HomePageSettings/AreaMonitor.vue
View File 

@ -0,0 +1,192 @@
1 
<template>
2 
  <div class="p-24" ref="box">
3 
    <div style="min-height:280px; height:auto!important;">
4 
      <div class="masonry__item div-float">
5 
        <div class="card card-has-shadowed" style="height: 226px; width: 260px">
6 
          <div
7 
            class="card-block d-flex justify-content-center align-items-center"
8 
            @click="handleCreate"
9 
            style="cursor: pointer"
10 
          >
11 
            <t-icon icon="plus-outline"></t-icon>
12 
            <span>新增监控</span>
13 
          </div>
14 
          <div
15 
            class="card-footer d-flex align-items-center text-center px-0 py-12 border-top-0"
16 
          ></div>
17 
        </div>
18 
      </div>
19
20 
      <draggable v-model="areaMonitorList" @update="datadragEnd">
21 
        <transition-group>
22 
          <camera-card
23 
            v-for="item in areaMonitorList"
24 
            :key="item.areaMonitorId"
25 
            :data="item"
26 
            :itemWidth="itemWidth"
27 
            @edit="handleEdit"
28 
            @deleted="handleDeleted"
29 
          />
30 
        </transition-group>
31 
      </draggable>
32 
    </div>
33 
    <div class="table-pager">
34 
      <t-pager
35 
        :current.sync="page"
36 
        :total="total"
37 
        :page-size="limit"
38 
        show-elevator
39 
        @on-change="onChange"
40 
        >>
41 
      </t-pager>
42 
    </div>
43
44 
    <shift-camera-dialog
45 
      :data="dialogData"
46 
      @submit="handleCameraSubmit"
47 
    />
48 
  </div>
49 
</template>
50
51
52 
<script>
53 
import CameraCard from "./Card";
54 
import sysapi from "@/api/system";
55 
import ShiftCameraDialog from "./ShiftCameraDialog";
56 
import Vue from "vue";
57 
import draggable from "vuedraggable";
58
59 
export default {
60 
  components: { CameraCard, ShiftCameraDialog, draggable },
61 
  data() {
62 
    return {
63 
      areaMonitorList: [
64 
        {
65 
          title: "摄像头001",
66 
          cameraId: "001",
67 
          areaMonitorId: "001",
68 
          sortOrder: 0,
69 
          imgsrc:
70 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
71 
        },
72 
        {
73 
          title: "摄像头002",
74 
          cameraId: "002",
75 
          areaMonitorId: "002",
76 
          sortOrder: 1,
77 
          imgsrc:
78 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
79 
        },
80 
        {
81 
          title: "摄像头003",
82 
          cameraId: "003",
83 
          areaMonitorId: "003",
84 
          sortOrder: 2,
85 
          imgsrc:
86 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
87 
        },
88 
        // {
89 
        //   title: "摄像头004",
90 
        //   cameraId: "004",
91 
        //   areaMonitorId: "004",
92 
        //   sortOrder: 3,
93 
        //   imgsrc:
94 
        //     "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
95 
        // },
96 
        // {
97 
        //   title: "摄像头005",
98 
        //   cameraId: "005",
99 
        //   areaMonitorId: "005",
100 
        //   sortOrder: 4,
101 
        //   imgsrc:
102 
        //     "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
103 
        // },
104 
        // {
105 
        //   title: "摄像头006",
106 
        //   cameraId: "006",
107 
        //   areaMonitorId: "006",
108 
        //   sortOrder: 5,
109 
        //   imgsrc:
110 
        //     "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
111 
        // },
112 
        // {
113 
        //   title: "摄像头007",
114 
        //   cameraId: "007",
115 
        //   areaMonitorId: "007",
116 
        //   sortOrder: 6,
117 
        //   imgsrc:
118 
        //     "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
119 
        // },
120 
      ],
121 
      dialogData: {},
122 
      // 当前页
123 
      page: 1,
124 
      // 当前页的数据个数
125 
      limit: 3,
126 
      // 数据总数
127 
      total: 70,
128 
      dragging: null,
129 
      itemWidth: null,
130 
    };
131 
  },
132 
  mounted() {
133 
    let dom = this.$refs.box;
134 
    this.itemWidth = dom.clientWidth / 4 - 25;
135 
  },
136 
  methods: {
137 
    getAreaMonitors() {
138 
      sysapi.getAreaMonitors().then((resp) => {
139 
        this.areaMonitorList = resp.data || [];
140 
      });
141 
    },
142 
    handleEdit(item) {
143 
      this.dialogData = Object.assign({}, item);
144 
      console.log(item.title);
145 
    },
146 
    handleCreate() {
147 
      this.dialogData = {
148 
        title: null,
149 
        cameraId: null,
150 
        areaMonitorId: null,
151 
        sortOrder: 5,
152 
        imgsrc: null,
153 
      };
154 
    },
155 
    handleDeleted(index) {
156 
      this.areaMonitorList.splice(index, 1);
157 
    },
158 
    handleCameraSubmit(data) {
159 
      if (this.dialogData.areaMonitorId != null) {
160 
        const target = this.areaMonitorList.find(
161 
          (item) => item.areaMonitorId === this.dialogData.areaMonitorId
162 
        );
163 
        Object.assign(target, data);
164 
      } else {
165 
        this.areaMonitorList.unshift(data);
166 
      }
167 
    },
168 
    onChange(page) {
169 
      this.page = page;
170 
      this.getAreaMonitors();
171 
    },
172 
    datadragEnd(evt) {
173 
      console.log("拖动前的索引 :" + this.areaMonitorList[evt.oldIndex].title);
174 
      console.log("拖动后的索引 :" + this.areaMonitorList[evt.newIndex].title);
175 
    },
176 
  },
177 
};
178 
</script>
179
180 
<style lang="scss">
181 
.div-float {
182 
  float: left;
183 
}
184 
.div-footer {
185 
  height: 32px;
186 
  margin-top: 6px;
187 
}
188 
.table-pager {
189 
  justify-content: flex-end;
190 
  float: right;
191 
}
192 
</style>

+ 188 - 0
security-protection-platform/src/modules/system/monitor/HomePageSettings/Card.vue
View File 

@ -0,0 +1,188 @@
1 
<template>
2 
  <div class="masonry__item div-block" :class="{ active: showConfirm, lock: loadingDelete }">
3 
    <div class="card card-has-shadowed" :style="{ width: gridWidth }">
4 
      <div class="card-block" style="margin: 0px; padding: 0px" :style="{ height: gridHeight }">
5 
        <img :style="{ height: gridHeight, width: gridWidth }" :src="data.imgsrc" alt="" />
6 
      </div>
7 
      <div class="opt">
8 
        <t-button shape="round" icon="arrow-expand-all-outline" style="margin: 0px 0px 0px 0px">移动</t-button>
9 
        <t-button shape="round" icon="swap-outline" style="margin: 0px 2px 0px 2px" @click="handleEdit">替换</t-button>
10 
        <t-button shape="round" icon="delete" @click="handleDelete">删除</t-button>
11 
        <div v-show="showConfirm" class="popover">
12 
          <t-icon color="warning" icon="alert-circle" style="vertical-align: middle" />
13 
          你确定删除该监控吗？
14 
          <div class="btn-block">
15 
            <t-button :loading="loadingDelete" size="sm" color="primary" @click="handleConfirmDelete">确定</t-button>
16 
            <t-button size="sm" color="secondary" style="margin-right: 8px" @click="handleCancelDelete">取消</t-button>
17 
          </div>
18 
        </div>
19 
      </div>
20 
    </div>
21 
    <div class="card card-has-shadowed div-footer" :style="{ width: gridWidth }">
22 
      <div>
23 
        <update-name v-bind:name="data.title" v-on:nameSubmit="nameChange" />
24 
      </div>
25 
    </div>
26 
  </div>
27 
</template>
28
29
30 
<script>
31 
  import UpdateName from "./UpdateName";
32 
  export default {
33 
    components: {
34 
      UpdateName
35 
    },
36 
    props: {
37 
      data: {
38 
        type: Object,
39 
        require: true,
40 
      },
41 
      itemWidth: null,
42 
    },
43 
    data() {
44 
      return {
45 
        showConfirm: false,
46 
        loadingDelete: false,
47 
      };
48 
    },
49 
    computed: {
50 
      gridWidth: function () {
51 
        return this.itemWidth - 20 + "px";
52 
      },
53 
      gridHeight: function () {
54 
        return this.itemWidth * 0.9 - 20 - 6 - 32 + "px";
55 
      },
56 
    },
57 
    mounted() {
58
59 
    },
60 
    methods: {
61 
      nameChange: function (name) {
62 
        //修改名称
63 
        alert(name);
64 
      },
65 
      handleDelete() {
66 
        this.showConfirm = true;
67 
      },
68 
      handleConfirm() {},
69 
      handleCancelDelete() {
70 
        this.showConfirm = false;
71 
      },
72 
      handleConfirmDelete() {
73 
        //this.loadingDelete = true;
74 
        //把事件抛出去，保持控件的干净
75 
        this.$emit("deleted", this.data);
76 
        //   sysapi
77 
        //     .deleteSchedule(this.data.scheduleId)
78 
        //     .then(
79 
        //       (resp) => {
80 
        //         console.log(resp);
81 
        //         this.$emit("deleted", this.data);
82 
        //       },
83 
        //       (err) => {
84 
        //         console.log(err);
85 
        //         this.$Message.danger("删除失败，请稍后再试！", 3);
86 
        //       }
87 
        //     )
88 
        //     .finally(() => {
89 
        //       this.loadingDelete = false;
90 
        //       this.showConfirm = false;
91 
        //     });
92 
      },
93 
      handleEdit() {
94 
        this.$emit("edit", this.data);
95 
      },
96 
    },
97 
  };
98 
</script>
99
100 
<style lang="scss">
101 
  @import "@/assets/styles/aid-theme/_variable.scss";
102
103 
  .div-block {
104 
    display: inline-block;
105 
    .opt {
106 
      position: absolute;
107 
      left: 0;
108 
      top: 0;
109 
      width: 100%;
110 
      height: 100%;
111 
      opacity: 0;
112 
      display: flex;
113 
      justify-content: center;
114 
      align-items: center;
115
116 
      &::before {
117 
        content: "";
118 
        display: block;
119 
        position: absolute;
120 
        left: 0;
121 
        top: 0;
122 
        width: 100%;
123 
        height: 100%;
124 
        background-color: black;
125 
        border-radius: 4px;
126 
        opacity: 0.8;
127 
      }
128
129 
      &::after {
130 
        content: "";
131 
        display: none;
132 
        position: absolute;
133 
        left: 0;
134 
        top: 0;
135 
        width: 100%;
136 
        height: 100%;
137 
        background-color: black;
138 
        border-radius: 4px;
139 
        opacity: 0;
140 
      }
141
142 
      &>.btn {
143 
        color: rgba(255, 255, 255, 0.65);
144 
        border-color: rgba(0, 0, 0, 0);
145 
        background-color: rgba(0, 0, 0, 0);
146
147 
        &:hover {
148 
          color: white;
149 
          background-color: $brand-primary;
150 
        }
151 
      }
152
153 
      &:hover {
154 
        opacity: 1;
155 
      }
156 
    }
157
158 
    &.active &__opt {
159 
      opacity: 1;
160 
    }
161
162 
    &.lock &__opt::after {
163 
      display: block;
164 
    }
165
166 
    .popover {
167 
      width: 213px;
168 
      background-color: white;
169 
      color: rgba(0, 0, 0, 0.65);
170 
      position: absolute;
171 
      bottom: 12px;
172 
      left: 12px;
173 
      padding: 16px 20px;
174 
      border-radius: 4px;
175 
    }
176
177 
    .btn-block {
178 
      display: flex;
179 
      flex-direction: row-reverse;
180 
      margin-top: 14px;
181 
    }
182 
  }
183
184 
  .div-footer {
185 
    height: 32px;
186 
    margin-top: 6px;
187 
  }
188 
</style>

+ 191 - 0
security-protection-platform/src/modules/system/monitor/HomePageSettings/PersonnelAccess.vue
View File 

@ -0,0 +1,191 @@
1 
<template>
2 
  <div class="p-24" ref="box">
3 
    <div style="min-height:280px; height:auto!important;">
4 
      <div class="masonry__item div-float">
5 
        <div class="card card-has-shadowed" style="height: 226px; width: 260px">
6 
          <div
7 
            class="card-block d-flex justify-content-center align-items-center"
8 
            @click="handleCreate"
9 
            style="cursor: pointer"
10 
          >
11 
            <t-icon icon="plus-outline"></t-icon>
12 
            <span>新增人脸终端</span>
13 
          </div>
14 
          <div
15 
            class="card-footer d-flex align-items-center text-center px-0 py-12 border-top-0"
16 
          ></div>
17 
        </div>
18 
      </div>
19 
      <draggable v-model="identificationTerminalList" @update="datadragEnd">
20 
        <transition-group>
21 
          <terminal-card
22 
            v-for="item in identificationTerminalList"
23 
            :key="item.identificationTerminalId"
24 
            :data="item"
25 
            :itemWidth="itemWidth"
26 
            @edit="handleEdit"
27 
            @deleted="handleDeleted"
28 
          />
29 
        </transition-group>
30 
      </draggable>
31 
    </div>
32 
    <div class="table-pager">
33 
      <t-pager
34 
        :current.sync="page"
35 
        :total="total"
36 
        :page-size="limit"
37 
        show-elevator
38 
        @on-change="onChange"
39 
        >>
40 
      </t-pager>
41 
    </div>
42
43 
    <shift-terminal-dialog :data="dialogData" @submit="handleterminalSubmit" />
44 
  </div>
45 
</template>
46
47
48 
<script>
49 
import TerminalCard from "./Card";
50 
import sysapi from "@/api/system";
51 
import ShiftTerminalDialog from "./ShiftTerminalDialog";
52 
import Vue from "vue";
53 
import draggable from "vuedraggable";
54
55 
export default {
56 
  components: { TerminalCard, ShiftTerminalDialog, draggable },
57 
  data() {
58 
    return {
59 
      identificationTerminalList: [
60 
        {
61 
          title: "终端001",
62 
          terminalId: "001",
63 
          identificationTerminalId: "001",
64 
          sortOrder: 0,
65 
          imgsrc:
66 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
67 
        },
68 
        {
69 
          title: "终端002",
70 
          terminalId: "002",
71 
          identificationTerminalId: "002",
72 
          sortOrder: 1,
73 
          imgsrc:
74 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
75 
        },
76 
        {
77 
          title: "终端003",
78 
          terminalId: "003",
79 
          identificationTerminalId: "003",
80 
          sortOrder: 2,
81 
          imgsrc:
82 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
83 
        },
84 
        {
85 
          title: "终端004",
86 
          terminalId: "004",
87 
          identificationTerminalId: "004",
88 
          sortOrder: 3,
89 
          imgsrc:
90 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
91 
        },
92 
        {
93 
          title: "终端005",
94 
          terminalId: "005",
95 
          identificationTerminalId: "005",
96 
          sortOrder: 4,
97 
          imgsrc:
98 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
99 
        },
100 
        {
101 
          title: "终端006",
102 
          terminalId: "006",
103 
          identificationTerminalId: "006",
104 
          sortOrder: 5,
105 
          imgsrc:
106 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
107 
        },
108 
        {
109 
          title: "终端007",
110 
          terminalId: "007",
111 
          identificationTerminalId: "007",
112 
          sortOrder: 6,
113 
          imgsrc:
114 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
115 
        },
116 
      ],
117 
      dialogData: {},
118 
      // 当前页
119 
      page: 1,
120 
      // 当前页的数据个数
121 
      limit: 7,
122 
      // 数据总数
123 
      total: 70,
124 
      dragging: null,
125 
      itemWidth: null,
126 
    };
127 
  },
128 
  mounted() {
129 
    let dom = this.$refs.box;
130 
    this.itemWidth = dom.clientWidth / 4 - 25;
131 
  },
132 
  methods: {
133 
    getIdentificationTerminals() {
134 
      sysapi.getIdentificationTerminals().then((resp) => {
135 
        this.identificationTerminalList = resp.data || [];
136 
      });
137 
    },
138 
    handleEdit(item) {
139 
      this.dialogData = Object.assign({}, item);
140 
      console.log(item.title);
141 
    },
142 
    handleCreate() {
143 
      this.dialogData = {
144 
        title: null,
145 
        terminalId: null,
146 
        identificationTerminalId: null,
147 
        sortOrder: 5,
148 
        imgsrc: null,
149 
      };
150 
    },
151 
    handleDeleted(index) {
152 
      this.identificationTerminalList.splice(index, 1);
153 
    },
154 
    handleterminalSubmit(data) {
155 
      if (this.dialogData.identificationTerminalId != null) {
156 
        const target = this.identificationTerminalList.find(
157 
          (item) =>
158 
            item.identificationTerminalId ===
159 
            this.dialogData.identificationTerminalId
160 
        );
161 
        Object.assign(target, data);
162 
      } else {
163 
        this.identificationTerminalList.unshift(data);
164 
      }
165 
    },
166 
    onChange(page) {
167 
      this.page = page;
168 
      this.getIdentificationTerminals();
169 
    },
170 
     datadragEnd(evt) {
171 
      console.log("拖动前的索引 :" + this.identificationTerminalList[evt.oldIndex].title);
172 
      console.log("拖动后的索引 :" + this.identificationTerminalList[evt.newIndex].title);
173 
    },
174 
  },
175 
};
176 
</script>
177
178
179 
<style lang="scss">
180 
.div-float {
181 
  float: left;
182 
}
183 
.div-footer {
184 
  height: 32px;
185 
  margin-top: 6px;
186 
}
187 
.table-pager {
188 
  justify-content: flex-end;
189 
  float: right;
190 
}
191 
</style>

+ 215 - 0
security-protection-platform/src/modules/system/monitor/HomePageSettings/ShiftCameraDialog.vue
View File 

@ -0,0 +1,215 @@
1 
<template>
2 
  <t-modal
3 
    :visibled.sync="visibled"
4 
    :title="title"
5 
    width="780px"
6 
    height="590px"
7 
    :mask-closable="false"
8 
    :ok="handleSubmit"
9 
  >
10 
    <div>
11 
      <div style="display: flex">
12 
        <span style="margin-top: 5px">监控名称:</span>
13 
        <t-input
14 
          v-model="searchValue"
15 
          placeholder="监控器名称..."
16 
          style="width: 300px; margin: 0px 10px"
17 
          icon="search-outline"
18 
          icon-placement="right"
19 
        ></t-input>
20 
        <t-button color="primary">搜索</t-button>
21 
      </div>
22 
      <div
23 
        class="masonry__item div-float"
24 
        v-for="item in cameraList"
25 
        :key="item.cameraId"
26 
        :data="item"
27 
        @click="groupClick(item)"
28 
      >
29 
        <div class="card-has-shadowed" style="width: 158px">
30 
          <div>
31 
            <img
32 
              :class="item.cameraId == form.cameraId ? 'hover' : ''"
33 
              style="height: 120px; width: 158px"
34 
              :src="item.imgsrc"
35 
              alt=""
36 
            />
37 
          </div>
38 
        </div>
39 
        <div class="div-footer" style="width: 158px">
40 
          <div class="div-base">
41 
            {{ item.title }}
42 
          </div>
43 
        </div>
44 
      </div>
45 
      <div class="table-pager">
46 
        <t-pager
47 
          :current.sync="page"
48 
          :total="total"
49 
          :page-size="limit"
50 
          show-elevator
51 
          @on-change="onChange"
52 
          >>
53 
        </t-pager>
54 
      </div>
55 
    </div>
56 
  </t-modal>
57 
</template>
58
59 
<script>
60 
import sysapi from "@/api/system";
61
62 
export default {
63 
  name: "ShiftCameraDialog",
64 
  props: {
65 
    data: {
66 
      type: Object,
67 
      default() {
68 
        return {};
69 
      },
70 
    },
71 
  },
72 
  data() {
73 
    return {
74 
      visibled: false,
75 
      form: {},
76 
      searchValue: null,
77 
      loadingSubmit: false,
78 
      // 当前页
79 
      page: 1,
80 
      // 当前页的数据个数
81 
      limit: 7,
82 
      // 数据总数
83 
      total: 70,
84 
      cameraList: [
85 
        {
86 
          title: "摄像头001",
87 
          cameraId: "001",
88 
          sortOrder: 0,
89 
          imgsrc:
90 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
91 
        },
92 
        {
93 
          title: "摄像头002",
94 
          cameraId: "002",
95 
          sortOrder: 1,
96 
          imgsrc:
97 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
98 
        },
99 
        {
100 
          title: "摄像头003",
101 
          cameraId: "003",
102 
          sortOrder: 2,
103 
          imgsrc:
104 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
105 
        },
106 
        {
107 
          title: "摄像头004",
108 
          cameraId: "004",
109 
          sortOrder: 3,
110 
          imgsrc:
111 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
112 
        },
113 
        {
114 
          title: "摄像头005",
115 
          cameraId: "005",
116 
          sortOrder: 4,
117 
          imgsrc:
118 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
119 
        },
120 
        {
121 
          title: "摄像头006",
122 
          cameraId: "006",
123 
          sortOrder: 5,
124 
          imgsrc:
125 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
126 
        },
127 
        {
128 
          title: "摄像头007",
129 
          cameraId: "007",
130 
          sortOrder: 6,
131 
          imgsrc:
132 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
133 
        },
134 
      ],
135 
    };
136 
  },
137 
  computed: {
138 
    title() {
139 
      return this.data.areaMonitorId == null ? "新增监控" : "更换监控设备";
140 
    },
141 
  },
142 
  watch: {
143 
    data(val) {
144 
      //侦听data属性
145 
      this.form = this.data;
146 
      this.visibled = true;
147 
    },
148 
  },
149 
  methods: {
150 
    getCameras() {
151 
      sysapi.getCameras().then((resp) => {
152 
        alert(11);
153 
        this.cameraList = resp.data || [];
154 
      });
155 
    },
156 
    groupClick(item) {
157 
      //选中更换摄像头
158 
      if (this.form.title == null) {
159 
        this.form.title = item.title;
160 
      }
161 
      this.form.cameraId = item.cameraId;
162 
      this.form.imgsrc = item.imgsrc;
163 
    },
164 
    handleSubmit() {
165 
      this.loadingSubmit = true;
166 
      sysapi
167 
        .submitSchedule(this.form)
168 
        .then(
169 
          (resp) => {
170 
            if (resp.data.areaMonitorId == null) {
171 
              this.form.areaMonitorId = resp.data.areaMonitorId;
172 
            }
173 
            this.$emit("submit", this.form);
174 
            this.visibled = false;
175 
            this.$Message.success("提交成功");
176 
          },
177 
          (err) => {
178 
            console.log(err);
179 
            this.$Message.danger("提交失败");
180 
          }
181 
        )
182 
        .finally(() => {
183 
          this.loadingSubmit = false;
184 
        });
185 
    },
186 
    onChange(page) {
187 
      this.page = page;
188 
      this.getAreaMonitors();
189 
    },
190 
  },
191 
};
192 
</script>
193
194 
<style lang="scss">
195 
.div-float {
196 
  display: inline-block;
197 
}
198 
.div-footer {
199 
  height: 32px;
200 
  margin-top: 6px;
201 
}
202 
.card-has-shadowed {
203 
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
204 
}
205 
.table-pager {
206 
  justify-content: flex-end;
207 
  float: right;
208 
}
209 
.div-base {
210 
  margin: 5px 10px 0px 10px;
211 
}
212 
.hover {
213 
  border: 2px solid blue;
214 
}
215 
</style>

+ 215 - 0
security-protection-platform/src/modules/system/monitor/HomePageSettings/ShiftTerminalDialog.vue
View File 

@ -0,0 +1,215 @@
1 
<template>
2 
  <t-modal
3 
    :visibled.sync="visibled"
4 
    :title="title"
5 
    width="780px"
6 
    height="590px"
7 
    :mask-closable="false"
8 
    :ok="handleSubmit"
9 
  >
10 
    <div>
11 
      <div style="display: flex">
12 
        <span style="margin-top: 5px">终端名称:</span>
13 
        <t-input
14 
          v-model="searchValue"
15 
          placeholder="终端名称..."
16 
          style="width: 300px; margin: 0px 10px"
17 
          icon="search-outline"
18 
          icon-placement="right"
19 
        ></t-input>
20 
        <t-button color="primary">搜索</t-button>
21 
      </div>
22 
      <div
23 
        class="masonry__item div-float"
24 
        v-for="item in terminalList"
25 
        :key="item.terminalId"
26 
        :data="item"
27 
        @click="groupClick(item)"
28 
      >
29 
        <div class="card-has-shadowed" style="width: 158px">
30 
          <div>
31 
            <img
32 
              :class="item.terminalId == form.terminalId ? 'hover' : ''"
33 
              style="height: 120px; width: 158px"
34 
              :src="item.imgsrc"
35 
              alt=""
36 
            />
37 
          </div>
38 
        </div>
39 
        <div class="div-footer" style="width: 158px">
40 
          <div class="div-base">
41 
            {{ item.title }}
42 
          </div>
43 
        </div>
44 
      </div>
45 
      <div class="table-pager">
46 
        <t-pager
47 
          :current.sync="page"
48 
          :total="total"
49 
          :page-size="limit"
50 
          show-elevator
51 
          @on-change="onChange"
52 
          >>
53 
        </t-pager>
54 
      </div>
55 
    </div>
56 
  </t-modal>
57 
</template>
58
59 
<script>
60 
import sysapi from "@/api/system";
61
62 
export default {
63 
  name: "ShiftTerminalDialog",
64 
  props: {
65 
    data: {
66 
      type: Object,
67 
      default() {
68 
        return {};
69 
      },
70 
    },
71 
  },
72 
  data() {
73 
    return {
74 
      visibled: false,
75 
      form: {},
76 
      searchValue: null,
77 
      loadingSubmit: false,
78 
      // 当前页
79 
      page: 1,
80 
      // 当前页的数据个数
81 
      limit: 7,
82 
      // 数据总数
83 
      total: 70,
84 
      terminalList: [
85 
        {
86 
          title: "摄像头001",
87 
          terminalId: "001",
88 
          sortOrder: 0,
89 
          imgsrc:
90 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
91 
        },
92 
        {
93 
          title: "摄像头002",
94 
          terminalId: "002",
95 
          sortOrder: 1,
96 
          imgsrc:
97 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
98 
        },
99 
        {
100 
          title: "摄像头003",
101 
          terminalId: "003",
102 
          sortOrder: 2,
103 
          imgsrc:
104 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
105 
        },
106 
        {
107 
          title: "摄像头004",
108 
          terminalId: "004",
109 
          sortOrder: 3,
110 
          imgsrc:
111 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
112 
        },
113 
        {
114 
          title: "摄像头005",
115 
          terminalId: "005",
116 
          sortOrder: 4,
117 
          imgsrc:
118 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
119 
        },
120 
        {
121 
          title: "摄像头006",
122 
          terminalId: "006",
123 
          sortOrder: 5,
124 
          imgsrc:
125 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
126 
        },
127 
        {
128 
          title: "摄像头007",
129 
          terminalId: "007",
130 
          sortOrder: 6,
131 
          imgsrc:
132 
            "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
133 
        },
134 
      ],
135 
    };
136 
  },
137 
  computed: {
138 
    title() {
139 
      return this.data.identificationTerminalId == null ? "新增人脸终端" : "更换人脸终端";
140 
    },
141 
  },
142 
  watch: {
143 
    data(val) {
144 
      //侦听data属性
145 
      this.form = this.data;
146 
      this.visibled = true;
147 
    },
148 
  },
149 
  methods: {
150 
    getCameras() {
151 
      sysapi.getCameras().then((resp) => {
152 
        alert(11);
153 
        this.terminalList = resp.data || [];
154 
      });
155 
    },
156 
    groupClick(item) {
157 
      //选中更换摄像头
158 
      if (this.form.title == null) {
159 
        this.form.title = item.title;
160 
      }
161 
      this.form.terminalId = item.terminalId;
162 
      this.form.imgsrc = item.imgsrc;
163 
    },
164 
    handleSubmit() {
165 
      this.loadingSubmit = true;
166 
      sysapi
167 
        .submitSchedule(this.form)
168 
        .then(
169 
          (resp) => {
170 
            if (resp.data.identificationTerminalId == null) {
171 
              this.form.identificationTerminalId = resp.data.identificationTerminalId;
172 
            }
173 
            this.$emit("submit", this.form);
174 
            this.visibled = false;
175 
            this.$Message.success("提交成功");
176 
          },
177 
          (err) => {
178 
            console.log(err);
179 
            this.$Message.danger("提交失败");
180 
          }
181 
        )
182 
        .finally(() => {
183 
          this.loadingSubmit = false;
184 
        });
185 
    },
186 
    onChange(page) {
187 
      this.page = page;
188 
      this.getAreaMonitors();
189 
    },
190 
  },
191 
};
192 
</script>
193
194 
<style lang="scss">
195 
.div-float {
196 
  float: left;
197 
}
198 
.div-footer {
199 
  height: 32px;
200 
  margin-top: 6px;
201 
}
202 
.card-has-shadowed {
203 
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
204 
}
205 
.table-pager {
206 
  justify-content: flex-end;
207 
  float: right;
208 
}
209 
.div-base {
210 
  margin: 5px 10px 0px 10px;
211 
}
212 
.hover {
213 
  border: 2px solid blue;
214 
}
215 
</style>

+ 70 - 0
security-protection-platform/src/modules/system/monitor/HomePageSettings/UpdateName.vue
View File 

@ -0,0 +1,70 @@
1 
<template>
2 
  <div class="div-base">
3 
    <div v-if="text_tatus == 0" @mouseover="mouseOver">
4 
      {{ this.name }}
5 
    </div>
6 
    <div v-else-if="text_tatus == 1" @mouseleave="mouseLeave">
7 
      {{ this.name }}
8 
      <div class="iconChange" @click="iconChange">
9 
        <t-icon icon="edit-outline" size="24"> </t-icon>
10 
      </div>
11 
    </div>
12 
    <div v-else @mouseleave="mouseLeave">
13 
      <t-input
14 
        size="sm"
15 
        v-model="name"
16 
        icon="check-outline"
17 
        icon-placement="right"
18 
        @icon-click="iconSubmit"
19 
      >
20 
      </t-input>
21 
    </div>
22 
  </div>
23 
</template>
24
25
26 
<script>
27 
export default {
28 
  name: "updateName",
29 
  props: {
30 
    name: String,
31 
  },
32 
  data() {
33 
    return {
34 
      text_tatus: 0,
35 
    };
36 
  },
37 
  mounted() {},
38 
  methods: {
39 
    // 移入
40 
    mouseOver() {
41 
      this.text_tatus = 1;
42 
    },
43 
    // 移出
44 
    mouseLeave() {
45 
      this.text_tatus = 0;
46 
    },
47 
    //修改
48 
    iconChange() {
49 
      this.text_tatus = 2;
50 
    },
51 
    //提交
52 
    iconSubmit() {
53 
      this.text_tatus = 1;
54 
      this.$emit("nameSubmit", this.name);
55 
    },
56 
  },
57 
  watch: {},
58 
};
59 
</script>
60
61 
<style lang="scss">
62 
.div-base {
63 
  margin: 5px 10px 0px 10px;
64 
  .iconChange {
65 
    margin: -5px 0px 0px 0px;
66 
    height: 24px;
67 
    float: right;
68 
  }
69 
}
70 
</style>

+ 57 - 0
security-protection-platform/src/modules/system/monitor/HomePageSettings/index.vue
View File 

@ -0,0 +1,57 @@
1 
<template>
2 
  <div class="app-monitor">
3 
    <t-button-group>
4 
      <t-button
5 
        @click="btnOnClick('areaMonitor')"
6 
        :class="['base', btnIsClicked ? 'active' : '']"
7 
        >重点区域监控</t-button
8 
      >
9 
      <t-button
10 
        @click="btnOnClick('personnelAccess')"
11 
        :class="['base', btnIsClicked ? '' : 'active']"
12 
        >人员进出识别</t-button
13 
      >
14 
    </t-button-group>
15
16 
    <div v-if="btnIsClicked">
17 
      <area-monitor />
18 
    </div>
19 
    <div v-else>
20 
      <personnel-access />
21 
    </div>
22 
  </div>
23 
</template>
24
25
26 
<script>
27 
import AreaMonitor from "./AreaMonitor";
28 
import PersonnelAccess from "./PersonnelAccess";
29 
// import sysapi from '@/api/system'
30
31 
export default {
32 
  components: { AreaMonitor, PersonnelAccess },
33 
  data() {
34 
    return {
35 
      btnIsClicked: true,
36 
    };
37 
  },
38 
  mounted() {
39
40 
  },
41 
  methods: {
42 
    btnOnClick(tag) {
43 
      if (tag == "areaMonitor") {
44 
        this.btnIsClicked = true;
45 
      } else {
46 
        this.btnIsClicked = false;
47 
      }
48 
    },
49 
  },
50 
};
51 
</script>
52
53 
<style lang="scss">
54 
.btn-base {
55 
  width: 116px;
56 
}
57 
</style>

+ 219 - 0
security-protection-platform/src/modules/system/monitor/VideoMonitor/ShiftSceneDialog.vue
View File 

@ -0,0 +1,219 @@
1 
<template>
2 
  <t-modal
3 
    :visibled.sync="visibled"
4 
    :title="title"
5 
    width="500px"
6 
    height="300px"
7 
    :mask-closable="false"
8 
    :ok="handleSubmit"
9 
  >
10 
    <div>
11 
      <t-row>
12 
        <t-col style="text-align: center" span="3">场景名称：</t-col>
13 
        <t-col span="9">
14 
          <t-input
15 
            v-model="data.sceneName"
16 
            placeholder="请输入..."
17 
            style="width: 250px"
18 
          >
19 
          </t-input
20 
        ></t-col>
21 
      </t-row>
22 
      <t-row style="margin-top: 10px; margin-bottom: 10px">
23 
        <t-col style="text-align: center" span="3"
24 
          >布&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;局：</t-col
25 
        >
26 
        <t-col span="9">
27 
          <t-radio-group v-model="data.displayType" type="button">
28 
            <t-radio value="1" label="1X1"></t-radio>
29 
            <t-radio value="2" label="2X2"></t-radio>
30 
            <t-radio value="3" label="3X3"></t-radio>
31 
            <t-radio value="4" label="4X4"></t-radio> </t-radio-group
32 
        ></t-col>
33 
      </t-row>
34 
      <t-row>
35 
        <t-col span="3"></t-col>
36 
        <t-col span="9"
37 
          ><t-button
38 
            ghost
39 
            color="info"
40 
            icon="delete-outline"
41 
            @click="handleDelete"
42 
            >删除场景</t-button
43 
          >
44 
          <div v-show="showConfirm" class="popover">
45 
            <t-icon
46 
              color="warning"
47 
              icon="alert-circle"
48 
              style="vertical-align: middle"
49 
            />
50 
            你确定删除该场景吗？
51 
            <div class="btn-block">
52 
              <t-button
53 
                :loading="loadingDelete"
54 
                size="sm"
55 
                color="primary"
56 
                @click="handleConfirmDelete"
57 
                >确定</t-button
58 
              >
59 
              <t-button
60 
                size="sm"
61 
                color="secondary"
62 
                style="margin-right: 8px"
63 
                @click="handleCancelDelete"
64 
                >取消</t-button
65 
              >
66 
            </div>
67 
          </div>
68 
        </t-col>
69 
      </t-row>
70 
    </div>
71 
  </t-modal>
72 
</template>
73
74 
<script>
75 
export default {
76 
  name: "ShiftSceneDialog",
77 
  props: {
78 
    data: {
79 
      type: Object,
80 
      default() {
81 
        return {};
82 
      },
83 
    },
84 
  },
85 
  data() {
86 
    return {
87 
      visibled: false,
88 
      form: {},
89 
      searchValue: null,
90 
      loadingSubmit: false,
91 
      showConfirm: false,
92 
      loadingDelete: false,
93 
    };
94 
  },
95 
  computed: {
96 
    title() {
97 
      return this.data.id == null ? "新增场景" : "编辑场景";
98 
    },
99 
  },
100 
  watch: {
101 
    data(val) {
102 
      //侦听data属性
103 
      this.form = this.data;
104 
      this.visibled = true;
105 
    },
106 
  },
107 
  methods: {
108 
    getCameras() {
109 
      sysapi.getCameras().then((resp) => {
110 
        alert(11);
111 
        this.cameraList = resp.data || [];
112 
      });
113 
    },
114 
    groupClick(item) {
115 
      //选中更换摄像头
116 
      if (this.form.title == null) {
117 
        this.form.title = item.title;
118 
      }
119 
      this.form.cameraId = item.cameraId;
120 
      this.form.imgsrc = item.imgsrc;
121 
    },
122 
    handleDelete() {
123 
      this.showConfirm = true;
124 
    },
125 
    handleSubmit() {
126 
      this.loadingSubmit = true;
127 
      sysapi
128 
        .submitSchedule(this.form)
129 
        .then(
130 
          (resp) => {
131 
            if (resp.data.areaMonitorId == null) {
132 
              this.form.areaMonitorId = resp.data.areaMonitorId;
133 
            }
134 
            this.$emit("submit", this.form);
135 
            this.visibled = false;
136 
            this.$Message.success("提交成功");
137 
          },
138 
          (err) => {
139 
            console.log(err);
140 
            this.$Message.danger("提交失败");
141 
          }
142 
        )
143 
        .finally(() => {
144 
          this.loadingSubmit = false;
145 
        });
146 
    },
147 
    onChange(page) {
148 
      this.page = page;
149 
      this.getAreaMonitors();
150 
    },
151 
    handleCancelDelete() {
152 
      this.showConfirm = false;
153 
    },
154 
    handleConfirmDelete() {
155 
      //this.loadingDelete = true;
156
157 
      this.$emit("deleted", this.data);
158 
      //   sysapi
159 
      //     .deleteSchedule(this.data.scheduleId)
160 
      //     .then(
161 
      //       (resp) => {
162 
      //         console.log(resp);
163 
      //         this.$emit("deleted", this.data);
164 
      //       },
165 
      //       (err) => {
166 
      //         console.log(err);
167 
      //         this.$Message.danger("删除失败，请稍后再试！", 3);
168 
      //       }
169 
      //     )
170 
      //     .finally(() => {
171 
      //       this.loadingDelete = false;
172 
      //       this.showConfirm = false;
173 
      //     });
174 
    },
175 
  },
176 
};
177 
</script>
178
179 
<style lang="scss">
180 
.div-float {
181 
  display: inline-block;
182 
}
183 
.div-footer {
184 
  height: 32px;
185 
  margin-top: 6px;
186 
}
187 
.card-has-shadowed {
188 
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
189 
}
190 
.table-pager {
191 
  justify-content: flex-end;
192 
  float: right;
193 
}
194 
.div-base {
195 
  margin: 5px 10px 0px 10px;
196 
}
197 
.hover {
198 
  border: 2px solid blue;
199 
}
200 
.popover {
201 
  width: 213px;
202 
  background-color: white;
203 
  color: rgba(0, 0, 0, 0.65);
204 
  position: absolute;
205 
  bottom: -55px;
206 
  -webkit-box-shadow: #666 0px 0px 10px;
207 
  -moz-box-shadow: #666 0px 0px 10px;
208 
  box-shadow: #666 0px 0px 10px;
209
210 
  left: 12px;
211 
  padding: 16px 20px;
212 
  border-radius: 4px;
213 
}
214 
.btn-block {
215 
  display: flex;
216 
  flex-direction: row-reverse;
217 
  margin-top: 14px;
218 
}
219 
</style>

+ 237 - 0
security-protection-platform/src/modules/system/monitor/VideoMonitor/index.vue
View File 

@ -0,0 +1,237 @@
1 
<template>
2 
  <div class="p-24" ref="box">
3 
    <div>
4 
      <t-row>
5 
        <t-col>
6 
          <div style="float: left">
7 
            <span>风场： </span>
8 
            <t-select v-model="currentWindPlaceValue" style="width: 200px; height: 32px">
9 
              <t-option value="1">风场1</t-option>
10 
              <t-option value="2">风场2</t-option>
11 
            </t-select>
12 
          </div>
13 
        </t-col>
14 
        <t-col>
15 
          <div style="float: right">
16 
            <t-button-group>
17 
              <t-button @click="btnOnClick('areaMonitor')" :class="['base', btnIsClicked ? 'active' : '']">
18 
                <span>大门</span>
19 
                <div @click="handleSceneEdit('123')" v-if="dialogSceneData.id == '1'"
20 
                  style="float: right; width: 14px; height: 14px">
21 
                  <t-icon icon="edit" shape="circle" class="ico"></t-icon>
22 
                </div>
23 
              </t-button>
24
25 
              <t-button @click="btnOnClick('areaMonitor')" :class="['base', btnIsClicked ? 'active' : '']">
26 
                <span>值班室</span>
27 
                <div @click="handleSceneEdit('456')" style="float: right; width: 14px; height: 14px"
28 
                  v-if="dialogSceneData.id == '456'">
29 
                  <t-icon icon="edit" shape="circle" class="ico"></t-icon>
30 
                </div>
31 
              </t-button>
32 
            </t-button-group>
33 
            <t-button @click="btnAddClick()" style="width: 48px">＋</t-button>
34 
          </div>
35 
        </t-col>
36 
      </t-row>
37 
      <t-row>
38 
        <t-col style="margin-top:10px;">
39 
          <t-button color="info" icon="plus-circle" @click="handleCreate">新增监控</t-button>
40 
        </t-col>
41 
      </t-row>
42 
      <!--header-->
43 
    </div>
44 
    <div style="min-height: 280px; height: auto !important">
45 
      <draggable v-model="areaMonitorList" @update="datadragEnd">
46 
        <transition-group>
47 
          <div v-for="(viewArray,index) in viewDataList" :key="index">
48 
            <div style="text-align: right;">
49 
              <span style="width:300px">第{{index+1}}/{{viewDataList.length}}页</span>
50 
            </div>
51 
            <camera-card v-for="item in viewArray" :key="item.areaMonitorId" :data="item" :itemWidth="itemWidth"
52 
              @edit="handleEdit" @deleted="handleDeleted" />
53 
          </div>
54 
        </transition-group>
55 
      </draggable>
56 
      <shift-scene-dialog :data="dialogSceneData" @submit="handleCameraSubmit" />
57 
      <shift-camera-dialog :data="dialogData" @submit="handleCameraSubmit" />
58 
    </div>
59 
  </div>
60 
</template>
61
62
63 
<script>
64 
  import CameraCard from "../HomePageSettings/Card";
65 
  import draggable from "vuedraggable";
66 
  import ShiftSceneDialog from "./ShiftSceneDialog";
67 
  import ShiftCameraDialog from "../HomePageSettings/ShiftCameraDialog";
68 
  export default {
69 
    components: {
70 
      CameraCard,
71 
      draggable,
72 
      ShiftSceneDialog,
73 
      ShiftCameraDialog
74 
    },
75 
    data() {
76 
      return {
77 
        currentWindPlaceValue: "2",
78 
        currentitem: {},
79 
        btnIsClicked: true,
80 
        dialogSceneData: {},
81 
        dialogData: {},
82 
        currentType: 3,
83 
        itemWidth: null,
84 
        sceneList: [{
85 
            sceneName: "大门",
86 
            id: "1",
87 
            parentId: "1",
88 
            displayType: "4",
89 
          },
90 
          {
91 
            sceneName: "值班室",
92 
            id: "2",
93 
            parentId: "1",
94 
            displayType: "3",
95 
          },
96 
        ],
97 
        areaMonitorList: [{
98 
            title: "摄像头001",
99 
            cameraId: "001",
100 
            areaMonitorId: "001",
101 
            sceneId: "1",
102 
            sortOrder: 0,
103 
            imgsrc: "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
104 
          },
105 
          {
106 
            title: "摄像头002",
107 
            cameraId: "002",
108 
            areaMonitorId: "002",
109 
            sortOrder: 1,
110 
            imgsrc: "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
111 
          },
112 
          {
113 
            title: "摄像头003",
114 
            cameraId: "003",
115 
            areaMonitorId: "003",
116 
            sortOrder: 2,
117 
            imgsrc: "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
118 
          },
119 
          {
120 
            title: "摄像头004",
121 
            cameraId: "004",
122 
            areaMonitorId: "004",
123 
            sortOrder: 3,
124 
            imgsrc: "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
125 
          },
126 
          {
127 
            title: "摄像头005",
128 
            cameraId: "005",
129 
            areaMonitorId: "005",
130 
            sortOrder: 4,
131 
            imgsrc: "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
132 
          },
133 
          {
134 
            title: "摄像头006",
135 
            cameraId: "006",
136 
            areaMonitorId: "006",
137 
            sortOrder: 5,
138 
            imgsrc: "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
139 
          },
140 
          {
141 
            title: "摄像头007",
142 
            cameraId: "007",
143 
            areaMonitorId: "007",
144 
            sortOrder: 6,
145 
            imgsrc: "https://pics4.baidu.com/feed/b17eca8065380cd7343d6b5ebb93033358828145.jpeg?token=25a11140fcaf2cdf44307a26985a6e26",
146 
          },
147 
        ],
148 
      };
149 
    },
150 
    computed: {
151 
      gridWidth: function () {
152 
        return this.itemWidth - 20 + "px";
153 
      },
154 
      gridHeight: function () {
155 
        return this.itemWidth * 0.9 - 20 - 6 - 32 + "px";
156 
      },
157 
      viewDataList: function () {
158 
        let tempDataList = [];
159 
        for (
160 
          let i = 0; i < Math.ceil(this.areaMonitorList.length / this.currentType); i++
161 
        ) {
162 
          // 使用slice（start，end]进行截取,这个截取公式，可以自行研究
163 
          tempDataList[i] = this.areaMonitorList.slice(
164 
            i * this.currentType,
165 
            (i + 1) * this.currentType
166 
          );
167 
        }
168 
        return tempDataList;
169 
      },
170 
    },
171 
    mounted() {
172 
      let dom = this.$refs.box;
173 
      this.itemWidth = dom.clientWidth / this.currentType - 25;
174 
    },
175 
    methods: {
176 
      handleSceneEdit(item) {
177 
        alert(item);
178 
        event.stopPropagation();
179 
      },
180 
      btnOnClick(item) {
181 
        this.dialogSceneData = item;
182 
      },
183 
      btnAddClick() {
184 
        this.dialogSceneData = {
185 
          sceneName: null,
186 
          id: null,
187 
          parentId: this.currentWindPlaceValue,
188 
          displayType: null,
189 
        };
190 
      },
191 
      handleEdit(item) {
192 
        this.dialogData = Object.assign({}, item);
193 
        console.log(item.title);
194 
      },
195 
      handleCreate() {
196 
        this.dialogData = {
197 
          title: null,
198 
          cameraId: null,
199 
          areaMonitorId: null,
200 
          sortOrder: 5,
201 
          imgsrc: null,
202 
        };
203 
      },
204 
      handleDeleted(index) {
205 
        this.areaMonitorList.splice(index, 1);
206 
      },
207 
      datadragEnd(evt) {
208 
        console.log("拖动前的索引 :" + this.areaMonitorList[evt.oldIndex].title);
209 
        console.log("拖动后的索引 :" + this.areaMonitorList[evt.newIndex].title);
210 
      },
211 
      handleCameraSubmit(data) {
212 
        if (this.dialogData.areaMonitorId != null) {
213 
          const target = this.areaMonitorList.find(
214 
            (item) => item.areaMonitorId === this.dialogData.areaMonitorId
215 
          );
216 
          Object.assign(target, data);
217 
        } else {
218 
          this.areaMonitorList.unshift(data);
219 
        }
220 
      },
221 
    },
222 
  };
223 
</script>
224
225 
<style lang="scss">
226 
  .ico {
227 
    width: 14px;
228 
    height: 14px;
229 
    line-height: 14px !important;
230 
    margin: 2px;
231 
  }
232
233 
  .table-pager {
234 
    justify-content: flex-end;
235 
    float: right;
236 
  }
237 
</style>

+ 50 - 1
security-protection-platform/src/modules/system/monitor/index.vue
View File 

@ -1,9 +1,58 @@
1 1 
<template>
2 
  <div />
2 
<div class="app-monitor">
3 
    <t-tabs :animated="false" class="sys-monitor__tabs">
4 
      <t-tab-panel label="首页" panel-id="tab-1">
5 
        <home-page-settings class="sys-attendance__page" />
6
7 
      </t-tab-panel>
8 
      <t-tab-panel label="视频监控" panel-id="tab-2">
9 
        <video-monitor class="sys-attendance__page" />
10 
      </t-tab-panel>
11 
    </t-tabs>
12 
  </div>
3 13 
</template>
4 14
5 15 
<script>
16 
import HomePageSettings from './HomePageSettings/index'
17 
import VideoMonitor from './VideoMonitor/index'
18 
// import sysapi from '@/api/system'
19
6 20 
export default {
21 
  components: { HomePageSettings, VideoMonitor },
22 
  data() {
23 
    return {
24
25 
    }
26 
  },
27 
  mounted() {
28
29 
  },
30 
  methods: {
7 31
32 
  }
8 33 
}
9 34 
</script>
35
36 
<style lang="scss">
37 
.app-monitor{
38 
   padding: 0 24px;
39
40 
}
41 
.sys-monitor__tabs {
42 
  overflow: visible;
43 
 .tabs-tab {
44 
    width: 124px;
45 
    text-align:center;
46 
}
47 
  .tabs-panel {
48 
    &.active {
49 
      display: block;
50 
    }
51 
    overflow: visible;
52 
    display: none;
53 
  }
54 
}
55 
.sys-attendance__page {
56 
  padding: 24px 0;
57 
}
58 
</style>