|
@@ -141,14 +141,14 @@
|
|
|
<p>智能物联</p>
|
|
|
</div>
|
|
|
<p class="content-position-monitor-num-p">总数:{{monitorNum}}</p>
|
|
|
- <div class="content-monitor-for-box" :class="!monitorList[0]?'content-monitor-null-box':''">
|
|
|
+ <div class="content-monitor-for-box scrollbar-box" :class="!monitorList[0]?'content-monitor-null-box':''">
|
|
|
<div class="monitor-for-box" v-for="(item,index) in monitorList" :key="index">
|
|
|
<div class="monitor-num-box">
|
|
|
<p class="monitor-num-p">{{item.count}}</p>
|
|
|
<div class="monitor-img-box">
|
|
|
<!--svg组件-->
|
|
|
<!--<svg-icon class="svg-img" icon-class="http://192.168.1.43/labSystem/admin/statics/statics/bigFile/2022020818/404.svg"/>-->
|
|
|
- <svg-icon class="svg-img" :icon-class="item.smallIcon"/>
|
|
|
+ <svg-icon v-if="item.exceptionIcon" class="svg-img" :icon-class="item.exceptionIcon"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="monitor-name-p">{{item.name}}</p>
|
|
@@ -165,8 +165,9 @@
|
|
|
<img src="@/assets/ZDimages/emergencyManagement/icon_yygb_wxy.png">
|
|
|
<p>危险源</p>
|
|
|
</div>
|
|
|
- <div class="content-danger-for-box" :class="!dangerList[0]?'content-danger-null-box':''">
|
|
|
- <div class="null-box" v-if="!dangerList[0]">
|
|
|
+ <div class="content-danger-for-box" :class="!dangerList.nameList[0]?'content-danger-null-box':''">
|
|
|
+ <div class="danger-for-box" id="eCharts" v-show="dangerList.nameList[0]"></div>
|
|
|
+ <div class="null-box" v-if="!dangerList.nameList[0]">
|
|
|
<img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_zwzzsj.png">
|
|
|
<p class="null-p">暂无数据</p>
|
|
|
</div>
|
|
@@ -206,7 +207,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import { laboratoryBigViewGetBuildByBigView,laboratoryBigViewGetFloorByBigView,
|
|
|
+ import { laboratoryBigViewGetBuildByBigView,laboratoryBigViewGetFloorByBigView,laboratoryBigViewHazardCensus,
|
|
|
iotBigViewStatisticsHardwareDeviceType,iotBigViewDeviceList,laboratoryBigViewOnLineUserList } from "@/api/emergencyManagement/index";
|
|
|
import { laboratoryBigViewSelectTriggerInfo } from "@/api/commonality/permission";
|
|
|
import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
|
|
@@ -215,6 +216,9 @@
|
|
|
components: {
|
|
|
mpegtsVideo,
|
|
|
},
|
|
|
+ props:{
|
|
|
+ propsBigData:{},
|
|
|
+ },
|
|
|
data () {
|
|
|
return {
|
|
|
//当前路由状态
|
|
@@ -233,7 +237,11 @@
|
|
|
monitorList:[],
|
|
|
monitorNum:0,
|
|
|
//危险源
|
|
|
- dangerList:[],
|
|
|
+ dangerList:{
|
|
|
+ nameList: [],
|
|
|
+ numList: [],
|
|
|
+ maxNumList: [],
|
|
|
+ },
|
|
|
//视频数据
|
|
|
videoQueryParams:{
|
|
|
page:1,
|
|
@@ -260,6 +268,8 @@
|
|
|
}else{
|
|
|
this.$set(this,'routeType',false);
|
|
|
}
|
|
|
+ this.$set(this,'buildId',this.propsBigData.buildId);
|
|
|
+ this.$set(this,'floorId',this.propsBigData.floorId);
|
|
|
},
|
|
|
mounted () {
|
|
|
this.getBuild();
|
|
@@ -289,7 +299,7 @@
|
|
|
//获取楼层-摄像头列表;
|
|
|
this.iotBigViewDeviceList();
|
|
|
//获取楼层-危险源统计;
|
|
|
- //获取楼层-内实验室内人数;
|
|
|
+ this.laboratoryBigViewHazardCensus();
|
|
|
},
|
|
|
//切换楼层
|
|
|
clickFloor(item,index){
|
|
@@ -300,18 +310,28 @@
|
|
|
//楼栋数据选择
|
|
|
buildingChange(){
|
|
|
//获取楼层数据
|
|
|
- this.getFloor();
|
|
|
+ this.getFloor(2);
|
|
|
},
|
|
|
//跳转
|
|
|
goRoute(){
|
|
|
if(this.routeType){
|
|
|
this.$router.push({
|
|
|
- path: "/emergencyManagement/performEvacuation"
|
|
|
+ path: "/emergencyManagement/performEvacuation",
|
|
|
+ query: {
|
|
|
+ buildId: this.buildId,
|
|
|
+ floorId:this.floorId,
|
|
|
+ type:1,
|
|
|
+ }
|
|
|
})
|
|
|
this.exitfull();
|
|
|
}else{
|
|
|
this.$router.push({
|
|
|
- path: "/performEvacuationBig"
|
|
|
+ path: "/performEvacuationBig",
|
|
|
+ query: {
|
|
|
+ buildId: this.buildId,
|
|
|
+ floorId:this.floorId,
|
|
|
+ type:1,
|
|
|
+ }
|
|
|
})
|
|
|
this.fullScreen();
|
|
|
}
|
|
@@ -321,20 +341,37 @@
|
|
|
laboratoryBigViewGetBuildByBigView({type:2}).then(response => {
|
|
|
if(response.data[0]){
|
|
|
this.$set(this,'buildOptions',response.data);
|
|
|
- this.$set(this,'buildId',response.data[0].id);
|
|
|
+ if(!this.buildId){
|
|
|
+ this.$set(this,'buildId',response.data[0].id);
|
|
|
+ }
|
|
|
//获取楼层数据
|
|
|
- this.getFloor();
|
|
|
+ this.getFloor(1);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//获取楼层数据
|
|
|
- getFloor(){
|
|
|
+ getFloor(type){
|
|
|
+ let self = this;
|
|
|
laboratoryBigViewGetBuildByBigView({id:this.buildId,type:3}).then(response => {
|
|
|
//重置 楼层数据
|
|
|
this.$set(this,'floorOptions',response.data);
|
|
|
- this.$set(this,'floorId',response.data[0].id);
|
|
|
- //重置 选中楼层
|
|
|
- this.$set(this,'checkFloor',0);
|
|
|
+ if(type == 1){
|
|
|
+ if(self.floorId){
|
|
|
+ response.data.forEach((item,index)=>{
|
|
|
+ if(item.id == self.floorId){
|
|
|
+ this.$set(this,'checkFloor',index);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.$set(this,'floorId',response.data[0].id);
|
|
|
+ //重置 选中楼层
|
|
|
+ this.$set(this,'checkFloor',0);
|
|
|
+ }
|
|
|
+ }else if(type == 2){
|
|
|
+ this.$set(this,'floorId',response.data[0].id);
|
|
|
+ //重置 选中楼层
|
|
|
+ this.$set(this,'checkFloor',0);
|
|
|
+ }
|
|
|
this.getFloorData();
|
|
|
})
|
|
|
},
|
|
@@ -526,6 +563,178 @@
|
|
|
this.$set(this,'videoTotal',response.data.total);
|
|
|
})
|
|
|
},
|
|
|
+ //查询实验室危险源
|
|
|
+ laboratoryBigViewHazardCensus(){
|
|
|
+ laboratoryBigViewHazardCensus({floorId:this.floorId}).then(response => {
|
|
|
+ if(response.data[0]){
|
|
|
+ let obj = {
|
|
|
+ nameList: [],
|
|
|
+ numList: [],
|
|
|
+ maxNumList: [],
|
|
|
+ }
|
|
|
+ for(let i=0;i<response.data.length;i++){
|
|
|
+ obj.nameList.push(response.data[i].name)
|
|
|
+ obj.numList.push(response.data[i].percentage)
|
|
|
+ obj.maxNumList.push(100)
|
|
|
+ }
|
|
|
+ this.$set(this,'dangerList',obj);
|
|
|
+ this.eChartsFunction(this.dangerList);
|
|
|
+ }else{
|
|
|
+ let obj = {
|
|
|
+ nameList: [],
|
|
|
+ numList: [],
|
|
|
+ maxNumList: [],
|
|
|
+ }
|
|
|
+ this.$set(this,'dangerList',obj);
|
|
|
+ this.eChartsFunction(this.dangerList);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //eCharts表格
|
|
|
+ eChartsFunction(obj){
|
|
|
+ let self = this;
|
|
|
+ let myChart = this.$echarts.init(document.getElementById('eCharts'));
|
|
|
+ let option = {
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ grid: {
|
|
|
+ left: '6%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '5%',
|
|
|
+ top: '10%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ legend: [{
|
|
|
+ show: false,
|
|
|
+ }],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: obj.nameList,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(5, 80, 93, 1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ // color: 'black',
|
|
|
+ color: '#fff',
|
|
|
+ fontFamily: 'DIN-Medium',
|
|
|
+ padding: [3, 0, 0, 0]
|
|
|
+ },
|
|
|
+
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: obj.nameList,
|
|
|
+ show: false,
|
|
|
+ },],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ name: "",
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontFamily: 'Source Han Sans CN',
|
|
|
+ fontWeight: '400',
|
|
|
+ color: 'rgba(255, 255, 255, 1)',
|
|
|
+ padding: [0, 75, -8, 0]
|
|
|
+ },
|
|
|
+ nameGap: 24,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(5, 80, 93, 1)',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(5, 80, 93, 1)',
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ alignTicks: true,
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: 'rgba(255, 255, 255, 1)',
|
|
|
+ fontFamily: 'DIN-Medium',
|
|
|
+ padding: [0, 7, 0, 0]
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ fontSize: 12,
|
|
|
+ color: 'rgba(16, 213, 223, 1)',
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value + '%'
|
|
|
+ },
|
|
|
+ offset: [0, -10],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ barWidth: 14,
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0, x2: 0, y: 0, y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ { offset: 0, color: '#00FCFC' },
|
|
|
+ { offset: 1, color: '#016FCC' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: '',
|
|
|
+ data: obj.numList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 分隔
|
|
|
+ type: 'pictorialBar',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(3, 72, 84, 0.5)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ symbolRepeat: 'fixed',//重复
|
|
|
+ symbolMargin: 2,//上下间隔
|
|
|
+ symbol: 'rect',//图形类型
|
|
|
+ symbolClip: true,//是否裁剪
|
|
|
+ symbolSize: [20, 2],//图形的大小,可以用数组分开表示宽和高
|
|
|
+ symbolPosition: 'center',//图形的定位位置
|
|
|
+ symbolOffset: [0, 2],//图形相对于原本位置的偏移
|
|
|
+ data: obj.numList,
|
|
|
+ z: 0,
|
|
|
+ zlevel: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 40,
|
|
|
+ xAxisIndex: 1,
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(0, 0, 0, 0)'
|
|
|
+ },
|
|
|
+ name: '',
|
|
|
+ data: obj.maxNumList
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
//计算布局最大尺寸
|
|
|
calculateMapMax(list) {
|
|
|
//基础参数
|
|
@@ -1042,6 +1251,7 @@
|
|
|
.content-monitor-box{
|
|
|
width:954px;
|
|
|
position: relative;
|
|
|
+ overflow: hidden;
|
|
|
.content-position-monitor-num-p{
|
|
|
position: absolute;
|
|
|
top:27px;
|
|
@@ -1055,12 +1265,12 @@
|
|
|
.content-monitor-for-box{
|
|
|
margin-left:33px;
|
|
|
margin-top:20px;
|
|
|
- width:860px;
|
|
|
+ width:870px;
|
|
|
height:260px;
|
|
|
position: relative;
|
|
|
.monitor-for-box{
|
|
|
display: inline-block;
|
|
|
- margin:15px 30px 0 0;
|
|
|
+ margin:14px 30px 0 0;
|
|
|
.monitor-num-box{
|
|
|
background: url("../../../assets/ZDimages/emergencyManagement/monitor/icon_znjc_bg.png");
|
|
|
background-size: 100%;
|
|
@@ -1122,6 +1332,21 @@
|
|
|
.content-monitor-null-box{
|
|
|
background-color: #021e30;
|
|
|
}
|
|
|
+ //滚动条
|
|
|
+ .scrollbar-box::-webkit-scrollbar{
|
|
|
+ width: 6px!important; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 6px!important;
|
|
|
+ }
|
|
|
+ .scrollbar-box::-webkit-scrollbar-thumb{
|
|
|
+ border-radius: 5px!important;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px #116e8e!important;
|
|
|
+ background: #116e8e!important;
|
|
|
+ }
|
|
|
+ .scrollbar-box::-webkit-scrollbar-track{
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0)!important;
|
|
|
+ border-radius: 0!important;
|
|
|
+ background: rgba(255,255,255,0)!important;
|
|
|
+ }
|
|
|
}
|
|
|
.content-danger-box{
|
|
|
width:539px;
|
|
@@ -1130,6 +1355,10 @@
|
|
|
width:480px;
|
|
|
height:260px;
|
|
|
position: relative;
|
|
|
+ .danger-for-box{
|
|
|
+ width:480px;
|
|
|
+ height:260px;
|
|
|
+ }
|
|
|
.null-box{
|
|
|
position: absolute;
|
|
|
left:50%;
|