sxyanzhu
/
jhbigscreen
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

update code

prv
haha 2024-03-09 01:14:29 +08:00
parent 09964fd6b6
commit e9eb913eba
13 changed files with 715 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/css/largeScreenLayout.css
View File

@ -49,6 +49,12 @@
height: 970px;
background: url("../images/one/3x1.png") no-repeat center/100% 100%;
}
.screen-one-3-1.no-border{
background: none;
}
.screen-one-3-1.no-lable .module-title{
display: none;
}
.screen-one-3-2{
height: 970px;
background: url("../images/one/3x2.png") no-repeat center/100% 100%;

2
public/css/largeScreenStyle.css
View File

@ -3345,7 +3345,7 @@ table{
height: 35px;
background: #142c6a;
color: #738fb4;
width: 110px;
width: 120px;
border: 0;
outline: 0;
cursor: pointer;

44
src/components/header.vue
View File

@ -6,11 +6,49 @@
<div class="head-title-tab">
<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 == 3 ? 'head-nav active' : 'head-nav'" @click="pageJump(3, '#/safety')">安全管理</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;"
class="has-submenu">
<div @click="pageJump(3, '#/safety')">安全管理</div>
<div class="header-btn-list">
<div class="header-btn-list-arrow"></div>
<div class="header-btn-list-item" style="">
<div class="header-btn-list-padding" style="text-align: left;">
<button type="button" :class="nav == 31 ? 'active' : ''" class="sub-btn"
@click="pageJump(31, '#/towerCrane')">塔吊监控</button>
<button type="button" :class="nav == 32 ? 'active' : ''" class="sub-btn"
@click="pageJump(32, '#/excavation')">基坑监控</button>
<button type="button" :class="nav == 33 ? 'active' : ''" class="sub-btn"
@click="pageJump(33, '#/distributionBox')">配电箱监控</button> <br/>
<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>
</div>
</div>
</div>
</div>
<!--
<div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="pageJump(4, '#/quality')">质量管理</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>
<div class="header-btn-list">
<div class="header-btn-list-arrow"></div>
<div class="header-btn-list-item" style="">
<div class="header-btn-list-padding">
<button type="button" :class="nav == 41 ? 'active' : ''" class="sub-btn"
@click="pageJump(41, '#/standardCuringRoom')">标养室检测</button>
<button type="button" :class="nav == 42 ? 'active' : ''" class="sub-btn"
@click="pageJump(42, '#/concreteStrength')">混泥土强度检测</button>
</div>
</div>
</div>
</div>
<div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="pageJump(5, '#/progress')">进度管理</div>
<div :class="nav == 61 || nav == 62 ? 'head-nav active' : 'head-nav'" style="position: relative;"
<div :class="nav == 61 || nav == 62 || nav==63 ? 'head-nav active' : 'head-nav'" style="position: relative;"
class="has-submenu">
<div>视频管理</div>
<div class="header-btn-list">

8
src/components/module/module-one-3-1.js
View File

@ -1,8 +1,8 @@
import Vue from 'vue'
Vue.component('module-one-3-1', {
template:`
<div class="screen-module">
<div class="screen-one-3-1">
<div class="screen-module" >
<div class="screen-one-3-1" :class="cls">
<div class="module-title"><span>{{label}}</span></div>
<slot></slot>
</div>
@ -11,6 +11,10 @@ Vue.component('module-one-3-1', {
props: {
label:{
type:String
},
cls:{
type:String,
default:""
}
},

26
src/pages/quality/concreteStrength.vue 100644
View File

@ -0,0 +1,26 @@
<template>
<div>
<!-- -->
</div>
</template>
<script>
export default {
//混泥土强度检测
name: 'JhbigscreenTowerCrane',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>

26
src/pages/quality/standardCuringRoom.vue 100644
View File

@ -0,0 +1,26 @@
<template>
<div>
<!-- -->
</div>
</template>
<script>
export default {
//标养室检测
name: 'JhbigscreenTowerCrane',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>

26
src/pages/safe/distributionBox.vue 100644
View File

@ -0,0 +1,26 @@
<template>
<div>
<!-- -->
</div>
</template>
<script>
export default {
//配电箱
name: 'JhbigscreenTowerCrane',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>

26
src/pages/safe/dumbwaiter.vue 100644
View File

@ -0,0 +1,26 @@
<template>
<div>
<!-- -->
</div>
</template>
<script>
export default {
//升降机
name: 'JhbigscreenTowerCrane',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>

26
src/pages/safe/excavation.vue 100644
View File

@ -0,0 +1,26 @@
<template>
<div>
<!-- -->
</div>
</template>
<script>
export default {
//基坑
name: 'JhbigscreenTowerCrane',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>

26
src/pages/safe/personnelPosition.vue 100644
View File

@ -0,0 +1,26 @@
<template>
<div>
<!-- -->
</div>
</template>
<script>
export default {
//人员定位
name: 'JhbigscreenTowerCrane',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>

473
src/pages/safe/towerCrane.vue 100644
View File

@ -0,0 +1,473 @@
<template>
<div class="project-tower-crane">
<div class="screen-content">
<el-row>
<el-col :span="6" style="position: relative;">
<module-one-3-1 label="设备概况">
<el-row>
<el-col :span="12">
<div class="equipment-list-min quality-target-index-min">
<div class="czz-number-img czz-number-img-blue">
<svg class="my-svg-icon-blue" style="vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3054">
<path
d="M929.84 550.848a29.155 29.155 0 0 0 29.153-29.154V347.16a29.282 29.282 0 0 0-17.9-27.291c-0.028-0.012-0.055-0.019-0.082-0.029L358.4 67.362a0.324 0.324 0 0 0-0.038-0.014 29.452 29.452 0 0 0-25.538 1.186L80.374 204.472A29.229 29.229 0 0 0 65 230.2v291.5a29.155 29.155 0 0 0 29.157 29.15h111.9a87.872 87.872 0 0 0 53.29 53.293V900.69h-87.453a29.155 29.155 0 0 0 0 58.309h408.125a29.155 29.155 0 0 0 0-58.309h-87.456V609.154h29.153a87.594 87.594 0 0 0 82.441-58.306h238.228v145.767a29.154 29.154 0 0 0 29.152 29.154 29.155 29.155 0 1 1-20.612 49.77 29.152 29.152 0 0 0-41.225 41.228 87.471 87.471 0 1 0 90.99-144.342V550.85h29.15zM375.957 317.62h29.152c70.392 0 129.283 50.159 142.826 116.613H405.109a29.187 29.187 0 0 1-29.152-29.154V317.62z m-174.91 174.922h-77.739V375.929h77.739v116.613z m5.013-174.922h-82.752v-70.047l194.346-104.654v116.4H288.5a87.6 87.6 0 0 0-82.44 58.301z m111.594 583.069v-75.384l75.379 75.384h-75.379zM434.26 859.46L329.728 754.922 434.26 650.383V859.46zM317.654 684.539v-75.385h75.379z m233.214-162.845a29.187 29.187 0 0 1-29.152 29.154H288.5a29.187 29.187 0 0 1-29.152-29.154v-174.92A29.187 29.187 0 0 1 288.5 317.62h29.153v87.461a87.557 87.557 0 0 0 87.455 87.461h145.76v29.152z m-3.1-204.074a203.383 203.383 0 0 0-142.659-58.306h-29.154v-120.8l413.3 179.1H547.766z m61.406 174.922v-29.155a203.612 203.612 0 0 0-7.079-53.31l82.458 82.463h-75.381zM650.4 375.927h209.063L754.931 480.465z m174.91 116.615l75.38-75.383v75.383h-75.38z"
fill="" p-id="3341"></path>
</svg>
</div>
<div class="equipment-list-data">
<p style="font-size: 16px;">塔机总数</p>
<div><span>3</span><span style="font-size: 12px;">台</span></div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="equipment-list-min quality-target-index-min">
<div class="czz-number-img czz-number-img-green">
<svg class="my-svg-icon-green" style="vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7849">
<path
d="M128 128c-23.552 0-42.496 18.944-42.496 42.496v512c0 23.552 18.944 42.496 42.496 42.496h768c23.552 0 42.496-18.944 42.496-42.496v-512c0-23.552-18.944-42.496-42.496-42.496H128z m0-42.496h768c47.104 0 85.504 38.4 85.504 85.504v512c0 47.104-38.4 85.504-85.504 85.504H128c-47.104 0-85.504-38.4-85.504-85.504v-512c0-47.616 38.4-85.504 85.504-85.504zM846.336 487.424l-150.528-215.04c-2.56-4.096-4.608-6.656-7.168-9.728-4.608-4.608-9.216-6.656-14.336-6.656-5.12 0-10.24 2.048-14.336 6.656-3.584 4.096-3.584 5.12-7.168 9.728l-177.152 252.928-128-163.84c-8.192-10.24-19.968-10.752-28.16-5.632-4.608 3.072-6.656 5.632-9.728 9.728L167.936 573.44c-8.192 11.776-6.144 21.504 5.632 29.696 11.776 8.192 21.504 6.144 29.696-5.632L330.24 409.6l128.512 164.864c8.704 11.264 21.504 11.264 29.696 3.584 3.072-2.56 7.168-8.704 10.752-13.824l174.08-248.832 137.216 196.096c8.192 11.776 17.92 13.312 29.696 5.12 12.288-7.68 14.336-17.408 6.144-29.184zM149.504 896h725.504c14.336 0 21.504 7.168 21.504 21.504 0 14.336-7.168 21.504-21.504 21.504H149.504c-14.336 0-21.504-7.168-21.504-21.504 0-14.336 7.168-21.504 21.504-21.504zM362.496 725.504c14.336 0 21.504 7.168 21.504 21.504v170.496c0 14.336-7.168 21.504-21.504 21.504-14.336 0-21.504-7.168-21.504-21.504v-170.496c0.512-14.336 7.68-21.504 21.504-21.504zM661.504 725.504c14.336 0 21.504 7.168 21.504 21.504v170.496c0 14.336-7.168 21.504-21.504 21.504-14.336 0-21.504-7.168-21.504-21.504v-170.496c0-14.336 7.168-21.504 21.504-21.504z"
p-id="4373"></path>
</svg>
</div>
<div class="equipment-list-data">
<p style="font-size: 16px;">监控总数</p>
<div><span class="fgreen">3</span><span style="font-size: 12px;">台</span></div>
</div>
</div>
</el-col>
</el-row>
<el-row style="height:160px;overflow: hidden;">
<staff-survey-chart :height="200" :unit="'个'" :data="data1" :width="140"></staff-survey-chart>
</el-row>
<el-row>
<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="item-content">
<div class="dev-row1">
<div class="survey_content">
<div class="survey_content_img labour-education_bgd">
<svg class="my-svg-icon-blue"
style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7849">
<path
d="M929.84 550.848a29.155 29.155 0 0 0 29.153-29.154V347.16a29.282 29.282 0 0 0-17.9-27.291c-0.028-0.012-0.055-0.019-0.082-0.029L358.4 67.362a0.324 0.324 0 0 0-0.038-0.014 29.452 29.452 0 0 0-25.538 1.186L80.374 204.472A29.229 29.229 0 0 0 65 230.2v291.5a29.155 29.155 0 0 0 29.157 29.15h111.9a87.872 87.872 0 0 0 53.29 53.293V900.69h-87.453a29.155 29.155 0 0 0 0 58.309h408.125a29.155 29.155 0 0 0 0-58.309h-87.456V609.154h29.153a87.594 87.594 0 0 0 82.441-58.306h238.228v145.767a29.154 29.154 0 0 0 29.152 29.154 29.155 29.155 0 1 1-20.612 49.77 29.152 29.152 0 0 0-41.225 41.228 87.471 87.471 0 1 0 90.99-144.342V550.85h29.15zM375.957 317.62h29.152c70.392 0 129.283 50.159 142.826 116.613H405.109a29.187 29.187 0 0 1-29.152-29.154V317.62z m-174.91 174.922h-77.739V375.929h77.739v116.613z m5.013-174.922h-82.752v-70.047l194.346-104.654v116.4H288.5a87.6 87.6 0 0 0-82.44 58.301z m111.594 583.069v-75.384l75.379 75.384h-75.379zM434.26 859.46L329.728 754.922 434.26 650.383V859.46zM317.654 684.539v-75.385h75.379z m233.214-162.845a29.187 29.187 0 0 1-29.152 29.154H288.5a29.187 29.187 0 0 1-29.152-29.154v-174.92A29.187 29.187 0 0 1 288.5 317.62h29.153v87.461a87.557 87.557 0 0 0 87.455 87.461h145.76v29.152z m-3.1-204.074a203.383 203.383 0 0 0-142.659-58.306h-29.154v-120.8l413.3 179.1H547.766z m61.406 174.922v-29.155a203.612 203.612 0 0 0-7.079-53.31l82.458 82.463h-75.381zM650.4 375.927h209.063L754.931 480.465z m174.91 116.615l75.38-75.383v75.383h-75.38z"
fill="#1195db" p-id="5289"></path>
</svg>
</div>
</div>
<div class="dev-row1-col2">
<div class="data-row">
<span>设备名称:</span>
<span>{{ it.name }}</span>
</div>
<div class="data-row">
<span>设备状态:</span>
<span :class="it.state == 0 ? 'is-offline' : 'is-online'">{{ it.state == 0 ? '离线' : '在线' }}</span>
</div>
</div>
</div>
<div class="dev-row2">
<div class="dev-row2-col">
<div class="data-row">
<span>司机:</span>
<span>{{ it.driver }}</span>
</div>
</div>
<div class="dev-row2-col">
<div class="data-row">
<span>电话:</span>
<span class="sp-tel">{{ it.driverTel }}</span>
</div>
</div>
</div>
<div class="dev-row2">
<div class="dev-row2-col">
<div class="data-row">
<span>安全员:</span>
<span>{{ it.safer }}</span>
</div>
</div>
<div class="dev-row2-col">
<div class="data-row">
<span>电话:</span>
<span class="sp-tel">{{ it.saferTel }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</el-row>
</module-one-3-1>
</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>
</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
</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">
<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>
<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-sc1 sp-sc">{{ it.scale1 }}</span>
<span class="sp-sc2 sp-sc">{{ it.scale2 }}</span>
</div>
</div>
</el-col>
</el-row>
</module-one-3-1>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import '@/components/module/module-one-2-1'
import '@/components/module/module-one-3-1'
import '@/components/staff-survey-chart'
export default {
//塔吊
name: 'JhbigscreenTowerCrane',
data() {
return {
data1: [],
devList: [],
selDev: {},
devBottomInfo:[]
};
},
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.data1 = [
{ text: "在线数量", value: 1 },
{ text: "离线数量", value: 2 },
];
this.devList = [{
name: "xxxxxx1#塔机",
state: 0,
driver: "张大三，张小山",
driverTel: "1338899090,133889902",
safer: "张九",
saferTel: "13388664433",
selected: true,
}, {
name: "xxxxxx2#塔机",
state: 0,
driver: "张大三，张小山",
driverTel: "1338899090,133889902",
safer: "张九",
saferTel: "13388664433",
selected: false,
}, {
name: "xxxxxx3#塔机",
state: 1,
driver: "张大三，张小山",
driverTel: "1338899090,133889902",
safer: "张九",
saferTel: "13388664433",
selected: false,
}];
this.selDev = this.devList[0];
},
methods: {
calcTop(d){
let tmp=100-(d.data2*100.0/d.data1);
return `top:calc(20px + ${tmp>78?78:tmp}%)`;
}
},
};
</script>
<style lang="less">
.project-tower-crane {
.my-svg-icon-blue,
.my-svg-icon-green {
width: 28px;
height: 28px;
position: relative;
top: -10px;
}
.my-svg-icon-green * {
fill: #63F8BC;
}
.my-svg-icon-blue {
fill: #002d8d;
}
.drv-list {
padding: 0px 12px;
max-height: calc(100vh - 280px);
overflow-y: auto;
.drv-item {
border-bottom: dotted 1px #429fff;
&:first-child {
.item-content {
margin-top: 0px;
}
}
.item-content {
background-color: #429fff25;
margin: 10px;
padding: 10px;
}
.dev-row1 {
display: flex;
align-items: center;
}
.dev-row2 {
display: grid;
grid-template-columns: 50% 50%;
.sp-tel {
display: inline-block;
width: 107px;
word-wrap: break-word;
vertical-align: middle;
}
.dev-row2-col {
display: flex;
align-items: center;
}
}
.data-row {
padding-left: 12px;
line-height: 30px;
color: rgba(255, 255, 255, 0.5);
span {
&:last-child {
display: inline-block;
margin-left: 4px;
color: #79bbe3;
}
}
}
}
}
.title-bg {
background: rgb(2, 0, 36);
background: linear-gradient(185deg, rgba(2, 0, 36, 0.2) 0%, rgba(9, 9, 121, 0.06) 48%, rgba(0, 212, 255, 0.5) 100%);
position: absolute;
width: 60%;
height: 20px;
left: 30px;
}
.data-row2 {
display: grid;
grid-template-columns: 50% 50%;
.data-row2-col {
text-align: center;
line-height: 30px;
.s-text {
color: #497deb;
}
.s-number {
color: #429fff;
font-weight: bold;
}
}
}
.dev-info{
height: calc(100vh - 323px);
}
.dev-info-list {
height: 280px;
.dev-info-item {
.info-item-content {
border: 1px solid transparent;
border-image: linear-gradient(to bottom, #f7f1f100, #3473c3d4);
border-image-slice: 1;
height: 100%;
.row-1{
position: relative;
.sp-title{
position: relative;
left:12px;
color:#ccd7e5d4;
font-size:12px;
}
svg.icon{
position:absolute;
right: 12px;
fill:#9c1ef1 !important;
width:20px !important;
height: 20px !important;
*{
fill:#9c1ef1 !important;
}
}
}
.row-scale{
height: calc(100% - 24px);
position: relative;
text-align: center;
.row-scale-ctx{
height: 100%;
display: inline-block;
width: 30%;
.scale-item{
margin: 22% 0px;
height: 4%;
background: #002d8d94;
border-radius: 5%;
}
}
.sp-sc{
position: absolute;
bottom:2px;
left:50%;
font-size: 12px;
color: #72b5f9;
}
.sp-sc1{
margin-left:calc(-15% - 20px);
}
.sp-sc2{
margin-left:calc(15% + 10px);
}
.sp-data{
text-align: right;
margin-left:calc(-15% - 50px);
}
.sp-data1{
top:10px;
}
}
}
padding:12px;
height: 100%;
}
}
}
</style>

30
src/router/index.js
View File

@ -24,6 +24,16 @@ const routes = [
path: '/quality',
name: 'quality',
component: () => import(/* webpackChunkName: "quality" */ '../pages/projectQuality.vue')
} ,
{
path: '/concreteStrength',
name: 'concreteStrength',
component: () => import(/* webpackChunkName: "concreteStrength" */ '../pages/quality/concreteStrength.vue')
} ,
{
path: '/standardCuringRoom',
name: 'standardCuringRoom',
component: () => import(/* webpackChunkName: "standardCuringRoom" */ '../pages/quality/standardCuringRoom.vue')
}
,
{
@ -31,6 +41,26 @@ const routes = [
name: 'safety',
component: () => import(/* webpackChunkName: "safety" */ '../pages/projectSafety.vue')
}
, {
path: '/distributionBox',
name: 'distributionBox',
component: () => import(/* webpackChunkName: "distributionBox" */ '../pages/safe/distributionBox.vue')
}
, {
path: '/dumbwaiter',
name: 'dumbwaiter',
component: () => import(/* webpackChunkName: "dumbwaiter" */ '../pages/safe/dumbwaiter.vue')
}
, {
path: '/excavation',
name: 'excavation',
component: () => import(/* webpackChunkName: "excavation" */ '../pages/safe/excavation.vue')
}
, {
path: '/towerCrane',
name: 'towerCrane',
component: () => import(/* webpackChunkName: "towerCrane" */ '../pages/safe/towerCrane.vue')
}
,
{
path: '/video',

4
vue.config.js
View File

@ -37,8 +37,8 @@ module.exports = defineConfig({
}
},
'/jhapi':{
//target: `http://62.234.3.186/jhapi/`,
target: `http://127.0.0.1:8090/jhapi/`,
target: `http://62.234.3.186/jhapi/`,
//target: `http://127.0.0.1:8090/jhapi/`,
changeOrigin: true,
pathRewrite: {
'^/jhapi':'/'