150 lines
3.1 KiB
Vue
150 lines
3.1 KiB
Vue
<template>
|
|
<Card title="信息播报">
|
|
<div class="container">
|
|
<vue-scroll style="height:100%">
|
|
<div class="informationBox" v-for="(item,index) in workerList" :key="index" @click="openDialog(item,index)">
|
|
<div class="dateTime">{{ item.updateTime }}</div>
|
|
<div class="text">
|
|
<i><img src="~@/assets/images/zjsj/Vector.png" alt=""></i>
|
|
{{item.title}}
|
|
</div>
|
|
</div>
|
|
<div class="tbody" v-if="workerList.length==0">
|
|
<div class="dataImg">
|
|
<img src="@/assets/images/noData3.png" alt srcset />
|
|
<p>{{$t('message.dataBoard.nodata')}}</p>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
<!-- 信息播报弹框 -->
|
|
<div class="informationDialog" v-show="isShow">
|
|
<div class="titleText" >
|
|
<p><i class="el-icon-circle-close" @click="closeDialog"></i></p>
|
|
<p> <span style="float:left;font-size:20px;margin: 35px 0 0 32px;">{{ itemVar.title }}</span> <span style="float:right;margin: 39px -12px 0px 0;">{{itemVar.updateTime }}</span></p>
|
|
<div class="content" v-html="itemVar.content">
|
|
<!-- {{ itemVar.content}} -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</Card>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getBroadcastingApi, //查询所有
|
|
} from "@/assets/js/api/broadcast.js";
|
|
|
|
import Card from "../components/Card";
|
|
|
|
export default {
|
|
components: { Card },
|
|
data() {
|
|
return {
|
|
isShow:false,
|
|
workerList: [], //播报数据
|
|
itemVar:[],
|
|
};
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods:{
|
|
//打开弹框
|
|
openDialog(item,index){
|
|
// console.log('样式出来了嘛',JSON.stringify(item.content.innerHTML));
|
|
this.isShow=true
|
|
this.itemVar=this.workerList[index]
|
|
},
|
|
//关闭弹框
|
|
closeDialog(){
|
|
this.isShow=false
|
|
},
|
|
getData(){
|
|
getBroadcastingApi({
|
|
projectSn:this.$store.state.projectSn
|
|
}).then(res=>{
|
|
console.log('播报信息',res);
|
|
this.workerList=res.result
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
.container {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 10px;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.informationBox{
|
|
margin-bottom: 10px;
|
|
|
|
.dateTime{
|
|
font-size: 10px;
|
|
margin-bottom: 10px;
|
|
// margin-top: 10px;
|
|
}
|
|
.text{
|
|
font-size: 16px;
|
|
height: 45px;
|
|
line-height: 30px;
|
|
background: url('~@/assets/images/zjsj/orange.png');
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
img{
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 12px 0 -3px 10px
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.informationDialog{
|
|
width: 40%;
|
|
height: 55%;
|
|
background: url('~@/assets/images/zjsj/bgm.png');
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
margin: -35% 0px 0px -45%;
|
|
.titleText{
|
|
// position: absolute;
|
|
p{
|
|
|
|
i{
|
|
float: right;
|
|
margin: 14px 18px 0 0;
|
|
}
|
|
}
|
|
}
|
|
.content{
|
|
position: absolute;
|
|
width: 94%;
|
|
height: 80%;
|
|
margin: 119px 20px 0 20px;
|
|
|
|
}
|
|
}
|
|
.dataImg {
|
|
margin-top: 20px;
|
|
margin-left: 170px;
|
|
}
|
|
p{
|
|
margin: 6px 0 0 13px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
</style>
|