添加热力图应用,桌面禁用鼠标右键

hanbaoshan

2020-08-23 947638b2b7256435c98dea50deffd5769221dc4f

添加热力图应用,桌面禁用鼠标右键

 package.json

@@ -14,6 +14,7 @@
    "echarts": "^4.8.0",
    "echarts-liquidfill": "^2.0.6",
    "element-ui": "^2.13.2",
    "heatmap.js": "^2.0.5",
    "html2canvas": "^1.0.0-rc.5",
    "less-loader": "^6.2.0",
    "moment": "^2.27.0",

 src/api/heatCamera.ts

New file
@@ -0,0 +1,7 @@
import request from '@/scripts/httpRequest'
export const getHeatCameraData = (data: any) =>
  request({
    url: '/data/api-v/es/getPersons',
    method: 'post',
    data
  })

 src/pages/desktop/index/App.vue

@@ -1,5 +1,5 @@
<template>
  <div id="app">
  <div id="app" @contextmenu.prevent="">
    <tools></tools>
    <desktop></desktop>
    <tools-entry ref="dock_model"></tools-entry>

 src/pages/desktop/index/components/DFrame.vue

@@ -149,18 +149,9 @@
      //   });
      // });
      //return false;
      //this.refreshDock();
      
    },
    refreshDock: function () {
      setTimeout(function () {
        const dockItems = document.getElementsByClassName('dock-item');
        const dockMask = document.getElementsByClassName('dock-mask')[0];
        for (let i = 0; i < dockItems.length; i++) {
          dockItems[i].width = 60;
        }
        //dockMask.style.width = dockItems.length * 60 + 40 + 'px';
      }, 10);
    }
    
  },
  directives: {
    drag(el) {
@@ -300,17 +291,9 @@
  color: #fbb450;
}

/* .d-frame-title-operation:hover .d-frame-operation-minus::before {
  content: "\f056";
} */

.d-frame-operation-full {
  color: #00d800;
}

/* .d-frame-title-operation:hover .d-frame-operation-full::before {
  content: "\f055";
} */

.d-frame-title-content {
  line-height: 30px;

 src/pages/desktop/index/components/Tools.vue

@@ -255,8 +255,11 @@
  vertical-align: top;
  line-height: 56px;
  padding: 0 15px;
  
}

.tools-icon img{
  -webkit-user-drag: none;
}
.tools .tools-icon:not(.no-hover-style):hover,
.tools .tools-icon:not(.no-hover-style).clicked {
  color: white;

 src/pages/desktop/index/components/ToolsEntry.vue

@@ -171,6 +171,11 @@
    .logo{

      text-align: right;

      padding-right: 50px;

      user-select: none;

      img{

        user-select: none;

        -webkit-user-drag: none;

      }

    }

  }

}


 src/pages/desktop/index/mock/userData.json

@@ -134,6 +134,17 @@
        "title": "系统维护",
        "width": 760,
        "height": 534
      },
      {
        "id": "19",
        "name": "heatCamera",
        "src": "../../images/app-mid/algorithm-manage.png",
        "alt": "热力图",
        "type": "2",
        "url": "/view/heatCamera",
        "title": "热力图",
        "width": 1210,
        "height": 534
      }
    ]
  }

 src/pages/heatCamera/index/App.vue

New file
@@ -0,0 +1,135 @@
<template>
  <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>
      </nav>
      
      <div class="img-area" ref="heatMap">
        <!-- <el-image src="/timg.jpg" fit="contain" ref="img"></el-image> -->
        <el-image :src="`${publicPath}images/login-net.png`" fit="contain" ref="img"></el-image>
      </div>
    </div>
  </div>
</template>
<script>
import Heatmap from 'heatmap.js';
import {getHeatCameraData} from '@/api/heatCamera'
export default {
  data(){
    return {
      publicPath: process.env.BASE_URL,
      timeRange: [new Date(2020, 8, 20, 8), new Date(2020, 9, 20, 8)],
      params: {
        cameraIds: ["c6fd8f31-248f-49fc-93e0-dedac889197b","c41a2f34-bd2e-41af-9bc0-51e6dcd03523"],
        startTime: '',
        endTime: '',
      }
    }
  },
  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)
    },
    mockAsync(){
      var config = {
        container: document.querySelector('.img-area'),
        radius: 10,
        maxOpacity: .75,
        minOpacity: 0,
        blur: .75,
        gradient: {
          '.5': 'blue',
          '.8': 'red',
          '0.95': 'white',
          '0.6': 'yellow',
          '0.5': 'green'
        }
        
      };
      var data = {
        max: 700,
        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)
      }
      //var heatmapInstance = h337.create(config);
      var heatmapInstance = Heatmap.create(config);
      heatmapInstance.setData(data);
    },
    renderHeatMap(params){
      getHeatCameraData(params).then(res=>{
        debugger
      })
    },

  }
}
</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;
    }

  }
</style>

 src/pages/heatCamera/index/main.ts

New file
@@ -0,0 +1,12 @@
import Vue from 'vue';
import ElementUI from 'element-ui';
//import HeatMap from 'heatmap.js-fixed';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";

import App from './App.vue';
Vue.use(ElementUI)
new Vue({
    el: '#app',
    render: h => h(App)
})

 vue.config.js

@@ -47,7 +47,11 @@
        target: 'http://192.168.20.10:7003',
        // ws: true,
        changeOrigin: true,
      },      
      }, 
      "/api-v": {
        target: 'http://192.168.20.145:8000',
        changeOrigin: true
      },     
      "/api-f": {
        //target: "http://bsic.asuscomm.com:7003", // 外网映射地址
        // target: "http://222.128.87.51:8000", // 目标代理接口地址