update code
parent
e9eb913eba
commit
f5fd49755f
|
|
@ -376,7 +376,7 @@ body::-webkit-scrollbar{
|
|||
position: absolute;
|
||||
top: 880px;
|
||||
padding: 10px 40px;
|
||||
background: url("../images/ai/branch_btn_bgd.png") no-repeat center/100% 100%;
|
||||
background: url("../images/branch_btn_bgd.png") no-repeat center/100% 100%;
|
||||
color: #c8d7fe;
|
||||
cursor: pointer;
|
||||
z-index: 999;
|
||||
|
|
@ -1057,7 +1057,7 @@ body::-webkit-scrollbar{
|
|||
.sf-equipment-overview-bgd{
|
||||
height: 240px;
|
||||
width: 400px;
|
||||
background: url("../images/ai/tower_crane.png") no-repeat center/100% 100%;
|
||||
background: url("../images/tower_crane.png") no-repeat center/100% 100%;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -1098,7 +1098,7 @@ body::-webkit-scrollbar{
|
|||
.sf-hook{
|
||||
width: 16px;
|
||||
height: 30px;
|
||||
background: url("../images/ai/drag_hook.png") no-repeat center/100% 100%;
|
||||
background: url("../images/drag_hook.png") no-repeat center/100% 100%;
|
||||
}
|
||||
.circular{
|
||||
position: absolute;
|
||||
|
|
@ -1106,12 +1106,12 @@ body::-webkit-scrollbar{
|
|||
height: 120px;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
background: url("../images/ai/circular.png") no-repeat center/100% 100%;
|
||||
background: url("../images/circular.png") no-repeat center/100% 100%;
|
||||
}
|
||||
.needle{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../images/ai/needle.png") no-repeat center/100% 100%;
|
||||
background: url("../images/needle.png") no-repeat center/100% 100%;
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
.dot-track{
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1004 KiB |
|
|
@ -9,7 +9,7 @@
|
|||
<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">
|
||||
<link rel="stylesheet" href="css/sichuanTibet.css">
|
||||
|
||||
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=qmQNEi1qbFX628WfMt4imhdT87RbCRzK"></script> -->
|
||||
<script src="/cdn/vue/dist/vue.js"></script>
|
||||
<script src="/cdn/element-ui/lib/index.js"></script>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,9 @@ Vue.component("classify-bar", {
|
|||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
if(data.length==0){
|
||||
return;
|
||||
}
|
||||
var max = data[0].total
|
||||
var nameData = [];
|
||||
var totalData = []
|
||||
|
|
|
|||
|
|
@ -27,10 +27,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="pageJump(4, '#/quality')">质量管理</div>
|
||||
-->
|
||||
</div>
|
||||
<div :class="nav == 41 || nav == 42 || nav==4 ? 'head-nav active' : 'head-nav'" style="position: relative;"
|
||||
class="has-submenu">
|
||||
<div @click="pageJump(4, '#/quality')">质量管理</div>
|
||||
|
|
@ -134,6 +131,7 @@
|
|||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Cookies from 'js-cookie'
|
||||
import {routes} from '../router/index'
|
||||
export default {
|
||||
props: {
|
||||
red: {
|
||||
|
|
@ -170,14 +168,7 @@ export default {
|
|||
window.headerApp = this
|
||||
await this.initMe();
|
||||
this.getWeather();
|
||||
if (location.hash.indexOf("#/detail") >= 0) { this.nav = 2; }
|
||||
else if (location.hash.indexOf("#/safety") >= 0) { this.nav = 3; }
|
||||
else if (location.hash.indexOf("#/quality") >= 0) { this.nav = 4; }
|
||||
else if (location.hash.indexOf("#/progress") >= 0) { this.nav = 5; }
|
||||
else if (location.hash.indexOf("#/video") >= 0) { this.nav = 61; }
|
||||
else if (location.hash.indexOf("#/aiVideo") >= 0) { this.nav = 62; }
|
||||
else if (location.hash.indexOf("#/engin") >= 0) { this.nav = 7; }
|
||||
else { this.nav = 1; }
|
||||
this.nav=this.$route.meta?.nav||1
|
||||
this.setTitle();
|
||||
this.timerID = setInterval(this.updateTime, 1000);
|
||||
this.updateTime();
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ Vue.component("safe-curve-chart", {
|
|||
var Ymax = Math.max.apply(null,data.dataY);
|
||||
|
||||
|
||||
option = {
|
||||
let option = {
|
||||
tooltip: {
|
||||
position: "top",
|
||||
formatter: function (params) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import Vue from 'vue'
|
||||
/**
|
||||
* 顶部header
|
||||
*/
|
||||
Vue.component("tower-crane-value-1", {
|
||||
template: `
|
||||
<div class="safe-tower-content">
|
||||
|
|
@ -10,16 +12,20 @@ Vue.component("tower-crane-value-1", {
|
|||
<el-col :span="3">
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>后臂长</p>
|
||||
<div><span v-html="value.foreArmLength">0</span> m</div>
|
||||
<div><span v-html="value.postArmLength">0</span> m</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>前臂长</p>
|
||||
<div><span v-html="value.postArmLength">0</span> m</div>
|
||||
<div><span v-html="value.foreArmLength">0</span> m</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>塔身高</p>
|
||||
<div><span v-html="value.downHeight">0</span> m</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>功率</p>
|
||||
<div><span v-html="value.power"></span> kw</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="safe-tower-icon">
|
||||
|
|
@ -59,6 +65,10 @@ Vue.component("tower-crane-value-1", {
|
|||
<p>进场时间</p>
|
||||
<div class="safe-tower-content-data-list-time"><span v-html="value.enterTime">0</span></div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>扶墙高度</p>
|
||||
<div><span style="font-size: 16px;" v-html="value.buttress"></span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -103,10 +113,12 @@ Vue.component("tower-crane-value-1", {
|
|||
}
|
||||
},
|
||||
mounted(){
|
||||
this.animation()
|
||||
//this.animation()
|
||||
|
||||
},
|
||||
methods: {
|
||||
animation(){
|
||||
|
||||
var leftValue = this.ampdata //幅度
|
||||
var brachium = this.forearmlength //臂长 //定制
|
||||
|
||||
|
|
@ -133,6 +145,10 @@ Vue.component("tower-crane-value-1", {
|
|||
},
|
||||
},
|
||||
watch:{
|
||||
value:function () {
|
||||
console.log(this.value)
|
||||
this.animation()
|
||||
},
|
||||
ampdata:function () {
|
||||
this.animation()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import Vue from 'vue'
|
||||
/**
|
||||
* 顶部header
|
||||
*/
|
||||
Vue.component("tower-crane-value-2", {
|
||||
template: `
|
||||
<div class="safe-tower-content">
|
||||
|
|
@ -10,16 +12,20 @@ Vue.component("tower-crane-value-2", {
|
|||
<el-col :span="3">
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>后臂长</p>
|
||||
<div><span v-html="value.foreArmLength">0</span> m</div>
|
||||
<div><span v-html="value.postArmLength">0</span> m</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>前臂长</p>
|
||||
<div><span v-html="value.postArmLength">0</span> m</div>
|
||||
<div><span v-html="value.foreArmLength">0</span> m</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>塔身高</p>
|
||||
<div><span v-html="value.downHeight">0</span> m</div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>功率</p>
|
||||
<div><span v-html="value.power"></span> kw</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="safe-tower-icon">
|
||||
|
|
@ -59,6 +65,10 @@ Vue.component("tower-crane-value-2", {
|
|||
<p>进场时间</p>
|
||||
<div class="safe-tower-content-data-list-time"><span v-html="value.enterTime">0</span></div>
|
||||
</div>
|
||||
<div class="safe-tower-content-data-list">
|
||||
<p>扶墙高度</p>
|
||||
<div><span style="font-size: 16px;" v-html="value.buttress"></span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,40 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//混泥土强度检测
|
||||
name: 'JhbigscreenTowerCrane',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<div class="project-concrete-strength">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<module-one-1-1 label="质量目标"></module-one-1-1>
|
||||
<module-one-2-1 label="过程管控"></module-one-2-1>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<module-one-1-2 label="当前监测值"></module-one-1-2>
|
||||
<module-one-1-2 label="温度趋势"></module-one-1-2>
|
||||
<module-one-1-2 label="成熟度趋势"></module-one-1-2>
|
||||
</el-col>
|
||||
<el-col :span="6"></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//混泥土强度检测
|
||||
name: 'JhbigscreenConcreteStrength',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.project-concrete-strength {}
|
||||
</style>
|
||||
|
|
@ -1,26 +1,44 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//标养室检测
|
||||
name: 'JhbigscreenTowerCrane',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<div class="project-standard-curing-room">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<module-one-1-1 label="质量目标"></module-one-1-1>
|
||||
<module-one-2-1 label="过程管控"></module-one-2-1>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<module-one-1-2 label="当前监测值">
|
||||
</module-one-1-2>
|
||||
<module-one-1-2 label="温度趋势">
|
||||
</module-one-1-2>
|
||||
<module-one-1-2 label="湿度趋势">
|
||||
</module-one-1-2>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//标养室检测
|
||||
name: 'JhbigscreenStandardCuringRoom',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.project-standard-curing-room {}
|
||||
</style>
|
||||
|
|
@ -1,26 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//配电箱
|
||||
name: 'JhbigscreenTowerCrane',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<div class="project-distribution-box">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<module-one-1-3 label="配电箱监测">
|
||||
|
||||
</module-one-1-3>
|
||||
<module-one-1-3 label="温度监控">
|
||||
|
||||
</module-one-1-3>
|
||||
<module-one-1-3 label="电流监控">
|
||||
|
||||
</module-one-1-3>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/components/module/module-one-1-3'
|
||||
export default {
|
||||
//配电箱
|
||||
name: 'JhbigscreenDistributionBox',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.project-distribution-box {}
|
||||
</style>
|
||||
|
|
@ -1,26 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//升降机
|
||||
name: 'JhbigscreenTowerCrane',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<div class="project-dumbwaiter">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<module-one-3-1 label="设备概况">
|
||||
</module-one-3-1>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//升降机
|
||||
name: 'JhbigscreenDumbwaiter',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.project-dumbwaiter {}
|
||||
</style>
|
||||
|
|
@ -1,26 +1,456 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//基坑
|
||||
name: 'JhbigscreenTowerCrane',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
<div class="project-excavation" @click="clickOutside">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<module-one-2-1 label="监测概况">
|
||||
<div class="analyse-equipment" style="position: absolute;top: 10px;left: 325px;">深基坑监测</div>
|
||||
<div class="czz-max">
|
||||
<div class="czz-number">
|
||||
<div class="czz-number-content">
|
||||
<div class="czz-number-img czz-number-img-blue">
|
||||
<svg class="my-svg-icon-blue"
|
||||
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3815">
|
||||
<path
|
||||
d="M96 334.4A48 48 0 0 0 144 288V144H288a48 48 0 0 0 0-96H96A48 48 0 0 0 48 96v192A48 48 0 0 0 96 334.4zM288 880H144V768a48 48 0 0 0-96 0v160A48 48 0 0 0 96 976h192a48 48 0 0 0 0-96zM928 687.04A48 48 0 0 0 880 736v144H736a48 48 0 0 0 0 96h192a48 48 0 0 0 48-48v-192a48 48 0 0 0-48-48.96zM928 48h-194.56a48 48 0 0 0 0 96h146.56V288a48 48 0 0 0 96 0V96A48 48 0 0 0 928 48zM522.88 194.88c-155.2 0-281.28 136-281.28 302.72 0 156.16 134.08 282.88 206.08 352 9.28 8.64 17.6 16.32 24.32 23.36a72.64 72.64 0 0 0 50.88 21.12 71.68 71.68 0 0 0 50.56-21.12c6.72-7.04 15.04-14.72 24.32-23.36 72-68.16 206.4-194.88 206.4-352 0-166.72-126.4-302.72-281.28-302.72zM544 790.4c-7.36 7.04-14.08 13.12-19.84 19.2l-20.16-19.2c-67.84-64-181.12-171.2-181.12-292.8s90.24-224 201.28-224 201.28 99.84 201.28 224S610.56 726.4 544 790.4zM529.6 370.88a123.84 123.84 0 1 0 123.84 123.84 123.84 123.84 0 0 0-123.84-123.84z m0 167.68a43.84 43.84 0 1 1 43.84-43.84 43.52 43.52 0 0 1-43.84 43.84z"
|
||||
p-id="3816"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="survey_content_number">
|
||||
<p>监测点位数</p>
|
||||
<div class="survey_content_value"><span v-html="monTotal"></span> 个</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="czz-number-content">
|
||||
<div class="czz-number-img czz-number-img-green">
|
||||
<svg class="my-svg-icon-green"
|
||||
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5561">
|
||||
<path
|
||||
d="M636.062286 948.357007l-248.319027-0.77782-190.565895-458.913786h629.645272l-190.76035 459.691606z"
|
||||
fill="#0C42B2" opacity=".8" p-id="5562"></path>
|
||||
<path
|
||||
d="M512 661.146981C329.01785 661.146981 191.149259 531.639954 191.149259 359.741739 191.149259 178.509685 341.07406 19.445499 512 19.445499S832.850741 178.509685 832.850741 359.741739C832.850741 531.639954 694.98215 661.146981 512 661.146981z"
|
||||
fill="#1F3C78" p-id="5563"></path>
|
||||
<path
|
||||
d="M512 38.890999C672.619825 38.890999 813.405241 188.815799 813.405241 359.741739 813.405241 520.55602 683.898215 641.701481 512 641.701481S210.594759 520.55602 210.594759 359.741739C210.594759 188.815799 351.380175 38.890999 512 38.890999m0-38.890999C324.156476 0 171.70376 171.898215 171.70376 359.741739S324.156476 680.59248 512 680.59248 852.29624 547.585264 852.29624 359.741739 699.843524 0 512 0z"
|
||||
fill="#3D79F1" p-id="5564"></path>
|
||||
<path
|
||||
d="M396.299278 934.939613a115.700722 79.337638 0 1 0 231.401444 0 115.700722 79.337638 0 1 0-231.401444 0Z"
|
||||
fill="#0C41AD" p-id="5565"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="survey_content_number">
|
||||
<p>在线点位数</p>
|
||||
<div class="survey_content_value survey_content_value_color_green"><span
|
||||
v-html="onlineDevTotal"></span> 个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<classify-bar :data="classifyBarData" :height="200"></classify-bar>
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">报警分析</div>
|
||||
</div>
|
||||
<el-row style="margin-top:12px;">
|
||||
<el-col :span="8">
|
||||
<div class="time-study-value">
|
||||
<p>今日报警数</p>
|
||||
<div class="analyse-num"><span v-cloak>{{ todayTotal }}</span> 条</div>
|
||||
</div>
|
||||
<div class="time-study-value">
|
||||
<p>本周报警数</p>
|
||||
<div class="analyse-num"><span v-cloak>{{ weekTotal }}</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.warn_context }}</div>
|
||||
<div class="glr-rate-value glr-rate-red-value"><span v-cloak>{{ item.total }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<module-one-2-2 label="点位图" style="position: relative;">
|
||||
<div class="sjk-icon-max" style="height: calc(100% - 80px);">
|
||||
<div class="sjk-img-min" :style="{ 'background': urlImgBgd }">
|
||||
</div>
|
||||
|
||||
<div class="sjk-icon-spot">
|
||||
<img v-for="item in forBitMappedImageData" :src="item.imgUrl"
|
||||
:style="{ 'top': item.top + 'px', 'left': item.left + 'px' }" v-show="item.state"
|
||||
@click="onClickSpot(item.sensorType, item.sensorInfoId, item.isBase, item.status, item)"
|
||||
class="icon-img">
|
||||
<img v-for="item in forBitMappedImageDataPJ" :src="item.imgUrl"
|
||||
:style="{ 'top': item.top + 'px', 'left': item.left + 'px' }" v-show="item.state"
|
||||
@click="onClickSpotPJ(item.sensorType, item.id, item.sensorInfoId, item)" class="icon-img">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sjk-popup" :style="{ 'top': popupPosition.top + 'px', 'left': popupPosition.left + 'px' }"
|
||||
id="clickPopup" v-if="popupShow">
|
||||
<div class="sjk-popup-content">
|
||||
<div class="sjk-popup-title">
|
||||
<div v-cloak>{{ pointPositionName }}</div>
|
||||
</div>
|
||||
<div class="sjk-popup-time" v-cloak>{{ lineTime }}</div>
|
||||
<div class="sjk-popup-table" v-if="offLine">
|
||||
<table>
|
||||
<tr>
|
||||
<th>监测详情</th>
|
||||
<th>变化量</th>
|
||||
<th>预警</th>
|
||||
<th>报警</th>
|
||||
</tr>
|
||||
<tr v-for="item in popupArrData">
|
||||
<td v-cloak>{{ item.text }}</td>
|
||||
<td v-cloak>{{ item.data }}</td>
|
||||
<td v-cloak>{{ item.warningUp }}/{{ item.warningDown }}</td>
|
||||
<td v-cloak>{{ item.policeUp }}/{{ item.policeDown }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sjk-off-line" v-if="!offLine">
|
||||
设备离线
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="sjk-icon-legend" style="left: 11px;bottom: 11px;width: calc(100% - 22px);">
|
||||
<div class="sjk-icon-legend-color">
|
||||
<div class="sjk-icon-legend-color-list">
|
||||
<div class="sjk-icon-legend-color-list-box box-green"></div>
|
||||
<div class="sjk-icon-legend-color-list-text">稳定</div>
|
||||
</div>
|
||||
<div class="sjk-icon-legend-color-list">
|
||||
<div class="sjk-icon-legend-color-list-box box-red"></div>
|
||||
<div class="sjk-icon-legend-color-list-text">报警</div>
|
||||
</div>
|
||||
<div class="sjk-icon-legend-color-list">
|
||||
<div class="sjk-icon-legend-color-list-box box-orange"></div>
|
||||
<div class="sjk-icon-legend-color-list-text">预警</div>
|
||||
</div>
|
||||
<div class="sjk-icon-legend-color-list">
|
||||
<div class="sjk-icon-legend-color-list-box box-blue"></div>
|
||||
<div class="sjk-icon-legend-color-list-text">基准线</div>
|
||||
</div>
|
||||
<div class="sjk-icon-legend-color-list">
|
||||
<div class="sjk-icon-legend-color-list-box box-grey"></div>
|
||||
<div class="sjk-icon-legend-color-list-text">离线</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sjk-icon-legend-right">
|
||||
<div :class="item.class" v-for="item in legendArrData" @click="legendScreen(item.type)">
|
||||
<img :src="item.url">
|
||||
<span v-cloak>{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<module-one-1-2 label="基坑近7天变化趋势">
|
||||
<div class="sjk-chart-line" v-loading="loading" element-loading-text="数据加载中"
|
||||
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
|
||||
<div class="sjk-chart-line-title">
|
||||
<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 class="trend-chart-max" v-if="btnNav == 1">
|
||||
<trend-line-chart :height="220" :chartdata="CollWeiyiPointData"
|
||||
:data="CollWeiyiPointDataData"></trend-line-chart>
|
||||
</div>
|
||||
<div v-if="btnNav == 2">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="trend-chart-max">
|
||||
<trend-line-chart :height="220" :chartdata="CollQingxiePointDataX"
|
||||
:data="CollQingxiePointDataXdData"></trend-line-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="trend-chart-max">
|
||||
<trend-line-chart :height="220" :chartdata="CollQingxiePointDataY"
|
||||
:data="CollQingxiePointDataYdData"></trend-line-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
<div class="trend-chart-max" v-if="btnNav == 3">
|
||||
<trend-line-chart :height="220" :chartdata="YingLiPointData"
|
||||
:data="YingLiPointDataData"></trend-line-chart>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-1-2>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<module-one-1-2 label="累计变化量">
|
||||
</module-one-1-2>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/components/module/module-one-2-2'
|
||||
import '@/components/module/module-one-1-2'
|
||||
import '@/components/module/module-one-2-1'
|
||||
import '@/components/classify-bar'
|
||||
import '@/components/trend-line-chart'
|
||||
|
||||
export default {
|
||||
//基坑
|
||||
name: 'JhbigscreenExcavation',
|
||||
|
||||
data() {
|
||||
return {
|
||||
monTotal: 3,
|
||||
onlineDevTotal: 3,
|
||||
classifyBarData: [],
|
||||
todayTotal: 10,
|
||||
weekTotal: 99,
|
||||
warningType: [],
|
||||
warningTypeInterval: undefined,
|
||||
warningTypeIndex: 0,
|
||||
urlImgBgd: '',
|
||||
forBitMappedImageData: [],
|
||||
forBitMappedImageDataPJ: [],
|
||||
legendArrData: [],
|
||||
popupShow: false,
|
||||
popupPosition: {},
|
||||
pointPositionName: '',
|
||||
popupArrData: [],
|
||||
offLine: true,
|
||||
loading: false,
|
||||
btnNav: 1,
|
||||
CollWeiyiPointData:[],
|
||||
CollWeiyiPointDataData:[],
|
||||
CollQingxiePointDataX:[],
|
||||
CollQingxiePointDataXdData:[],
|
||||
CollQingxiePointDataY:[],
|
||||
CollQingxiePointDataYdData:[],
|
||||
YingLiPointData:[],
|
||||
YingLiPointDataData:[],
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.classifyBarData = [{ name: '沉降', total: 15, yesMonitor: 2, notMonitor: 0, unit: '个' }, { name: '倾斜', total: 15, yesMonitor: 3, notMonitor: 0, unit: '个' }, { name: '应力', total: 15, yesMonitor: 4, notMonitor: 0, unit: '个' },]
|
||||
this.warningType = [{ warn_context: '报警类型A', total: 4 }, { warn_context: '报警类型B', total: 4 }, { warn_context: '报警类型C', total: 4 }, { warn_context: '报警类型D', total: 4 }, { warn_context: '报警类型E', total: 4 }, { warn_context: '报警类型F', total: 4 }, { warn_context: '报警类型G', total: 4 }, { warn_context: '报警类型H', total: 4 },]
|
||||
this.urlImgBgd = "url(images/data/excavation-01.jpg) 100% 100%";
|
||||
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.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
listMinMouseoverType() {
|
||||
clearInterval(this.warningTypeInterval);
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
listMinMouseoutType() {
|
||||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
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' })
|
||||
|
||||
if ($("#afootOverflowTypePJ").scrollTop() == height * this.warningType.length - $("#afootOverflowTypePJ").innerHeight()) {
|
||||
this.warningTypeIndex = 0
|
||||
} else {
|
||||
this.warningTypeIndex = this.warningTypeIndex + 1
|
||||
}
|
||||
$("#afootOverflowTypePJ").animate({ scrollTop: (height * this.warningTypeIndex) + 'px' })
|
||||
},
|
||||
legendScreen(type) {
|
||||
var data = this.forBitMappedImageData
|
||||
data.map(x => {
|
||||
if (x.sensorType == type) {
|
||||
if (x.state == true) {
|
||||
x.state = false
|
||||
} else {
|
||||
x.state = true
|
||||
}
|
||||
}
|
||||
return x
|
||||
})
|
||||
|
||||
var legendData = this.legendArrData
|
||||
legendData.map(y => {
|
||||
if (y.type == type) {
|
||||
if (y.class == 'sjk-icon-legend-right-icon') {
|
||||
y.class = 'sjk-icon-legend-right-icon sjk-legend-filter'
|
||||
} else {
|
||||
y.class = 'sjk-icon-legend-right-icon'
|
||||
}
|
||||
}
|
||||
return y
|
||||
})
|
||||
this.forBitMappedImageData = data
|
||||
this.legendArrData = legendData
|
||||
},
|
||||
//点击点位事件
|
||||
onClickSpot(type, id, isBase, status, it) {
|
||||
this.deviceId = id
|
||||
var posX = 0, posY = 0;
|
||||
var event = event || window.event;
|
||||
if (event.pageX || event.pageY) {
|
||||
posX = event.pageX;
|
||||
posY = event.pageY;
|
||||
} else if (event.clientX || event.clientY) {
|
||||
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
|
||||
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
|
||||
}
|
||||
var position = {}
|
||||
|
||||
if (type == 'CollWeiyiPoint') {
|
||||
position = {
|
||||
top: posY - 110,
|
||||
left: posX + 30
|
||||
}
|
||||
} else if (type == 'CollQingxiePoint') {
|
||||
position = {
|
||||
top: posY - 110,
|
||||
left: posX + 30
|
||||
}
|
||||
}
|
||||
this.popupPosition = position
|
||||
if (isBase) {
|
||||
this.popupShow = true
|
||||
if (type == "CollWeiyiPoint") {
|
||||
this.pointPositionName = `沉降监测-${it.pointName}`
|
||||
}
|
||||
if (type == "CollQingxiePoint") {
|
||||
this.pointPositionName = `倾斜监测-${it.pointName}`
|
||||
}
|
||||
this.popupArrData = [];
|
||||
}
|
||||
|
||||
},
|
||||
onClickSpotPJ(type, projectId, id, it) {
|
||||
this.deviceId = id
|
||||
var posX = 0, posY = 0;
|
||||
var event = event || window.event;
|
||||
if (event.pageX || event.pageY) {
|
||||
posX = event.pageX;
|
||||
posY = event.pageY;
|
||||
} else if (event.clientX || event.clientY) {
|
||||
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
|
||||
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
|
||||
}
|
||||
var position = {}
|
||||
|
||||
if (type == 'CollWeiyiPoint') {
|
||||
position = {
|
||||
top: posY - 110,
|
||||
left: posX + 30
|
||||
}
|
||||
} else if (type == 'CollQingxiePoint') {
|
||||
position = {
|
||||
top: posY - 110,
|
||||
left: posX + 30
|
||||
}
|
||||
}
|
||||
|
||||
this.pointPositionName = `爬架-倾斜监测-${it.pointName}`;
|
||||
this.popupPosition = position
|
||||
this.popupShow = true;
|
||||
this.popupArrData = [];
|
||||
|
||||
},
|
||||
// 监听点击弹窗以外的区域
|
||||
clickOutside(event) {
|
||||
const current = document.getElementById("clickPopup");
|
||||
if (current) {
|
||||
if (!current.contains(event.target)) {
|
||||
if (event.target._prevClass != 'icon-img') {
|
||||
this.popupShow = false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//点击点位类型
|
||||
onClickPoint(n) {
|
||||
this.btnNav = n
|
||||
if (n == 1) {
|
||||
this.sensorType = 'CollWeiyiPoint'
|
||||
} else if (n == 2) {
|
||||
this.sensorType = 'CollQingxiePoint'
|
||||
} else if (n == 3) {
|
||||
this.sensorType = 'YingLi'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.project-excavation {
|
||||
|
||||
.my-svg-icon-blue,
|
||||
.my-svg-icon-green {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.my-svg-icon-green * {
|
||||
fill: #63F8BC !important;
|
||||
}
|
||||
|
||||
.my-svg-icon-blue * {
|
||||
fill: #7c9ce1 !important
|
||||
}
|
||||
|
||||
.sjk-img-min {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="project-personnel-position">
|
||||
<!-- -->
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<script>
|
||||
export default {
|
||||
//人员定位
|
||||
name: 'JhbigscreenTowerCrane',
|
||||
name: 'JhbigscreenPersonnelPosition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -23,4 +23,9 @@
|
|||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
<style lang="less">
|
||||
.project-personnel-position{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -41,12 +41,13 @@
|
|||
<el-row style="height:160px;overflow: hidden;">
|
||||
<staff-survey-chart :height="200" :unit="'个'" :data="data1" :width="140"></staff-survey-chart>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-row style="height:calc(100% - 283px);">
|
||||
<div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
|
||||
<div :class="'active'">监控列表</div>
|
||||
</div>
|
||||
<div class="drv-list scroll">
|
||||
<div v-for="(it, idx) in devList" :key="idx" class="drv-item">
|
||||
<div class="drv-list scroll" id="listMin">
|
||||
<div v-for="(it, idx) in devList" :key="idx" class="drv-item list-for"
|
||||
:class="index == idx ? 'active' : ''" @click="onTowerCraneList(idx)">
|
||||
<div class="item-content">
|
||||
<div class="dev-row1">
|
||||
<div class="survey_content">
|
||||
|
|
@ -68,7 +69,8 @@
|
|||
</div>
|
||||
<div class="data-row">
|
||||
<span>设备状态:</span>
|
||||
<span :class="it.state == 0 ? 'is-offline' : 'is-online'">{{ it.state == 0 ? '离线' : '在线' }}</span>
|
||||
<span :class="it.state == 0 ? 'is-offline' : 'is-online'">{{ it.state == 0 ? '离线' : '在线'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -110,108 +112,204 @@
|
|||
</el-col>
|
||||
<el-col :span="18">
|
||||
<module-one-3-1 cls="no-lable no-border" style="position: relative;">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
|
||||
<div :class="'active'">吊重次数(10次)</div>
|
||||
<div class="title-bg"></div>
|
||||
</div>
|
||||
<div class="data-row2">
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">本月</div>
|
||||
<div class="s-number">5</div>
|
||||
</div>
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">累计</div>
|
||||
<div class="s-number">500</div>
|
||||
<el-row style="height:calc(100% - 270px);">
|
||||
<el-col :span="16">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
|
||||
<div :class="'active'">吊重次数(10次)</div>
|
||||
<div class="title-bg"></div>
|
||||
</div>
|
||||
<div class="data-row2">
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">本月</div>
|
||||
<div class="s-number">5</div>
|
||||
</div>
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">累计</div>
|
||||
<div class="s-number">500</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
|
||||
<div :class="'active'">超载次数(10次)</div>
|
||||
<div class="title-bg"></div>
|
||||
</div>
|
||||
<div class="data-row2">
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">本月</div>
|
||||
<div class="s-number">5</div>
|
||||
</div>
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">累计</div>
|
||||
<div class="s-number">500</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
|
||||
<div :class="'active'">超载率(10%)</div>
|
||||
<div class="title-bg"></div>
|
||||
</div>
|
||||
<div class="data-row2">
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">本月</div>
|
||||
<div class="s-number">10%</div>
|
||||
</div>
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">累计</div>
|
||||
<div class="s-number">12%</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
|
||||
<div :class="'active'">告警次数(10次)</div>
|
||||
<div class="title-bg"></div>
|
||||
</div>
|
||||
<div class="data-row2">
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">本月</div>
|
||||
<div class="s-number">5</div>
|
||||
</div>
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">累计</div>
|
||||
<div class="s-number">500</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<div class="dev-info">
|
||||
<div class="safe-tower-crane-max ">
|
||||
<div class="safe-tower-crane-min" style="position: relative">
|
||||
<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="selDev" :width="360" :height="200" :top="55" :left="85"
|
||||
:ampdata="selDev.ampData" :forearmlength="selDev.foreArmLength"
|
||||
:heightdata="selDev.heightData" :downheight="selDev.downHeight"
|
||||
:angledata="selDev.angleData"></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="6">
|
||||
<div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
|
||||
<div :class="'active'">超载次数(10次)</div>
|
||||
<div class="title-bg"></div>
|
||||
</div>
|
||||
<div class="data-row2">
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">本月</div>
|
||||
<div class="s-number">5</div>
|
||||
</div>
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">累计</div>
|
||||
<div class="s-number">500</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
|
||||
<div :class="'active'">超载率(10%)</div>
|
||||
<div class="title-bg"></div>
|
||||
</div>
|
||||
<div class="data-row2">
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">本月</div>
|
||||
<div class="s-number">10%</div>
|
||||
</div>
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">累计</div>
|
||||
<div class="s-number">12%</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="warning-info-title" style="padding-left: 20px;position: relative;z-index: 9;">
|
||||
<div :class="'active'">告警次数(10次)</div>
|
||||
<div class="title-bg"></div>
|
||||
</div>
|
||||
<div class="data-row2">
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">本月</div>
|
||||
<div class="s-number">5</div>
|
||||
</div>
|
||||
<div class="data-row2-col">
|
||||
<div class="s-text">累计</div>
|
||||
<div class="s-number">500</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
<div class="dev-info">
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
222222222
|
||||
<div class="safe-height">
|
||||
<div class="analyse-map">
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">正在发生</div>
|
||||
<div class="analyse-equipment">塔机监测</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_name }}</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.towerName }}发生{{ item.warn_context }}
|
||||
</div>
|
||||
<div class="afoot-machinery-time" v-cloak>{{ item.warn_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="afoot-machinery-project" v-cloak>项目：{{ item.project_abbreviation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="analyse-map">
|
||||
<div class="analyse-title analyse_title_blue">
|
||||
<div class="analyse-text">力矩曲线</div>
|
||||
</div>
|
||||
<div class="safe-moment">
|
||||
<safe-curve-chart :height="260" :momentdata="momentData"></safe-curve-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="dev-info-list">
|
||||
<el-col :span="4" class="dev-info-item" v-for="(it,idx) in devBottomInfo" :key="idx">
|
||||
<el-col :span="4" class="dev-info-item" v-for="(it, idx) in devBottomInfo" :key="idx">
|
||||
<div class="info-item-content">
|
||||
<div class="row-1">
|
||||
<span class="sp-title">{{ it.title }}</span>
|
||||
<svg v-if="idx==0" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11357"><path d="M511.362506 77.130254A435.935081 435.935081 0 0 0 75.427425 511.360799 435.935081 435.935081 0 0 0 511.362506 948.574282a435.935081 435.935081 0 0 0 434.656679-437.213483A435.935081 435.935081 0 0 0 511.362506 77.130254zM511.362506 1.278402a511.360799 511.360799 0 0 1 511.360799 511.360799 511.360799 511.360799 0 0 1-511.360799 511.360799A511.360799 511.360799 0 0 1 0.001707 512.639201 511.360799 511.360799 0 0 1 511.362506 0zM322.585144 283.379109a37.499792 37.499792 0 0 0-53.26675 0 37.925926 37.925926 0 0 0 0 53.692884l131.675406 131.675406a121.022056 121.022056 0 0 0-13.636288 56.675822A124.004994 124.004994 0 0 0 511.362506 649.428215a124.004994 124.004994 0 0 0 124.004993-124.004994A124.004994 124.004994 0 0 0 511.362506 401.418227a124.857262 124.857262 0 0 0-56.675822 13.636288zM511.362506 477.270079a48.579276 48.579276 0 0 1 48.153142 48.153142A48.153142 48.153142 0 0 1 511.362506 573.576363a48.153142 48.153142 0 0 1-48.579276-48.153142A48.579276 48.579276 0 0 1 511.362506 477.270079z m-281.24844-51.13608a302.981273 302.981273 0 0 0-14.91469 98.01082 37.925926 37.925926 0 0 0 37.925926 37.925926 37.499792 37.499792 0 0 0 37.499792-37.925926 235.652102 235.652102 0 0 1 11.079484-74.147316 37.499792 37.499792 0 0 0-23.863504-47.727008 37.073658 37.073658 0 0 0-47.727008 23.863504zM511.362506 227.98169a317.895963 317.895963 0 0 0-98.436954 14.91469 38.35206 38.35206 0 0 0-23.863504 47.727007 38.35206 38.35206 0 0 0 48.153142 24.289638A235.652102 235.652102 0 0 1 511.362506 303.833541a221.163546 221.163546 0 0 1 221.589679 221.58968 37.925926 37.925926 0 0 0 37.925926 37.925926 37.925926 37.925926 0 0 0 37.925926-37.925926A298.293799 298.293799 0 0 0 511.362506 229.260092z" fill="#363636" p-id="11358"></path></svg>
|
||||
<svg v-if="idx==1" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6961"><path d="M174.5 394.1h331.2c91 0 166-73.2 166.3-164.2 0.3-91-73.7-165.1-164.7-165.1-43.2 0-84 16.6-114.9 46.7-15.5 15.1-27.7 32.9-36.2 52.2-12.7 29.1 8.4 61.7 40.1 62.6 18.5 0.5 35.2-10.4 42.6-27.3 11.6-26.2 37.7-44.2 68.3-44.2 41.4 0 75.1 33.9 74.7 75.4-0.4 41.1-34.5 73.9-75.6 73.9H174.5c-24.9 0-45 20.1-45 45s20.2 45 45 45zM189.3 634.2l0.6 45-0.6-45zM682 626.9c-0.6 0-0.8 0-427.3 6.3-7.3 0.1-14.2 0.2-20.5 0.3-24.8 0.4-44.7 20.8-44.3 45.6 0.3 24.9 20.8 44.8 45.7 44.4 6.3-0.1 13.2-0.2 20.5-0.3 124.9-1.9 415.3-6.2 426.2-6.3 42.8 0.2 77.2 36.5 74.2 80-2.8 39.8-35.9 70-75.7 69.3-30.2-0.5-55.9-18.5-67.2-44.5-7.3-16.8-24.1-27.5-42.5-27-31.7 0.9-52.8 33.5-40.1 62.6 8.4 19.4 20.6 37.1 36.2 52.2 30.9 30.1 71.8 46.7 115 46.7 91.8-0.1 166.8-77 164.5-168.8-2.3-88.9-75.3-160.5-164.7-160.5zM856.6 240.3c-29-11.5-60.5 10.1-60.5 41.4v1.3c0 18 10.9 34.4 27.6 41.1 27.5 11 47 38 47 69.4 0 41.2-33.5 74.7-74.7 74.7H112.6c-24.9 0-45 20.1-45 45s20.1 45 45 45h683.5c90.8 0 164.7-73.9 164.7-164.7-0.1-69.5-43.3-129-104.2-153.2z" p-id="6962"></path></svg>
|
||||
<svg v-if="idx==2" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7867"><path d="M675.84 102.4c36.7616 0 66.56 29.7984 66.56 66.56v148.48h122.88c36.23424 0 65.70496 28.9536 66.53952 64.98816L931.84 384v481.28c0 36.7616-29.7984 66.56-66.56 66.56H158.72c-36.7616 0-66.56-29.7984-66.56-66.56V384c0-36.7616 29.7984-66.56 66.56-66.56h122.88V168.96c0-36.23424 28.9536-65.70496 64.98816-66.53952L348.16 102.4z m184.32 286.72H163.84v471.04h696.32V389.12z m-209.92 107.52a10.24 10.24 0 0 1 10.24 10.24v51.2a10.24 10.24 0 0 1-10.24 10.24h-102.40512l0.00512 194.56a10.24 10.24 0 0 1-10.24 10.24H486.4a10.24 10.24 0 0 1-10.24-10.24l-0.00512-194.56H373.76a10.24 10.24 0 0 1-10.24-10.24V506.88a10.24 10.24 0 0 1 10.24-10.24h276.48z m20.48-322.56H353.28v143.36h317.44V174.08z" fill="#666666" p-id="7868"></path></svg>
|
||||
<svg v-if="idx==3" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1042 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8742"><path d="M760.685714 376.685714l27.428572-56.685714c9.142857-18.285714 16.457143-36.571429 25.6-53.028571h1.828571c9.142857 16.457143 20.114286 34.742857 29.257143 53.028571l32.914286 56.685714h85.942857l-95.085714-149.942857 89.6-155.428571h-82.285715l-25.6 53.028571c-7.314286 18.285714-14.628571 34.742857-21.942857 51.2h-1.828571c-9.142857-16.457143-18.285714-34.742857-27.428572-51.2L768 71.314286h-85.942857l89.6 146.285714-95.085714 159.085714h84.114285zM213.942857 877.714286H162.742857V73.142857h-73.142857v841.142857c0 20.114286 16.457143 36.571429 36.571429 36.571429h841.142857v-73.142857H213.942857zM522.624 464.512l-51.712 51.730286 51.712 51.712 51.730286-51.712-51.730286-51.730286zM315.757714 671.049143l-51.730285 51.712 51.730285 51.712 51.712-51.712-51.712-51.712zM421.705143 570.916571l-51.748572 51.712 51.730286 51.730286 51.730286-51.712-51.712-51.730286zM212.315429 773.010286l-51.712 51.712 51.712 51.730285 51.730285-51.730285-51.730285-51.712zM307.2 398.628571l51.2-51.2-64-64c109.714286 9.142857 210.285714 53.028571 288.914286 120.685715l-9.142857 9.142857 51.2 51.2 9.142857-9.142857c67.657143 74.971429 113.371429 170.057143 128 276.114285l-60.342857-60.342857-51.2 51.2 128 128c7.314286 7.314286 16.457143 10.971429 25.6 10.971429 9.142857 0 18.285714-3.657143 25.6-10.971429l128-128-51.2-51.2-69.485715 69.485715C808.228571 457.142857 576 232.228571 290.742857 212.114286l67.657143-67.657143-51.2-51.2-128 128c-14.628571 14.628571-14.628571 36.571429 0 51.2l128 126.171428z" p-id="8743"></path></svg>
|
||||
<svg v-if="idx==4" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9822"><path d="M894.56 268.64l31.68 59.52-391.2 208.32-31.68-59.52 391.2-208.32z" fill="#666666" p-id="9823"></path><path d="M512 33.44C247.52 33.44 33.44 247.52 33.44 512s214.08 478.56 478.56 478.56 478.56-214.08 478.56-478.56S776.48 33.44 512 33.44z m0 852c-202.08 0-366.24-167.52-366.24-374.88S309.92 135.68 512 135.68s366.24 167.52 366.24 374.88-163.68 374.88-366.24 374.88z" fill="#666666" p-id="9824"></path></svg>
|
||||
<svg v-if="idx==5" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10417"><path d="M819.198 910.218 204.799 910.218c-50.267 0-91.022-40.75-91.022-91.02L113.777 204.822c0-50.29 40.755-91.045 91.022-91.045l614.398 0c50.27 0 91.02 40.755 91.02 91.045l0 614.376C910.218 869.468 869.468 910.218 819.198 910.218zM841.953 227.554c0-25.122-20.385-45.51-45.51-45.51L227.554 182.044c-25.122 0-45.51 20.387-45.51 45.51l0 568.889c0 25.125 20.387 45.535 45.51 45.535l568.889 0c25.125 0 45.51-20.39 45.51-45.535L841.953 227.554zM603.268 400.952l-57.14-57.115 0 335.802 55.505-55.5c13.335-13.31 34.93-13.335 48.265 0 13.33 13.335 13.33 34.95 0 48.29l-105.77 105.765c-1.615 3.415-3.525 6.78-6.37 9.625-7.1 7.08-16.475 10.1-25.76 9.67-9.262 0.46-18.66-2.59-25.76-9.69-2.842-2.85-4.8-6.15-6.347-9.58l-105.79-105.79c-13.335-13.34-13.335-34.955 0-48.29 13.332-13.31 34.927-13.335 48.262 0l55.502 55.5L477.865 343.837l-57.117 57.115c-13.335 13.357-34.952 13.335-48.287 0s-13.335-34.93 0-48.265l115.395-115.37c13.332-13.335 34.927-13.357 48.262 0l115.395 115.37c13.335 13.335 13.335 34.952 0 48.265C638.198 414.286 616.583 414.286 603.268 400.952z" fill="#272636" p-id="10418"></path></svg>
|
||||
<div class="row-1">
|
||||
<span class="sp-title">{{ it.title }}</span>
|
||||
<svg v-if="idx == 0" class="icon"
|
||||
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11357">
|
||||
<path
|
||||
d="M511.362506 77.130254A435.935081 435.935081 0 0 0 75.427425 511.360799 435.935081 435.935081 0 0 0 511.362506 948.574282a435.935081 435.935081 0 0 0 434.656679-437.213483A435.935081 435.935081 0 0 0 511.362506 77.130254zM511.362506 1.278402a511.360799 511.360799 0 0 1 511.360799 511.360799 511.360799 511.360799 0 0 1-511.360799 511.360799A511.360799 511.360799 0 0 1 0.001707 512.639201 511.360799 511.360799 0 0 1 511.362506 0zM322.585144 283.379109a37.499792 37.499792 0 0 0-53.26675 0 37.925926 37.925926 0 0 0 0 53.692884l131.675406 131.675406a121.022056 121.022056 0 0 0-13.636288 56.675822A124.004994 124.004994 0 0 0 511.362506 649.428215a124.004994 124.004994 0 0 0 124.004993-124.004994A124.004994 124.004994 0 0 0 511.362506 401.418227a124.857262 124.857262 0 0 0-56.675822 13.636288zM511.362506 477.270079a48.579276 48.579276 0 0 1 48.153142 48.153142A48.153142 48.153142 0 0 1 511.362506 573.576363a48.153142 48.153142 0 0 1-48.579276-48.153142A48.579276 48.579276 0 0 1 511.362506 477.270079z m-281.24844-51.13608a302.981273 302.981273 0 0 0-14.91469 98.01082 37.925926 37.925926 0 0 0 37.925926 37.925926 37.499792 37.499792 0 0 0 37.499792-37.925926 235.652102 235.652102 0 0 1 11.079484-74.147316 37.499792 37.499792 0 0 0-23.863504-47.727008 37.073658 37.073658 0 0 0-47.727008 23.863504zM511.362506 227.98169a317.895963 317.895963 0 0 0-98.436954 14.91469 38.35206 38.35206 0 0 0-23.863504 47.727007 38.35206 38.35206 0 0 0 48.153142 24.289638A235.652102 235.652102 0 0 1 511.362506 303.833541a221.163546 221.163546 0 0 1 221.589679 221.58968 37.925926 37.925926 0 0 0 37.925926 37.925926 37.925926 37.925926 0 0 0 37.925926-37.925926A298.293799 298.293799 0 0 0 511.362506 229.260092z"
|
||||
fill="#363636" p-id="11358"></path>
|
||||
</svg>
|
||||
<svg v-if="idx == 1" class="icon"
|
||||
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6961">
|
||||
<path
|
||||
d="M174.5 394.1h331.2c91 0 166-73.2 166.3-164.2 0.3-91-73.7-165.1-164.7-165.1-43.2 0-84 16.6-114.9 46.7-15.5 15.1-27.7 32.9-36.2 52.2-12.7 29.1 8.4 61.7 40.1 62.6 18.5 0.5 35.2-10.4 42.6-27.3 11.6-26.2 37.7-44.2 68.3-44.2 41.4 0 75.1 33.9 74.7 75.4-0.4 41.1-34.5 73.9-75.6 73.9H174.5c-24.9 0-45 20.1-45 45s20.2 45 45 45zM189.3 634.2l0.6 45-0.6-45zM682 626.9c-0.6 0-0.8 0-427.3 6.3-7.3 0.1-14.2 0.2-20.5 0.3-24.8 0.4-44.7 20.8-44.3 45.6 0.3 24.9 20.8 44.8 45.7 44.4 6.3-0.1 13.2-0.2 20.5-0.3 124.9-1.9 415.3-6.2 426.2-6.3 42.8 0.2 77.2 36.5 74.2 80-2.8 39.8-35.9 70-75.7 69.3-30.2-0.5-55.9-18.5-67.2-44.5-7.3-16.8-24.1-27.5-42.5-27-31.7 0.9-52.8 33.5-40.1 62.6 8.4 19.4 20.6 37.1 36.2 52.2 30.9 30.1 71.8 46.7 115 46.7 91.8-0.1 166.8-77 164.5-168.8-2.3-88.9-75.3-160.5-164.7-160.5zM856.6 240.3c-29-11.5-60.5 10.1-60.5 41.4v1.3c0 18 10.9 34.4 27.6 41.1 27.5 11 47 38 47 69.4 0 41.2-33.5 74.7-74.7 74.7H112.6c-24.9 0-45 20.1-45 45s20.1 45 45 45h683.5c90.8 0 164.7-73.9 164.7-164.7-0.1-69.5-43.3-129-104.2-153.2z"
|
||||
p-id="6962"></path>
|
||||
</svg>
|
||||
<svg v-if="idx == 2" class="icon"
|
||||
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7867">
|
||||
<path
|
||||
d="M675.84 102.4c36.7616 0 66.56 29.7984 66.56 66.56v148.48h122.88c36.23424 0 65.70496 28.9536 66.53952 64.98816L931.84 384v481.28c0 36.7616-29.7984 66.56-66.56 66.56H158.72c-36.7616 0-66.56-29.7984-66.56-66.56V384c0-36.7616 29.7984-66.56 66.56-66.56h122.88V168.96c0-36.23424 28.9536-65.70496 64.98816-66.53952L348.16 102.4z m184.32 286.72H163.84v471.04h696.32V389.12z m-209.92 107.52a10.24 10.24 0 0 1 10.24 10.24v51.2a10.24 10.24 0 0 1-10.24 10.24h-102.40512l0.00512 194.56a10.24 10.24 0 0 1-10.24 10.24H486.4a10.24 10.24 0 0 1-10.24-10.24l-0.00512-194.56H373.76a10.24 10.24 0 0 1-10.24-10.24V506.88a10.24 10.24 0 0 1 10.24-10.24h276.48z m20.48-322.56H353.28v143.36h317.44V174.08z"
|
||||
fill="#666666" p-id="7868"></path>
|
||||
</svg>
|
||||
<svg v-if="idx == 3" class="icon"
|
||||
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1042 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8742">
|
||||
<path
|
||||
d="M760.685714 376.685714l27.428572-56.685714c9.142857-18.285714 16.457143-36.571429 25.6-53.028571h1.828571c9.142857 16.457143 20.114286 34.742857 29.257143 53.028571l32.914286 56.685714h85.942857l-95.085714-149.942857 89.6-155.428571h-82.285715l-25.6 53.028571c-7.314286 18.285714-14.628571 34.742857-21.942857 51.2h-1.828571c-9.142857-16.457143-18.285714-34.742857-27.428572-51.2L768 71.314286h-85.942857l89.6 146.285714-95.085714 159.085714h84.114285zM213.942857 877.714286H162.742857V73.142857h-73.142857v841.142857c0 20.114286 16.457143 36.571429 36.571429 36.571429h841.142857v-73.142857H213.942857zM522.624 464.512l-51.712 51.730286 51.712 51.712 51.730286-51.712-51.730286-51.730286zM315.757714 671.049143l-51.730285 51.712 51.730285 51.712 51.712-51.712-51.712-51.712zM421.705143 570.916571l-51.748572 51.712 51.730286 51.730286 51.730286-51.712-51.712-51.730286zM212.315429 773.010286l-51.712 51.712 51.712 51.730285 51.730285-51.730285-51.730285-51.712zM307.2 398.628571l51.2-51.2-64-64c109.714286 9.142857 210.285714 53.028571 288.914286 120.685715l-9.142857 9.142857 51.2 51.2 9.142857-9.142857c67.657143 74.971429 113.371429 170.057143 128 276.114285l-60.342857-60.342857-51.2 51.2 128 128c7.314286 7.314286 16.457143 10.971429 25.6 10.971429 9.142857 0 18.285714-3.657143 25.6-10.971429l128-128-51.2-51.2-69.485715 69.485715C808.228571 457.142857 576 232.228571 290.742857 212.114286l67.657143-67.657143-51.2-51.2-128 128c-14.628571 14.628571-14.628571 36.571429 0 51.2l128 126.171428z"
|
||||
p-id="8743"></path>
|
||||
</svg>
|
||||
<svg v-if="idx == 4" class="icon"
|
||||
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9822">
|
||||
<path d="M894.56 268.64l31.68 59.52-391.2 208.32-31.68-59.52 391.2-208.32z" fill="#666666"
|
||||
p-id="9823"></path>
|
||||
<path
|
||||
d="M512 33.44C247.52 33.44 33.44 247.52 33.44 512s214.08 478.56 478.56 478.56 478.56-214.08 478.56-478.56S776.48 33.44 512 33.44z m0 852c-202.08 0-366.24-167.52-366.24-374.88S309.92 135.68 512 135.68s366.24 167.52 366.24 374.88-163.68 374.88-366.24 374.88z"
|
||||
fill="#666666" p-id="9824"></path>
|
||||
</svg>
|
||||
<svg v-if="idx == 5" class="icon"
|
||||
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10417">
|
||||
<path
|
||||
d="M819.198 910.218 204.799 910.218c-50.267 0-91.022-40.75-91.022-91.02L113.777 204.822c0-50.29 40.755-91.045 91.022-91.045l614.398 0c50.27 0 91.02 40.755 91.02 91.045l0 614.376C910.218 869.468 869.468 910.218 819.198 910.218zM841.953 227.554c0-25.122-20.385-45.51-45.51-45.51L227.554 182.044c-25.122 0-45.51 20.387-45.51 45.51l0 568.889c0 25.125 20.387 45.535 45.51 45.535l568.889 0c25.125 0 45.51-20.39 45.51-45.535L841.953 227.554zM603.268 400.952l-57.14-57.115 0 335.802 55.505-55.5c13.335-13.31 34.93-13.335 48.265 0 13.33 13.335 13.33 34.95 0 48.29l-105.77 105.765c-1.615 3.415-3.525 6.78-6.37 9.625-7.1 7.08-16.475 10.1-25.76 9.67-9.262 0.46-18.66-2.59-25.76-9.69-2.842-2.85-4.8-6.15-6.347-9.58l-105.79-105.79c-13.335-13.34-13.335-34.955 0-48.29 13.332-13.31 34.927-13.335 48.262 0l55.502 55.5L477.865 343.837l-57.117 57.115c-13.335 13.357-34.952 13.335-48.287 0s-13.335-34.93 0-48.265l115.395-115.37c13.332-13.335 34.927-13.357 48.262 0l115.395 115.37c13.335 13.335 13.335 34.952 0 48.265C638.198 414.286 616.583 414.286 603.268 400.952z"
|
||||
fill="#272636" p-id="10418"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="row-scale">
|
||||
<div class="row-scale-ctx">
|
||||
<div v-for="i in 10" :key="i" class="scale-item"></div>
|
||||
</div>
|
||||
<span class="sp-data1 sp-data sp-sc">报警:{{ it.data1}}</span>
|
||||
<span class="sp-data2 sp-data sp-sc" v-if="it.data2>=5" :style="calcTop(it)">报警:{{ it.data2}}</span>
|
||||
<span class="sp-data1 sp-data sp-sc">报警:{{ it.data1 }}</span>
|
||||
<span class="sp-data2 sp-data sp-sc" v-if="it.data2 >= 5" :style="calcTop(it)">报警:{{ it.data2
|
||||
}}</span>
|
||||
<span class="sp-sc1 sp-sc">{{ it.scale1 }}</span>
|
||||
<span class="sp-sc2 sp-sc">{{ it.scale2 }}</span>
|
||||
</div>
|
||||
|
|
@ -220,7 +318,7 @@
|
|||
</el-row>
|
||||
</module-one-3-1>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
|
|
@ -231,27 +329,39 @@
|
|||
import '@/components/module/module-one-2-1'
|
||||
import '@/components/module/module-one-3-1'
|
||||
import '@/components/staff-survey-chart'
|
||||
import '@/components/tower-crane-value-1'
|
||||
import '@/components/tower-crane-value-2'
|
||||
import '@/components/safe-curve-chart'
|
||||
export default {
|
||||
//塔吊
|
||||
name: 'JhbigscreenTowerCrane',
|
||||
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
data1: [],
|
||||
devList: [],
|
||||
selDev: {},
|
||||
devBottomInfo:[]
|
||||
devBottomInfo: [],
|
||||
direction: 'right',
|
||||
comName: 'tower-crane-value-1',
|
||||
warningData: [],
|
||||
momentData: {},
|
||||
forIndex:0,
|
||||
warningInterval:undefined,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.devBottomInfo=[{title:"幅度",data1:59,data2:58,scale1:'0',scale2:'0m'},
|
||||
{title:"风速",data1:59,data2:58,scale1:'0',scale2:'0m'},
|
||||
{title:"吊重",data1:13.8,data2:10.8,scale1:'0',scale2:'0m'},
|
||||
{title:"倾角",data1:59,data2:5,scale1:'0',scale2:'0m'},
|
||||
{title:"转角",data1:59,data2:58,scale1:'0',scale2:'0m'},
|
||||
{title:"高度",data1:59,data2:58,scale1:'0',scale2:'0m'},
|
||||
];
|
||||
//正在发生 定时器
|
||||
this.warningInterval = setInterval(this.safeAutomaticRoll,10000);
|
||||
this.momentData = JSON.parse('{"point":[[null,null]],"dataX":[15,20,25,30,35,40,45,50,55,60],"dataY":[3,3,3,3,2.59,2.2,1.9,1.66,1.46,1.3]}');
|
||||
this.devBottomInfo = [{ title: "幅度", data1: 59, data2: 58, scale1: '0', scale2: '0m' },
|
||||
{ title: "风速", data1: 59, data2: 58, scale1: '0', scale2: '0m' },
|
||||
{ title: "吊重", data1: 13.8, data2: 10.8, scale1: '0', scale2: '0m' },
|
||||
{ title: "倾角", data1: 59, data2: 5, scale1: '0', scale2: '0m' },
|
||||
{ title: "转角", data1: 59, data2: 58, scale1: '0', scale2: '0m' },
|
||||
{ title: "高度", data1: 59, data2: 58, scale1: '0', scale2: '0m' },
|
||||
];
|
||||
this.data1 = [
|
||||
{ text: "在线数量", value: 1 },
|
||||
{ text: "离线数量", value: 2 },
|
||||
|
|
@ -263,32 +373,149 @@ export default {
|
|||
driverTel: "1338899090,133889902",
|
||||
safer: "张九",
|
||||
saferTel: "13388664433",
|
||||
buttress: "21.4/35.9",
|
||||
power: "80",
|
||||
selected: true,
|
||||
postArmLength: 10,
|
||||
downHeight: 10,
|
||||
torqueData: 10,
|
||||
overload: 10,
|
||||
enterTime: "2024-02-02 14:00",
|
||||
ampData: 10,//幅度
|
||||
foreArmLength: 0,//臂长
|
||||
heightData: 0,//当前高度
|
||||
angleData: 0,//角度
|
||||
}, {
|
||||
name: "xxxxxx2#塔机",
|
||||
state: 0,
|
||||
buttress: "21.4/35.9",
|
||||
power: "80",
|
||||
driver: "张大三，张小山",
|
||||
driverTel: "1338899090,133889902",
|
||||
safer: "张九",
|
||||
saferTel: "13388664433",
|
||||
selected: false,
|
||||
postArmLength: 20,
|
||||
downHeight: 20,
|
||||
torqueData: 20,
|
||||
overload: 20,
|
||||
enterTime: "2024-02-02 14:00",
|
||||
ampData: 20,//幅度
|
||||
foreArmLength: 20,//臂长
|
||||
heightData: 20,//当前高度
|
||||
angleData: 20,//角度
|
||||
}, {
|
||||
name: "xxxxxx3#塔机",
|
||||
state: 1,
|
||||
buttress: "21.4/35.9",
|
||||
power: "80",
|
||||
driver: "张大三，张小山",
|
||||
driverTel: "1338899090,133889902",
|
||||
safer: "张九",
|
||||
saferTel: "13388664433",
|
||||
selected: false,
|
||||
postArmLength: 30,
|
||||
downHeight: 30,
|
||||
torqueData: 30,
|
||||
overload: 30,
|
||||
enterTime: "2024-02-02 14:00",
|
||||
ampData: 30,//幅度
|
||||
foreArmLength: 30,//臂长
|
||||
heightData: 30,//当前高度
|
||||
angleData: 30,//角度
|
||||
}];
|
||||
this.selDev = this.devList[0];
|
||||
this.warningData = [{
|
||||
warn_name: "预警A",
|
||||
images: ['images/831.jpg'],
|
||||
towerName: 'XXXX塔机',
|
||||
warn_context: '告警内容',
|
||||
warn_time: '24-02-02 14:00',
|
||||
project_abbreviation: 'xxx项目'
|
||||
}, {
|
||||
warn_name: "预警A",
|
||||
images: ['images/831.jpg'],
|
||||
towerName: 'XXXX塔机',
|
||||
warn_context: '告警内容',
|
||||
warn_time: '24-02-02 14:00',
|
||||
project_abbreviation: 'xxx项目'
|
||||
}, {
|
||||
warn_name: "预警A",
|
||||
images: ['images/831.jpg'],
|
||||
towerName: 'XXXX塔机',
|
||||
warn_context: '告警内容',
|
||||
warn_time: '24-02-02 14:00',
|
||||
project_abbreviation: 'xxx项目'
|
||||
},]
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcTop(d){
|
||||
let tmp=100-(d.data2*100.0/d.data1);
|
||||
return `top:calc(20px + ${tmp>78?78:tmp}%)`;
|
||||
}
|
||||
calcTop(d) {
|
||||
let tmp = 100 - (d.data2 * 100.0 / d.data1);
|
||||
return `top:calc(20px + ${tmp > 78 ? 78 : tmp}%)`;
|
||||
},
|
||||
safeTowerLeft() {
|
||||
this.direction = 'left'
|
||||
this.automaticRoll()
|
||||
},
|
||||
safeTowerRight() {
|
||||
//切换动画
|
||||
this.direction = 'right'
|
||||
this.automaticRoll()
|
||||
},
|
||||
automaticRoll() {
|
||||
//切换动画
|
||||
if (this.direction == 'right') {
|
||||
if (this.index == this.devList.length - 1) {
|
||||
this.index = 0
|
||||
} else {
|
||||
this.index = this.index + 1
|
||||
}
|
||||
} else {
|
||||
if (this.index == 0) {
|
||||
this.index = this.devList.length - 1
|
||||
} else {
|
||||
this.index = this.index - 1
|
||||
}
|
||||
}
|
||||
this.selDev = this.devList[this.index];
|
||||
if (this.comName == 'tower-crane-value-1') {
|
||||
this.comName = 'tower-crane-value-2'
|
||||
} else {
|
||||
this.comName = 'tower-crane-value-1'
|
||||
}
|
||||
|
||||
var height = $(".list-for").innerHeight()
|
||||
$("#listMin").animate({ scrollTop: (height * this.index) + 'px' })
|
||||
},
|
||||
onTowerCraneList(n) {
|
||||
this.index = n
|
||||
this.selDev = this.devList[this.index];
|
||||
|
||||
//切换动画
|
||||
this.direction = 'right'
|
||||
if (this.comName == 'tower-crane-value-1') {
|
||||
this.comName = 'tower-crane-value-2'
|
||||
} else {
|
||||
this.comName = 'tower-crane-value-1'
|
||||
}
|
||||
},
|
||||
safeAutomaticRoll() {
|
||||
var height = $(".safe-afoot-overflow").innerHeight()
|
||||
console.log(height)
|
||||
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, 10000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -297,27 +524,34 @@ export default {
|
|||
|
||||
.my-svg-icon-blue,
|
||||
.my-svg-icon-green {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.my-svg-icon-green * {
|
||||
fill: #63F8BC;
|
||||
fill: #63F8BC !important;
|
||||
}
|
||||
|
||||
.my-svg-icon-blue {
|
||||
fill: #002d8d;
|
||||
fill: #002d8d !important;
|
||||
}
|
||||
|
||||
.drv-list {
|
||||
padding: 0px 12px;
|
||||
max-height: calc(100vh - 280px);
|
||||
max-height: calc(100% - 55px);
|
||||
overflow-y: auto;
|
||||
|
||||
.drv-item {
|
||||
border-bottom: dotted 1px #429fff;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
.item-content {
|
||||
background-color: #42a1ff60;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.item-content {
|
||||
|
|
@ -364,6 +598,14 @@ export default {
|
|||
margin-left: 4px;
|
||||
color: #79bbe3;
|
||||
}
|
||||
|
||||
&.is-offline {
|
||||
color: burlywood;
|
||||
}
|
||||
|
||||
&.is-online {
|
||||
color: #63F8BC;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -379,12 +621,13 @@ export default {
|
|||
}
|
||||
|
||||
.data-row2 {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
|
||||
.data-row2-col {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
line-height: 40px;
|
||||
|
||||
.s-text {
|
||||
color: #497deb;
|
||||
|
|
@ -396,9 +639,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.dev-info{
|
||||
height: calc(100vh - 323px);
|
||||
}
|
||||
.dev-info-list {
|
||||
height: 280px;
|
||||
|
||||
|
|
@ -408,66 +648,111 @@ export default {
|
|||
border-image: linear-gradient(to bottom, #f7f1f100, #3473c3d4);
|
||||
border-image-slice: 1;
|
||||
height: 100%;
|
||||
.row-1{
|
||||
|
||||
.row-1 {
|
||||
position: relative;
|
||||
.sp-title{
|
||||
|
||||
.sp-title {
|
||||
position: relative;
|
||||
left:12px;
|
||||
color:#ccd7e5d4;
|
||||
font-size:12px;
|
||||
left: 12px;
|
||||
color: #ccd7e5d4;
|
||||
font-size: 12px;
|
||||
}
|
||||
svg.icon{
|
||||
position:absolute;
|
||||
|
||||
svg.icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
fill:#9c1ef1 !important;
|
||||
width:20px !important;
|
||||
fill: #9c1ef1 !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
*{
|
||||
fill:#9c1ef1 !important;
|
||||
|
||||
* {
|
||||
fill: #9c1ef1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.row-scale{
|
||||
|
||||
.row-scale {
|
||||
height: calc(100% - 24px);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
.row-scale-ctx{
|
||||
|
||||
.row-scale-ctx {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
.scale-item{
|
||||
|
||||
.scale-item {
|
||||
margin: 22% 0px;
|
||||
height: 4%;
|
||||
background: #002d8d94;
|
||||
border-radius: 5%;
|
||||
}
|
||||
}
|
||||
.sp-sc{
|
||||
|
||||
.sp-sc {
|
||||
position: absolute;
|
||||
bottom:2px;
|
||||
left:50%;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
font-size: 12px;
|
||||
color: #72b5f9;
|
||||
}
|
||||
.sp-sc1{
|
||||
margin-left:calc(-15% - 20px);
|
||||
|
||||
.sp-sc1 {
|
||||
margin-left: calc(-15% - 20px);
|
||||
}
|
||||
.sp-sc2{
|
||||
margin-left:calc(15% + 10px);
|
||||
|
||||
.sp-sc2 {
|
||||
margin-left: calc(15% + 10px);
|
||||
}
|
||||
.sp-data{
|
||||
|
||||
.sp-data {
|
||||
text-align: right;
|
||||
margin-left:calc(-15% - 50px);
|
||||
margin-left: calc(-15% - 50px);
|
||||
}
|
||||
.sp-data1{
|
||||
top:10px;
|
||||
|
||||
.sp-data1 {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
padding:12px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -6,80 +6,95 @@ Vue.use(VueRouter)
|
|||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
name: 'index',
|
||||
meta:{nav:1,},
|
||||
component: () => import(/* webpackChunkName: "index" */ '../pages/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/detail',
|
||||
name: 'detail',
|
||||
meta:{nav:2,},
|
||||
component: () => import(/* webpackChunkName: "detail" */ '../pages/projectDetail.vue')
|
||||
},
|
||||
{
|
||||
path: '/progress',
|
||||
name: 'progress',
|
||||
meta:{nav:5,},
|
||||
component: () => import(/* webpackChunkName: "progress" */ '../pages/projectProgress.vue')
|
||||
}
|
||||
,
|
||||
{
|
||||
path: '/quality',
|
||||
name: 'quality',
|
||||
meta:{nav:4,},
|
||||
component: () => import(/* webpackChunkName: "quality" */ '../pages/projectQuality.vue')
|
||||
} ,
|
||||
{
|
||||
path: '/concreteStrength',
|
||||
name: 'concreteStrength',
|
||||
meta:{nav:42,},
|
||||
component: () => import(/* webpackChunkName: "concreteStrength" */ '../pages/quality/concreteStrength.vue')
|
||||
} ,
|
||||
{
|
||||
path: '/standardCuringRoom',
|
||||
name: 'standardCuringRoom',
|
||||
meta:{nav:41,},
|
||||
component: () => import(/* webpackChunkName: "standardCuringRoom" */ '../pages/quality/standardCuringRoom.vue')
|
||||
}
|
||||
,
|
||||
{
|
||||
path: '/safety',
|
||||
name: 'safety',
|
||||
meta:{nav:3,},
|
||||
component: () => import(/* webpackChunkName: "safety" */ '../pages/projectSafety.vue')
|
||||
}
|
||||
, {
|
||||
path: '/distributionBox',
|
||||
name: 'distributionBox',
|
||||
meta:{nav:33,},
|
||||
component: () => import(/* webpackChunkName: "distributionBox" */ '../pages/safe/distributionBox.vue')
|
||||
}
|
||||
, {
|
||||
path: '/dumbwaiter',
|
||||
name: 'dumbwaiter',
|
||||
meta:{nav:34,},
|
||||
component: () => import(/* webpackChunkName: "dumbwaiter" */ '../pages/safe/dumbwaiter.vue')
|
||||
}
|
||||
, {
|
||||
path: '/excavation',
|
||||
name: 'excavation',
|
||||
name: 'excavation',
|
||||
meta:{nav:32,},
|
||||
component: () => import(/* webpackChunkName: "excavation" */ '../pages/safe/excavation.vue')
|
||||
}
|
||||
, {
|
||||
path: '/towerCrane',
|
||||
name: 'towerCrane',
|
||||
meta:{nav:31,},
|
||||
component: () => import(/* webpackChunkName: "towerCrane" */ '../pages/safe/towerCrane.vue')
|
||||
}
|
||||
,
|
||||
{
|
||||
path: '/video',
|
||||
name: 'video',
|
||||
meta:{nav:61,},
|
||||
component: () => import(/* webpackChunkName: "video" */ '../pages/projectVideo.vue')
|
||||
},
|
||||
{
|
||||
path: '/aiVideo',
|
||||
name: 'aiVideo',
|
||||
meta:{nav:62,},
|
||||
component: () => import(/* webpackChunkName: "video" */ '../pages/toAIVideoProject.vue')
|
||||
},
|
||||
{
|
||||
path: '/engin',
|
||||
name: 'engin',
|
||||
meta:{nav:7,},
|
||||
component: () => import(/* webpackChunkName: "video" */ '../pages/projectEngin.vue')
|
||||
},
|
||||
{
|
||||
path: '/photography',
|
||||
name: 'photography',
|
||||
meta:{nav:63,},
|
||||
component: () => import(/* webpackChunkName: "video" */ '../pages/photography.vue')
|
||||
}
|
||||
]
|
||||
|
|
@ -88,5 +103,7 @@ const router = new VueRouter({
|
|||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
export {
|
||||
routes
|
||||
}
|
||||
export default router
|
||||
|
|
|
|||
Loading…
Reference in New Issue