From 8a0e6f282569868275cf90ee33b0bf5fc4b30b2b Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 01 九月 2020 20:45:23 +0800
Subject: [PATCH] 国标配置条件修改,项目添加manifest,热力图更新,区域管理样式调整
---
src/pages/desktop/index/store/modules/desktop.js | 1
src/pages/gb28181/index/App.vue | 2
vue.config.js | 3
src/pages/heatCamera/index/App.vue | 263 ++++++++++++++++++++++++++++---------------
public/manifest.json | 15 ++
src/pages/desktop/index/App.vue | 6
src/pages/areaManage/index/App.vue | 14 +-
7 files changed, 197 insertions(+), 107 deletions(-)
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..dd8873d
--- /dev/null
+++ b/public/manifest.json
@@ -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"
+}
diff --git a/src/pages/areaManage/index/App.vue b/src/pages/areaManage/index/App.vue
index c7e1025..f4312db 100644
--- a/src/pages/areaManage/index/App.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/desktop/index/App.vue b/src/pages/desktop/index/App.vue
index 37a8aa5..a89ad1d 100644
--- a/src/pages/desktop/index/App.vue
+++ b/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) {
diff --git a/src/pages/desktop/index/store/modules/desktop.js b/src/pages/desktop/index/store/modules/desktop.js
index 98327d8..75911bc 100644
--- a/src/pages/desktop/index/store/modules/desktop.js
+++ b/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;
diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue
index 61845c4..2bf92c4 100644
--- a/src/pages/gb28181/index/App.vue
+++ b/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>
diff --git a/src/pages/heatCamera/index/App.vue b/src/pages/heatCamera/index/App.vue
index 3b2465c..7155282 100644
--- a/src/pages/heatCamera/index/App.vue
+++ b/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>
diff --git a/vue.config.js b/vue.config.js
index a763d16..8450c82 100644
--- a/vue.config.js
+++ b/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
},
--
Gitblit v1.8.0