国标配置条件修改,项目添加manifest,热力图更新,区域管理样式调整

hanbaoshan

2020-09-01 8a0e6f282569868275cf90ee33b0bf5fc4b30b2b

 src/pages/heatCamera/index/App.vue

@@ -2,134 +2,207 @@
  <div class="heatCamera">
    <div class="camera">
      <nav class="header-nav">
         
          <div class="toolbar">
            <el-date-picker @change="timeChange" v-model="timeRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" size="small"></el-date-picker>
              <el-button type="primary" size="small">查询</el-button>
          </div>
        <div class="toolbar">
          <el-radio-group v-model="dimension">
            <el-radio-button :label="1">热力图</el-radio-button>
            <el-radio-button :label="2">轨迹图</el-radio-button>
          </el-radio-group>
          <el-date-picker
            @change="timeChange"
            v-model="timeRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button type="primary" @click="postCameraData">查询</el-button>
        </div>
      </nav>
      

      <div class="img-area" ref="heatMap">
        <!-- <el-image src="/timg.jpg" fit="contain" ref="img"></el-image> -->
        <span class="dot" v-for="(item,index) in dots" :style="{top:item.y+'px',left: item.x+'px'}" :key="'d'+index"></span>
        <el-image :src="`${publicPath}images/login-net.png`" fit="contain" ref="img"></el-image>
      </div>
    </div>
  </div>
</template>
<script>
Date.prototype.Format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "H+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds() //毫秒 
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}
import Heatmap from 'heatmap.js';
import {getHeatCameraData} from '@/api/heatCamera'
import { getHeatCameraData } from '@/api/heatCamera'
export default {
  data(){
  data () {
    return {
      publicPath: process.env.BASE_URL,
      timeRange: [new Date(2020, 8, 20, 8), new Date(2020, 9, 20, 8)],
      dots: [],
      dimension: 1,
      timeRange: [new Date(2020, 7, 23, 8), new Date()],
      params: {
        cameraIds: ["c6fd8f31-248f-49fc-93e0-dedac889197b","c41a2f34-bd2e-41af-9bc0-51e6dcd03523"],
        startTime: '',
        endTime: '',
      }
        cameraIds: ["ba8c1624-55a7-4f20-9c54-01e56448aeb5"],
        startDate: new Date(2020, 7, 23, 8).Format("yyyy-MM-dd HH:mm:ss"),
        endDate: new Date().Format("yyyy-MM-dd HH:mm:ss"),
        //thresholdTime: 100,
      },
      heatmapInstance: null,
    }
  },
  mounted(){
  mounted () {
    console.log(Heatmap.create)
    setTimeout(()=>{
      this.mockAsync()
    },2000);
   
  },
  methods:{
    timeChange(val){
      console.log(val);
      this.params.startTime = val[0];
      this.params.endTime = val[1];
      this.renderHeatMap(this.params)
  methods: {
    timeChange(val) {
      this.params.startDate = val[0];
      this.params.endDate = val[1];
    },
    mockAsync(){
      var config = {
    setHeatmapData(sources) {
      if (sources === null || sources.length < 1) {
        return
      }
      var heatmapConfig = {
        container: document.querySelector('.img-area'),
        radius: 10,
        maxOpacity: .75,
        radius: 20,
        maxOpacity: .55,
        minOpacity: 0,
        blur: .75,
        blur: .55,
        gradient: {
          '.5': 'blue',
          '.8': 'red',
          '0.95': 'white',
          '0.6': 'yellow',
          '0.5': 'green'
          '.8': 'yellow',
          '0.95': 'rgba(251, 40, 40, 0.3)',
          '0.6': 'rgba(42, 251, 199, 0.3)',
          '0.5': 'rgba(2, 119, 251, 0.3)'
        }
        
      };
      var data = {
        max: 700,
      var points = {
        max: 300,
        min: 0,
        data: []
      }
      for (var i = 10; i < 700; i++) {
        var dataPoint = {
          x: Math.floor(Math.random() * i),
          y: Math.floor(Math.random() * i),
          value: Math.floor(Math.random() * i)
        };
        var dataCenter = {
          x: i,
          y: i,
          value: 30 + i
        }
        data.data.push(dataPoint, dataCenter)
      if (this.heatmapInstance === null) {
        this.heatmapInstance = Heatmap.create(heatmapConfig);
      } else {
        this.heatmapInstance.setData(points);
      }
      //var heatmapInstance = h337.create(config);
      var heatmapInstance = Heatmap.create(config);
      heatmapInstance.setData(data);
      sources.forEach(ele => {
        points.data.push(this.formatPoint(ele))
        if(this.dimension == 2){
          this.dots.push(this.formatPoint(ele))
        }
      });

      //热力图
      if(this.dimension == 1){
        this.heatmapInstance.setData(points);
      }
    },
    renderHeatMap(params){
      getHeatCameraData(params).then(res=>{
        debugger
      })
    postCameraData() {
      this.dots = [];
      var xhr = new XMLHttpRequest();
      xhr.open('post', '/data/api-v/es/getPersonData');
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.setRequestHeader('Authorization', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjQ3NDUwMjU5MjMsInVzZXIiOiJ7XCJpZFwiOlwiZTZjY2QzNmQtNGYxNi00NmZjLTg4ZDUtMDczNjU4NjZkMjA1XCIsXCJwZXJtaXNzaW9uc1wiOltcInByb2R1Y3RNYW5nZTpwdWJsaXNoXCIsXCJjb2RlTWFuZ2U6dmlld1wiLFwiZGV2aWNlTWFuYWdlOmFkZFwiLFwiYWRtaW5NYW5hZ2VcIixcIm9yZGVyTWFuZ2VcIixcImRldmljZU1hbmFnZTp2aWV3XCIsXCJwcm9kdWN0TWFuZ2U6YWRkXCIsXCJhZG1pbk1hbmFnZTp2aWV3XCIsXCJjb2RlTWFuZ2U6YWRkXCIsXCJwcm9kdWN0TWFuZ2U6b2ZmU2FsZVwiLFwib3JkZXJNYW5nZTpjYW5jZWxcIixcInByb2R1Y3RDZW50ZXI6ZG93bmxvYWRcIixcInByb2R1Y3RDZW50ZXI6YnV5XCIsXCJwcm9kdWN0TWFuZ2U6dmlld1wiLFwiYXBpXCIsXCJob21lXCIsXCJvcmRlck1hbmdlOnBheVwiLFwiYWRtaW5NYW5hZ2U6YWRkXCIsXCJvcmRlck1hbmdlOmRvd25sb2FkXCIsXCJwcm9kdWN0Q2VudGVyXCIsXCJkZXZpY2VNYW5hZ2U6dW5iaW5kXCIsXCJvcmRlck1hbmdlOnZpZXdcIixcImFkbWluTWFuYWdlOmVkaXRcIixcImRldmljZU1hbmFnZVwiLFwidmlwTWFuYWdlOmFkZFwiLFwidmlwTWFuYWdlOnZpZXdcIixcInByb2R1Y3RDZW50ZXI6dmlld1wiLFwidmlwTWFuYWdlOmVkaXRcIixcInZpcE1hbmFnZVwiLFwicHJvZHVjdE1hbmdlOmVkaXRcIixcImNvZGVNYW5nZVwiLFwicHJvZHVjdE1hbmdlXCJdLFwidXNlcm5hbWVcIjpcImJhc2ljXCJ9In0.vwjAFkWuEyadRLvIOGK8LFE3MjpY3SQ7j6AlTXnQDG8');
      xhr.send(JSON.stringify(this.params));
      xhr.onload = function () {
        if (xhr.readyState == 4) {
          var response = JSON.parse(xhr.responseText)
          if (response && response.success) {
            console.log(response.data.result)
            debugger
            this.setHeatmapData(response.data.result)
          }
        }
        this.mockAsync
      }.bind(this)
    },
    formatPoint(data) {
      var converters = {
        "ba8c1624-55a7-4f20-9c54-01e56448aeb5": {
          "scale": 1,
          "offsetX": 0,
          "offsetY": 0
        }
      }

      var cv = converters[data.cameraId]

      var topLeft = data.personRect.topLeft
      var bottomRight = data.personRect.bottomRight

      // 中心点
      var dataPoint = {
        x: ((topLeft.x + bottomRight.x) * cv.scale + cv.offsetX * 2) / 2,
        y: ((topLeft.y + bottomRight.y) * cv.scale + cv.offsetX * 2) / 2,
        // value: data.stayTime
        value: 0
      };

      return dataPoint
    }

  }
}
</script>
<style lang="scss">
  .heatCamera{
    width: 100%;
    height: 100%;
    background: #e9ebf2;
    .header-nav{
      height: 60px;
      min-width: 1200px;
      background-image: linear-gradient(-180deg, #ffffff 13%, #e9ebf2 100%);
    }
    .toolbar{
      width: 500px;
      height: 60px;
      //background: rgba(0,0,0,.3);
      position: absolute;
      right: 60px;
      top: 20px;
      text-align: center;
      line-height: 60px;
      z-index: 10;
      .el-date-editor{
        vertical-align: middle;
        border-radius: 4px 0 0 4px;
      }
      .el-button{
        vertical-align: middle;
        margin-left: 4px;
      }
    }
    .img-area{
      margin: 30px auto;
      width: 1200px;
      //position: relative;
      font-size: 0;
    }
    img{
      display: block;
    }

.heatCamera {
  width: 100%;
  height: 100%;
  background: #e9ebf2;
  .header-nav {
    height: 60px;
    min-width: 1200px;
    background-image: linear-gradient(-180deg, #ffffff 13%, #e9ebf2 100%);
  }
  .toolbar {
    width: 680px;
    height: 60px;
    //background: rgba(0,0,0,.3);
    position: absolute;
    right: 60px;
    top: 20px;
    text-align: center;
    line-height: 60px;
    z-index: 10;
    .el-date-editor {
      vertical-align: middle;
      border-radius: 4px 0 0 4px;
      margin: 0 8px;
    }
    .el-button {
      vertical-align: middle;
      margin-left: 4px;
    }
  }
  .img-area {
    margin: 30px auto;
    width: 1280px;
    position: relative;
    font-size: 0;
    .dot{
      width: 10px;
      height: 10px;
      background-image: radial-gradient(circle,#04f3ff,#adf7f7,#31e4d3);
      opacity: .5;
      border-radius: 50%;
      position: absolute;
      z-index: 1000;
    }
  }
  img {
    display: block;
  }
}
</style>