<template>
<div class="leftSD">
<!-- 隧道简介 -->
<div class="topBox">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">隧道简介</div>
</div>
<div class="topContent contentBox">
<img :src="jianjie" alt="" class="topImg" />
<div class="topWZ">{{ introduce }}</div>
</div>
</div>
<!-- 感知设备 -->
<div class="centerBox">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">感知设备</div>
</div>
<div class="centerContent contentBox">
<div class="shebeiBox" v-for="(item, i) in shebeiList" :key="i" @click="bus.emit('Tunnel_flyTo', item)">
<div class="shebeiBox_left">
<div class="shebeiBox_left_font" v-for="(t, k) in item.name" :key="k">{{ t }}</div>
<div class="shebeiBox_left_num">
<span>{{ item.activeNum }}</span
>个
<!-- <span>{{ item.activeNum + '/' + item.allNum }}</span
>个 -->
</div>
</div>
<div class="shebeiBox_right">
<img :src="item.icon" alt="" class="shebei_img" />
</div>
</div>
</div>
</div>
<!-- 隧道监控 -->
<div class="bottomBox">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">隧道监控</div>
</div>
<div class="bottomContent contentBox">
<div class="videoBox" v-for="(item, i) in videoList" :key="i">
<video controls="controls" :src="item.url" id="videoEvent" loop></video>
</div>
</div>
</div>
</div>
</template>
<script setup name="leftSD">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import bus from '@/bus';
// import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
// import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
// import sd_icon from '@/assets/newImgs/sd.png'; //隧道
// import ps_icon from '@/assets/newImgs/ps.png'; //排水
import jianjie from '@/assets/tunnelImg/jianjie.png';
import jk_01 from '@/assets/tunnelImg/jk_01.png';
import jk_02 from '@/assets/tunnelImg/jk_02.png';
import jk_03 from '@/assets/tunnelImg/jk_03.png';
import jk_04 from '@/assets/tunnelImg/jk_04.png';
import lfj_icon from '@/assets/tunnelImg/lfj_icon.png';
import sxj_icon from '@/assets/tunnelImg/sxj_icon.png';
import qt_icon from '@/assets/tunnelImg/qt_icon.png';
import jgwyj_icon from '@/assets/tunnelImg/jgwyj_icon.png';
import tjy_icon from '@/assets/tunnelImg/tjy_icon.png';
import ybj_icon from '@/assets/tunnelImg/ybj_icon.png';
import jlszy_icon from '@/assets/qiaoliangImg/jlszy.png';
const introduce =
'延安市杨家岭隧道位于延安市中心城区西北部，走向大致由南向北。项目起点位于延安市拟建的延师桥北桥头、并与现有的延安市枣园路相交，路线向北穿杨家岭隧道至杨家岭沟内、与拟建的延安市杨家岭道路相交。路线全长0.911公里、其中隧道775米。';
const videoList = [
{
url: 'https://server2.wh-nf.cn:8870/file/yanan_splx/suidao/shouji1.mp4',
},
{
url: 'https://server2.wh-nf.cn:8870/file/yanan_splx/suidao/shouji2.mp4',
},
{
url: 'https://server2.wh-nf.cn:8870/file/yanan_splx/suidao/shouji3.mp4',
},
{
url: 'https://server2.wh-nf.cn:8870/file/yanan_splx/suidao/shouji4.mp4',
},
];
const shebeiList = [
{
name: ['激光位移计'],
icon: jgwyj_icon,
num: '2/27',
activeNum: '2',
allNum: '27',
},
{
name: ['静力水准仪'],
icon: jlszy_icon,
num: '2/2',
activeNum: '2',
allNum: '2',
},
{
name: ['应变计'],
icon: ybj_icon,
num: '1/45',
activeNum: '1',
allNum: '45',
},
// {
// name: ['光纤光栅', '调节仪'],
// icon: tjy_icon,
// num: '0/5',
// activeNum: '0',
// allNum: '5',
// },
{
name: ['裂缝计'],
icon: lfj_icon,
num: '1/27',
activeNum: '1',
allNum: '27',
},
{
name: ['摄像机'],
icon: sxj_icon,
num: '0/4',
activeNum: '4',
allNum: '4',
},
];
</script>
<style lang="scss" scoped>
.leftSD {
width: 100%;
height: 100%;
// box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
}
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url('@/assets/newImgs/partBg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
// margin: 7px 0px 0px 8px;
.ListBoxHeader_font {
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
padding-left: 34px;
}
}
.topBox {
width: 100%;
height: calc(100% - 486px);
// flex: 1;
// border: 1px solid red;
// background: red;
.topContent {
margin: 6px 0 5px;
height: calc(100% - 55px);
.topImg {
display: block;
width: 100%;
height: calc(100% - 145px);
}
.topWZ {
width: 100%;
height: 140px;
white-space: pre-wrap;
word-break: break-word;
text-indent: 2em;
overflow-y: auto;
padding: 10px;
// box-sizing: border-box;
background: url('@/assets/tunnelImg/jjwz.png') no-repeat;
background-size: 100% 100%;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
line-height: 22px;
color: #61cafc;
}
}
}
.centerBox {
// background: blue;
width: 100%;
// height: 33%;
.centerContent {
padding: 6px 0 6px;
height: 174px;
box-sizing: border-box;
.shebeiBox {
position: relative;
width: 136px;
height: 76px;
margin-right: 10px;
padding: 4px 0px 6px 6px;
// background: linear-gradient(0deg, rgba(17, 102, 139, 0.6) 0%, rgba(0, 65, 103, 0.3) 100%);
border-radius: 2px;
// border: 1px solid #007aa8;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
// kpbj_img
background: url('@/assets/tunnelImg/kpbj_img.png') no-repeat;
background-size: 100% 100%;
&:nth-child(3n) {
margin-right: 0;
}
.shebeiBox_left {
z-index: 99;
height: 100%;
// padding: 10px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.shebeiBox_left_font {
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 16px;
color: #ffffff;
// height: 26px;
// line-height: 26px;
}
.shebeiBox_left_num {
font-weight: 500;
font-size: 12px;
color: #cef6ff;
span {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 22px;
color: #15d2fd;
margin-right: 10px;
}
}
}
.shebeiBox_right {
z-index: 99;
.shebei_img {
width: 50px;
height: 50px;
}
}
}
}
}
.bottomBox {
width: 100%;
// height: 35%;
// flex: 1;
.bottomContent {
margin-top: 6px;
// height: calc(100% - 50px);
height: 218px;
.videoBox {
// border: 1px solid red;
width: 206px;
height: 104px;
#videoEvent {
width: 100%;
height: 100%;
}
}
}
}
.contentBox {
// border: 1px solid yellow;
width: 100%;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
align-items: center;
align-content: space-between;
}
</style>
