Skip to content

W
web-project
Commit d0640bb1 authored by 张伯涛's avatar 张伯涛
Browse files
Options

大屏修改

parent cd387125
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 28 deletions
src/components/screenDisplay.vue
View file @ d0640bb1
...@@ -456,36 +456,41 @@ import AMapLoader from "@amap/amap-jsapi-loader"; ...@@ -456,36 +456,41 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</div> </div>
<div class="thirdLeftLayer_one"> <div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>电气柜监视</p></div> <div class="titleStyleTwo"><p>电气柜监视</p></div>
<div class="carousel_content"> <div class="carousel_content" v-if="alarmsImgList.length > 0">
<el-carousel> <el-carousel>
<el-carousel-item v-for="(item,index) in alarmsImgList" :key="index"> <el-carousel-item v-for="(item,index) in alarmsImgList" :key="index">
<div class="eventTime_class">报警时间:{{item.eventTime}}</div>
<img :src="item.imageUrl" class="carousel_img"> <img :src="item.imageUrl" class="carousel_img">
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<!-- <div class="noVideoData">暂无监控信息......</div>--> <div v-else class="noVideoData">暂无电气柜信息......</div>
</div> </div>
<div v-loading="loading" class="thirdLeftLayer_one"> <div class="thirdLeftLayer_two">
<div class="title_row"> <div v-loading="loading">
<div class="titleStyleTwoVideo"><p>循环泵听诊</p></div> <div class="title_row">
<div class="moreInfo" v-show="hasAudio" @click="PreviousAudio()">上一个</div> <div class="titleStyleTwoVideo"><p>循环泵听诊</p></div>
<div class="moreInfo" v-show="hasAudio" @click="nextAudio()">下一个</div> <div class="moreInfo" v-show="hasAudio" @click="PreviousAudio()">上一个</div>
<!-- <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>--> <div class="moreInfo" v-show="hasAudio" @click="nextAudio()">下一个</div>
</div> <!-- <div class="moreInfo" v-show="hasVideo" @click="moreVideo()">更多》</div>-->
<div> </div>
<div class="audio_title">{{audioTitle}}</div> <div v-if="showAudio === true">
<div ref="waveform" style="width: 800px; height: 140px;"></div> <div>
<!-- 时间轴容器 --> <div class="audio_title">{{audioTitle}}</div>
<div ref="timeline" style="width: 100%; height: 25px;"></div> <div ref="waveform" style="width: 800px; height: 140px;"></div>
</div> <!-- 时间轴容器 -->
<div class="details-item" v-if="showAudio === true"> <div ref="timeline" style="width: 100%; height: 25px;"></div>
<span>音频:</span> </div>
<audio ref="audioPlayer" controls></audio> <div class="details-item">
<!-- <button @click="playAudio">获取音频</button>--> <span>音频:</span>
<button @click="playAudioRegion">播放区域</button> <audio ref="audioPlayer" controls></audio>
<button @click="stopPlayAudioRegion">暂停播放区域</button> <!-- <button @click="playAudio">获取音频</button>-->
<button @click="playAudioRegion">播放区域</button>
<button @click="stopPlayAudioRegion">暂停播放区域</button>
</div>
</div>
<div v-else class="noVideoData">暂无循环泵听诊信息......</div>
</div> </div>
<!-- <div class="noVideoData">暂无监控信息......</div>-->
</div> </div>
</div> </div>
<div class="thirdRightLayer"> <div class="thirdRightLayer">
...@@ -515,18 +520,22 @@ import AMapLoader from "@amap/amap-jsapi-loader"; ...@@ -515,18 +520,22 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</div> </div>
<div class="thirdLeftLayer_one"> <div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>管道光纤测漏温度曲线</p></div> <div class="titleStyleTwo"><p>管道光纤测漏温度曲线</p></div>
<div class="secondLeftLayerP2" id="secondLeftLayerP2"></div> <div class="fourRow">
<div class="fourRow_title2">{{stationName}}</div>
</div>
<div v-if="temStatisList.length > 0" class="secondLeftLayerP2" id="secondLeftLayerP2"></div>
<div v-else class="noVideoData">暂无管道光纤测漏温度信息......</div>
</div> </div>
<div class="thirdLeftLayer_one"> <div class="thirdLeftLayer_one">
<div class="titleStyleTwo"><p>灭火器仪表监视</p></div> <div class="titleStyleTwo"><p>灭火器仪表监视</p></div>
<div class="carousel_content"> <div v-if="fireList.length > 0" class="carousel_content">
<el-carousel> <el-carousel>
<el-carousel-item v-for="(item,index) in fireList" :key="index"> <el-carousel-item v-for="(item,index) in fireList" :key="index">
<img :src="item.picUrl" class="carousel_img"> <img :src="item.picUrl" class="carousel_img">
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<!-- <div class="noVideoData">暂无监控信息......</div>--> <div v-else class="noVideoData">暂无灭火器仪表信息......</div>
</div> </div>
</div> </div>
<div class="bottomLayerTwo"> <div class="bottomLayerTwo">
...@@ -3708,7 +3717,7 @@ export default defineComponent({ ...@@ -3708,7 +3717,7 @@ export default defineComponent({
grid: { grid: {
left: 30, left: 30,
right: 20, right: 20,
top: 10, top: 20,
bottom: 35, bottom: 35,
}, },
// series: [ // series: [
...@@ -4263,6 +4272,16 @@ export default defineComponent({ ...@@ -4263,6 +4272,16 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
button{
margin-left: 10px;
}
}
.eventTime_class{
position: absolute;
padding: 10px;
font-size: 17px;
font-weight: bold;
color: black;
} }
.carousel_content{ .carousel_content{
::v-deep .el-carousel__container{ ::v-deep .el-carousel__container{
...@@ -4634,8 +4653,16 @@ export default defineComponent({ ...@@ -4634,8 +4653,16 @@ export default defineComponent({
margin-top: 18%; margin-top: 18%;
font-size: 20px; font-size: 20px;
} }
.thirdLeftLayer_two{
overflow-x: auto;
width: 100%;
margin-bottom: 11px;
height: 32%;
border: rgba(129, 210, 230, 0.5) solid 1px;
//padding: 0 0 0 10px;
background: linear-gradient(318deg, rgba(29, 70, 128, 0.8) 0%, rgba(13, 23, 76, 0.8) 100%);
}
.thirdLeftLayer_one{ .thirdLeftLayer_one{
overflow: auto;
width: 100%; width: 100%;
margin-bottom: 11px; margin-bottom: 11px;
height: 32%; height: 32%;
...@@ -4702,6 +4729,14 @@ export default defineComponent({ ...@@ -4702,6 +4729,14 @@ export default defineComponent({
font-size: 17px; font-size: 17px;
font-weight: bold; font-weight: bold;
} }
.fourRow_title2{
margin-top: 10px;
margin-left: 20px;
color: white;
width: 30%;
font-size: 17px;
font-weight: bold;
}
.fourRow_label{ .fourRow_label{
color: white; color: white;
width: 30%; width: 30%;
...@@ -4779,7 +4814,7 @@ export default defineComponent({ ...@@ -4779,7 +4814,7 @@ export default defineComponent({
} }
.gis_content .secondLeftLayerP2 { .gis_content .secondLeftLayerP2 {
width: 100%; width: 100%;
height: 80%; height: 70%;
} }
.gis_content .rightLayer { .gis_content .rightLayer {
position: absolute; position: absolute;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment