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

hanbaoshan

2020-09-01 8a0e6f282569868275cf90ee33b0bf5fc4b30b2b

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

 public/manifest.json

New file
@@ -0,0 +1,15 @@
{
  "name": "system-2.0",
  "short_name": "system-2.0",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

 src/pages/areaManage/index/App.vue

@@ -33,7 +33,7 @@
          </el-form-item>
        </div>
        <div class="checklist">
          <el-form-item>
          <el-form-item style="margin-right:0">
            <!-- <el-transfer v-model="checkedData" :props="{key:'model',label:'label'}" :titles="['全部区域', '选中区域']" :button-texts="['左移','右移']" filterable @change="handleChange" :data="areaData"></el-transfer> -->
            <el-transfer
              v-model="checkedData"
@@ -106,7 +106,6 @@
    renderTable () {
      getAllAreas().then(res => {
        if (res.code == 200) {
          debugger
          this.groups = res.data
        }
      })
@@ -137,7 +136,6 @@
      let _this = this;
      row.camPolygons.forEach(camPolygon => {
        camPolygon.pgns.forEach(polygon => {
          debugger
          let symbol = camPolygon.cameraId + '&' + polygon.polygonId
          // let checkedItem = {};
          // checkedItem.cameraId = camPolygon.cameraId;
@@ -152,6 +150,7 @@
    createArea () {
      this.isEdit = false;
      this.dialogFormVisible = true;
      this.areaForm = {};
      this.areaForm.name = '';
      this.areaForm.id = '';
      this.areaForm.desc = '';
@@ -208,7 +207,6 @@
      let tempArr = [];
      let tempIdArr = [];
      this.areaForm.camPolygons = [];
      debugger
      this.checkedData.forEach(item => {
        let tempCameraItem = { pgns: [] };
        let cameraId = item.split('&')[0];
@@ -289,7 +287,6 @@
}
.el-form-item {
  display: flex;
  margin-right: 40px;
}
.el-form-item label {
  font-weight: bold;
@@ -324,10 +321,10 @@
  border-color: #9eb4f0 !important;
}
/deep/.el-dialog {
  min-width: 764px;
  min-width: 940px;
}
/deep/.el-textarea__inner {
  width: 566px;
  width: 763px;
  height: 60px;
}
/deep/.el-transfer-panel__item.el-checkbox .el-checkbox__label {
@@ -346,4 +343,7 @@
  .el-checkbox__label {
  font-size: 14px !important;
}
/deep/.el-transfer-panel{
  width:300px;
}
</style>

 src/pages/desktop/index/App.vue

@@ -58,9 +58,9 @@
  methods: {
    addMessage: function (message, ding) {
      this.$store.dispatch('desktop/addMessage', message);
      if (ding) {
        new Audio('sounds/ping.mp3').play();
      }
      // if (ding) {
      //   new Audio('sounds/ping.mp3').play();
      // }
      this.$refs.notice_tip_model.showTip(message);
    },
    addWeather: function (weather) {

 src/pages/desktop/index/store/modules/desktop.js

@@ -116,7 +116,6 @@
    
    state.framesOrder = order;
    state.framesOffset = offset;
    debugger
    state.frames.push(dframe);

    return true;

 src/pages/gb28181/index/App.vue

@@ -40,6 +40,7 @@
                @change="changeProvince"
                size="small"
                placeholder="请选择省份"
                :disabled="gb28181.idType === 0"
              >
                <el-option
                  v-for="item in locationCity.provinceOptions"
@@ -95,6 +96,7 @@
                v-model="gb28181.PublicId"
                placeholder="请输入"
                size="small"
                :disabled="gb28181.idType === 1"
              ></el-input>
            </el-form-item>


 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>

 vue.config.js

@@ -49,7 +49,8 @@
        changeOrigin: true,
      }, 
      "/api-v": {
        target: 'http://192.168.20.145:8000',
        //target: 'http://192.168.20.145:8000',
        target: 'http://192.168.5.22:30102',
        //target: 'http://192.168.20.10:8000',
        changeOrigin: true
      },