新修改的文件名
This commit is contained in:
chenchenzai
parent
f584018da2
commit
6855e40251
|
|
@ -2,49 +2,17 @@
|
||||||
<div class="pop-box">
|
<div class="pop-box">
|
||||||
<div class="title-bg"></div>
|
<div class="title-bg"></div>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>重点区域详情</span>
|
<span>{{ feature.data.areaName || "" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-base-information">
|
<div class="site-address">{{ feature.data.location || "" }}</div>
|
||||||
<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-content">
|
<div class="site-content">
|
||||||
<div class="site-content-title">
|
<div class="site-content-left">
|
||||||
<div v-for="(item, index) in menuList" :key="index">
|
<div>
|
||||||
<div class="item" :class="selectedIndex == index ? 'is-active' : ''" @click="handleCheck(item,index)">
|
<div>管理单位：{{ feature.data.management || "" }}</div>
|
||||||
<span>{{item.menuName}}</span>
|
<el-tooltip :content="feature.data.about">
|
||||||
</div>
|
<div class="left-mid-line" style="text-overflow:ellipsis">景区简介：{{ getAbout(feature.data.about)}}</div>
|
||||||
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="site-content-content" v-show="selectedIndex == 0">
|
|
||||||
<div class="site-content-left">
|
|
||||||
<div class="area-content-left-top">
|
<div class="area-content-left-top">
|
||||||
<div>
|
<div>
|
||||||
<div>当前人数</div>
|
<div>当前人数</div>
|
||||||
|
|
@ -58,6 +26,20 @@
|
||||||
<div>外地人数</div>
|
<div>外地人数</div>
|
||||||
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
|
||||||
</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>
|
||||||
<div class="site-content-left-bottom">
|
<div class="site-content-left-bottom">
|
||||||
<div class="filter-btn-typeSelect">
|
<div class="filter-btn-typeSelect">
|
||||||
|
|
@ -72,20 +54,26 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-content-right">
|
<div class="site-content-right">
|
||||||
<div class="people-total">
|
<!-- <div
|
||||||
<div class="total-num">
|
class="images"
|
||||||
<span>月累计人数：</span>
|
v-viewer="{movable: false}"
|
||||||
<span>123112</span>
|
style="
|
||||||
</div>
|
width: 280px;
|
||||||
<div class="year-on-year">
|
height: 158px;
|
||||||
<span>月累计同比：</span>
|
cursor: pointer;
|
||||||
<span>-1.5%</span>
|
"
|
||||||
</div>
|
>
|
||||||
|
<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>
|
||||||
<div class="video-table">
|
<div class="video-table">
|
||||||
<h4>人员聚集明细</h4>
|
<h4>周边监控</h4>
|
||||||
<el-table
|
<el-table
|
||||||
:data="personnelAggregationData"
|
:data="cameraData"
|
||||||
@row-click="openVideo"
|
@row-click="openVideo"
|
||||||
:cell-style="{
|
:cell-style="{
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
|
|
@ -99,144 +87,12 @@
|
||||||
'background-color': '#2b4b7a',
|
'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>
|
||||||
<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>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -246,7 +102,6 @@ import 'viewerjs/dist/viewer.css'
|
||||||
import { directive as viewer } from "v-viewer"
|
import { directive as viewer } from "v-viewer"
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
|
import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
|
||||||
import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
|
|
||||||
export default {
|
export default {
|
||||||
name: "",
|
name: "",
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -258,8 +113,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||||
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
|
|
||||||
res.data.data.forEach((item) => {
|
res.data.data.forEach((item) => {
|
||||||
this.weekData.time.unshift(item.pushTime)
|
this.weekData.time.unshift(item.pushTime)
|
||||||
this.weekData.local.unshift(item.localNums)
|
this.weekData.local.unshift(item.localNums)
|
||||||
|
|
@ -268,8 +122,6 @@ export default {
|
||||||
this.chartData = this.weekData
|
this.chartData = this.weekData
|
||||||
this.initCharts()
|
this.initCharts()
|
||||||
})
|
})
|
||||||
})
|
|
||||||
|
|
||||||
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
|
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
|
||||||
res.data.data.forEach((item) => {
|
res.data.data.forEach((item) => {
|
||||||
this.monthData.time.unshift(item.pushTime)
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
filterButton:{
|
filterButton:{
|
||||||
typeSelect:['当天人流量','近30天人流量',],
|
typeSelect:['近7天','近30天',],
|
||||||
typeSelectActive:'当天人流量',
|
typeSelectActive:'近7天',
|
||||||
},
|
},
|
||||||
cameraData: [],
|
cameraData: [],
|
||||||
personnelAggregationData:[],
|
|
||||||
weekData:{
|
weekData:{
|
||||||
time:[],
|
time:[],
|
||||||
local:[],
|
local:[],
|
||||||
|
|
@ -324,30 +158,7 @@ export default {
|
||||||
outer:[],
|
outer:[],
|
||||||
},
|
},
|
||||||
chartData:{},
|
chartData:{},
|
||||||
picUrl: '',
|
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:[],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -495,121 +306,6 @@ export default {
|
||||||
const viewer = this.$el.querySelector('.images').$viewer
|
const viewer = this.$el.querySelector('.images').$viewer
|
||||||
viewer.show()
|
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: {
|
directives: {
|
||||||
viewer: viewer({
|
viewer: viewer({
|
||||||
|
|
@ -629,8 +325,8 @@ export default {
|
||||||
border: 1px solid rgba(50,227,235,.95);
|
border: 1px solid rgba(50,227,235,.95);
|
||||||
}
|
}
|
||||||
.leaflet-popup-content {
|
.leaflet-popup-content {
|
||||||
width: 750px !important;
|
width: 734px !important;
|
||||||
height: 500px;
|
height: 453px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
.pop-box {
|
.pop-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -649,9 +345,6 @@ export default {
|
||||||
.title{
|
.title{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
span:nth-child(1) {
|
|
||||||
font-weight:bold;
|
|
||||||
}
|
|
||||||
span:nth-child(2) {
|
span:nth-child(2) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
|
@ -665,68 +358,18 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-base-information{
|
.site-address {
|
||||||
height: 90px;
|
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
|
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||||
color: rgba(255, 255, 255, .6);
|
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 {
|
.site-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
.site-content-left {
|
||||||
.site-content-title{
|
width: 392px;
|
||||||
width:100%;
|
margin-right: 29px;
|
||||||
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;
|
|
||||||
.left-mid-line {
|
.left-mid-line {
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
@ -773,87 +416,9 @@ export default {
|
||||||
height: 206px;
|
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 {
|
.site-content-right {
|
||||||
width: 400px;
|
width: 280px;
|
||||||
.img-container {
|
.img-container {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
height: 158px;
|
height: 158px;
|
||||||
|
|
@ -862,22 +427,6 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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 {
|
.video-table {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
h4 {
|
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>
|
<template>
|
||||||
<div class="pop-box">
|
<div class="pop-box">
|
||||||
<div class="List-Details-pop">
|
<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 class="content">
|
||||||
<div style="display: flex; flex-direction: column">
|
<div style="display: flex; flex-direction: column">
|
||||||
<div class="popup-title">
|
<div>
|
||||||
<div class="title">事件详情</div>
|
<div class="title">事件详情</div>
|
||||||
<div class="title-button">
|
|
||||||
<span class="issued-button">下发</span>
|
|
||||||
<span class="ignore-button">忽略</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -17,16 +13,16 @@
|
||||||
<div style="display: flex; flex-direction: column">
|
<div style="display: flex; flex-direction: column">
|
||||||
<div>
|
<div>
|
||||||
<!-- <div class="green-cicle"><div></div></div> -->
|
<!-- <div class="green-cicle"><div></div></div> -->
|
||||||
<p>
|
<p><b>事件来源：</b>视频感知</p>
|
||||||
<b>{{feature.data.district}}</b>
|
<p><b>时间：</b>{{ feature.data.captureTime || "" }}</p>
|
||||||
<span>></span>
|
<p><b>事件类型：</b>{{ feature.data.eventNewName || "" }}</p>
|
||||||
<b>{{feature.data.district}}</b>
|
<p><b>事件地址：</b>{{ feature.data.district || "" }}</p>
|
||||||
<span>></span>
|
<p><b>事件描述：</b>{{ feature.data.eventCnName || "" }}</p>
|
||||||
<b>{{feature.data.cameraName}}</b>
|
<p><b>摄像头名称：</b>{{ feature.data.cameraName || "" }}</p>
|
||||||
|
<p v-if="feature.data.vehicle != null">
|
||||||
|
<b>车牌号：</b>{{ feature.data.vehicle || "" }}
|
||||||
</p>
|
</p>
|
||||||
<p><b>预警时间：</b>{{ feature.data.captureTime || "" }}</p>
|
<p><b>事件状态：</b></p>
|
||||||
<p><b>持续时间：</b>32分钟</p>
|
|
||||||
<p><b>事件状态：</b>待下发</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -38,82 +34,18 @@
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="button" @click="openCurrentVideo(feature.data.id)">查看实时监控</div>
|
<!-- <div class="button" @click="openCurrentVideo(feature.data.id)">实时监控</div> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- <div v-if="openVideo" class="current-video">
|
<!-- <div v-if="openVideo" class="current-video">
|
||||||
<video-play
|
<video-play
|
||||||
:key="channelCode" :channel-id="feature.data.channelCode"
|
:key="channelCode" :channel-id="feature.data.channelCode"
|
||||||
></video-play>
|
></video-play>
|
||||||
</div> -->
|
</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>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
// import VideoPlay from './VideoPlay'
|
||||||
import VideoPlay from './VideoPlay'
|
|
||||||
import "viewerjs/dist/viewer.css";
|
import "viewerjs/dist/viewer.css";
|
||||||
import { directive as viewer } from "v-viewer";
|
import { directive as viewer } from "v-viewer";
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
|
|
@ -121,7 +53,7 @@ import { getStreamByChannelCode } from "@/api/videoSurveillance";
|
||||||
export default {
|
export default {
|
||||||
name: "",
|
name: "",
|
||||||
components: {
|
components: {
|
||||||
VideoPlay,
|
// VideoPlay,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
feature: {
|
feature: {
|
||||||
|
|
@ -136,9 +68,6 @@ export default {
|
||||||
console.log(this.newImageUrl);
|
console.log(this.newImageUrl);
|
||||||
|
|
||||||
console.log(this.feature, "1234567");
|
console.log(this.feature, "1234567");
|
||||||
this.$nextTick( () => {
|
|
||||||
this.initPeopleCountingChart();
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
viewer: viewer({
|
viewer: viewer({
|
||||||
|
|
@ -149,9 +78,6 @@ export default {
|
||||||
return {
|
return {
|
||||||
openVideo: false,
|
openVideo: false,
|
||||||
newImageUrl: "",
|
newImageUrl: "",
|
||||||
resourceType:"resource",
|
|
||||||
channelCode:["3701222749350945"]
|
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -210,83 +136,10 @@ export default {
|
||||||
//alert("error");
|
//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>
|
</script>
|
||||||
<style lang='scss'>
|
<style lang='scss' scoped>
|
||||||
.Event-List-Details-pop{
|
|
||||||
.leaflet-popup-content{
|
|
||||||
width: auto !important;
|
|
||||||
p {
|
|
||||||
margin: 12px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.List-Details-pop {
|
.List-Details-pop {
|
||||||
// width: 640px;
|
// width: 640px;
|
||||||
// height: 320px;
|
// height: 320px;
|
||||||
|
|
@ -306,10 +159,10 @@ export default {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.popup-title{
|
.leaflet-popup-content p {
|
||||||
display: flex;
|
margin: 12px 0;
|
||||||
flex-direction: row;
|
}
|
||||||
.title {
|
.title {
|
||||||
padding: 12px 76px 0 5px;
|
padding: 12px 76px 0 5px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #66ffff;
|
color: #66ffff;
|
||||||
|
|
@ -322,35 +175,9 @@ export default {
|
||||||
right: 10px;
|
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 {
|
.images {
|
||||||
width: 320px;
|
width: 290px;
|
||||||
height: 200px;
|
height: 160px;
|
||||||
margin-left: 35px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -358,102 +185,18 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.button {
|
.button {
|
||||||
width: 100px;
|
width: 80px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
//background-color: #2fe2ed;
|
background-color: #2fe2ed;
|
||||||
//border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: 10px 0 0;
|
margin: 8px auto 0;
|
||||||
cursor: pointer;
|
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 {
|
// .current-video {
|
||||||
// width: 320px;
|
// width: 320px;
|
||||||
// height: 180px;
|
// height: 180px;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
</style>
|
</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