1、人员统计图

src/api/smartapplication/smartvideomonitor.js

@@ -0,0 +1,60 @@
+import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+  return request({
+    url: '/api/smartmonitor/smartvideomonitor/list',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    }
+  })
+}
+
+export const getDetail = (id) => {
+  return request({
+    url: '/api/smartmonitor/smartvideomonitor/detail',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+
+export const remove = (ids) => {
+  return request({
+    url: '/api/smartmonitor/smartvideomonitor/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return request({
+    url: '/api/smartmonitor/smartvideomonitor/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return request({
+    url: '/api/smartmonitor/smartvideomonitor/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const personStat = (serialNums) => {
+  return request({
+    url: '/api/smartmonitor/smartvideomonitor/personStat',
+    method: 'post',
+    params: {
+      serialNums,
+    }
+  })
+}
+

src/api/smartapplication/smartvideomonitorrecord.js

@@ -0,0 +1,50 @@
+import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+  return request({
+    url: '/api/smartmonitorrecord/smartvideomonitorrecord/list',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    }
+  })
+}
+
+export const getDetail = (id) => {
+  return request({
+    url: '/api/smartmonitorrecord/smartvideomonitorrecord/detail',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+
+export const remove = (ids) => {
+  return request({
+    url: '/api/smartmonitorrecord/smartvideomonitorrecord/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return request({
+    url: '/api/smartmonitorrecord/smartvideomonitorrecord/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return request({
+    url: '/api/smartmonitorrecord/smartvideomonitorrecord/submit',
+    method: 'post',
+    data: row
+  })
+}
+

src/api/smartapplication/smartvideomonitorstat.js

@@ -0,0 +1,60 @@
+import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+  return request({
+    url: '/api/smartmonitorstat/smartvideomonitorstat/list',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    }
+  })
+}
+
+export const getDetail = (id) => {
+  return request({
+    url: '/api/smartmonitorstat/smartvideomonitorstat/detail',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+
+export const remove = (ids) => {
+  return request({
+    url: '/api/smartmonitorstat/smartvideomonitorstat/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return request({
+    url: '/api/smartmonitorstat/smartvideomonitorstat/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return request({
+    url: '/api/smartmonitorstat/smartvideomonitorstat/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const personInOutStat = (params) => {
+  return request({
+    url: '/api/smartmonitorstat/smartvideomonitorstat/personInOutStat',
+    method: 'get',
+    params: {
+      ...params
+    }
+  })
+}
+

src/views/smartapplication/smartvideomonitor.vue

@@ -0,0 +1,359 @@
+<template>
+  <basic-container>
+    <avue-crud :option="option"
+               :table-loading="loading"
+               :data="data"
+               :page="page"
+               :permission="permissionList"
+               :before-open="beforeOpen"
+               v-model="form"
+               ref="crud"
+               @row-update="rowUpdate"
+               @row-save="rowSave"
+               @row-del="rowDel"
+               @search-change="searchChange"
+               @search-reset="searchReset"
+               @selection-change="selectionChange"
+               @current-change="currentChange"
+               @size-change="sizeChange"
+               @refresh-change="refreshChange"
+               @on-load="onLoad">
+      <template slot="menuLeft">
+        <el-button type="danger"
+                   size="small"
+                   icon="el-icon-delete"
+                   plain
+                   v-if="permission.smartvideomonitor_delete"
+                   @click="handleDelete">删 除
+        </el-button>
+      </template>
+      <template slot="menu" slot-scope="scope">
+        <el-button icon="el-icon-setting" size="small" type="text">
+          <el-dropdown>
+            <span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right"></i></span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item divided v-if="scope.row.serialNum!=null" icon="el-icon-view" type="text" @click.native="viewPersonRecord(scope.row)">人员出入记录</el-dropdown-item>
+              <el-dropdown-item divided v-if="scope.row.serialNum!=null" icon="el-icon-view" type="text" @click.native="viewPersonState(scope.row)">人员出入统计</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-button>
+      </template>
+      <template slot="online" slot-scope="scope">
+        <el-tag v-if="scope.row.online == 1" type="success">在线</el-tag>
+        <el-tag v-if="scope.row.online == 0" type="info">离线</el-tag>
+      </template>
+    </avue-crud>
+    <el-dialog center :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="personRecordVisible" title="人员出入记录"
+                width="80%">
+      <smartvideomonitorrecord :serialNum="serialNum" ref="personRecordRef"></smartvideomonitorrecord>
+    </el-dialog>
+    <el-dialog :modal-append-to-body="false" :visible.sync="personStatVisible" title="人员出入统计" width="80%">
+      <smartvideomonitorstat :serialNum="serialNum" ref="personStatRef"></smartvideomonitorstat>
+    </el-dialog>
+  </basic-container>
+</template>
+
+<script>
+  import {getList, getDetail, add, update, remove, personStat} from "@/api/smartapplication/smartvideomonitor";
+  import smartvideomonitorrecord from "../smartapplication/smartvideomonitorrecord.vue";
+  import smartvideomonitorstat from "../smartapplication/smartvideomonitorstat.vue";
+  import {mapGetters} from "vuex";
+  import error from "../monitor/log/error";
+  import customAvueMap from "../../components/residential/customAvueMap";
+
+  export default {
+    components:{
+      smartvideomonitorrecord,
+      smartvideomonitorstat
+    },
+    data() {
+      return {
+        form: {},
+        query: {},
+        loading: true,
+        personRecordVisible: false,
+        personStatVisible: false,
+        serialNum: null,
+        page: {
+          pageSize: 10,
+          currentPage: 1,
+          total: 0
+        },
+        selectionList: [],
+        option: {
+          menuWidth: 280,
+          height:'auto',
+          calcHeight: 30,
+          tip: false,
+          searchShow: true,
+          searchMenuSpan: 6,
+          border: true,
+          index: true,
+          viewBtn: true,
+          selection: true,
+          dialogClickModal: false,
+          column: [
+            {
+              label: "设备序列号",
+              prop: "serialNum",
+              labelWidth: 100,
+              rules: [{
+                required: true,
+                message: "请输入设备序列号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "设备名称",
+              prop: "name",
+              rules: [{
+                required: true,
+                message: "请输入设备名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "所属园区",
+              prop: "agencyId",
+              type: "select",
+              dicUrl: "/api/agency/agency/select?size=100&agencyName={{key}}",
+              filterable: true,
+              cascaderItem: ["residentialId"],
+              props: {
+                label: "agencyName",
+                value: "id"
+              },
+              dicFormatter: (res) => {
+                return res.data;
+              },
+              rules: [{
+                required: true,
+                message: "请输入所属园区",
+                trigger: "blur"
+              }],
+              hide: true,
+              viewDisplay: false
+            },
+            {
+              label: "所属区域",
+              prop: "residentialId",
+              type: "select",
+              dicUrl: "/api/community/residential/list?agencyId={{key}}&size=100",
+              dicFormatter: (res)=>{
+                return res.data.records;
+              },
+              props: {
+                label: "name",
+                value: "id"
+              },
+              search: true,
+              rules: [{
+                required: true,
+                message: "请输入所属区域",
+                trigger: "blur"
+              }],
+              hide: true,
+              viewDisplay: false
+            },
+            {
+              label: "所属园区",
+              prop: "agencyName",
+              editDisplay: false,
+              addDisplay: false
+            },
+            {
+              label: "所属区域",
+              prop: "residentialName",
+              editDisplay: false,
+              addDisplay: false
+            },
+            {
+              label: "安装地址",
+              prop: "address",
+              rules: [{
+                required: true,
+                message: "请输入安装地址",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "在线状态",
+              prop: "online",
+              editDisplay: false,
+              addDisplay: false,
+              slot: true
+            },
+            {
+              label: "最近心跳时间",
+              prop: "heartbeat",
+              editDisplay: false,
+              addDisplay: false
+            },
+          ]
+        },
+        data: []
+      };
+    },
+    computed: {
+      ...mapGetters(["permission"]),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permission.smartvideomonitor_add, false),
+          viewBtn: this.vaildData(this.permission.smartvideomonitor_view, false),
+          delBtn: this.vaildData(this.permission.smartvideomonitor_delete, false),
+          editBtn: this.vaildData(this.permission.smartvideomonitor_edit, false)
+        };
+      },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
+    },
+    methods: {
+      viewPersonState(row, params={}){
+        this.serialNum = row.serialNum;
+        this.personStatVisible = true;
+        this.$nextTick(()=>{
+          this.$refs.personStatRef.init()
+        })
+      },
+      viewPersonRecord(row,params={}){
+        this.serialNum = row.serialNum;
+        this.personRecordVisible = true;
+        this.$nextTick(()=>{
+          this.$refs.personRecordRef.init();
+        })
+      },
+      // viewPersonStat(serialNum){
+      //   personStat(serialNum).then(() => {
+      //     this.$message({
+      //       type: "success",
+      //       message: "操作成功!"
+      //     });
+      //     done();
+      //   }, error => {
+      //     window.console.log(error);
+      //   });
+      // },
+      rowSave(row, done, loading) {
+        row.agencyName = row.$agencyId;
+        row.residentialName = row.$residentialId;
+        add(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          window.console.log(error);
+        });
+      },
+      rowUpdate(row, index, done, loading) {
+        row.agencyName = row.$agencyId;
+        row.residentialName = row.$residentialId;
+        update(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          console.log(error);
+        });
+      },
+      rowDel(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(row.id);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      handleDelete() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.ids);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crud.toggleSelection();
+          });
+      },
+      beforeOpen(done, type) {
+        if (["edit", "view"].includes(type)) {
+          getDetail(this.form.id).then(res => {
+            this.form = res.data.data;
+          });
+        }
+        done();
+      },
+      searchReset() {
+        this.query = {};
+        this.onLoad(this.page);
+      },
+      searchChange(params, done) {
+        this.query = params;
+        this.page.currentPage = 1;
+        this.onLoad(this.page, params);
+        done();
+      },
+      selectionChange(list) {
+        this.selectionList = list;
+      },
+      selectionClear() {
+        this.selectionList = [];
+        this.$refs.crud.toggleSelection();
+      },
+      currentChange(currentPage){
+        this.page.currentPage = currentPage;
+      },
+      sizeChange(pageSize){
+        this.page.pageSize = pageSize;
+      },
+      refreshChange() {
+        this.onLoad(this.page, this.query);
+      },
+      onLoad(page, params = {}) {
+        this.loading = true;
+        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+          const data = res.data.data;
+          this.page.total = data.total;
+          this.data = data.records;
+          this.loading = false;
+          this.selectionClear();
+        });
+      }
+    }
+  };
+</script>
+
+<style>
+</style>

src/views/smartapplication/smartvideomonitorrecord.vue

@@ -0,0 +1,271 @@
+<template>
+  <basic-container>
+    <avue-crud :option="option"
+               :table-loading="loading"
+               :data="data"
+               :page="page"
+               :permission="permissionList"
+               :before-open="beforeOpen"
+               v-model="form"
+               ref="crud"
+               @row-update="rowUpdate"
+               @row-save="rowSave"
+               @row-del="rowDel"
+               @search-change="searchChange"
+               @search-reset="searchReset"
+               @selection-change="selectionChange"
+               @current-change="currentChange"
+               @size-change="sizeChange"
+               @refresh-change="refreshChange"
+               @on-load="onLoad">
+      <template slot="menuLeft">
+        <el-button type="danger"
+                   size="small"
+                   icon="el-icon-delete"
+                   plain
+                   v-if="permission.smartvideomonitorrecord_delete"
+                   @click="handleDelete">删 除
+        </el-button>
+      </template>
+      <template slot="img" slot-scope="scope">
+        <img style="width: 70px;height: 40px;" :src="scope.row.img" @click="openView(scope.row.img)">
+      </template>
+      <template slot="imgForm" slot-scope="scope">
+        <img style="width: 70px;height: 40px;" :src="scope.row.img" @click="openView(scope.row.img)">
+      </template>
+    </avue-crud>
+  </basic-container>
+</template>
+
+<script>
+  import {getList, getDetail, add, update, remove} from "@/api/smartapplication/smartvideomonitorrecord";
+  import {mapGetters} from "vuex";
+
+  export default {
+    props:{
+      serialNum: null,
+    },
+    data() {
+      return {
+        form: {},
+        query: {},
+        loading: true,
+        page: {
+          pageSize: 10,
+          currentPage: 1,
+          total: 0
+        },
+        selectionList: [],
+        option: {
+          height:'auto',
+          calcHeight: 30,
+          tip: false,
+          searchShow: true,
+          searchMenuSpan: 6,
+          border: true,
+          index: true,
+          menu: false,
+          viewBtn: true,
+          selection: true,
+          dialogClickModal: false,
+          column: [
+            {
+              label: "设备序列号",
+              prop: "serialNum",
+              rules: [{
+                required: true,
+                message: "请输入设备序列号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "进入人数",
+              prop: "enterCnt",
+              rules: [{
+                required: true,
+                message: "请输入进入人数",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "离开人数",
+              prop: "leaveCnt",
+              rules: [{
+                required: true,
+                message: "请输入离开人数",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "抓拍图",
+              prop: "img",
+              slot: true,
+              formslot: true,
+              rules: [{
+                required: false,
+                message: "请输入比对图",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "创建时间",
+              prop: "createTime",
+              type: "datetime",
+              valueFormat: "yyyy-MM-dd HH:mm:ss",
+              display: false
+            },
+          ]
+        },
+        data: []
+      };
+    },
+    computed: {
+      ...mapGetters(["permission"]),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permission.smartvideomonitorrecord_add, false),
+          viewBtn: this.vaildData(this.permission.smartvideomonitorrecord_view, false),
+          delBtn: this.vaildData(this.permission.smartvideomonitorrecord_delete, false),
+          editBtn: this.vaildData(this.permission.smartvideomonitorrecord_edit, false)
+        };
+      },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
+    },
+    methods: {
+      openView(url) {
+        if(url){
+          var data = [{
+            thumbUrl: url,
+            url: url
+          }];
+          this.$ImagePreview(data, 0);
+        }
+      },
+      init(){
+        // this.query.deviceId = this.imei;
+        this.page.currentPage =1;
+        this.page.pageSize =10;
+        this.onLoad(this.page)
+      },
+      rowSave(row, done, loading) {
+        add(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          window.console.log(error);
+        });
+      },
+      rowUpdate(row, index, done, loading) {
+        update(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          console.log(error);
+        });
+      },
+      rowDel(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(row.id);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      handleDelete() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.ids);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crud.toggleSelection();
+          });
+      },
+      beforeOpen(done, type) {
+        if (["edit", "view"].includes(type)) {
+          getDetail(this.form.id).then(res => {
+            this.form = res.data.data;
+          });
+        }
+        done();
+      },
+      searchReset() {
+        this.query = {};
+        this.onLoad(this.page);
+      },
+      searchChange(params, done) {
+        this.query = params;
+        this.page.currentPage = 1;
+        this.onLoad(this.page, params);
+        done();
+      },
+      selectionChange(list) {
+        this.selectionList = list;
+      },
+      selectionClear() {
+        this.selectionList = [];
+        this.$refs.crud.toggleSelection();
+      },
+      currentChange(currentPage){
+        this.page.currentPage = currentPage;
+      },
+      sizeChange(pageSize){
+        this.page.pageSize = pageSize;
+      },
+      refreshChange() {
+        this.onLoad(this.page, this.query);
+      },
+      onLoad(page, params = {}) {
+        this.loading = true;
+        this.query.serialNum = this.serialNum;
+        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+          const data = res.data.data;
+          this.page.total = data.total;
+          this.data = data.records;
+          this.loading = false;
+          this.selectionClear();
+        });
+      }
+    }
+  };
+</script>
+
+<style>
+</style>

src/views/smartapplication/smartvideomonitorstat.vue

@@ -0,0 +1,352 @@
+<template>
+  <basic-container>
+    <!--<avue-crud :option="option"
+               :table-loading="loading"
+               :data="data"
+               :page="page"
+               :permission="permissionList"
+               :before-open="beforeOpen"
+               v-model="form"
+               ref="crud"
+               @row-update="rowUpdate"
+               @row-save="rowSave"
+               @row-del="rowDel"
+               @search-change="searchChange"
+               @search-reset="searchReset"
+               @selection-change="selectionChange"
+               @current-change="currentChange"
+               @size-change="sizeChange"
+               @refresh-change="refreshChange"
+               @on-load="onLoad">
+      <template slot="menuLeft">
+        <el-button type="danger"
+                   size="small"
+                   icon="el-icon-delete"
+                   plain
+                   v-if="permission.smartvideomonitorstat_delete"
+                   @click="handleDelete">删 除
+        </el-button>
+      </template>
+    </avue-crud>-->
+    <el-row>
+      <el-col span="4" :push="6">选择日期</el-col>
+      <el-col span="16" :push="4">
+        <el-date-picker size="mini" v-model="dateSelect" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
+        </el-date-picker>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="height: 600px;">
+      <el-col span="24">
+        <div ref="personStatChart" style="width:100%;height:500px"></div>
+      </el-col>
+    </el-row>
+  </basic-container>
+</template>
+
+<script>
+  import {getList, getDetail, add, update, remove, personInOutStat} from "@/api/smartapplication/smartvideomonitorstat";
+  import {mapGetters} from "vuex";
+  import {getRecordByTab} from "../../api/smartapplication/deviceheartbeat";
+
+  export default {
+    props:{
+      serialNum: null,
+    },
+    data() {
+      return {
+        form: {},
+        query: {},
+        loading: true,
+        page: {
+          pageSize: 10,
+          currentPage: 1,
+          total: 0
+        },
+        datetimeSelect: "",
+        selectionList: [],
+        option: {
+          menu: false,
+          height:'auto',
+          calcHeight: 30,
+          tip: false,
+          searchShow: true,
+          searchMenuSpan: 6,
+          border: true,
+          index: true,
+          viewBtn: true,
+          selection: true,
+          dialogClickModal: false,
+          column: [
+            {
+              label: "设备序列号",
+              prop: "serialNum",
+              rules: [{
+                required: true,
+                message: "请输入设备序列号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "进入人数",
+              prop: "enterCnt",
+              rules: [{
+                required: true,
+                message: "请输入进入人数",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "离开人数",
+              prop: "leaveCnt",
+              rules: [{
+                required: true,
+                message: "请输入离开人数",
+                trigger: "blur"
+              }]
+            },
+            // {
+            //   label: "总计人数",
+            //   prop: "totalCnt",
+            //   rules: [{
+            //     required: true,
+            //     message: "请输入总计人数",
+            //     trigger: "blur"
+            //   }]
+            // },
+            {
+              label: "统计日期",
+              prop: "statDate",
+              rules: [{
+                required: true,
+                message: "请输入统计日期",
+                trigger: "blur"
+              }]
+            },
+            // {
+            //   label: "机构路径",
+            //   prop: "orgPosition",
+            //   rules: [{
+            //     required: true,
+            //     message: "请输入机构路径",
+            //     trigger: "blur"
+            //   }]
+            // },
+          ]
+        },
+        personStatOption: {
+
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['进入数量', '离开数量']
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              dataView: {show: true, readOnly: false},
+              magicType: {show: true, type: ['line', 'bar']},
+              restore: {show: true},
+              saveAsImage: {show: true}
+            }
+          },
+          calculable: true,
+          xAxis: [
+            {
+              type: 'category',
+              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          series: [
+            {
+              name: '进入数量',
+              type: 'bar',
+              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+              markPoint: {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              }
+            },
+            {
+              name: '离开数量',
+              type: 'bar',
+              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+              markPoint: {
+                data: [
+                  {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
+                  {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              }
+            }
+          ]
+        },
+        data: []
+      };
+    },
+    computed: {
+      ...mapGetters(["permission"]),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permission.smartvideomonitorstat_add, false),
+          viewBtn: this.vaildData(this.permission.smartvideomonitorstat_view, false),
+          delBtn: this.vaildData(this.permission.smartvideomonitorstat_delete, false),
+          editBtn: this.vaildData(this.permission.smartvideomonitorstat_edit, false)
+        };
+      },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
+    },
+    methods: {
+      init(){
+        this.page.currentPage =1;
+        this.page.pageSize =10;
+        this.onLoad(this.page)
+      },
+      rowSave(row, done, loading) {
+        add(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          window.console.log(error);
+        });
+      },
+      rowUpdate(row, index, done, loading) {
+        update(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          console.log(error);
+        });
+      },
+      rowDel(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(row.id);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      handleDelete() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.ids);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crud.toggleSelection();
+          });
+      },
+      beforeOpen(done, type) {
+        if (["edit", "view"].includes(type)) {
+          getDetail(this.form.id).then(res => {
+            this.form = res.data.data;
+          });
+        }
+        done();
+      },
+      searchReset() {
+        this.query = {};
+        this.onLoad(this.page);
+      },
+      searchChange(params, done) {
+        this.query = params;
+        this.page.currentPage = 1;
+        this.onLoad(this.page, params);
+        done();
+      },
+      selectionChange(list) {
+        this.selectionList = list;
+      },
+      selectionClear() {
+        this.selectionList = [];
+        this.$refs.crud.toggleSelection();
+      },
+      currentChange(currentPage){
+        this.page.currentPage = currentPage;
+      },
+      sizeChange(pageSize){
+        this.page.pageSize = pageSize;
+      },
+      refreshChange() {
+        this.onLoad(this.page, this.query);
+      },
+      onLoad(page, params = {}) {
+        params.serialNum = this.serialNum;
+        personInOutStat(params).then(res =>{
+          const personStatChart = this.$echarts.init(this.$refs.personStatChart);
+          this.personStatOption.xAxis[0].data = res.data.data.dateList;
+          this.personStatOption.series[0].data = res.data.data.enterCtnList;
+          this.personStatOption.series[1].data = res.data.data.leaveCtnList;
+          const personStatOption = this.personStatOption;
+          personStatChart.setOption(personStatOption)
+
+          window.addEventListener("resize", function() {
+            personStatChart.resize();
+
+          });
+          this.$on('hook:destroyed', () => {
+            window.removeEventListener("resize", function() {
+              personStatChart.resize();
+            });
+          })
+        })
+      }
+    }
+  };
+</script>
+
+<style>
+</style>