新修改的文件名
This commit is contained in:
parent
f584018da2
commit
6855e40251
|
@ -2,49 +2,17 @@
|
|||
<div class="pop-box">
|
||||
<div class="title-bg"></div>
|
||||
<div class="title">
|
||||
<span>重点区域详情</span>
|
||||
<span>{{ feature.data.areaName || "" }}</span>
|
||||
</div>
|
||||
<div class="site-base-information">
|
||||
<div class="item">
|
||||
<p>
|
||||
<span>区域名称:</span>
|
||||
<span>{{ feature.data.areaName || "" }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>位置:</span>
|
||||
<span>{{ feature.data.location || "" }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>
|
||||
<span>管理单位:</span>
|
||||
<span>{{ feature.data.management || "" }}</span>
|
||||
</p>
|
||||
<p class="left-mid-line" style="text-overflow: ellipsis;white-space: nowrap;width: 100px;overflow: hidden;">
|
||||
<span>区域简介:</span>
|
||||
<span>{{ getAbout(feature.data.about)}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>
|
||||
<span>负责人:</span>
|
||||
<span>张三</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>联系方式:</span>
|
||||
<span>13360907765</span>
|
||||
</p></div>
|
||||
</div>
|
||||
<div class="site-address">{{ feature.data.location || "" }}</div>
|
||||
<div class="site-content">
|
||||
<div class="site-content-title">
|
||||
<div v-for="(item, index) in menuList" :key="index">
|
||||
<div class="item" :class="selectedIndex == index ? 'is-active' : ''" @click="handleCheck(item,index)">
|
||||
<span>{{item.menuName}}</span>
|
||||
</div>
|
||||
<div class="site-content-left">
|
||||
<div>
|
||||
<div>管理单位:{{ feature.data.management || "" }}</div>
|
||||
<el-tooltip :content="feature.data.about">
|
||||
<div class="left-mid-line" style="text-overflow:ellipsis">景区简介:{{ getAbout(feature.data.about)}}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-content" v-show="selectedIndex == 0">
|
||||
<div class="site-content-left">
|
||||
<div class="area-content-left-top">
|
||||
<div>
|
||||
<div>当前人数</div>
|
||||
|
@ -58,6 +26,20 @@
|
|||
<div>外地人数</div>
|
||||
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
||||
</div>
|
||||
<!-- <div class="noise">
|
||||
<img src="../../../../assets/construction/noise.png" alt="">
|
||||
<div>
|
||||
<p>噪声</p>
|
||||
<p><span>{{ feature.data.noice || "" }}</span>dB</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="raise-dust">
|
||||
<img src="../../../../assets/construction/raiseDust.png" alt="">
|
||||
<div>
|
||||
<p>扬尘</p>
|
||||
<p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="site-content-left-bottom">
|
||||
<div class="filter-btn-typeSelect">
|
||||
|
@ -72,20 +54,26 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="site-content-right">
|
||||
<div class="people-total">
|
||||
<div class="total-num">
|
||||
<span>月累计人数:</span>
|
||||
<span>123112</span>
|
||||
</div>
|
||||
<div class="year-on-year">
|
||||
<span>月累计同比:</span>
|
||||
<span>-1.5%</span>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="images"
|
||||
v-viewer="{movable: false}"
|
||||
style="
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
<img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
|
||||
</div> -->
|
||||
<div class="images img-container">
|
||||
<!-- <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl[0]" :preview-src-list="feature.data.picUrl" alt="" /> -->
|
||||
<el-image v-if="this.picUrl" style="width:100%;height:100%;" :src="this.picUrl" :preview-src-list="[this.picUrl]" alt="" />
|
||||
<span v-else>暂无图片</span>
|
||||
</div>
|
||||
<div class="video-table">
|
||||
<h4>人员聚集明细</h4>
|
||||
<h4>周边监控</h4>
|
||||
<el-table
|
||||
:data="personnelAggregationData"
|
||||
:data="cameraData"
|
||||
@row-click="openVideo"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
|
@ -99,144 +87,12 @@
|
|||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
>
|
||||
<el-table-column align="center" width="70" label="人流量" type="index" style="text-align: center">
|
||||
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cameraName" label="时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-content" v-show="selectedIndex == 1">
|
||||
<div class="site-content-left">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
suffix-icon="el-icon-search"
|
||||
v-model="labelSearch"
|
||||
@input="searchCameraTree"
|
||||
>
|
||||
</el-input>
|
||||
<el-tree
|
||||
v-show="cameraTreeIsShow"
|
||||
id="tree"
|
||||
:data="cameraTree"
|
||||
:props="{label:'name',children:'children',isLeaf:'leaf',}"
|
||||
:load="loadNode"
|
||||
node-key="id"
|
||||
@node-click="treeCameraClick"
|
||||
empty-text="暂无数据"
|
||||
:filter-node-method="filterNode"
|
||||
lazy>
|
||||
<!-- 是否离线checkStatus -->
|
||||
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
|
||||
<!-- <span>{{ data.channelName || '' }}</span> -->
|
||||
<!-- </span> -->
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="site-content-right">
|
||||
右
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-people" v-show="selectedIndex == 2">
|
||||
<div class="table-filter">
|
||||
<span class="span-text">姓名:</span>
|
||||
<el-input
|
||||
placeholder="请输入人员姓名"
|
||||
prefix-icon="el-icon-search"
|
||||
@input="handleSearch"
|
||||
v-model="searchNameValue"
|
||||
>
|
||||
</el-input>
|
||||
<span class="span-text">人员类型:</span>
|
||||
<el-select v-model="selectTypeValue" placeholder="全部">
|
||||
<el-option
|
||||
v-for="item in peopleTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button @click="handleSearch()">查询</el-button>
|
||||
</div>
|
||||
<div class="people-table">
|
||||
<el-table
|
||||
:data="peopleDataResource"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
'background-color': '#18304c',
|
||||
}"
|
||||
:header-cell-style="{
|
||||
color: '#1ffefd',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="name" label="姓名" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="peopleType" label="人员类型" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="department" label="所属单位">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="sex" label="性别">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="telePhone" label="电话号码">
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-facilities" v-show="selectedIndex == 3">
|
||||
<div class="table-filter">
|
||||
<span class="span-text">设施类型:</span>
|
||||
<el-select v-model="selectedFacilitiesType" placeholder="全部">
|
||||
<el-option
|
||||
v-for="item in facilitiesTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<span class="span-text" style="margin-left:10px">位置:</span>
|
||||
<el-input
|
||||
placeholder="请输入位置"
|
||||
prefix-icon="el-icon-search"
|
||||
@input="handleSearch"
|
||||
v-model="addressValue"
|
||||
>
|
||||
</el-input>
|
||||
<el-button @click="handleSearch()">查询</el-button>
|
||||
</div>
|
||||
<div class="facilities-table">
|
||||
<el-table
|
||||
:data="facilitiesDataResource"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
'background-color': '#18304c',
|
||||
}"
|
||||
:header-cell-style="{
|
||||
color: '#1ffefd',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="facilitiesType" label="设施类型" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="位置" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="manageMan" label="管理人员">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="telePhone" label="电话号码">
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -246,7 +102,6 @@ import 'viewerjs/dist/viewer.css'
|
|||
import { directive as viewer } from "v-viewer"
|
||||
import * as echarts from 'echarts'
|
||||
import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
|
||||
import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
|
@ -258,8 +113,7 @@ export default {
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.weekData.time.unshift(item.pushTime)
|
||||
this.weekData.local.unshift(item.localNums)
|
||||
|
@ -268,8 +122,6 @@ export default {
|
|||
this.chartData = this.weekData
|
||||
this.initCharts()
|
||||
})
|
||||
})
|
||||
|
||||
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.monthData.time.unshift(item.pushTime)
|
||||
|
@ -287,32 +139,14 @@ export default {
|
|||
})
|
||||
}
|
||||
})
|
||||
getCameraAllLabel().then((res) => {
|
||||
this.tabList = res.data.data
|
||||
});
|
||||
getCameraAll().then((res) => {
|
||||
this.cameraAllData = res.data
|
||||
// this.addResourceTomap('cameraAll',res.data);
|
||||
})
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
console.log(this.cameraTree)
|
||||
res.data.data.forEach((item) => {
|
||||
this.cameraTreeSingle.push({
|
||||
channelName: item.name,
|
||||
children: []
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterButton:{
|
||||
typeSelect:['当天人流量','近30天人流量',],
|
||||
typeSelectActive:'当天人流量',
|
||||
typeSelect:['近7天','近30天',],
|
||||
typeSelectActive:'近7天',
|
||||
},
|
||||
cameraData: [],
|
||||
personnelAggregationData:[],
|
||||
weekData:{
|
||||
time:[],
|
||||
local:[],
|
||||
|
@ -324,30 +158,7 @@ export default {
|
|||
outer:[],
|
||||
},
|
||||
chartData:{},
|
||||
picUrl: '',
|
||||
selectedIndex:0,
|
||||
menuList:[{
|
||||
menuName:"人流量",
|
||||
},{
|
||||
menuName:"视频监控",
|
||||
},{
|
||||
menuName:"人员",
|
||||
},{
|
||||
menuName:"设施",
|
||||
}],
|
||||
peopleTypeOption:[{label:"人员类型",value:"1"}],
|
||||
peopleDataResource:[{name:"张三",peopleType:"普通",department:"市政府",sex:"男",telePhone:"1334650987"}],
|
||||
searchNameValue:"",//查询姓名
|
||||
selectTypeValue:"",//人员类型
|
||||
addressValue:"",//位置
|
||||
selectedFacilitiesType:"",//设施类型
|
||||
facilitiesTypeOption:[{label:"设施类型",value:"1"}],
|
||||
facilitiesDataResource:[{facilitiesType:"设施类型1",address:"李沧",manageMan:"张山",telePhone:"1334650987"}],
|
||||
cameraAllData:[],
|
||||
cameraTreeIsShow:true,
|
||||
cameraTreeSingle: [],
|
||||
checkStatus: '2',
|
||||
cameraTree:[],
|
||||
picUrl: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
@ -495,121 +306,6 @@ export default {
|
|||
const viewer = this.$el.querySelector('.images').$viewer
|
||||
viewer.show()
|
||||
},
|
||||
//点击上部Tab底部显示不同的内容
|
||||
handleCheck(item,index){
|
||||
this.selectedIndex = index;
|
||||
},
|
||||
//点击查询按钮查询列表数据
|
||||
handleSearch(){
|
||||
if(this.selectedIndex ==2){
|
||||
console.log('人员类型',this.selectTypeValue);
|
||||
//this.peopleDataResource();
|
||||
}else if(this.selectedIndex ==3){
|
||||
console.log('位置',this.selectedFacilitiesType);
|
||||
//this.peopleDataResource();
|
||||
}
|
||||
},
|
||||
searchLabel(value) {
|
||||
const params = {
|
||||
labelName:value
|
||||
}
|
||||
selectByLabelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.tabList = res.data.data
|
||||
})
|
||||
},
|
||||
searchCameraTree(value) {
|
||||
if(value.length > 0){
|
||||
const params = {
|
||||
channelName:value
|
||||
}
|
||||
selectByChannelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.cameraTree = []
|
||||
res.data.data.forEach((item) => {
|
||||
this.cameraTree.push({
|
||||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode:item.channelCode,
|
||||
leaf:true,
|
||||
})
|
||||
})
|
||||
})
|
||||
}else {
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.checkboxGroup = []
|
||||
this.checkStatus = "2";
|
||||
this.cameraTreeIsShow = true
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
})
|
||||
document.getElementById("tree").scrollTop = 0;
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
// if (node.level === 0) {
|
||||
// return resolve([{ name: 'region' }]);
|
||||
// }
|
||||
console.log(node)
|
||||
if (node.level > 0) {
|
||||
let subData = []
|
||||
getCameraAllOrgan({parentId:node.data.id}).then((res) => {
|
||||
if(res.data.data.length == 0){
|
||||
const params = {
|
||||
parentId:node.data.id,
|
||||
checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus,
|
||||
}
|
||||
getCameraByParentId(params).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
subData.push({
|
||||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode:item.channelCode,
|
||||
checkStatus:item.checkStatus,
|
||||
leaf:true,
|
||||
})
|
||||
})
|
||||
return resolve(subData);
|
||||
})
|
||||
}else{
|
||||
subData = res.data.data
|
||||
return resolve(subData);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
treeCameraClick(data) {
|
||||
console.log(data)
|
||||
if(data.channelCode){
|
||||
const cameraTree = [{
|
||||
latLng: { lat: data.gpsY, lng: data.gpsX },
|
||||
data: data,
|
||||
type:'cameraTree'
|
||||
}]
|
||||
this.$parent.hiMapFun.removeLayerByLayerName("cameraTree");
|
||||
this.$parent.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
|
||||
const arr = [0,0.0,'','0','0.0']
|
||||
if(arr.indexOf(data.gpsX) == -1){
|
||||
this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
|
||||
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
|
||||
}
|
||||
}
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (value == "2") return true;
|
||||
if (value == "0") {
|
||||
return data.checkStatus == 0;
|
||||
}
|
||||
if (value == "1") {
|
||||
return data.checkStatus == 1;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
|
@ -629,8 +325,8 @@ export default {
|
|||
border: 1px solid rgba(50,227,235,.95);
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
width: 750px !important;
|
||||
height: 500px;
|
||||
width: 734px !important;
|
||||
height: 453px;
|
||||
padding: 12px 16px;
|
||||
.pop-box {
|
||||
width: 100%;
|
||||
|
@ -649,9 +345,6 @@ export default {
|
|||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
span:nth-child(1) {
|
||||
font-weight:bold;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
|
@ -665,68 +358,18 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.site-base-information{
|
||||
height: 90px;
|
||||
.site-address {
|
||||
margin: 6px 0;
|
||||
padding-left: 20px;
|
||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
padding: 10px;
|
||||
//line-height: 26px;
|
||||
.item{
|
||||
width: 100%;
|
||||
height:20px;
|
||||
//background-color: red;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&>p{
|
||||
margin: 0 !important;
|
||||
width:50%;
|
||||
flex:1;
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
.item:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.site-content-title{
|
||||
width:100%;
|
||||
height:30px;
|
||||
//background-color:red;
|
||||
border-bottom:solid 1px #fff ;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
padding-top: 5px;
|
||||
margin-left: 2px;
|
||||
//flex:1;
|
||||
height:30px;
|
||||
width:100px;
|
||||
text-align: center;
|
||||
//background: #abcdef;
|
||||
line-height: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.is-active{
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
.site-content-content{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: 10px;
|
||||
.site-content-left {
|
||||
width: 372px;
|
||||
margin-right: 15px;
|
||||
height: 310px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
.site-content-left {
|
||||
width: 392px;
|
||||
margin-right: 29px;
|
||||
.left-mid-line {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
@ -773,87 +416,9 @@ export default {
|
|||
height: 206px;
|
||||
}
|
||||
}
|
||||
.el-input {
|
||||
width: 328px;
|
||||
}
|
||||
.el-input__inner {
|
||||
border: 1px solid rgba(31,254,253,.9);
|
||||
color: #fff;
|
||||
border-radius: unset;
|
||||
background: rgba($color: #203b5d, $alpha: .8);
|
||||
&::placeholder {
|
||||
color: rgba($color: #fff, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
.el-input__prefix {
|
||||
color: rgba(31,254,253,.9);
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
height: 316px;
|
||||
width: 372px;
|
||||
overflow-y: auto;
|
||||
margin-top: 6px;
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
.el-checkbox-button {
|
||||
border-radius: 15px;
|
||||
margin: 10px;
|
||||
.el-checkbox-button__inner {
|
||||
height: 30px;
|
||||
line-height: 6px;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(0deg, rgba($color: #24517b, $alpha: 1) 0, rgba($color: #24517b, $alpha: 0) 100%);
|
||||
border: 1px solid #1d98a0;
|
||||
font-size: 16px;
|
||||
color: #1ffefd;
|
||||
}
|
||||
.el-checkbox-button__inner:hover {
|
||||
border: 1px solid #1ffefd;
|
||||
background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
|
||||
}
|
||||
}
|
||||
.el-checkbox-button.is-checked {
|
||||
.el-checkbox-button__inner{
|
||||
color: #fff;
|
||||
border: 1px solid #1ffefd;
|
||||
background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
width: 366px;
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background: rgba(27,255,255,.2);
|
||||
}
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: rgba(27,255,255,.2);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-content-right {
|
||||
width: 400px;
|
||||
width: 280px;
|
||||
.img-container {
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
|
@ -862,22 +427,6 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.people-total{
|
||||
width: 310px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
.year-on-year{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.video-table {
|
||||
margin-top: 20px;
|
||||
h4 {
|
||||
|
@ -910,176 +459,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.table-filter{
|
||||
width:100%;
|
||||
height:30px;
|
||||
//background-color: red;
|
||||
//text-align: center;
|
||||
display: flex;
|
||||
justify-content: "space-between";
|
||||
width:700px;
|
||||
margin-top: 10px;
|
||||
.span-text{
|
||||
line-height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 160px;
|
||||
height: 30px;
|
||||
padding-left:5px;
|
||||
border: 1px solid rgba(31,254,253,.9);
|
||||
color: #fff;
|
||||
background: rgba($color: #203b5d, $alpha: .8);
|
||||
border-radius: unset;
|
||||
&::placeholder {
|
||||
color: rgba($color: #fff, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
.el-input__prefix {
|
||||
color: rgba(31,254,253,.9);
|
||||
left: 130px;
|
||||
i{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
//width:160px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
// margin-left: 10px;
|
||||
.el-input {
|
||||
width: 160px;
|
||||
}
|
||||
.el-input__suffix-inner{
|
||||
i{line-height: 30px;}
|
||||
}
|
||||
}
|
||||
.el-button{
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
//height: 30px;
|
||||
line-height: 0;
|
||||
background-color: #1fa2fe;
|
||||
border:solid 1px #1fa2fe ;
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
.site-content-people {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.people-table{
|
||||
margin-top: 10px;
|
||||
.el-table {
|
||||
border: 1px solid #325d94;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
th,td {
|
||||
border-right: 1px solid #325d94 !important;
|
||||
}
|
||||
// .descending.is-leaf.is-sortable {
|
||||
// .sort-caret {
|
||||
// border-top-color: #1dfeff;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.cell {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.el-table th.is-leaf {
|
||||
border: 1px solid #1f557c;
|
||||
}
|
||||
.el-table td {
|
||||
border: 0;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.el-table th {
|
||||
padding: 5px 0;
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table__row:nth-of-type(even) > td {
|
||||
background-color: #113660 !important;
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.site-content-facilities {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.facilities-table{
|
||||
margin-top: 10px;
|
||||
.el-table {
|
||||
border: 1px solid #325d94;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
th,td {
|
||||
border-right: 1px solid #325d94 !important;
|
||||
}
|
||||
// .descending.is-leaf.is-sortable {
|
||||
// .sort-caret {
|
||||
// border-top-color: #1dfeff;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.cell {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.el-table th.is-leaf {
|
||||
border: 1px solid #1f557c;
|
||||
}
|
||||
.el-table td {
|
||||
border: 0;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.el-table th {
|
||||
padding: 5px 0;
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table__row:nth-of-type(even) > td {
|
||||
background-color: #113660 !important;
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,511 +0,0 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="title-bg"></div>
|
||||
<div class="title">
|
||||
<span>{{ feature.data.areaName || "" }}</span>
|
||||
</div>
|
||||
<div class="site-address">{{ feature.data.location || "" }}</div>
|
||||
<div class="site-content">
|
||||
<div class="site-content-left">
|
||||
<div>
|
||||
<div>管理单位:{{ feature.data.management || "" }}</div>
|
||||
<el-tooltip :content="feature.data.about">
|
||||
<div class="left-mid-line" style="text-overflow:ellipsis">景区简介:{{ getAbout(feature.data.about)}}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="area-content-left-top">
|
||||
<div>
|
||||
<div>当前人数</div>
|
||||
<div>{{ feature.data.allNums || "0" }}人</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>本地人数</div>
|
||||
<div>{{ feature.data.localNums || "0" }}人</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>外地人数</div>
|
||||
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
||||
</div>
|
||||
<!-- <div class="noise">
|
||||
<img src="../../../../assets/construction/noise.png" alt="">
|
||||
<div>
|
||||
<p>噪声</p>
|
||||
<p><span>{{ feature.data.noice || "" }}</span>dB</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="raise-dust">
|
||||
<img src="../../../../assets/construction/raiseDust.png" alt="">
|
||||
<div>
|
||||
<p>扬尘</p>
|
||||
<p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="site-content-left-bottom">
|
||||
<div class="filter-btn-typeSelect">
|
||||
<div class="typeSelect-btn"
|
||||
v-for="item in filterButton.typeSelect"
|
||||
:key="item"
|
||||
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
|
||||
@click="typeSelect(item)"
|
||||
>{{item}}</div>
|
||||
</div>
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-right">
|
||||
<!-- <div
|
||||
class="images"
|
||||
v-viewer="{movable: false}"
|
||||
style="
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
<img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
|
||||
</div> -->
|
||||
<div class="images img-container">
|
||||
<!-- <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl[0]" :preview-src-list="feature.data.picUrl" alt="" /> -->
|
||||
<el-image v-if="this.picUrl" style="width:100%;height:100%;" :src="this.picUrl" :preview-src-list="[this.picUrl]" alt="" />
|
||||
<span v-else>暂无图片</span>
|
||||
</div>
|
||||
<div class="video-table">
|
||||
<h4>周边监控</h4>
|
||||
<el-table
|
||||
:data="cameraData"
|
||||
@row-click="openVideo"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
'background-color': '#18304c',
|
||||
borderColor: '#325d94'
|
||||
}"
|
||||
:header-cell-style="{
|
||||
color: '#1ffefd',
|
||||
borderColor: '#325d94',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
>
|
||||
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bus from "@/views/layout/bus";
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import { directive as viewer } from "v-viewer"
|
||||
import * as echarts from 'echarts'
|
||||
import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.weekData.time.unshift(item.pushTime)
|
||||
this.weekData.local.unshift(item.localNums)
|
||||
this.weekData.outer.unshift(item.nonlocalNums)
|
||||
})
|
||||
this.chartData = this.weekData
|
||||
this.initCharts()
|
||||
})
|
||||
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
this.monthData.time.unshift(item.pushTime)
|
||||
this.monthData.local.unshift(item.localNums)
|
||||
this.monthData.outer.unshift(item.nonlocalNums)
|
||||
})
|
||||
})
|
||||
selectByAreaImage({areaName: this.feature.data.areaName}).then((res) => {
|
||||
let returnData = res.data.data
|
||||
if (returnData.length) {
|
||||
this.picUrl = returnData[0].picUrl
|
||||
this.cameraData.push({
|
||||
cameraName: returnData[0].channelName,
|
||||
channelCode: returnData[0].channelCode
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterButton:{
|
||||
typeSelect:['近7天','近30天',],
|
||||
typeSelectActive:'近7天',
|
||||
},
|
||||
cameraData: [],
|
||||
weekData:{
|
||||
time:[],
|
||||
local:[],
|
||||
outer:[],
|
||||
},
|
||||
monthData:{
|
||||
time:[],
|
||||
local:[],
|
||||
outer:[],
|
||||
},
|
||||
chartData:{},
|
||||
picUrl: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// particularsClick(data){
|
||||
// console.log(data)
|
||||
// bus.$emit("mainClick", data);
|
||||
// },
|
||||
getAbout(content) {
|
||||
if(!content) {
|
||||
return '暂无'
|
||||
} else if(content.length < 40) {
|
||||
return content
|
||||
} else {
|
||||
return content.substring(0, 40) + '...'
|
||||
}
|
||||
},
|
||||
typeSelect(item) {
|
||||
this.filterButton.typeSelectActive = item
|
||||
if(item == '近7天'){
|
||||
this.chartData = this.weekData
|
||||
}
|
||||
if(item == '近30天'){
|
||||
this.chartData = this.monthData
|
||||
}
|
||||
this.initCharts()
|
||||
},
|
||||
openVideo(row){
|
||||
bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
|
||||
},
|
||||
initCharts () {
|
||||
const option = {
|
||||
grid: {
|
||||
bottom: 34,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255,.8)',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#345a99',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
boundaryGap: ['2%', '2%'],
|
||||
data: this.chartData.time
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
minInterval : 1,
|
||||
name: '人',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255,.8)'
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255,.8)',
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
interval: '1',
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: ['#1d3556','#18334c']
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: ['#309afe','#fab228'],
|
||||
legend: {
|
||||
right: '16%',
|
||||
top: '12%',
|
||||
icon: 'line',
|
||||
data: ['本地人数','外地人数',],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '本地人数',
|
||||
data: this.chartData.local,
|
||||
type: 'bar',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#3cb2ff' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#2682ff' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '外地人数',
|
||||
data: this.chartData.outer,
|
||||
type: 'bar',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#fdd033' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#fe9820' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
const charts = echarts.init(
|
||||
document.getElementById('chart')
|
||||
)
|
||||
charts.setOption(option)
|
||||
},
|
||||
|
||||
show () {
|
||||
const viewer = this.$el.querySelector('.images').$viewer
|
||||
viewer.show()
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
debug: true,
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .leaflet-popup {
|
||||
// width: auto !important;
|
||||
// }
|
||||
.site-popup {
|
||||
.leaflet-popup-content-wrapper {
|
||||
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
|
||||
background: rgba(24,51,76,.95);
|
||||
border: 1px solid rgba(50,227,235,.95);
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
width: 734px !important;
|
||||
height: 453px;
|
||||
padding: 12px 16px;
|
||||
.pop-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.title-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
opacity: .4;
|
||||
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
|
||||
}
|
||||
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
margin-left: 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0494ff;
|
||||
color: #1ffefd;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-address {
|
||||
margin: 6px 0;
|
||||
padding-left: 20px;
|
||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.site-content {
|
||||
display: flex;
|
||||
.site-content-left {
|
||||
width: 392px;
|
||||
margin-right: 29px;
|
||||
.left-mid-line {
|
||||
margin: 6px 0;
|
||||
}
|
||||
.area-content-left-top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
& > div {
|
||||
text-align: center;
|
||||
> div:first-child {
|
||||
color: #1ffefd;
|
||||
}
|
||||
> div:last-child {
|
||||
color: rgba(255, 255, 255,.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-content-left-bottom {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
.filter-btn-typeSelect {
|
||||
display: flex;
|
||||
.typeSelect-btn {
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(0, 255, 255, .6);
|
||||
background: rgba(2,51,87,.6);
|
||||
margin-right: 5px;
|
||||
padding: 4px 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.typeSelect-btn-active {
|
||||
background: #005ea3;
|
||||
border: 1px solid #00ffff;
|
||||
}
|
||||
}
|
||||
#chart {
|
||||
width: 100%;
|
||||
height: 206px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-content-right {
|
||||
width: 280px;
|
||||
.img-container {
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.video-table {
|
||||
margin-top: 20px;
|
||||
h4 {
|
||||
color: #fff;
|
||||
}
|
||||
.el-table{
|
||||
margin-top: 8px;
|
||||
border: 1px solid #325d94;
|
||||
.el-table__body-wrapper{
|
||||
height: 90px;
|
||||
overflow-y: auto;
|
||||
background: #18304c;
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
.el-table__empty-block {
|
||||
background: rgba(24,51,76,.95);
|
||||
}
|
||||
}
|
||||
th,td {
|
||||
border-right: 1px solid #325d94;
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.leaflet-popup-close-button {
|
||||
color: #3afefc !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang='scss' scoped>
|
||||
.particulars {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.List-Details-pop {
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
width: 400px;
|
||||
|
||||
.topContent {
|
||||
background: #000;
|
||||
padding: 14px;
|
||||
width: 400px;
|
||||
}
|
||||
.content {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
b {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
File diff suppressed because it is too large
Load Diff
|
@ -1,15 +1,11 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="List-Details-pop">
|
||||
<div style="width: 350px; text-align: left; padding: 5px" v-if="resourceType=='video'">
|
||||
<div style="width: 300px; text-align: left; padding: 5px">
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div class="popup-title">
|
||||
<div>
|
||||
<div class="title">事件详情</div>
|
||||
<div class="title-button">
|
||||
<span class="issued-button">下发</span>
|
||||
<span class="ignore-button">忽略</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -17,16 +13,16 @@
|
|||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<!-- <div class="green-cicle"><div></div></div> -->
|
||||
<p>
|
||||
<b>{{feature.data.district}}</b>
|
||||
<span>></span>
|
||||
<b>{{feature.data.district}}</b>
|
||||
<span>></span>
|
||||
<b>{{feature.data.cameraName}}</b>
|
||||
<p><b>事件来源:</b>视频感知</p>
|
||||
<p><b>时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>事件类型:</b>{{ feature.data.eventNewName || "" }}</p>
|
||||
<p><b>事件地址:</b>{{ feature.data.district || "" }}</p>
|
||||
<p><b>事件描述:</b>{{ feature.data.eventCnName || "" }}</p>
|
||||
<p><b>摄像头名称:</b>{{ feature.data.cameraName || "" }}</p>
|
||||
<p v-if="feature.data.vehicle != null">
|
||||
<b>车牌号:</b>{{ feature.data.vehicle || "" }}
|
||||
</p>
|
||||
<p><b>预警时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>持续时间:</b>32分钟</p>
|
||||
<p><b>事件状态:</b>待下发</p>
|
||||
<p><b>事件状态:</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -38,82 +34,18 @@
|
|||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="button" @click="openCurrentVideo(feature.data.id)">查看实时监控</div>
|
||||
<!-- <div class="button" @click="openCurrentVideo(feature.data.id)">实时监控</div> -->
|
||||
</div>
|
||||
<!-- <div v-if="openVideo" class="current-video">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="feature.data.channelCode"
|
||||
></video-play>
|
||||
</div> -->
|
||||
|
||||
<!---->
|
||||
<div style="width: 680px; text-align: left; padding: 5px" v-else>
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div class="popup-title">
|
||||
<div class="title">事件详情</div>
|
||||
<div class="title-button">
|
||||
<span class="issued-button">下发</span>
|
||||
<span class="ignore-button">忽略</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-monitoring">
|
||||
<div class="basic-information">
|
||||
<div class="green-cicle"><div></div></div>
|
||||
<p><b>负责人:</b>张三</p>
|
||||
<p><b>联系方式:</b>13356870098</p>
|
||||
<p><b>告警时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>告警值:</b>42231</p>
|
||||
<p><b>事件状态:</b>待下发</p>
|
||||
<div class="flow-chart">
|
||||
<div class="chart-title"><span>告警当天人流量数值</span></div>
|
||||
<div class="chart-content" id="people-counting-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relate-video">
|
||||
<p style="margin-left:3px"><b>更新时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<div class="population-statistics">
|
||||
<div class="item">
|
||||
<div><span>当前人数</span></div>
|
||||
<div><span>0000</span><span>人</span></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>本地人数</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>0000</span>
|
||||
<span>人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div><span>外地人数</span></div>
|
||||
<div><span>0000</span><span>人</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<div class="video-title">
|
||||
<div class="title-name"><span>周边监控</span></div>
|
||||
<div class="check-more">查看更多</div>
|
||||
</div>
|
||||
<div class="video-play-content">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="[feature.data.channelCode]"
|
||||
></video-play>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import VideoPlay from './VideoPlay'
|
||||
// import VideoPlay from './VideoPlay'
|
||||
import "viewerjs/dist/viewer.css";
|
||||
import { directive as viewer } from "v-viewer";
|
||||
import bus from "@/views/layout/bus";
|
||||
|
@ -121,7 +53,7 @@ import { getStreamByChannelCode } from "@/api/videoSurveillance";
|
|||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
VideoPlay,
|
||||
// VideoPlay,
|
||||
},
|
||||
props: {
|
||||
feature: {
|
||||
|
@ -136,9 +68,6 @@ export default {
|
|||
console.log(this.newImageUrl);
|
||||
|
||||
console.log(this.feature, "1234567");
|
||||
this.$nextTick( () => {
|
||||
this.initPeopleCountingChart();
|
||||
})
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
|
@ -149,9 +78,6 @@ export default {
|
|||
return {
|
||||
openVideo: false,
|
||||
newImageUrl: "",
|
||||
resourceType:"resource",
|
||||
channelCode:["3701222749350945"]
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
@ -210,83 +136,10 @@ export default {
|
|||
//alert("error");
|
||||
}
|
||||
},
|
||||
//加载人流量统计图表
|
||||
initPeopleCountingChart(){
|
||||
let option = {
|
||||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||||
grid: {
|
||||
top: "20px",
|
||||
right: "40px",
|
||||
left: "40px",
|
||||
bottom: "20px",
|
||||
},
|
||||
tooltip: {
|
||||
// 鼠标悬浮提示框显示 X和Y 轴数据
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||||
borderColor: "rgba(32, 33, 36,0.20)",
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
// 文字提示样式
|
||||
color: "#fff",
|
||||
fontSize: "12",
|
||||
},
|
||||
shadowStyle: {
|
||||
color: "rgba(74, 211, 164, 0.15)",
|
||||
width: "20",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["2022.11.01", "2022.11.02", "2022.11.03", "2022.11.04", "2022.11.05","2022.11.06","2022.11.07"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
data: [60, 80, 100, 100, 150, 126,100,160],
|
||||
itemStyle: {
|
||||
color: 'orange',
|
||||
showSymbol: false,
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
const peopleCounting = echarts.init(
|
||||
document.getElementById('people-counting-chart')
|
||||
)
|
||||
peopleCounting.setOption(option)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.Event-List-Details-pop{
|
||||
.leaflet-popup-content{
|
||||
width: auto !important;
|
||||
p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style lang='scss' scoped>
|
||||
.List-Details-pop {
|
||||
// width: 640px;
|
||||
// height: 320px;
|
||||
|
@ -306,10 +159,10 @@ export default {
|
|||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.popup-title{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.title {
|
||||
.leaflet-popup-content p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.title {
|
||||
padding: 12px 76px 0 5px;
|
||||
font-size: 16px;
|
||||
color: #66ffff;
|
||||
|
@ -322,35 +175,9 @@ export default {
|
|||
right: 10px;
|
||||
}
|
||||
}
|
||||
.title-button{
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 10px 0 5px;
|
||||
margin-left: 50px;
|
||||
.issued-button{
|
||||
width:50px;
|
||||
height:25px;
|
||||
background-color:#355d94;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.ignore-button{
|
||||
width:50px;
|
||||
height:25px;
|
||||
margin-left: 10px;
|
||||
background-color:#355d94;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.images {
|
||||
width: 320px;
|
||||
height: 200px;
|
||||
margin-left: 35px;
|
||||
width: 290px;
|
||||
height: 160px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
|
@ -358,102 +185,18 @@ export default {
|
|||
}
|
||||
}
|
||||
.button {
|
||||
width: 100px;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
//background-color: #2fe2ed;
|
||||
//border-radius: 4px;
|
||||
margin: 10px 0 0;
|
||||
background-color: #2fe2ed;
|
||||
border-radius: 4px;
|
||||
margin: 8px auto 0;
|
||||
cursor: pointer;
|
||||
text-decoration:underline;
|
||||
|
||||
}
|
||||
.data-monitoring{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.basic-information{
|
||||
width:50%;
|
||||
.flow-chart{
|
||||
width:300px;
|
||||
height:200px;
|
||||
//background-color: red;
|
||||
.chart-title{
|
||||
width:100%;
|
||||
height:20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.chart-content{
|
||||
width:320px;
|
||||
height:196px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.relate-video{
|
||||
width:50%;
|
||||
//padding-left:10px;
|
||||
.population-statistics{
|
||||
width: 270px;
|
||||
height:60px;
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
//background-color: red;
|
||||
}
|
||||
.population-statistics>.item{
|
||||
//border: 1px solid black;
|
||||
padding-top: 5px;
|
||||
margin-left: 2px;
|
||||
flex:1;
|
||||
height:60px;
|
||||
text-align: center;
|
||||
background: #abcdef;
|
||||
line-height: 25px;
|
||||
.item-title{}
|
||||
.item-num{}
|
||||
.num-text{}
|
||||
.num-cell{}
|
||||
}
|
||||
.video-content{
|
||||
width: 330px;
|
||||
height: 280px;
|
||||
margin-top: 20px;
|
||||
//background-color: green;
|
||||
padding-left: 5px;
|
||||
.video-title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.title-name{
|
||||
width:200px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.check-more{
|
||||
width: 120px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
//background-color: #2fe2ed;
|
||||
//border-radius: 4px;
|
||||
margin: 5px 0 0;
|
||||
cursor: pointer;
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
.video-play-content{
|
||||
width: 320px;
|
||||
height: 233px;
|
||||
background-color: #abcdef;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .current-video {
|
||||
// width: 320px;
|
||||
// height: 180px;
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,459 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="List-Details-pop">
|
||||
<div style="width: 350px; text-align: left; padding: 5px" v-if="resourceType=='video'">
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div class="popup-title">
|
||||
<div class="title">事件详情</div>
|
||||
<div class="title-button">
|
||||
<span class="issued-button">下发</span>
|
||||
<span class="ignore-button">忽略</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" style="padding: 5px">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<!-- <div class="green-cicle"><div></div></div> -->
|
||||
<p>
|
||||
<b>{{feature.data.district}}</b>
|
||||
<span>></span>
|
||||
<b>{{feature.data.district}}</b>
|
||||
<span>></span>
|
||||
<b>{{feature.data.cameraName}}</b>
|
||||
</p>
|
||||
<p><b>预警时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>持续时间:</b>32分钟</p>
|
||||
<p><b>事件状态:</b>待下发</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="images" v-viewer="{ movable: false }">
|
||||
<img
|
||||
@click="show"
|
||||
v-show="feature.data.imageUrl && feature.data.imageUrl !== null"
|
||||
:src="newImageUrl || ''"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="button" @click="openCurrentVideo(feature.data.id)">查看实时监控</div>
|
||||
</div>
|
||||
<!-- <div v-if="openVideo" class="current-video">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="feature.data.channelCode"
|
||||
></video-play>
|
||||
</div> -->
|
||||
|
||||
<!---->
|
||||
<div style="width: 680px; text-align: left; padding: 5px" v-else>
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div class="popup-title">
|
||||
<div class="title">事件详情</div>
|
||||
<div class="title-button">
|
||||
<span class="issued-button">下发</span>
|
||||
<span class="ignore-button">忽略</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-monitoring">
|
||||
<div class="basic-information">
|
||||
<div class="green-cicle"><div></div></div>
|
||||
<p><b>负责人:</b>张三</p>
|
||||
<p><b>联系方式:</b>13356870098</p>
|
||||
<p><b>告警时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>告警值:</b>42231</p>
|
||||
<p><b>事件状态:</b>待下发</p>
|
||||
<div class="flow-chart">
|
||||
<div class="chart-title"><span>告警当天人流量数值</span></div>
|
||||
<div class="chart-content" id="people-counting-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relate-video">
|
||||
<p style="margin-left:3px"><b>更新时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<div class="population-statistics">
|
||||
<div class="item">
|
||||
<div><span>当前人数</span></div>
|
||||
<div><span>0000</span><span>人</span></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>本地人数</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>0000</span>
|
||||
<span>人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div><span>外地人数</span></div>
|
||||
<div><span>0000</span><span>人</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<div class="video-title">
|
||||
<div class="title-name"><span>周边监控</span></div>
|
||||
<div class="check-more">查看更多</div>
|
||||
</div>
|
||||
<div class="video-play-content">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="[feature.data.channelCode]"
|
||||
></video-play>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import VideoPlay from './VideoPlay'
|
||||
import "viewerjs/dist/viewer.css";
|
||||
import { directive as viewer } from "v-viewer";
|
||||
import bus from "@/views/layout/bus";
|
||||
import { getStreamByChannelCode } from "@/api/videoSurveillance";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
VideoPlay,
|
||||
},
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.newImageUrl = this.IntelliURLReplaceIP(this.feature.data.imageUrl);
|
||||
console.log(this.newImageUrl);
|
||||
|
||||
console.log(this.feature, "1234567");
|
||||
this.$nextTick( () => {
|
||||
this.initPeopleCountingChart();
|
||||
})
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
debug: true,
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openVideo: false,
|
||||
newImageUrl: "",
|
||||
resourceType:"resource",
|
||||
channelCode:["3701222749350945"]
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openCurrentVideo(channelCode) {
|
||||
// this.openVideo = true;
|
||||
// bus.$emit('openCurrentVideo',channelCode)
|
||||
getStreamByChannelCode({ channelCode: channelCode }).then((res) => {
|
||||
let newVideoStream = this.IntelliURLReplaceIP(res.data.data, "video");
|
||||
bus.$emit("openCurrentVideo", newVideoStream);
|
||||
// this.openVideo = true;
|
||||
});
|
||||
},
|
||||
show() {
|
||||
const viewer = this.$el.querySelector(".images").$viewer;
|
||||
viewer.show();
|
||||
},
|
||||
IntelliURLReplaceIP(url, type) {
|
||||
var url = url || "";
|
||||
var ip =
|
||||
type == "video"
|
||||
? "http://15.72.183.90:7001"
|
||||
: window.SITE_CONFIG.apiURL;
|
||||
|
||||
try {
|
||||
if (url == "") {
|
||||
return url;
|
||||
}
|
||||
|
||||
if (url.indexOf(ip) != -1) {
|
||||
//console.log("the same ip.");
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
|
||||
//截取ip前字段"http:"
|
||||
if (url.indexOf("//") == -1) {
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
// var substr1 = url.substring(0,url.indexOf('//'));
|
||||
//console.log("oldurl protocol:",substr1);//"http:"
|
||||
|
||||
//截取ip后字段"it/local/facerec/default/20200609112555435018.jpg""
|
||||
if (url.indexOf("/components/") == -1) {
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
var substr2 = url.substring(
|
||||
url.indexOf("/components/") + 1,
|
||||
url.length
|
||||
);
|
||||
//console.log("oldurl path:", substr2);//"it/local/facerec/default/20200609112555435018.jpg"
|
||||
|
||||
var newurl = ip + "/" + substr2;
|
||||
//console.log("newurl:",newurl);
|
||||
|
||||
return newurl;
|
||||
} catch (exception) {
|
||||
//alert("error");
|
||||
}
|
||||
},
|
||||
//加载人流量统计图表
|
||||
initPeopleCountingChart(){
|
||||
let option = {
|
||||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||||
grid: {
|
||||
top: "20px",
|
||||
right: "40px",
|
||||
left: "40px",
|
||||
bottom: "20px",
|
||||
},
|
||||
tooltip: {
|
||||
// 鼠标悬浮提示框显示 X和Y 轴数据
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||||
borderColor: "rgba(32, 33, 36,0.20)",
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
// 文字提示样式
|
||||
color: "#fff",
|
||||
fontSize: "12",
|
||||
},
|
||||
shadowStyle: {
|
||||
color: "rgba(74, 211, 164, 0.15)",
|
||||
width: "20",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["2022.11.01", "2022.11.02", "2022.11.03", "2022.11.04", "2022.11.05","2022.11.06","2022.11.07"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
data: [60, 80, 100, 100, 150, 126,100,160],
|
||||
itemStyle: {
|
||||
color: 'orange',
|
||||
showSymbol: false,
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
const peopleCounting = echarts.init(
|
||||
document.getElementById('people-counting-chart')
|
||||
)
|
||||
peopleCounting.setOption(option)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.Event-List-Details-pop{
|
||||
.leaflet-popup-content{
|
||||
width: auto !important;
|
||||
p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.List-Details-pop {
|
||||
// width: 640px;
|
||||
// height: 320px;
|
||||
background-color: #25536d;
|
||||
font-size: 16px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
b {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.popup-title{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.title {
|
||||
padding: 12px 76px 0 5px;
|
||||
font-size: 16px;
|
||||
color: #66ffff;
|
||||
position: relative;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAFCAYAAADogtSaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0Q0Y4QzFGRkQ1QTYxMUVDQkJGREYyNEQ0M0Y1ODRBOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0Q0Y4QzIwMEQ1QTYxMUVDQkJGREYyNEQ0M0Y1ODRBOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRDRjhDMUZERDVBNjExRUNCQkZERjI0RDQzRjU4NEE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRDRjhDMUZFRDVBNjExRUNCQkZERjI0RDQzRjU4NEE5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+2WU6dgAAAUVJREFUeNp8kk8rhEEcx2eEkKNSZA/egIuDC8VL8PfiYg+7om0PK14DoRDZLVxcWLwEW1wcXLwBJVHKUQh5fKZ+q/H4zUx9+tbM9/vMzHcem0uSkjFmBRrM/3EF4xVrH+oT+FuRCkwbfRzAHJl38bcjezAZ8O9CEf+Ht0cvcgZ9iv8TCvjL6QUr4WHkGDqU8JM7COELf5JMAVmHRiVzLSXcidft40pbjpQ2hv/R+34bUo6Utg/z9dJ+LyPhHmmjXwl+wQLBjdSFBpEqdCqZZ5gic+75R5CjSGkT+C9TexSR1Uhpo2Tu/1xGgi3INmQDbRxCnvCrl+lCTmFA8X/DEqyRScSfEX+otBLezdS5huTPCZXm/pya1U5MOI9sQZOyfCNt3Hr+ZsS92mygBPd6WTIvXmk7MBMpLYf/zdujGzmJlLb4I8AA15l33Vi6TA4AAAAASUVORK5CYII=)
|
||||
no-repeat 80px 21px;
|
||||
background-size: 30%;
|
||||
span {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.title-button{
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 10px 0 5px;
|
||||
margin-left: 50px;
|
||||
.issued-button{
|
||||
width:50px;
|
||||
height:25px;
|
||||
background-color:#355d94;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.ignore-button{
|
||||
width:50px;
|
||||
height:25px;
|
||||
margin-left: 10px;
|
||||
background-color:#355d94;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.images {
|
||||
width: 320px;
|
||||
height: 200px;
|
||||
margin-left: 35px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
//background-color: #2fe2ed;
|
||||
//border-radius: 4px;
|
||||
margin: 10px 0 0;
|
||||
cursor: pointer;
|
||||
text-decoration:underline;
|
||||
|
||||
}
|
||||
.data-monitoring{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.basic-information{
|
||||
width:50%;
|
||||
.flow-chart{
|
||||
width:300px;
|
||||
height:200px;
|
||||
//background-color: red;
|
||||
.chart-title{
|
||||
width:100%;
|
||||
height:20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.chart-content{
|
||||
width:320px;
|
||||
height:196px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.relate-video{
|
||||
width:50%;
|
||||
//padding-left:10px;
|
||||
.population-statistics{
|
||||
width: 270px;
|
||||
height:60px;
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
//background-color: red;
|
||||
}
|
||||
.population-statistics>.item{
|
||||
//border: 1px solid black;
|
||||
padding-top: 5px;
|
||||
margin-left: 2px;
|
||||
flex:1;
|
||||
height:60px;
|
||||
text-align: center;
|
||||
background: #abcdef;
|
||||
line-height: 25px;
|
||||
.item-title{}
|
||||
.item-num{}
|
||||
.num-text{}
|
||||
.num-cell{}
|
||||
}
|
||||
.video-content{
|
||||
width: 330px;
|
||||
height: 280px;
|
||||
margin-top: 20px;
|
||||
//background-color: green;
|
||||
padding-left: 5px;
|
||||
.video-title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.title-name{
|
||||
width:200px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.check-more{
|
||||
width: 120px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
//background-color: #2fe2ed;
|
||||
//border-radius: 4px;
|
||||
margin: 5px 0 0;
|
||||
cursor: pointer;
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
.video-play-content{
|
||||
width: 320px;
|
||||
height: 233px;
|
||||
background-color: #abcdef;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .current-video {
|
||||
// width: 320px;
|
||||
// height: 180px;
|
||||
// }
|
||||
|
||||
</style>
|
|
@ -1,202 +0,0 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="List-Details-pop">
|
||||
<div style="width: 300px; text-align: left; padding: 5px">
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<div class="title">事件详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" style="padding: 5px">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<!-- <div class="green-cicle"><div></div></div> -->
|
||||
<p><b>事件来源:</b>视频感知</p>
|
||||
<p><b>时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>事件类型:</b>{{ feature.data.eventNewName || "" }}</p>
|
||||
<p><b>事件地址:</b>{{ feature.data.district || "" }}</p>
|
||||
<p><b>事件描述:</b>{{ feature.data.eventCnName || "" }}</p>
|
||||
<p><b>摄像头名称:</b>{{ feature.data.cameraName || "" }}</p>
|
||||
<p v-if="feature.data.vehicle != null">
|
||||
<b>车牌号:</b>{{ feature.data.vehicle || "" }}
|
||||
</p>
|
||||
<p><b>事件状态:</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="images" v-viewer="{ movable: false }">
|
||||
<img
|
||||
@click="show"
|
||||
v-show="feature.data.imageUrl && feature.data.imageUrl !== null"
|
||||
:src="newImageUrl || ''"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="button" @click="openCurrentVideo(feature.data.id)">实时监控</div> -->
|
||||
</div>
|
||||
<!-- <div v-if="openVideo" class="current-video">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="feature.data.channelCode"
|
||||
></video-play>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import VideoPlay from './VideoPlay'
|
||||
import "viewerjs/dist/viewer.css";
|
||||
import { directive as viewer } from "v-viewer";
|
||||
import bus from "@/views/layout/bus";
|
||||
import { getStreamByChannelCode } from "@/api/videoSurveillance";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
// VideoPlay,
|
||||
},
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.newImageUrl = this.IntelliURLReplaceIP(this.feature.data.imageUrl);
|
||||
console.log(this.newImageUrl);
|
||||
|
||||
console.log(this.feature, "1234567");
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
debug: true,
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openVideo: false,
|
||||
newImageUrl: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openCurrentVideo(channelCode) {
|
||||
// this.openVideo = true;
|
||||
// bus.$emit('openCurrentVideo',channelCode)
|
||||
getStreamByChannelCode({ channelCode: channelCode }).then((res) => {
|
||||
let newVideoStream = this.IntelliURLReplaceIP(res.data.data, "video");
|
||||
bus.$emit("openCurrentVideo", newVideoStream);
|
||||
// this.openVideo = true;
|
||||
});
|
||||
},
|
||||
show() {
|
||||
const viewer = this.$el.querySelector(".images").$viewer;
|
||||
viewer.show();
|
||||
},
|
||||
IntelliURLReplaceIP(url, type) {
|
||||
var url = url || "";
|
||||
var ip =
|
||||
type == "video"
|
||||
? "http://15.72.183.90:7001"
|
||||
: window.SITE_CONFIG.apiURL;
|
||||
|
||||
try {
|
||||
if (url == "") {
|
||||
return url;
|
||||
}
|
||||
|
||||
if (url.indexOf(ip) != -1) {
|
||||
//console.log("the same ip.");
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
|
||||
//截取ip前字段"http:"
|
||||
if (url.indexOf("//") == -1) {
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
// var substr1 = url.substring(0,url.indexOf('//'));
|
||||
//console.log("oldurl protocol:",substr1);//"http:"
|
||||
|
||||
//截取ip后字段"it/local/facerec/default/20200609112555435018.jpg""
|
||||
if (url.indexOf("/components/") == -1) {
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
var substr2 = url.substring(
|
||||
url.indexOf("/components/") + 1,
|
||||
url.length
|
||||
);
|
||||
//console.log("oldurl path:", substr2);//"it/local/facerec/default/20200609112555435018.jpg"
|
||||
|
||||
var newurl = ip + "/" + substr2;
|
||||
//console.log("newurl:",newurl);
|
||||
|
||||
return newurl;
|
||||
} catch (exception) {
|
||||
//alert("error");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.List-Details-pop {
|
||||
// width: 640px;
|
||||
// height: 320px;
|
||||
background-color: #25536d;
|
||||
font-size: 16px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
b {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.title {
|
||||
padding: 12px 76px 0 5px;
|
||||
font-size: 16px;
|
||||
color: #66ffff;
|
||||
position: relative;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAFCAYAAADogtSaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0Q0Y4QzFGRkQ1QTYxMUVDQkJGREYyNEQ0M0Y1ODRBOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0Q0Y4QzIwMEQ1QTYxMUVDQkJGREYyNEQ0M0Y1ODRBOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRDRjhDMUZERDVBNjExRUNCQkZERjI0RDQzRjU4NEE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRDRjhDMUZFRDVBNjExRUNCQkZERjI0RDQzRjU4NEE5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+2WU6dgAAAUVJREFUeNp8kk8rhEEcx2eEkKNSZA/egIuDC8VL8PfiYg+7om0PK14DoRDZLVxcWLwEW1wcXLwBJVHKUQh5fKZ+q/H4zUx9+tbM9/vMzHcem0uSkjFmBRrM/3EF4xVrH+oT+FuRCkwbfRzAHJl38bcjezAZ8O9CEf+Ht0cvcgZ9iv8TCvjL6QUr4WHkGDqU8JM7COELf5JMAVmHRiVzLSXcidft40pbjpQ2hv/R+34bUo6Utg/z9dJ+LyPhHmmjXwl+wQLBjdSFBpEqdCqZZ5gic+75R5CjSGkT+C9TexSR1Uhpo2Tu/1xGgi3INmQDbRxCnvCrl+lCTmFA8X/DEqyRScSfEX+otBLezdS5huTPCZXm/pya1U5MOI9sQZOyfCNt3Hr+ZsS92mygBPd6WTIvXmk7MBMpLYf/zdujGzmJlLb4I8AA15l33Vi6TA4AAAAASUVORK5CYII=)
|
||||
no-repeat 80px 21px;
|
||||
background-size: 30%;
|
||||
span {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.images {
|
||||
width: 290px;
|
||||
height: 160px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
background-color: #2fe2ed;
|
||||
border-radius: 4px;
|
||||
margin: 8px auto 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// .current-video {
|
||||
// width: 320px;
|
||||
// height: 180px;
|
||||
// }
|
||||
</style>
|
|
@ -0,0 +1,459 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="List-Details-pop">
|
||||
<div style="width: 350px; text-align: left; padding: 5px" v-if="resourceType=='video'">
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div class="popup-title">
|
||||
<div class="title">事件详情</div>
|
||||
<div class="title-button">
|
||||
<span class="issued-button">下发</span>
|
||||
<span class="ignore-button">忽略</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" style="padding: 5px">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div>
|
||||
<!-- <div class="green-cicle"><div></div></div> -->
|
||||
<p>
|
||||
<b>{{feature.data.district}}</b>
|
||||
<span>></span>
|
||||
<b>{{feature.data.district}}</b>
|
||||
<span>></span>
|
||||
<b>{{feature.data.cameraName}}</b>
|
||||
</p>
|
||||
<p><b>预警时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>持续时间:</b>32分钟</p>
|
||||
<p><b>事件状态:</b>待下发</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="images" v-viewer="{ movable: false }">
|
||||
<img
|
||||
@click="show"
|
||||
v-show="feature.data.imageUrl && feature.data.imageUrl !== null"
|
||||
:src="newImageUrl || ''"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="button" @click="openCurrentVideo(feature.data.id)">查看实时监控</div>
|
||||
</div>
|
||||
<!-- <div v-if="openVideo" class="current-video">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="feature.data.channelCode"
|
||||
></video-play>
|
||||
</div> -->
|
||||
|
||||
<!---->
|
||||
<div style="width: 680px; text-align: left; padding: 5px" v-else>
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div class="popup-title">
|
||||
<div class="title">事件详情</div>
|
||||
<div class="title-button">
|
||||
<span class="issued-button">下发</span>
|
||||
<span class="ignore-button">忽略</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-monitoring">
|
||||
<div class="basic-information">
|
||||
<div class="green-cicle"><div></div></div>
|
||||
<p><b>负责人:</b>张三</p>
|
||||
<p><b>联系方式:</b>13356870098</p>
|
||||
<p><b>告警时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<p><b>告警值:</b>42231</p>
|
||||
<p><b>事件状态:</b>待下发</p>
|
||||
<div class="flow-chart">
|
||||
<div class="chart-title"><span>告警当天人流量数值</span></div>
|
||||
<div class="chart-content" id="people-counting-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relate-video">
|
||||
<p style="margin-left:3px"><b>更新时间:</b>{{ feature.data.captureTime || "" }}</p>
|
||||
<div class="population-statistics">
|
||||
<div class="item">
|
||||
<div><span>当前人数</span></div>
|
||||
<div><span>0000</span><span>人</span></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>本地人数</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>0000</span>
|
||||
<span>人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div><span>外地人数</span></div>
|
||||
<div><span>0000</span><span>人</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<div class="video-title">
|
||||
<div class="title-name"><span>周边监控</span></div>
|
||||
<div class="check-more">查看更多</div>
|
||||
</div>
|
||||
<div class="video-play-content">
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="[feature.data.channelCode]"
|
||||
></video-play>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import VideoPlay from './VideoPlay'
|
||||
import "viewerjs/dist/viewer.css";
|
||||
import { directive as viewer } from "v-viewer";
|
||||
import bus from "@/views/layout/bus";
|
||||
import { getStreamByChannelCode } from "@/api/videoSurveillance";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
VideoPlay,
|
||||
},
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.newImageUrl = this.IntelliURLReplaceIP(this.feature.data.imageUrl);
|
||||
console.log(this.newImageUrl);
|
||||
|
||||
console.log(this.feature, "1234567");
|
||||
this.$nextTick( () => {
|
||||
this.initPeopleCountingChart();
|
||||
})
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
debug: true,
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openVideo: false,
|
||||
newImageUrl: "",
|
||||
resourceType:"resource",
|
||||
channelCode:["3701222749350945"]
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openCurrentVideo(channelCode) {
|
||||
// this.openVideo = true;
|
||||
// bus.$emit('openCurrentVideo',channelCode)
|
||||
getStreamByChannelCode({ channelCode: channelCode }).then((res) => {
|
||||
let newVideoStream = this.IntelliURLReplaceIP(res.data.data, "video");
|
||||
bus.$emit("openCurrentVideo", newVideoStream);
|
||||
// this.openVideo = true;
|
||||
});
|
||||
},
|
||||
show() {
|
||||
const viewer = this.$el.querySelector(".images").$viewer;
|
||||
viewer.show();
|
||||
},
|
||||
IntelliURLReplaceIP(url, type) {
|
||||
var url = url || "";
|
||||
var ip =
|
||||
type == "video"
|
||||
? "http://15.72.183.90:7001"
|
||||
: window.SITE_CONFIG.apiURL;
|
||||
|
||||
try {
|
||||
if (url == "") {
|
||||
return url;
|
||||
}
|
||||
|
||||
if (url.indexOf(ip) != -1) {
|
||||
//console.log("the same ip.");
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
|
||||
//截取ip前字段"http:"
|
||||
if (url.indexOf("//") == -1) {
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
// var substr1 = url.substring(0,url.indexOf('//'));
|
||||
//console.log("oldurl protocol:",substr1);//"http:"
|
||||
|
||||
//截取ip后字段"it/local/facerec/default/20200609112555435018.jpg""
|
||||
if (url.indexOf("/components/") == -1) {
|
||||
return url; //没有此字段则退出
|
||||
}
|
||||
var substr2 = url.substring(
|
||||
url.indexOf("/components/") + 1,
|
||||
url.length
|
||||
);
|
||||
//console.log("oldurl path:", substr2);//"it/local/facerec/default/20200609112555435018.jpg"
|
||||
|
||||
var newurl = ip + "/" + substr2;
|
||||
//console.log("newurl:",newurl);
|
||||
|
||||
return newurl;
|
||||
} catch (exception) {
|
||||
//alert("error");
|
||||
}
|
||||
},
|
||||
//加载人流量统计图表
|
||||
initPeopleCountingChart(){
|
||||
let option = {
|
||||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||||
grid: {
|
||||
top: "20px",
|
||||
right: "40px",
|
||||
left: "40px",
|
||||
bottom: "20px",
|
||||
},
|
||||
tooltip: {
|
||||
// 鼠标悬浮提示框显示 X和Y 轴数据
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||||
borderColor: "rgba(32, 33, 36,0.20)",
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
// 文字提示样式
|
||||
color: "#fff",
|
||||
fontSize: "12",
|
||||
},
|
||||
shadowStyle: {
|
||||
color: "rgba(74, 211, 164, 0.15)",
|
||||
width: "20",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["2022.11.01", "2022.11.02", "2022.11.03", "2022.11.04", "2022.11.05","2022.11.06","2022.11.07"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
yAxisIndex: 0,
|
||||
data: [60, 80, 100, 100, 150, 126,100,160],
|
||||
itemStyle: {
|
||||
color: 'orange',
|
||||
showSymbol: false,
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
const peopleCounting = echarts.init(
|
||||
document.getElementById('people-counting-chart')
|
||||
)
|
||||
peopleCounting.setOption(option)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.Event-List-Details-pop{
|
||||
.leaflet-popup-content{
|
||||
width: auto !important;
|
||||
p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.List-Details-pop {
|
||||
// width: 640px;
|
||||
// height: 320px;
|
||||
background-color: #25536d;
|
||||
font-size: 16px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
b {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.popup-title{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.title {
|
||||
padding: 12px 76px 0 5px;
|
||||
font-size: 16px;
|
||||
color: #66ffff;
|
||||
position: relative;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAFCAYAAADogtSaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0Q0Y4QzFGRkQ1QTYxMUVDQkJGREYyNEQ0M0Y1ODRBOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0Q0Y4QzIwMEQ1QTYxMUVDQkJGREYyNEQ0M0Y1ODRBOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRDRjhDMUZERDVBNjExRUNCQkZERjI0RDQzRjU4NEE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRDRjhDMUZFRDVBNjExRUNCQkZERjI0RDQzRjU4NEE5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+2WU6dgAAAUVJREFUeNp8kk8rhEEcx2eEkKNSZA/egIuDC8VL8PfiYg+7om0PK14DoRDZLVxcWLwEW1wcXLwBJVHKUQh5fKZ+q/H4zUx9+tbM9/vMzHcem0uSkjFmBRrM/3EF4xVrH+oT+FuRCkwbfRzAHJl38bcjezAZ8O9CEf+Ht0cvcgZ9iv8TCvjL6QUr4WHkGDqU8JM7COELf5JMAVmHRiVzLSXcidft40pbjpQ2hv/R+34bUo6Utg/z9dJ+LyPhHmmjXwl+wQLBjdSFBpEqdCqZZ5gic+75R5CjSGkT+C9TexSR1Uhpo2Tu/1xGgi3INmQDbRxCnvCrl+lCTmFA8X/DEqyRScSfEX+otBLezdS5huTPCZXm/pya1U5MOI9sQZOyfCNt3Hr+ZsS92mygBPd6WTIvXmk7MBMpLYf/zdujGzmJlLb4I8AA15l33Vi6TA4AAAAASUVORK5CYII=)
|
||||
no-repeat 80px 21px;
|
||||
background-size: 30%;
|
||||
span {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.title-button{
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 10px 0 5px;
|
||||
margin-left: 50px;
|
||||
.issued-button{
|
||||
width:50px;
|
||||
height:25px;
|
||||
background-color:#355d94;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.ignore-button{
|
||||
width:50px;
|
||||
height:25px;
|
||||
margin-left: 10px;
|
||||
background-color:#355d94;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.images {
|
||||
width: 320px;
|
||||
height: 200px;
|
||||
margin-left: 35px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
//background-color: #2fe2ed;
|
||||
//border-radius: 4px;
|
||||
margin: 10px 0 0;
|
||||
cursor: pointer;
|
||||
text-decoration:underline;
|
||||
|
||||
}
|
||||
.data-monitoring{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.basic-information{
|
||||
width:50%;
|
||||
.flow-chart{
|
||||
width:300px;
|
||||
height:200px;
|
||||
//background-color: red;
|
||||
.chart-title{
|
||||
width:100%;
|
||||
height:20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.chart-content{
|
||||
width:320px;
|
||||
height:196px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.relate-video{
|
||||
width:50%;
|
||||
//padding-left:10px;
|
||||
.population-statistics{
|
||||
width: 270px;
|
||||
height:60px;
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
//background-color: red;
|
||||
}
|
||||
.population-statistics>.item{
|
||||
//border: 1px solid black;
|
||||
padding-top: 5px;
|
||||
margin-left: 2px;
|
||||
flex:1;
|
||||
height:60px;
|
||||
text-align: center;
|
||||
background: #abcdef;
|
||||
line-height: 25px;
|
||||
.item-title{}
|
||||
.item-num{}
|
||||
.num-text{}
|
||||
.num-cell{}
|
||||
}
|
||||
.video-content{
|
||||
width: 330px;
|
||||
height: 280px;
|
||||
margin-top: 20px;
|
||||
//background-color: green;
|
||||
padding-left: 5px;
|
||||
.video-title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.title-name{
|
||||
width:200px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.check-more{
|
||||
width: 120px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
//background-color: #2fe2ed;
|
||||
//border-radius: 4px;
|
||||
margin: 5px 0 0;
|
||||
cursor: pointer;
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
.video-play-content{
|
||||
width: 320px;
|
||||
height: 233px;
|
||||
background-color: #abcdef;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .current-video {
|
||||
// width: 320px;
|
||||
// height: 180px;
|
||||
// }
|
||||
|
||||
</style>
|
Loading…
Reference in New Issue