update code
parent
1ec6464f3c
commit
255cec71e6
|
|
@ -0,0 +1,18 @@
|
|||
.scroll::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.scroll::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(1, 169, 255);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-date-picker-pop{
|
||||
background-image: url('../images/list_bgd.png');
|
||||
border:solid 1px rgb(1, 169, 255);
|
||||
}
|
||||
.div-no-data{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
|
|
@ -9,8 +9,8 @@
|
|||
<link rel="stylesheet" href="/cdn/element-ui/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="css/largeScreenLayout.css">
|
||||
<link rel="stylesheet" href="css/largeScreenStyle.css?v=2023101401">
|
||||
|
||||
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=qmQNEi1qbFX628WfMt4imhdT87RbCRzK"></script> -->
|
||||
<link rel="stylesheet" href="css/new.css?v=2023101401">
|
||||
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=5M76qMCiVjSG7bGOTcYmZdg0MQinsKve"></script>
|
||||
<script src="/cdn/vue/dist/vue.js"></script>
|
||||
<script src="/cdn/element-ui/lib/index.js"></script>
|
||||
<script src="/cdn/jquery/3.5.1/jquery.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import Vue from 'vue'
|
||||
/**
|
||||
* 顶部header
|
||||
*/
|
||||
Vue.component("baidu-maps", {
|
||||
template: `
|
||||
<div class="baidu-map" ref="allMap"></div>
|
||||
<div class="baidu-map" ref="allMap"></div>
|
||||
|
||||
`,
|
||||
props: {
|
||||
data:{
|
||||
|
|
@ -68,7 +71,7 @@ Vue.component("baidu-maps", {
|
|||
|
||||
$(".BMap_bubble_pop").css("background-color","rgba(0,0,0,0)")
|
||||
$(".BMap_bubble_pop").css("border","0")
|
||||
$(".BMap_bubble_pop img").attr("src","/cdn/images/WEB_3578CFDB64B74818851FE993E99B2274.png")
|
||||
$(".BMap_bubble_pop img").attr("src","https://fileimg.makalu.cc/WEB_3578CFDB64B74818851FE993E99B2274.png")
|
||||
map.openInfoWindow(infoWindow,point); //开启信息窗口
|
||||
|
||||
// infoWindow.addEventListener('open',function(type, target, point){ //窗口打开是，隐藏自带的关闭按钮
|
||||
|
|
@ -1850,9 +1853,9 @@ Vue.component("baidu-maps", {
|
|||
}
|
||||
},
|
||||
watch:{
|
||||
/*data: function (n,o) {
|
||||
data:function () {
|
||||
this.init()
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
/**
|
||||
* 顶部header
|
||||
*/
|
||||
Vue.component("dumbwaiter-1", {
|
||||
template: `
|
||||
<div class="safe-tower-content">
|
||||
<div class="safe-tower-content-title">
|
||||
<span>{{value.name}}</span>
|
||||
</div>
|
||||
<div class="safe-tower-content-data">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>吊笼尺寸/m</p>
|
||||
<div><span>{{value.cageSize}}</span></div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>额定载重量</p>
|
||||
<div><span>{{value.loadCapacity}}</span> Kg</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>额定乘客人数</p>
|
||||
<div><span>{{value.numberPeople}}</span> 人</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div style="height:330px;background: url('images/dumbwaiter.png') no-repeat center/auto 100%">
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>最大提升高度</p>
|
||||
<div><span>{{value.liftingHeight}}</span> m</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>额定运行速度</p>
|
||||
<div><span>{{value.runningSpeed}}</span> m/min</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>进场时间</p>
|
||||
<div><span>{{value.enterTime}}</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
value:{
|
||||
type:Object
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
//this.animation()
|
||||
|
||||
},
|
||||
methods: {
|
||||
animation(){
|
||||
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
/**
|
||||
* 顶部header
|
||||
*/
|
||||
Vue.component("dumbwaiter-2", {
|
||||
template: `
|
||||
<div class="safe-tower-content">
|
||||
<div class="safe-tower-content-title">
|
||||
<span>{{value.name}}</span>
|
||||
</div>
|
||||
<div class="safe-tower-content-data">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>吊笼尺寸/m</p>
|
||||
<div><span>{{value.cageSize}}</span></div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>额定载重量</p>
|
||||
<div><span>{{value.loadCapacity}}</span> Kg</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>额定乘客人数</p>
|
||||
<div><span>{{value.numberPeople}}</span> 人</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div style="height:330px;background: url('images/dumbwaiter.png') no-repeat center/auto 100%">
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>最大提升高度</p>
|
||||
<div><span>{{value.liftingHeight}}</span> m</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>额定运行速度</p>
|
||||
<div><span>{{value.runningSpeed}}</span> m/min</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>进场时间</p>
|
||||
<div><span>{{value.enterTime}}</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
value:{
|
||||
type:Object
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
//this.animation()
|
||||
|
||||
},
|
||||
methods: {
|
||||
animation(){
|
||||
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="red ? 'head-title red-head' : 'head-title'" class="main-header">
|
||||
<div :class="red ? 'head-title red-head' : 'head-title'" class="main-header" :key="nav">
|
||||
<div class="head-title-label">
|
||||
产发工程数字管理平台
|
||||
</div>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<div v-if="!isTypeBuser" :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="pageJump(1, '#/')">项目概况
|
||||
</div>
|
||||
<div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="pageJump(2, '#/detail')">项目详情</div>
|
||||
<div :class="nav >=30 && nav <40 ||nav==3? 'head-nav active' : 'head-nav'" style="position: relative;"
|
||||
<div :class="(nav >=30 && nav <40) || nav==3? 'head-nav active' : 'head-nav'" style="position: relative;"
|
||||
class="has-submenu">
|
||||
<div @click="pageJump(3, '#/safety')">安全管理</div>
|
||||
<div class="header-btn-list">
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<button type="button" :class="nav == 34 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(34, '#/dumbwaiter')">升降机监控</button>
|
||||
<button type="button" :class="nav == 35 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(35, '#/dumbwaiter')">人员定位</button>
|
||||
@click="pageJump(35, '#/personnelPosition')">人员定位</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -168,11 +168,10 @@ export default {
|
|||
window.headerApp = this
|
||||
await this.initMe();
|
||||
this.getWeather();
|
||||
this.nav=this.$route.meta?.nav||1
|
||||
this.nav=this.$route.meta?.nav||1
|
||||
this.setTitle();
|
||||
this.timerID = setInterval(this.updateTime, 1000);
|
||||
this.updateTime();
|
||||
|
||||
let roleId = +this.$store.getters.roleId;
|
||||
Cookies.remove("__ids__");
|
||||
if ([5, 6, 7, 15, 16, 17, 99].includes(roleId)) {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Vue.component("screen-select", {
|
|||
type:Array
|
||||
},
|
||||
val:{
|
||||
type:[String,Number]
|
||||
type:[String,Number,Object]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -46,7 +46,7 @@ Vue.component("screen-select", {
|
|||
val:{
|
||||
hander(){
|
||||
this.value=this.val||'';
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,29 +37,30 @@ Vue.component("trend-chart-line", {
|
|||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var series = []
|
||||
for (let i = 0; i < data.lineData.length; i++) {
|
||||
series.push({
|
||||
name: data.legend[i],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
if(data && data.lineData){
|
||||
for (let i = 0; i < data.lineData.length; i++) {
|
||||
series.push({
|
||||
name: data.legend[i],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: data.color[i],
|
||||
borderWidth: 5,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: data.color[i],
|
||||
borderWidth: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: data.lineData[i],
|
||||
},)
|
||||
data: data.lineData[i],
|
||||
},)
|
||||
}
|
||||
}
|
||||
|
||||
var unit = ''
|
||||
|
|
|
|||
|
|
@ -38,25 +38,26 @@ Vue.component("trend-line-chart", {
|
|||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
newPromise.then(() => {
|
||||
var series =[]
|
||||
for (let i = 0; i < data.data.length; i++) {
|
||||
series.push({
|
||||
name:data.legend[i],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
if(data && data.data){
|
||||
for (let i = 0; i < data.data.length; i++) {
|
||||
series.push({
|
||||
name:data.legend[i],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: data.data[i],
|
||||
})
|
||||
data: data.data[i],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
var unit = ''
|
||||
if(data.unit){
|
||||
unit = '单位：'+data.unit
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3,34 +3,616 @@
|
|||
<el-row>
|
||||
<el-col :span="6">
|
||||
<module-one-3-1 label="设备概况">
|
||||
<div class="czz-number">
|
||||
<div class="czz-number-content">
|
||||
<div class="czz-number-img czz-number-img-blue">
|
||||
<img src="images/circle_icon_25.png">
|
||||
</div>
|
||||
<div class="survey_content_number">
|
||||
<p>升降机总数</p>
|
||||
<div class="survey_content_value"><span v-cloak v-html="deviceToal"></span> 台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="czz-number-content">
|
||||
<div class="czz-number-img czz-number-img-green">
|
||||
<img src="images/circle_icon_9.png">
|
||||
</div>
|
||||
<div class="survey_content_number">
|
||||
<p>监控总数</p>
|
||||
<div class="survey_content_value survey_content_value_color_green"><span v-cloak
|
||||
v-html="deviceOnlineCount"></span> 台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<certificate-bar-chart :data="certificateData" :height="100"></certificate-bar-chart>
|
||||
|
||||
<div class="rank-chart" style="height: calc(100% - 254px);">
|
||||
<div class="rank-chart-title">监控列表</div>
|
||||
<div class="list-max" style="height: calc(100% - 63px);">
|
||||
<div class="list-min" style="height: calc(100% - 0px);" id="listMin" @mouseout="listMinMouseout"
|
||||
@mouseover="listMinMouseover">
|
||||
|
||||
<div class="list-for" v-for="(item, i) in listData" @click="onTowerCraneList(i)">
|
||||
<div :class="index == i ? 'list-con active' : 'list-con'">
|
||||
<div class="list-top">
|
||||
<div class="list-img">
|
||||
<img src="images/list_img_tj.png">
|
||||
</div>
|
||||
<div class="list-info">
|
||||
<div class="list-info-name">设备名称：<span>{{ item.deviceName }}</span></div>
|
||||
<div class="list-info-name">
|
||||
设备状态：
|
||||
<span class="list-info-state" v-if="item.deviceState != 0">离线</span>
|
||||
<span class="list-info-state active" v-if="item.deviceState == 0">在线</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-bottom">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<div class="list-details">司机：<span v-cloak>{{ item.driverName }}</span></div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="list-details">电话：<span v-cloak>{{ item.driverPhone }}</span></div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div class="list-details">安全员：<span v-cloak>{{ item.safetyOfficerName }}</span></div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="list-details">电话：<span v-cloak>{{ item.safetyOfficerPhone }}</span></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="list-time">最后一次启用时间：<span v-cloak>{{ item.lastEnabledTime }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</module-one-3-1>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<div class="safe-height">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<div class="screen-module">
|
||||
<div class="safe-small">
|
||||
<div class="safe-small-title">运行次数（次）</div>
|
||||
<div class="safe-small-content">
|
||||
<div class="safe-small-details">
|
||||
<p>本月</p>
|
||||
<span v-cloak v-html="topInfo.top0"></span>
|
||||
</div>
|
||||
<div class="safe-small-details">
|
||||
<p>累计</p>
|
||||
<span v-cloak v-html="topInfo.top1"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="screen-module">
|
||||
<div class="safe-small">
|
||||
<div class="safe-small-title">超载次数（次）</div>
|
||||
<div class="safe-small-content">
|
||||
<div class="safe-small-details">
|
||||
<p>本月</p>
|
||||
<span v-cloak v-html="topInfo.top2"></span>
|
||||
</div>
|
||||
<div class="safe-small-details">
|
||||
<p>累计</p>
|
||||
<span v-cloak v-html="topInfo.top3"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="screen-module">
|
||||
<div class="safe-small">
|
||||
<div class="safe-small-title">超载率（%）</div>
|
||||
<div class="safe-small-content">
|
||||
<div class="safe-small-details">
|
||||
<p>本月</p>
|
||||
<span v-cloak v-html="topInfo.top4"></span>
|
||||
</div>
|
||||
<div class="safe-small-details">
|
||||
<p>累计</p>
|
||||
<span v-cloak v-html="topInfo.top5"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="screen-module">
|
||||
<div class="safe-small">
|
||||
<div class="safe-small-title">违章次数（次）</div>
|
||||
<div class="safe-small-content">
|
||||
<div class="safe-small-details">
|
||||
<p>本月</p>
|
||||
<span v-cloak v-html="topInfo.top6"></span>
|
||||
</div>
|
||||
<div class="safe-small-details">
|
||||
<p>累计</p>
|
||||
<span v-cloak v-html="topInfo.top7"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="safe-tower-crane-max">
|
||||
<div class="safe-tower-crane-min" @mouseout="listMinMouseout" @mouseover="listMinMouseover">
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div class="safe-tower-left" @click="safeTowerLeft"></div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div class="safe-tower-content-max">
|
||||
<transition :name="direction">
|
||||
<component :is="comName" :value="dumbwaiterValue"></component>
|
||||
</transition>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div class="safe-tower-right" @click="safeTowerRight"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="analyse-max">
|
||||
<div class="analyse-min" style="height: auto">
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">报警分析</div>
|
||||
<div class="analyse-equipment">升降机监测</div>
|
||||
</div>
|
||||
<div style="padding: 30px 0">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="time-study-value">
|
||||
<p>今日报警数</p>
|
||||
<div class="analyse-num"><span v-cloak v-html="dayWarnCount"></span> 条</div>
|
||||
</div>
|
||||
<div class="time-study-value">
|
||||
<p>本周报警数</p>
|
||||
<div class="analyse-num"><span v-cloak v-html="weekWarnCount"></span> 条</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="survey-oil-title">
|
||||
<div class="survey-oil-hr"></div>
|
||||
<div class="survey-oil-text">报警类型</div>
|
||||
</div>
|
||||
<div class="analyse-number-max" id="afootOverflowType" @mouseout="listMinMouseoutType"
|
||||
@mouseover="listMinMouseoverType">
|
||||
<div class="glr-login-number-max analyse-num-max" v-for="item in warningList">
|
||||
<div class="glr-login-number-bgd glr-login-number-red-bgd"></div>
|
||||
<div class="glr-login-number analyse-login-numbe">
|
||||
<div v-cloak><img src="images/text_red_spot.png">{{ item.warnType }}</div>
|
||||
<div class="glr-rate-value glr-rate-red-value">
|
||||
<span v-cloak>{{ item.warnCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="analyse-map">
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">正在发生</div>
|
||||
</div>
|
||||
<div class="afoot-content safe-afoot-content">
|
||||
<div class="afoot-overflow safe-afoot-overflow" id="afootOverflow" @mouseout="warningListMinMouseout"
|
||||
@mouseover="warningListMinMouseover">
|
||||
<div v-if="warningData.length == 0" class="not-data">暂无预警数据</div>
|
||||
<div v-if="warningData.length > 0" class="afoot-con-for" style="height: 180px"
|
||||
v-for="item in warningData">
|
||||
<div class="afoot-machinery-nam safe-afoot-machinery-nam" v-cloak>{{ item.warn_context }}</div>
|
||||
<div class="afoot-machinery-info">
|
||||
<div class="afoot-machinery-img">
|
||||
<img :src="item.images" v-if="item.images">
|
||||
</div>
|
||||
<div class="afoot-machinery-data">
|
||||
<div class="afoot-machinery-state" v-cloak>预警值：{{ item.warn_value }}</div>
|
||||
<div class="afoot-machinery-time" v-cloak>{{ item.warn_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="padding: 0 30px">
|
||||
<div class="analyse-title analyse_title_blue" style="width: 450px;">
|
||||
<div class="analyse-text">运行数据</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_5.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>高度</div>
|
||||
<p><span v-cloak v-html="footInfo.foot0"></span> m</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_6.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>楼层</div>
|
||||
<p><span v-cloak v-html="footInfo.foot1"></span> 层</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_7.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>当前人数</div>
|
||||
<p><span v-cloak v-html="footInfo.foot2"></span> 人</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_8.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>当前载重</div>
|
||||
<p><span v-cloak v-html="footInfo.foot3"></span> t</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_9.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>倾角1</div>
|
||||
<p><span v-cloak v-html="footInfo.foot4"></span> °</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_9.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>倾角2</div>
|
||||
<p><span v-cloak v-html="footInfo.foot5"></span> °</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_10.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>风速</div>
|
||||
<p><span v-cloak v-html="footInfo.foot6"></span> m/s</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_11.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>速度</div>
|
||||
<p><span v-cloak v-html="footInfo.foot7"></span> m/s</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_12.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>速度方向</div>
|
||||
<p><span v-cloak v-html="footInfo.foot8"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_2.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>前门状态</div>
|
||||
<p><span :class="footInfo.foot9 == '打开' ? 'open' : 'close'" v-cloak v-html="footInfo.foot9"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="xhz-device-data-min" style="padding: 25px 10px">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img xhz-education_bgd">
|
||||
<img src="images/education_icon_13.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="xhz-current-value-data">
|
||||
<div>后门状态</div>
|
||||
<p><span :class="footInfo.foot10 == '打开' ? 'open' : 'close'" v-cloak v-html="footInfo.foot10"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/components/module/module-one-3-1'
|
||||
import '@/components/certificate-bar-chart'
|
||||
import '@/components/dumbwaiter-1'
|
||||
import '@/components/dumbwaiter-2'
|
||||
export default {
|
||||
//升降机
|
||||
name: 'JhbigscreenDumbwaiter',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
deviceToal: 4,
|
||||
deviceOnlineCount: 10,
|
||||
certificateData: [],
|
||||
listData: [],
|
||||
interval: undefined, //定时器
|
||||
//升降机图当前位置
|
||||
index: 0,
|
||||
//升降机当前显示数据
|
||||
dumbwaiterValue: {},
|
||||
comName: 'dumbwaiter-1',
|
||||
direction: 'right',
|
||||
deviceId: 0,
|
||||
topInfo: {
|
||||
top0: 0,
|
||||
top1: 0,
|
||||
top2: 4250,
|
||||
top3: 68730,
|
||||
top4: 0,
|
||||
top5: 0,
|
||||
top6: 17000,
|
||||
top7: 274920,
|
||||
},
|
||||
footInfo: {
|
||||
foot0: 10,
|
||||
foot1: 10,
|
||||
foot2: 10,
|
||||
foot3: 10,
|
||||
foot4: 10,
|
||||
foot5: 10,
|
||||
foot6: 10,
|
||||
foot7: 10,
|
||||
foot8: 10,
|
||||
foot9: '',
|
||||
foot10: '',
|
||||
},
|
||||
warningData: [],
|
||||
dayWarnCount: 22,
|
||||
weekWarnCount: 999,
|
||||
//报警分析
|
||||
warningTypeInterval: undefined,
|
||||
warningTypeIndex: 0,
|
||||
warningList: [],
|
||||
warningInterval: undefined,
|
||||
forIndex: 0,
|
||||
warningData: []
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
this.certificateData = JSON.parse('[{"text":"在线数量","value":5},{"text":"离线数量","value":1}]');
|
||||
this.listData = JSON.parse('[{"createUserid":null,"ratedSpeed":"1.8","delFlag":"0","deviceId":"3223081738","deviceName":"2#-2","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-09 15:35:42","safetyOfficerName":"马宁","maxHeight":120.5,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"张巧团","driverPhone":"17324808902","id":5,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"4.9","delFlag":"0","deviceId":"3223081741","deviceName":"3223081741","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-10 10:32:49","safetyOfficerName":"马宁","maxHeight":160.2,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":null,"driverPhone":null,"id":6,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"4.9","delFlag":"0","deviceId":"3223081748","deviceName":"3223081748","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-10 10:46:36","safetyOfficerName":"马宁","maxHeight":187.2,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":null,"driverPhone":null,"id":7,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"1.6","delFlag":"0","deviceId":"3223081722","deviceName":"3#-1","ratedPeopleCount":"9","entryTime":null,"lastEnabledTime":"2024-03-10 09:48:34","safetyOfficerName":"马宁","maxHeight":122.9,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"高军平","driverPhone":"15139573902","id":8,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"1.6","delFlag":"0","deviceId":"3223081749","deviceName":"3#-2","ratedPeopleCount":"9","entryTime":null,"lastEnabledTime":"2024-03-09 13:47:07","safetyOfficerName":"马宁","maxHeight":124.8,"createTime":"2023-09-12 18:25:13","cageSize":null,"ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"郭伟娟","driverPhone":"15239586568","id":9,"deviceState":"0","projectId":"98"}]');
|
||||
this.warningList = [{ warnType: '报警类型A', warnCount: 4 }, { warnType: '报警类型B', warnCount: 4 }, { warnType: '报警类型C', warnCount: 4 }, { warnType: '报警类型D', warnCount: 4 }, { warnType: '报警类型E', warnCount: 4 }, { warnType: '报警类型F', warnCount: 4 }, { warnType: '报警类型G', warnCount: 4 }, { warnType: '报警类型H', warnCount: 4 },]
|
||||
this.warningData = [{ warn_value: "预警A", images: ['images/831.jpg'], warn_context: '告警内容', warn_time: '24-02-02 14:00', project_abbreviation: 'xxx项目' },
|
||||
{ warn_value: "预警A", images: ['images/831.jpg'], warn_context: '告警内容', time: '24-02-02 14:00', project_abbreviation: 'xxx项目' },
|
||||
{ warn_value: "预警A", images: ['images/831.jpg'], warn_context: '告警内容', time: '24-02-02 14:00', project_abbreviation: 'xxx项目' },]
|
||||
//list 定时器
|
||||
if (this.listData.length > 0) {
|
||||
this.interval = setInterval(this.automaticRoll, 10000);
|
||||
}
|
||||
//预警类型 定时器
|
||||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||||
//正在发生 定时器
|
||||
this.warningInterval = setInterval(this.safeAutomaticRoll, 5000);
|
||||
this.index = 0
|
||||
this.deviceId = this.listData[0].id
|
||||
this.updateDumbwaiterValue();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTowerCraneList(n) {
|
||||
this.index = n
|
||||
this.deviceId = this.listData[n].id
|
||||
|
||||
//切换动画
|
||||
this.direction = 'right'
|
||||
if (this.comName == 'dumbwaiter-1') {
|
||||
this.comName = 'dumbwaiter-2'
|
||||
} else {
|
||||
this.comName = 'dumbwaiter-1'
|
||||
}
|
||||
},
|
||||
//监控列表
|
||||
listMinMouseover() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
listMinMouseout() {
|
||||
this.interval = setInterval(this.automaticRoll, 10000);
|
||||
},
|
||||
automaticRoll() {
|
||||
//切换动画
|
||||
if (this.direction == 'right') {
|
||||
if (this.index == this.listData.length - 1) {
|
||||
this.index = 0
|
||||
} else {
|
||||
this.index = this.index + 1
|
||||
}
|
||||
} else {
|
||||
if (this.index == 0) {
|
||||
this.index = this.listData.length - 1
|
||||
} else {
|
||||
this.index = this.index - 1
|
||||
}
|
||||
}
|
||||
if (this.comName == 'dumbwaiter-1') {
|
||||
this.comName = 'dumbwaiter-2'
|
||||
} else {
|
||||
this.comName = 'dumbwaiter-1'
|
||||
}
|
||||
var height = $(".list-for").innerHeight()
|
||||
$("#listMin").animate({ scrollTop: (height * this.index) + 'px' })
|
||||
this.deviceId = this.listData[this.index].deviceId;
|
||||
this.updateDumbwaiterValue();
|
||||
},
|
||||
updateDumbwaiterValue() {
|
||||
this.dumbwaiterValue = {
|
||||
name: this.listData[this.index].deviceName,
|
||||
cageSize: this.listData[this.index].cageSize,
|
||||
loadCapacity: this.listData[this.index].ratedLoad,
|
||||
numberPeople: this.listData[this.index].ratedPeopleCount,
|
||||
liftingHeight: this.listData[this.index].ratedPeopleCount,
|
||||
runningSpeed: this.listData[this.index].ratedSpeed,
|
||||
enterTime: this.listData[this.index].entryTime
|
||||
}
|
||||
},
|
||||
safeTowerLeft() {
|
||||
this.direction = 'left'
|
||||
this.automaticRoll()
|
||||
},
|
||||
safeTowerRight() {
|
||||
//切换动画
|
||||
this.direction = 'right'
|
||||
this.automaticRoll()
|
||||
},
|
||||
//报警类型
|
||||
automaticRollType() {
|
||||
var height = $(".glr-login-number-max").innerHeight()
|
||||
if ($("#afootOverflowType").scrollTop() == height * this.warningList.length - $("#afootOverflowType").innerHeight()) {
|
||||
this.warningTypeIndex = 0
|
||||
} else {
|
||||
this.warningTypeIndex = this.warningTypeIndex + 1
|
||||
}
|
||||
$("#afootOverflowType").animate({ scrollTop: (height * this.warningTypeIndex) + 'px' })
|
||||
},
|
||||
listMinMouseoverType() {
|
||||
clearInterval(this.warningTypeInterval);
|
||||
},
|
||||
listMinMouseoutType() {
|
||||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||||
},
|
||||
|
||||
//正在发生
|
||||
safeAutomaticRoll() {
|
||||
var height = $(".safe-afoot-overflow").innerHeight()
|
||||
if (this.forIndex == this.warningData.length) {
|
||||
this.forIndex = 0
|
||||
} else {
|
||||
this.forIndex = this.forIndex + 1
|
||||
}
|
||||
$("#afootOverflow").animate({ scrollTop: (height * this.forIndex) + 'px' })
|
||||
},
|
||||
warningListMinMouseover() {
|
||||
clearInterval(this.warningInterval);
|
||||
},
|
||||
warningListMinMouseout() {
|
||||
this.warningInterval = setInterval(this.safeAutomaticRoll, 5000);
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.project-dumbwaiter {}
|
||||
.project-dumbwaiter {
|
||||
.left-enter {
|
||||
left: -100%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.left-leave-to {
|
||||
left: 0;
|
||||
transform: translateX(100%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left-enter-active,
|
||||
.left-leave-active {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.right-enter {
|
||||
left: 100%;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.right-leave-to {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.right-enter-active,
|
||||
.right-leave-active {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -165,10 +165,70 @@
|
|||
</module-one-2-2>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<module-one-1-1 label="监测时长">
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="变化速率统计">
|
||||
</module-one-1-1>
|
||||
<module-one-2-1 label="监测时长">
|
||||
<div style="padding:4px;">
|
||||
<div class="mon-time-row1">
|
||||
<img src="images/security1.gif" class="time-img" />
|
||||
<div class="time-info">
|
||||
<div style="color:#cbdaff;font-size:16px;">监测时长(天)</div>
|
||||
<div style="color:#5bf8b5;font-size:24px;font-weight: bold;">145</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="analyse_title_blue analyse-title">
|
||||
<div class="analyse-text">监测点</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sjk-chart-line-title scroll mon-points">
|
||||
<div v-for="(it, idx) in pointData" :key="idx" :class="(selPoint?.id || 0) == it.id ? 'active' : ''"
|
||||
class="title-item" @click="selPoint=it">{{
|
||||
it.name }}</div>
|
||||
</div>
|
||||
<div style="padding:10px;" class="mon-point-info">
|
||||
<div class="mon-title">
|
||||
监测点数据
|
||||
</div>
|
||||
<div v-if="selPoint">
|
||||
<div class="glr-title mon-point-title" style="margin-top:10px;">{{ selPoint.name }}</div>
|
||||
<div class="mon-point-row">
|
||||
<span class="survey_content_number sp-lbl">实时位移</span>
|
||||
<span class="sp-data">N:{{ selPoint.pN }}mm</span>
|
||||
<span class="sp-data">E:{{ selPoint.pE }}mm</span>
|
||||
<span class="sp-data">Z:{{ selPoint.pZ }}mm</span>
|
||||
</div>
|
||||
<div class="mon-point-row">
|
||||
<span class="survey_content_number sp-lbl">沉降</span>
|
||||
<span class="sp-data">数据:{{ selPoint.sedD }}mm</span>
|
||||
<span class="sp-data"></span>
|
||||
<span class="mon-arr sp-data" :class="'mon-arr-' + selPoint.sedS">
|
||||
<span v-if="selPoint.sedS == 'A'">↑</span>
|
||||
<span v-else>↓</span>
|
||||
{{ selPoint.sedM }}</span>
|
||||
</div>
|
||||
<div class="mon-point-row">
|
||||
<span class="survey_content_number sp-lbl">累计位移</span>
|
||||
<span class="sp-data">数据:{{ selPoint.disD }}mm</span>
|
||||
<span class="sp-data"></span>
|
||||
<span class="mon-arr sp-data" :class="'mon-arr-' + selPoint.disS">
|
||||
<span v-if="selPoint.disS == 'A'">↑</span>
|
||||
<span v-else>↓</span>
|
||||
{{ selPoint.disM }}</span>
|
||||
</div>
|
||||
<div class="mon-point-row">
|
||||
<span class="survey_content_number sp-lbl">位移速率</span>
|
||||
<span class="sp-data">数据:{{ selPoint.ratD }}mm/d</span>
|
||||
<span class="sp-data"></span>
|
||||
<span class="mon-arr sp-data" :class="'mon-arr-' + selPoint.ratS">
|
||||
<span v-if="selPoint.ratS == 'A'">↑</span>
|
||||
<span v-else>↓</span>
|
||||
{{ selPoint.ratM }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="div-no-data" style="padding-top:100px">
|
||||
<img src="images/nodata.png" style="width: 120px;">
|
||||
<div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
|
@ -180,7 +240,7 @@
|
|||
<div :class="btnNav == 1 ? 'active' : ''" @click="onClickPoint(1)">沉降</div>
|
||||
<div :class="btnNav == 2 ? 'active' : ''" @click="onClickPoint(2)">倾斜</div>
|
||||
<div :class="btnNav == 3 ? 'active' : ''" @click="onClickPoint(3)">应力</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trend-chart-max" v-if="btnNav == 1">
|
||||
<trend-line-chart :height="220" :chartdata="CollWeiyiPointData"
|
||||
:data="CollWeiyiPointDataData"></trend-line-chart>
|
||||
|
|
@ -230,6 +290,7 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
selPoint: {},
|
||||
monTotal: 3,
|
||||
onlineDevTotal: 3,
|
||||
classifyBarData: [],
|
||||
|
|
@ -249,15 +310,19 @@ export default {
|
|||
offLine: true,
|
||||
loading: false,
|
||||
btnNav: 1,
|
||||
CollWeiyiPointData:[],
|
||||
CollWeiyiPointDataData:[],
|
||||
CollQingxiePointDataX:[],
|
||||
CollQingxiePointDataXdData:[],
|
||||
CollQingxiePointDataY:[],
|
||||
CollQingxiePointDataYdData:[],
|
||||
YingLiPointData:[],
|
||||
YingLiPointDataData:[],
|
||||
CollWeiyiPointData: {},
|
||||
CollWeiyiPointDataData: [],
|
||||
|
||||
CollQingxiePointDataX: {},
|
||||
CollQingxiePointDataXdData: [],
|
||||
|
||||
CollQingxiePointDataY: {},
|
||||
CollQingxiePointDataYdData: [],
|
||||
|
||||
YingLiPointData: {},
|
||||
YingLiPointDataData: [],
|
||||
|
||||
pointData: []
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -268,14 +333,23 @@ export default {
|
|||
this.forBitMappedImageData = JSON.parse('[{"sensorTypeName":"位移(WY)","pointName":"位移26","drawId":"7039969819126403072","sensorInfoId":"7042034685840703494","url":"","xpixels":1492.266916,"sortValue":1,"createData":"2023-03-20 20:06:19","top":86.56728596535274,"fileSize":"2276*1280","left":607.8571428571429,"ypixels":117.403425,"sensorType":"CollWeiyiPoint","statusTime":"2024-03-09 22:40:04","otherProjectId":"1634117283072266241","isBase":"0","sensorSmallType":"24","drawName":"御井路公租房.jpg","status":"0","state":true,"imgUrl":"images/place_chenjiang_green.png"},{"sensorTypeName":"沉降(CJ)","pointName":"沉降53","drawId":"7039969819126403072","sensorInfoId":"7039970088807718912","url":"","xpixels":423.054061,"sortValue":1,"createData":"2023-03-20 20:06:19","top":152.63871453678132,"fileSize":"2276*1280","left":211.42857142857142,"ypixels":336.059302,"sensorType":"CollWeiyiPoint","statusTime":"2024-03-09 22:40:04","otherProjectId":"1634117283072266241","isBase":"1","sensorSmallType":"80","drawName":"御井路公租房.jpg","status":"0","state":true,"imgUrl":"images/place_chenjiang_blue.png"},{"sensorTypeName":"倾斜(QX)","pointName":"倾斜44","drawId":"7039969819126403072","sensorInfoId":"7039970088841273344","url":"","xpixels":387.71104,"sortValue":1,"createData":"2023-03-13 11:22:53","top":112.99585739392417,"fileSize":"2276*1280","left":317.1428571428571,"ypixels":766.483595,"sensorType":"CollQingxiePoint","statusTime":"2024-03-09 22:40:04","otherProjectId":"1634117283072266241","isBase":"0","sensorSmallType":"33","drawName":"御井路公租房.jpg","status":"0","state":true,"imgUrl":"images/place_qingxie_green.png"}]')
|
||||
this.forBitMappedImageDataPJ = JSON.parse('[{"top":205.49585739392415,"left":224.64285714285714,"fileSize":"2276*1280","pointName":"倾斜45","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052577632253038592","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":271.56728596535277,"left":179.71428571428572,"fileSize":"2276*1280","pointName":"倾斜46","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052577632253038596","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":337.6387145367813,"left":171.78571428571428,"fileSize":"2276*1280","pointName":"倾斜47","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052577632253038600","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":245.13871453678132,"left":211.42857142857142,"fileSize":"2276*1280","pointName":"倾斜48","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052896778106015744","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":311.2101431082099,"left":211.42857142857142,"fileSize":"2276*1280","pointName":"倾斜49","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052896778106015748","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":350.85300025106704,"left":185,"fileSize":"2276*1280","pointName":"倾斜50","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052896778106015752","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"}]');
|
||||
this.legendArrData = JSON.parse('[{"type":"CollWeiyiPoint","class":"sjk-icon-legend-right-icon","url":"images/legend_chenjiang.png","text":"沉降"},{"type":"CollQingxiePoint","class":"sjk-icon-legend-right-icon","url":"images/legend_qingxie.png","text":"倾斜"}]')
|
||||
this.CollWeiyiPointDataData=JSON.parse('[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30]]');
|
||||
this.CollWeiyiPointData=JSON.parse('{"dataX":["2024-03-03","2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09"],"data":[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30]],"legend":["位移26","沉降53","阈值上限","阈值下限"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"mm"}');
|
||||
this.CollQingxiePointDataX=JSON.parse('{"dataX":["2024-03-03","2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09"],"data":[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]],"legend":["位移26","沉降53","阈值上限","阈值下限"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"°(X方向)"}');
|
||||
this.CollQingxiePointDataXdData=JSON.parse('[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]]');
|
||||
this.CollQingxiePointDataY=JSON.parse('{"dataX":["2024-03-03","2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09"],"data":[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]],"legend":["位移26","沉降53","阈值上限","阈值下限"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"°(Y方向)"}');
|
||||
this.CollQingxiePointDataYdData=JSON.parse('[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]]');
|
||||
this.YingLiPointData=JSON.parse('{"dataX":["2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09","2024-03-10"],"data":[["0","0","0","0","0","0"],["0","0","0","0","0","0"],["0","0","0","0","0","0"]],"legend":["ZD-YW-1","ZD-YW-2","ZD-YW-3"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"KN"}');
|
||||
this.YingLiPointDataData=JSON.parse('[["0","0","0","0","0","0"],["0","0","0","0","0","0"],["0","0","0","0","0","0"]]');
|
||||
this.CollWeiyiPointDataData = JSON.parse('[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30]]');
|
||||
this.CollWeiyiPointData = JSON.parse('{"dataX":["2024-03-03","2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09"],"data":[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30]],"legend":["位移26","沉降53","阈值上限","阈值下限"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"mm"}');
|
||||
this.CollQingxiePointDataX = JSON.parse('{"dataX":["2024-03-03","2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09"],"data":[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]],"legend":["位移26","沉降53","阈值上限","阈值下限"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"°(X方向)"}');
|
||||
this.CollQingxiePointDataXdData = JSON.parse('[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]]');
|
||||
this.CollQingxiePointDataY = JSON.parse('{"dataX":["2024-03-03","2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09"],"data":[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]],"legend":["位移26","沉降53","阈值上限","阈值下限"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"°(Y方向)"}');
|
||||
this.CollQingxiePointDataYdData = JSON.parse('[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]]');
|
||||
this.YingLiPointData = JSON.parse('{"dataX":["2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09","2024-03-10"],"data":[["0","0","0","0","0","0"],["0","0","0","0","0","0"],["0","0","0","0","0","0"]],"legend":["ZD-YW-1","ZD-YW-2","ZD-YW-3"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"KN"}');
|
||||
this.YingLiPointDataData = JSON.parse('[["0","0","0","0","0","0"],["0","0","0","0","0","0"],["0","0","0","0","0","0"]]');
|
||||
this.pointData = "1,2,3,4,5,6,7,8".split(",").map(d => {//,9,10,11,12,13,14,15,16,17
|
||||
return {
|
||||
id: d, name: "监测点0" + (d < 10 ? '0' + d : '' + d), pN: '-14', pE: '-0.4', pZ: '-0.2',
|
||||
sedD: '-0.2', sedM: '12', sedS: 'A',
|
||||
disD: '1.5', disM: "12", disS: 'A',
|
||||
ratD: '0.23', ratM: 12, ratS: 'D'
|
||||
}
|
||||
});
|
||||
this.selPoint = this.pointData[0];
|
||||
this.init();
|
||||
},
|
||||
|
||||
|
|
@ -451,6 +525,67 @@ export default {
|
|||
.sjk-img-min {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mon-time-row1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
|
||||
.time-img {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.time-info {
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.sjk-chart-line-title.mon-points {
|
||||
display: block;
|
||||
max-height: 60px;
|
||||
min-height: 60px;
|
||||
overflow-y: auto;
|
||||
|
||||
.title-item {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.mon-point-info {
|
||||
.mon-title {
|
||||
border-bottom: dotted 1px #918c8c;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.mon-point-title {
|
||||
color: #51b5ff;
|
||||
}
|
||||
.mon-point-row{
|
||||
line-height: 60px;
|
||||
font-size:12px;
|
||||
.sp-data{
|
||||
display: inline-block;
|
||||
width:105px;
|
||||
}
|
||||
.sp-lbl{
|
||||
display: inline-block;
|
||||
width:110px;
|
||||
}
|
||||
.mon-arr{
|
||||
font-size:16px;
|
||||
font-weight: bold;
|
||||
&.mon-arr-A{
|
||||
color:red;
|
||||
}
|
||||
&.mon-arr-D{
|
||||
color:green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,299 @@
|
|||
<template>
|
||||
<div class="project-personnel-position">
|
||||
<!-- -->
|
||||
<div class="project-personnel-position">
|
||||
<baidu-maps v-if="showMap" :data="personnelListData"></baidu-maps>
|
||||
|
||||
<div class="people-left" style="height: calc(100vh - 130px);">
|
||||
<div class="people-search">
|
||||
<input type="text" placeholder="搜索工人" @keyup="selectByName($event)" />
|
||||
</div>
|
||||
<div class="czz-number">
|
||||
<div class="czz-number-content">
|
||||
<div class="czz-number-img czz-number-img-blue">
|
||||
<img src="images/circle_icon_11.png">
|
||||
</div>
|
||||
<div class="survey_content_number">
|
||||
<p>总人数</p>
|
||||
<div class="survey_content_value"><span id="personNum"></span> 人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="czz-number-content">
|
||||
<div class="czz-number-img czz-number-img-green">
|
||||
<img src="images/circle_icon_10.png">
|
||||
</div>
|
||||
<div class="survey_content_number">
|
||||
<p>安全帽在线</p>
|
||||
<div class="survey_content_value survey_content_value_color_green"><span id="personNumHem"></span> 人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rank-chart">
|
||||
<div class="rank-chart-title">人员列表（<span id="listNum"></span>人）</div>
|
||||
<div class="list-max">
|
||||
<div class="list-min people-list-min" id="listMin" @mouseout="peopleListMinMouseout"
|
||||
@mouseover="peopleListMinMouseover">
|
||||
<div class="list-for" v-for="(item, i) in personnelListData" @click="onTowerCraneList(i)">
|
||||
<div :class="index == i ? 'people-list-con active' : 'people-list-con'">
|
||||
<div class="people-list-top">
|
||||
<div class="people-list-img">
|
||||
<img :src="item.imgUrl" v-if="item.imgUrl">
|
||||
</div>
|
||||
<div class="list-info">
|
||||
<div class="people-info-name">
|
||||
<span v-cloak>{{ item.name }}</span>
|
||||
<span class="people-info-work" v-cloak>（{{ item.work }}）</span>
|
||||
<div class="people-list-state" v-if="item.state == 0" v-cloak>在线</div>
|
||||
<div class="people-list-state active" v-if="item.state == 1" v-cloak>离线</div>
|
||||
</div>
|
||||
<div class="people-info-name">
|
||||
<div class="people-battery-max">
|
||||
<div :class="item.battery > 20 ? 'people-battery-bgd' : 'people-battery-bgd active'">
|
||||
<div class="people-battery-padding">
|
||||
<div :class="item.battery > 20 ? 'people-battery' : 'people-battery active'"
|
||||
:style="{ 'width': item.battery + '%' }">
|
||||
<!--电池-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="item.battery > 20 ? 'people-battery-value' : 'people-battery-value active'"
|
||||
v-cloak>
|
||||
{{ item.battery }}%</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="people-info-action" v-if="item.action == 0">移动</span>
|
||||
<span class="people-info-action active" v-if="item.action == 1">静止</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-bottom">
|
||||
<el-row>
|
||||
<el-col :span="14">
|
||||
<div class="list-details">今日工时：<span v-cloak>{{ item.working_hours }}</span></div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div class="list-details">本月出勤：<span v-cloak>{{ item.attendance }}天</span></div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="list-details">定位时间：<span v-cloak>{{ item.positioning_time }}</span></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="people-info-address" v-cloak>{{ item.address }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//人员定位
|
||||
name: 'JhbigscreenPersonnelPosition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
|
||||
|
||||
<div class="people-right" style="height: calc(100vh - 130px);">
|
||||
<div class="analyse-min">
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">预警分析</div>
|
||||
<div class="analyse-equipment">人员定位</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="time-study-value">
|
||||
<p>今日预警数</p>
|
||||
<div class="analyse-num"><span id="dayNum">0</span> 次</div>
|
||||
</div>
|
||||
<div class="time-study-value">
|
||||
<p>本周预警数</p>
|
||||
<div class="analyse-num"><span id="weekNum">0</span> 次</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="survey-oil-title">
|
||||
<div class="survey-oil-hr"></div>
|
||||
<div class="survey-oil-text">预警类型</div>
|
||||
</div>
|
||||
<div class="analyse-number-max" id="afootOverflowType" @mouseout="listMinMouseoutType"
|
||||
@mouseover="listMinMouseoverType">
|
||||
<div class="glr-login-number-max analyse-num-max" v-for="item in warningType">
|
||||
<div class="glr-login-number-bgd glr-login-number-red-bgd"></div>
|
||||
<div class="glr-login-number analyse-login-numbe">
|
||||
<div><img src="images/text_red_spot.png" v-cloak>{{ item.name }}</div>
|
||||
<div class="glr-rate-value glr-rate-red-value"><span v-cloak>{{ item.data }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div>
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">正在发生</div>
|
||||
</div>
|
||||
<div class="afoot-content" v-if="warningData && warningData.length>0">
|
||||
<div class="afoot-overflow hj-afoot-overflow" id="afootOverflow" @mouseout="listMinMouseout"
|
||||
@mouseover="listMinMouseover">
|
||||
<div :class="forIndex == i ? 'afoot-con-for active' : 'afoot-con-for '" v-for="(item, i) in warningData">
|
||||
<div class="afoot-machinery-nam" v-cloak>{{ item.equipment }}</div>
|
||||
<div class="afoot-machinery-info">
|
||||
<div class="afoot-machinery-img">
|
||||
<img :src="item.images">
|
||||
</div>
|
||||
<div class="afoot-machinery-data">
|
||||
<div class="afoot-machinery-state" v-cloak>{{ item.content }}</div>
|
||||
<div class="afoot-machinery-time" v-cloak>{{ item.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="div-no-data afoot-content" style="padding-top:100px">
|
||||
<img src="images/nodata.png" style="width: 120px;">
|
||||
<div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/components/baidu-maps'
|
||||
export default {
|
||||
//人员定位
|
||||
name: 'JhbigscreenPersonnelPosition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
//人员列表数据
|
||||
personnelListData: [],
|
||||
index: 0,
|
||||
listInterval: undefined,
|
||||
|
||||
//预警类型
|
||||
warningType: [],
|
||||
warningTypeInterval: undefined,
|
||||
warningTypeIndex: 0,
|
||||
|
||||
//正在发生
|
||||
warningData: [],
|
||||
warningInterval: undefined,
|
||||
forIndex: 0,
|
||||
personnelListData: [],
|
||||
showMap: true,
|
||||
};
|
||||
},
|
||||
beforeCreate() {
|
||||
},
|
||||
mounted() {
|
||||
this.warningType=JSON.parse('[{"data":0,"name":"低电量"},{"data":0,"name":"离线"},{"data":0,"name":"长时间静止"}]');
|
||||
this.warningData = [{
|
||||
equipment: "TDX_889939994",
|
||||
images: ['images/831.jpg'],
|
||||
content: '告警内容',
|
||||
time: '24-02-02 14:00',
|
||||
project_abbreviation: 'xxx项目'
|
||||
}, {
|
||||
equipment: "TDX_889939994",
|
||||
images: ['images/831.jpg'],
|
||||
content: '告警内容',
|
||||
time: '24-02-02 14:00',
|
||||
project_abbreviation: 'xxx项目'
|
||||
}, {
|
||||
equipment: "TDX_889939994",
|
||||
images: ['images/831.jpg'],
|
||||
content: '告警内容',
|
||||
time: '24-02-02 14:00',
|
||||
project_abbreviation: 'xxx项目'
|
||||
},]
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
//地图初始化
|
||||
this.initMap()
|
||||
|
||||
this.listInterval = setInterval(this.automaticRollList, 5000);
|
||||
|
||||
//预警类型 定时器
|
||||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||||
|
||||
//正在发生 定时器
|
||||
this.warningInterval = setInterval(this.automaticRoll, 5000);
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
//项目设备分布总览 百度地图
|
||||
initMap() {
|
||||
this.locationPerson("1", "")
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
|
||||
locationPerson(id, nameStr) {
|
||||
document.querySelector("#personNum").innerHTML = "0";
|
||||
document.querySelector("#personNumHem").innerHTML = "0";
|
||||
document.querySelector("#listNum").innerHTML = "0";
|
||||
},
|
||||
};
|
||||
</script>
|
||||
/*人员列表*/
|
||||
onTowerCraneList(n) {
|
||||
this.index = n
|
||||
},
|
||||
automaticRollList() {
|
||||
if (this.index == this.personnelListData.length - 1) {
|
||||
this.index = 0
|
||||
} else {
|
||||
this.index = this.index + 1
|
||||
}
|
||||
|
||||
var height = $(".list-for").innerHeight()
|
||||
$("#listMin").animate({ scrollTop: (height * this.index) + 'px' })
|
||||
},
|
||||
peopleListMinMouseout() {
|
||||
this.listInterval = setInterval(this.automaticRollList, 5000);
|
||||
},
|
||||
peopleListMinMouseover() {
|
||||
clearInterval(this.listInterval);
|
||||
|
||||
},
|
||||
|
||||
|
||||
//预警类型
|
||||
automaticRollType() {
|
||||
var height = $(".glr-login-number-max").innerHeight()
|
||||
if ($("#afootOverflowType").scrollTop() == height * this.warningType.length - $("#afootOverflowType").innerHeight()) {
|
||||
this.warningTypeIndex = 0
|
||||
} else {
|
||||
this.warningTypeIndex = this.warningTypeIndex + 1
|
||||
}
|
||||
$("#afootOverflowType").animate({ scrollTop: (height * this.warningTypeIndex) + 'px' })
|
||||
},
|
||||
listMinMouseoverType() {
|
||||
clearInterval(this.warningTypeInterval);
|
||||
},
|
||||
listMinMouseoutType() {
|
||||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||||
},
|
||||
//正在发生
|
||||
automaticRoll() {
|
||||
var height = $(".afoot-con-for").innerHeight()
|
||||
if (this.forIndex == this.warningData.length) {
|
||||
this.forIndex = 0
|
||||
} else {
|
||||
this.forIndex = this.forIndex + 1
|
||||
}
|
||||
|
||||
$("#afootOverflow").animate({ scrollTop: (height * this.forIndex) + 'px' })
|
||||
},
|
||||
|
||||
listMinMouseover() {
|
||||
clearInterval(this.warningInterval);
|
||||
},
|
||||
listMinMouseout() {
|
||||
this.warningInterval = setInterval(this.automaticRoll, 5000);
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.project-personnel-position{
|
||||
|
||||
}
|
||||
.project-personnel-position {}
|
||||
</style>
|
||||
|
|
@ -59,6 +59,11 @@ const routes = [
|
|||
name: 'dumbwaiter',
|
||||
meta:{nav:34,},
|
||||
component: () => import(/* webpackChunkName: "dumbwaiter" */ '../pages/safe/dumbwaiter.vue')
|
||||
}, {
|
||||
path: '/personnelPosition',
|
||||
name: 'personnelPosition',
|
||||
meta:{nav:35,},
|
||||
component: () => import(/* webpackChunkName: "personnelPosition" */ '../pages/safe/personnelPosition.vue')
|
||||
}
|
||||
, {
|
||||
path: '/excavation',
|
||||
|
|
|
|||
Loading…
Reference in New Issue