<template>
|
<div class="containerScrool" ref="element">
|
<vueSeamlessScroll
|
:data="eventList"
|
class="warp"
|
:class-option="defaultOption"
|
>
|
<li class="left2msglist" v-for="(item, i) in eventList" :key="i">
|
<div class="timg">
|
<img src="../../../assets/image/Left/Emergency/撞车.png" />
|
<span>{{ item.harmKindName }}</span>
|
</div>
|
<div class="tmsg">
|
<div class="tmsg1">
|
<div class="tmsg11">
|
<span class="span1">{{ item.typeName }}</span>
|
<button class="span2" @click="OpenSPXQ()">处置</button>
|
<!-- <button class="span2N" v-if="item.eventState=='办理中'">{{item.eventState}}</button> -->
|
<span class="span3">{{
|
parseTime(item.eventTime, "{y}-{m}-{d} {h}:{i}")
|
}}</span>
|
</div>
|
<div class="tmsg12">
|
<img src="../../../assets/image/Left/Emergency/上报人.png" />
|
<span class="span1">{{ item.name }}</span>
|
<img src="../../../assets/image/Left/Emergency/位置.png" />
|
<span class="span2">{{ item.address }}</span>
|
</div>
|
</div>
|
<div class="tmsg2">
|
<div class="tmsg21"></div>
|
<div class="tmsg22"></div>
|
</div>
|
</div>
|
</li>
|
</vueSeamlessScroll>
|
</div>
|
</template>
|
|
<script>
|
import { axios_get, axios_post } from "../../../until/request.js";
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
export default {
|
components: {
|
vueSeamlessScroll,
|
},
|
data() {
|
return {
|
dialogVisible1: false,
|
fileSrc: "",
|
chart1: {},
|
chart1option: {},
|
eventList: [
|
{
|
eventimg: require("../../../assets/image/Left/Emergency/撞车.png"),
|
eventName: "车辆相撞",
|
eventMsg: "车辆碰撞事故",
|
eventState: "办结",
|
eventtime: "03-20 19:00",
|
eventpeople: "上报人：江某",
|
eventaddress: "地点：xx园区C区C2栋南门前",
|
},
|
{
|
eventimg: require("../../../assets/image/Left/Emergency/洪涝.png"),
|
eventName: "车辆相撞",
|
eventMsg: "车辆碰撞事故",
|
eventState: "办结",
|
eventtime: "03-20 19:00",
|
eventpeople: "上报人：江某",
|
eventaddress: "地点：xx园区C区C2栋南门前",
|
},
|
{
|
eventimg: require("../../../assets/image/Left/Emergency/撞车.png"),
|
eventName: "车辆相撞",
|
eventMsg: "车辆碰撞事故",
|
eventState: "办理中",
|
eventtime: "03-20 19:00",
|
eventpeople: "上报人：江某",
|
eventaddress: "地点：xx园区C区C2栋南门前",
|
},
|
{
|
eventimg: require("../../../assets/image/Left/Emergency/洪涝.png"),
|
eventName: "车辆相撞",
|
eventMsg: "车辆碰撞事故",
|
eventState: "办结",
|
eventtime: "03-20 19:00",
|
eventpeople: "上报人：江某",
|
eventaddress: "地点：xx园区C区C2栋南门前",
|
},
|
{
|
eventimg: require("../../../assets/image/Left/Emergency/撞车.png"),
|
eventName: "车辆相撞",
|
eventMsg: "车辆碰撞事故",
|
eventState: "办结",
|
eventtime: "03-20 19:00",
|
eventpeople: "上报人：江某",
|
eventaddress: "地点：xx园区C区C2栋南门前",
|
},
|
// {
|
// eventimg: require("../../../assets/image/Left/Emergency/洪涝.png"),
|
// eventName: "车辆相撞",
|
// eventMsg: "车辆碰撞事故",
|
// eventState: "办结",
|
// eventtime: "03-20 19:00",
|
// eventpeople: "上报人：江某",
|
// eventaddress: "地点：xx园区C区C2栋南门前"
|
// },
|
// {
|
// eventimg: require("../../../assets/image/Left/Emergency/撞车.png"),
|
// eventName: "车辆相撞",
|
// eventMsg: "车辆碰撞事故",
|
// eventState: "办理中",
|
// eventtime: "03-20 19:00",
|
// eventpeople: "上报人：江某",
|
// eventaddress: "地点：xx园区C区C2栋南门前"
|
// },
|
// {
|
// eventimg: require("../../../assets/image/Left/Emergency/撞车.png"),
|
// eventName: "车辆相撞",
|
// eventMsg: "车辆碰撞事故",
|
// eventState: "办结",
|
// eventtime: "03-20 19:00",
|
// eventpeople: "上报人：江某",
|
// eventaddress: "地点：xx园区C区C2栋南门前"
|
// },
|
// {
|
// eventimg: require("../../../assets/image/Left/Emergency/洪涝.png"),
|
// eventName: "车辆相撞",
|
// eventMsg: "车辆碰撞事故",
|
// eventState: "办结",
|
// eventtime: "03-20 19:00",
|
// eventpeople: "上报人：江某",
|
// eventaddress: "地点：xx园区C区C2栋南门前"
|
// },
|
// {
|
// eventimg: require("../../../assets/image/Left/Emergency/撞车.png"),
|
// eventName: "车辆相撞",
|
// eventMsg: "车辆碰撞事故",
|
// eventState: "办结",
|
// eventtime: "03-20 19:00",
|
// eventpeople: "上报人：江某",
|
// eventaddress: "地点：xx园区C区C2栋南门前"
|
// }
|
],
|
|
YAList: [
|
{
|
YAName: "预案1",
|
YAType: "废旧化学品",
|
YALevel: "二级预案",
|
YATime: "2022/3/15 12:00",
|
},
|
{
|
YAName: "预案1",
|
YAType: "废旧化学品",
|
YALevel: "一级预案",
|
YATime: "2022/3/15 12:00",
|
},
|
{
|
YAName: "预案1",
|
YAType: "废旧化学品",
|
YALevel: "二级预案",
|
YATime: "2022/3/15 12:00",
|
},
|
{
|
YAName: "预案1",
|
YAType: "废旧化学品",
|
YALevel: "二级预案",
|
YATime: "2022/3/15 12:00",
|
},
|
{
|
YAName: "预案1",
|
YAType: "废旧化学品",
|
YALevel: "二级预案",
|
YATime: "2022/3/15 12:00",
|
},
|
{
|
YAName: "预案1",
|
YAType: "废旧化学品",
|
YALevel: "二级预案",
|
YATime: "2022/3/15 12:00",
|
},
|
],
|
};
|
},
|
methods: {
|
OpenSPXQ() {
|
// this.fileSrc="http://120.201.201.81:8081/emergency/emer/gis/command/emerGis/command_gis";
|
// this.fileSrc="http://120.201.201.87:8081/sso";
|
this.fileSrc =
|
"http://120.201.201.87:8081/emergency/emer/gis/command/emerGis/command_gis";
|
window.open(this.fileSrc);
|
//this.OpenOtherSystem();
|
},
|
|
OpenOtherSystem() {
|
this.dialogVisible1 = true;
|
},
|
|
//园区车辆应急事件
|
GetCarEevent() {
|
axios_post("/emergency/emergencyEvents").then((response) => {
|
this.eventList = response.data;
|
});
|
},
|
},
|
mounted() {
|
this.GetCarEevent();
|
},
|
|
computed: {
|
defaultOption() {
|
return {
|
step: 0.0, // 数值越大速度滚动越快
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
hoverStop: true, // 是否开启鼠标悬停stop
|
direction: 1, // 0向下 1向上 2向左 3向右
|
openWatch: true, // 开启数据实时监控刷新dom
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
};
|
},
|
},
|
};
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerScrool {
|
position: relative;
|
height: 100%;
|
width: 100%;
|
|
.warp {
|
height: 100%;
|
width: 100%;
|
//overflow-y: hidden;
|
}
|
}
|
|
.left2msglist {
|
height: 190px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: dotted 1px #ffffff;
|
|
.timg {
|
border: solid 1px #3b86c3;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 15%;
|
height: 80%;
|
|
span {
|
color: #ffffff;
|
font-size: 28px;
|
line-height: 40px;
|
}
|
}
|
|
.tmsg {
|
width: 80%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
|
.tmsg1 {
|
height: 50%;
|
width: 100%;
|
|
.tmsg11 {
|
height: 100%;
|
width: 100%;
|
color: #ffffff;
|
font-size: 28px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.span1 {
|
width: 40%;
|
}
|
|
.span2 {
|
width: 120px;
|
height: 50%;
|
border: none;
|
background-color: #3fd1d6;
|
border-radius: 5px;
|
color: #fff;
|
margin-right: 40px;
|
margin-left: 40px;
|
}
|
|
.span2N {
|
width: 150px;
|
height: 60%;
|
border: none;
|
background-color: #ffd200;
|
border-radius: 5px;
|
color: #000000;
|
}
|
|
.span3 {
|
width: calc(60% - 200px);
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
|
.tmsg12 {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
color: #ffffff;
|
font-size: 24px;
|
|
.span1 {
|
width: 30%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
|
.span2 {
|
width: calc(70% - 100px);
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
}
|
}
|
|
.datlog {
|
border-radius: 10px;
|
}
|
|
.datlog /deep/ .el-dialog__header {
|
background-color: rgba(0, 0, 0, 0.8);
|
}
|
|
.datlog /deep/ .el-dialog__title {
|
color: #fff;
|
font-size: 24px;
|
}
|
|
.datlog /deep/ .el-dialog__headerbtn {
|
font-size: 24px;
|
}
|
|
.datlog /deep/ .el-dialog__body {
|
padding: 0px;
|
}
|
</style>
|
