front-end/src/views/modules/monitoring/camera.vue

<template>
  <div class="camera">
    <template v-if="!viewState">
      <div class="conditions-div">
        <el-form :model="formModel" :inline="true">
          <el-form-item label="设备名称">
            <el-input v-model="formModel.cameraName" placeholder="设备名称" clearable></el-input>
          </el-form-item>
          <el-form-item v-if="list" label="设备区域">
            <el-cascader
              :options="areaOptions"
              v-model="formModel.cameraRegion"
              clearable
              :props="{ checkStrictly: true }"
              style="width:350px"
            ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="list" @click="searchClick()">搜索</el-button>
            <el-button type="primary" v-if="!list" @click="searchClicks()">搜索</el-button>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button type="primary" v-if="!list" @click="videoMap">数据列表展示</el-button>
            <!-- <el-button type="primary" v-if="list" @click="videoMap">返回地图</el-button> -->
            <el-button type="primary" @click="addOrUpdateClick('add')">新增摄像头</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="list">
        <el-table :data="cameraList">
          <el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cameraRegionFirstlevelBackUp" label="设备区域" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" show-overflow-tooltip width="300">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                size="mini"
                @click="addOrUpdateClick('update',scope.row)"
              >编辑</el-button>
              <el-button type="primary" plain size="mini" @click="deleteClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageObj.pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </template>
    <!-- 查看 -->
    <template v-else>
      <cameraView ref="viewRef" @refreshViewClick="refreshViewClick"></cameraView>
    </template>
    <!-- 新建人脸库 -->
    <cameraAddUpdate ref="addUpdateFaceRef" @refreshClick="refreshClick"></cameraAddUpdate>
    <!-- 摄像头分布图 -->
    <div v-if="!list">
      <baidu-map
        class="map"
        :scroll-wheel-zoom="true"
        :double-click-zoom="false"
        @zoomend="mouseEvent"
        :center="{lng: 103.943382, lat: 30.750594 }"
        :zoom="zoom">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-marker
          :icon="iconUrl"
          v-for="(item,key ) of this.mapList"
          :key="key"
          :position="{'lng':item.cameraLongitude,'lat':item.cameraLatitude}"
          @rightclick="rightmons(item.idFaceCamera)"
          :dragging="false"
        >
          <bm-label
            :massClear="false"
            @dblclick="deletePoint(item)"
            v-if="lableOpen"
            :content="'<div style=display:'+item.displayCss+ '><div >名称:' + item.cameraName+'</div>'+ '<div>位置:' + item.cameraRegionFirstlevelBackUp+'</div>'+'<div>坐标:' + item.cameraLongitude+','+ item.cameraLatitude+'</div></div >'"
            :labelStyle="{backgroundColor :'0.05',border :'0',color: 'blue', fontSize : '14px' ,padding:'10px'}"
            :offset="{width: -100, height: -90}"
          />
        </bm-marker>
      </baidu-map>
    </div>
    <!-- 上传 -->
    <!-- <cameraUpload ref="uploadFaceRef" @refreshUploadClick="refreshUploadClick"></cameraUpload> -->
  </div>
</template>

<script>
import cameraAddUpdate from "./camera-add-update";
import cameraUpload from "./camera-upload";
import cameraView from "./camera-view";
export default {
  components: {
    cameraAddUpdate,
    cameraView,
    cameraUpload
  },
  data() {
    return {
      lableOpen: false,
      zoom: 14,
      iconUrl: {
        url: require("../../../assets/img/video.png"),
        size: { width: 30, height: 30 }
      },
      list: true,
      mapList: [],
      position: { lng: 103.931057, lat: 30.755467 },
      mapOpen: false,
      // camera 和 camreaView切换，camreaView暂时不用
      viewState: false,
      // 表单查询
      formModel: {
        cameraName: "",
        cameraRegion: [],
        cameratLocationtypeId: ""
      },
      // table 列表
      cameraList: [],
      // 分页
      total: 0,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        note: {}
      },
      // 设备区域
      areaOptions: [],
      areaProps: {
        multiple: true
      }
    };
  },
  methods: {
    deletePoint(e) {
      let arr = [];
      this.mapList.forEach(item => {
        if (e.idFaceCamera == item.idFaceCamera) {
          item.displayCss = "none";
        }
        arr.push(item);
      });
      this.mapList = arr;
    },
    //鼠标缩放触发函数
    mouseEvent(type, target) {
      //14  大于 14 显示  小于14 隐藏
      if (type.currentTarget.Oa > 14) {
        this.lableOpen = true;
      } else {
        this.lableOpen = false;
      }
    },
    rightmons(type, target) {
      this.$nextTick(() => {
        this.$refs.addUpdateFaceRef.init("update", type);
      });
    },
    //摄像头分布图
    videoMap() {
      this.list = !this.list;
    },
    // el-pagination
    handleSizeChange: function(pageSize) {
      this.pageObj.pageSize = pageSize;
      this.handleCurrentChange();
    },
    handleCurrentChange: function(pageNo) {
      this.pageObj.pageNo = pageNo;
      this.pageObj.note = {
        ...this.pageObj.note,
        ...this.formModel
      };
      if (this.pageObj.note.cameraRegion.length === 0) {
        this.pageObj.note.cameraRegion = "";
      } else {
        this.pageObj.note.cameraRegion = String(
          this.pageObj.note.cameraRegion[
            this.pageObj.note.cameraRegion.length - 1
          ]
        );
      }
      this.commonSeach();
    },
    // 新增/修改
    addOrUpdateClick(param, row = {}) {
      console.log(this.$refs.reference);

      this.$nextTick(() => {
        this.$refs.addUpdateFaceRef.init(param, row.idFaceCamera);
      });
    },
    // 新增/修改回调
    refreshClick(param) {
      param === "add" ? (this.pageObj.pageNo = 1) : this.pageObj.pageNo;
      this.pageObj.note = {
        ...this.pageObj.note,
        ...this.formModel
      };
      if (this.pageObj.note.cameraName != "") {
        this.pageObj.pageNo = 1;
      } else if (this.pageObj.note.cameratLocationtypeId != "") {
        this.pageObj.pageNo = 1;
      }
      if (this.pageObj.note.cameraRegion.length === 0) {
        this.pageObj.note.cameraRegion = "";
      } else {
        this.pageObj.note.cameraRegion = String(
          this.pageObj.note.cameraRegion[
            this.pageObj.note.cameraRegion.length - 1
          ]
        );
        this.pageObj.pageNo = 1;
      }
      this.commonSeach();
    },
    // 删除
    deleteClick(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.get(`/camera/delete/${row.idFaceCamera}`).then(res => {
            if (res.data.code === 0) {
              this.pageObj.note = { ...this.pageObj.note, ...this.formModel };
              if (this.pageObj.note.cameraName != "") {
                this.pageObj.pageNo = 1;
              } else if (this.pageObj.note.cameratLocationtypeId != "") {
                this.pageObj.pageNo = 1;
              }
              if (this.pageObj.note.cameraRegion.length === 0) {
                this.pageObj.note.cameraRegion = "";
              } else {
                this.pageObj.note.cameraRegion = String(
                  this.pageObj.note.cameraRegion[
                    this.pageObj.note.cameraRegion.length - 1
                  ]
                );
                this.pageObj.pageNo = 1;
              }
              if (this.cameraList.length === 1 && this.pageObj.pageNo > 1) {
                this.pageObj.pageNo = this.pageObj.pageNo - 1;
              }
              this.commonSeach();
              this.$message.success("删除成功");
            } else {
              this.$message.warning(res.data.message);
            }
          });
        })
        .catch(err => {
          this.$message.info("已取消删除");
          console.log(err);
        });
    },
    // 公共查询
    commonSeach(pageObj = this.pageObj) {
      this.$http.post("/camera/getList", pageObj).then(res => {
        if (res.data.code === 0) {
          this.cameraList = res.data.data.records;
          this.total = Number(res.data.data.total);
        } else if (res.data.code == 60001) {
          this.$message.warning(res.data.message);
        } else {
          console.log(res);
        }
      });
      this.$http.get("/camera/getAllList").then(res => {
        this.mapList = res.data.data;
        this.mapList.forEach(item => {
          item.displayCss = "block";
        });
      });
    }
  },
  created() {
    // 公共查询
    this.commonSeach();
    // 调用树形结构数据
    this.$http.get("/camera/getRegion").then(res => {
      if (res.data.code === 0) {
        this.areaOptions = res.data.data;
      }
    });
  }
};
</script>

<style scoped>
.map {
  height: 750px;
}
.conditions-div {
  background-color: #fff;
  border-radius: 2px;
}
/* 
 去除百度地图版权
 去除右上角[地图、卫星、三维]控件
 去除百度地图右上角平移缩放控件的市县区文字
  */
.map >>> .anchorBL,
.map >>> .anchorTR,
.map >>> .BMap_zlHolder {
  display: none;
  visibility: hidden;
}
.conditions-div >>> .el-form-item {
  margin: 10px;
}
</style>