<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Document</title>
|
<link rel="stylesheet" href="../style/FlareClusterLayer_v3.css">
|
<script src='../../lib/jquery.js'></script>
|
<script src='../js/FlareClusterLayer_v3.js'></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
|
<!-- element ui -->
|
<link rel="stylesheet" href="../../lib/elementUi.css">
|
<script src="../../lib/elementUi.js"></script>
|
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
|
<script src="../../lib/axios.js"></script>
|
<!-- layui -->
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
|
<style>
|
a:hover {
|
color: white;
|
}
|
|
body {
|
width: 360px;
|
height: 484px;
|
overflow: hidden;
|
}
|
|
#appliutwo {
|
width: 330px;
|
height: 484px;
|
border-radius: 10px;
|
margin: 16px 15px 16px 15px;
|
overflow: hidden;
|
/* border: springgreen solid 0.5px; */
|
}
|
|
.flare-liu-top {
|
width: 330px;
|
height: 140px;
|
/* border: rgb(211, 154, 31) solid 0.5px; */
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
color: white;
|
border-radius: 5px 5px 5px 5px;
|
}
|
|
.f-l-t-heard {
|
width: 300px;
|
height: 50px;
|
font-size: 18px;
|
font-family: PingFangSC-Regular;
|
}
|
|
.f-l-t-right {
|
width: 300px;
|
height: 50px;
|
display: flex;
|
/* align-items: center; */
|
color: white;
|
justify-content: space-around;
|
flex-direction: column;
|
font-size: 12px;
|
}
|
|
|
.f-l-t-r-number {
|
width: 180px;
|
margin-left: auto;
|
}
|
|
.f-l-t-r-time {
|
width: 180px;
|
margin-left: auto;
|
}
|
|
|
|
.flare-liu-body {
|
width: 330px;
|
/* height: 361px; */
|
/* border: rgb(106, 20, 187) solid 0.5px; */
|
|
}
|
|
.r-b-top {
|
height: 250px;
|
display: flex;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.r-b-t-main {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
/* justify-content: space-between; */
|
|
padding: 10px 0 10px 0;
|
margin-bottom: 5px;
|
}
|
|
.r-b-t-main-once {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
padding: 10px 0 10px 0;
|
margin-bottom: 5px;
|
position: relative;
|
left: 11px;
|
}
|
|
.rbt-l,
|
.rbt-r {
|
width: 150px;
|
/* border: rgb(106, 20, 187) solid 0.5px; */
|
}
|
|
|
|
.r-b-t-left {
|
/* display: block; */
|
width: 27%;
|
|
}
|
|
.r-b-t-right {
|
/* display: block; */
|
width: 70%;
|
color: #5d5d5d;
|
font-size: 12px;
|
|
}
|
|
.scene-image-box .el-image {
|
display: block;
|
min-height: 200px;
|
margin-bottom: 10px;
|
}
|
.scene-image-box{
|
width: 320px;
|
height: 260px;
|
overflow: auto;
|
}
|
|
|
.el-tabs__active-bar {
|
background-color: #F35B5B;
|
}
|
|
.el-tabs__item.is-active,
|
.el-tabs__item:hover {
|
color: #5d5d5d;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
|
<!-- 从layui传值给iframe 的占位input -->
|
<!-- <div class="aaa bbb">13223456745</div> -->
|
<input type="text" id="sidIput" ref="sidIput" style="display:none">
|
<div class="flare-liu-top" style="background-image: linear-gradient(to right, #F35B5B , #F35B5B)">
|
<div class="f-l-t-heard">{{datas.place}}</div>
|
<div class="f-l-t-right">
|
<div class="f-l-t-r-number">设备编号：{{datas.deviceNumber}}</div>
|
<div class="f-l-t-r-time">接警时间：{{datas.jjTime}}</div>
|
</div>
|
</div>
|
<div class="flare-liu-body">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="警情信息" name="first">
|
<div class="r-b-top">
|
<div class="r-b-t-main-once">
|
<span class="r-b-t-left">接警人：</span>
|
<span class="r-b-t-right">{{ datas.alarmPeople }}</span>
|
</div>
|
<div class="r-b-t-main-once">
|
<span class="r-b-t-left">报警人：</span>
|
<span class="r-b-t-right">{{ datas.galarmPeople }}</span>
|
</div>
|
<!-- <div class="r-b-t-main-once">
|
<span class="r-b-t-left">使用方：</span>
|
<span class="r-b-t-right">？？</span>
|
</div> -->
|
<div class="r-b-t-main">
|
<div class="rbt-l">
|
<span class="r-b-t-left">警情内容：</span>
|
<span class="r-b-t-right">{{ datas.content }} </span>
|
</div>
|
<div class="rbt-r">
|
<span class="r-b-t-left">警情类型：</span>
|
<span class="r-b-t-right">{{datas.waringType}}</span>
|
</div>
|
</div>
|
<div class="r-b-t-main">
|
<div class="rbt-l">
|
<span class="r-b-t-left">主要负责人：</span>
|
<span class="r-b-t-right">{{ datas.oneContacts }} </span>
|
</div>
|
<div class="rbt-r">
|
<span class="r-b-t-left">电话：</span>
|
<span class="r-b-t-right">{{datas.onePhone}}</span>
|
</div>
|
</div>
|
<!-- <div class="r-b-t-main">
|
<div class="rbt-l">
|
<span class="r-b-t-left">二级负责人：</span>
|
<span class="r-b-t-right">{{ datas.twoContacts }} </span>
|
</div>
|
<div class="rbt-r">
|
<span class="r-b-t-left">call：</span>
|
<span class="r-b-t-right">{{datas.twoPhone}}</span>
|
</div>
|
</div>
|
<div class="r-b-t-main">
|
<div class="rbt-l">
|
<span class="r-b-t-left">三级负责人：</span>
|
<span class="r-b-t-right">{{ datas.threeContacts }} </span>
|
</div>
|
<div class="rbt-r">
|
<span class="r-b-t-left">call：</span>
|
<span class="r-b-t-right">{{datas.threePhone}}</span>
|
</div>
|
</div> -->
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="现场图片" name="second">
|
<!-- <el-card class="scene-image-box">
|
<el-image v-for="(item, index) in imgSrc" :key="index" :src="item" :preview-src-list="srcList"
|
v-show="imgSrc.length > 0"></el-image>
|
<span v-show="imgSrc.length == 0">暂无现场图片</span>
|
</el-card> -->
|
|
<el-card class="scene-image-box">
|
<!-- <el-image v-for="url in imgSrc" :key="url" :src="url" :preview-src-list="srcList" v-show="imgSrc.length"></el-image> -->
|
<el-image v-for="url in imgSrc" :key="url" :src="url" v-show="imgSrc.length"></el-image>
|
<span v-show="imgSrc.length == 0">暂无现场图片</span>
|
</el-card>
|
|
|
</el-tab-pane>
|
<el-tab-pane label="现场视频" name="third">
|
<el-card>
|
<video :src="feedbackVideo" style="width: 100%; height: 100%; object-fit: fill" controls
|
v-show="feedbackVideo != ''"></video>
|
<span v-show="feedbackVideo == ''">暂无现场视频</span>
|
</el-card>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
|
<script>
|
// var index = parent.layer.getFrameIndex(window.name);
|
|
</script>
|
<script>
|
var me = new Vue({
|
el: '#appliutwo',
|
data: {
|
datas: {},
|
activeName: 'first',
|
imgSrc: [],
|
srcList: [],
|
feedbackVideo: "",
|
//数据列表
|
// aaddress: "",
|
// addvnm: "",
|
// alarmId: "1372093731758616577",
|
// alarmPeople: "李文凤",
|
// alarmTime: "2021-04-23 18:07:23",
|
// alarmType: "一键报警",
|
// beginTime: "",
|
// bz: "",
|
// channelNumber: "1",
|
// cid: "1",
|
// city: "3601",
|
// content: "挟持报警",
|
// czTime: "",
|
// deptId: "1353972967606235137",
|
// deviceNumber: "201685000006",
|
// district: "360121",
|
// endTime: "",
|
// galarmPeople: "报警主机",
|
// id: 255,
|
// jd: "114.9220818936825",
|
// jjTime: "2021-04-23 18:07:23",
|
// jtype: "1",
|
// level: "",
|
// name: "",
|
// oneContacts: "刘仁德",
|
// oneId: "1370574307826212865",
|
// onePhone: "1567978425",
|
// phoneNumber: "",
|
// place: "江西省赣州市章贡区南外街道帝景豪园",
|
// province: "36",
|
// region: "",
|
// rname: "",
|
// securityArr: "",
|
// securityId: "",
|
// serialNumber: "001231663A45",
|
// sex: "",
|
// stype: "",
|
// threeContacts: "黎林帆",
|
// threeId: "",
|
// threePhone: "13238585082,",
|
// timeDesc: "",
|
// twoContacts: "宰世敏",
|
// twoId: "",
|
// twoPhone: "13256570082",
|
// uids: "",
|
// vaddress: "https://web.byisf.com/minio/jfpt/void/20210423180725.mp4",
|
// waringType: "一键求助",
|
// wd: "25.844357927036526",
|
},
|
methods: {
|
getdatas(dat) {
|
// console.log(dat);
|
},
|
handleClick(tab, event) {//标签tab点击事件
|
// console.log(tab, event);
|
},
|
getImgAndVideo() {
|
var that = this;
|
// console.log(this.datas.id)
|
axios({
|
method: "post",
|
url: "/api/feedback/feedback/selectFeedEdit",
|
params: {
|
jid: this.datas.id,
|
},
|
}).then((resdata) => {
|
var dL = resdata.data.data;
|
if (dL.length != 0) {
|
if (dL[0].tp.length > 0) {
|
// console.log(dL[0].tp);
|
that.imgSrc = dL[0].tp;
|
that.srcList = dL[0].tp;
|
}
|
if (dL[0].sp.length > 0) {
|
// console.log(dL[0].sp);
|
that.feedbackVideo = dL[0].sp[0];
|
}
|
}
|
});
|
},
|
},
|
mounted() {
|
this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
|
// console.log(this.$refs.sidIput.value);
|
clearTimeout(this.oldtime);
|
this.datas = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
|
this.getdatas(this.datas);
|
this.getImgAndVideo();
|
}, 200);
|
}
|
})
|
</script>
|
</body>
|
|
</html>
|
