jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 Commits
1 Branch
0 Tags
28 MiB
 
 
 
 
Tree: df4eaf1bfe
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'df4eaf1bfe'
${ noResults }
supervise-monitor-ui/src/views/monitor/videos/index.vue

1485 lines
42 KiB
Raw Blame History

<template >
<div class="app-container" @click="() => active = -1">
<div v-if="viewState == 1">
<!-- <button-bar view-title="视频中心" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> -->
<div class="main-content">
<div class="shipinlisttop">
<el-form ref="" :inline="true" label-width="110px" class="tab-header">
<el-form-item label="选择仓库">
<el-select v-model="ckId" filterable placeholder="请选择仓库" @change="ckChange">
<el-option v-for="item in ckList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-button v-if="moreFlag" type="button" @click="moreShow(ckId)">多屏展示
</el-button>
<!-- <el-form-item label="选择楼栋">
<el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼栋">
<el-option v-for="item in loudong_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item>
<el-form-item label="选择楼层">
<el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼层">
<el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select>
</el-form-item> -->
</el-form>
</div>
<div class="shipinscons">
<div class="shipinscon">
<div class="shipinstu">
<img src="/image/cangkutu.png" />
<!-- 入侵报警 -->
<!-- <div class="ruqinbaojingcss" style="z-index: 10;" v-if="showRuqinbaojing">
<div class="myiconfont bluezibg jingicon ruqin_zhengchang1" v-if="showRuqinbaojing_zhengchang" @click="openshipinRuqinbaojing()">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang2" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang3" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang4" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang5" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang6" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang7" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang8" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang9" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang10" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang11" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian1" v-if="showRuqinbaojing_lixian">&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian2" v-if="showRuqinbaojing_lixian">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing1" v-if="showRuqinbaojing_baojing">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing2" v-if="showRuqinbaojing_baojing">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing3" v-if="showRuqinbaojing_baojing">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing4" v-if="showRuqinbaojing_baojing">&#xe608;</div>
<div class="seencons ruqin_zhengchang1b" v-if="seenshipinRuqinbaojing">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div> -->
<!-- 视频监控 -->
<div class="ruqinbaojingcss" v-if="showShipinjiankong" v-for="(item, index) in zc_list">
<!-- 灰色的 离线 -->
<!-- <div class="myiconfont huizibg jingicon shipin_lixian1" v-if="showShipinjiankong_lixian && item.status == '0'">&#xe644;</div> -->
<!-- 红色的 报警 -->
<!-- <div class="myiconfont redzibg jingicon shipin_baojing1" v-if="showShipinjiankong_baojing">&#xe644;</div> -->
<!-- 蓝色的 在线 && item.status == '1' -->
<div class="shipincss Shipin_yingzi blockDiv" v-if="showShipinjiankong_zhengchang && item.status == '1'">
<div class="jingicon shipin_zhengchang" :style="{ top: item.topPosition, left: item.leftPosition }"
v-if="showShipinjiankong_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter"
@mouseleave="leave" @click.stop="openshipinShipinjiankong(index)">&#xe644;</div>
<div class="seencons shipin_out noneDiv2" v-if="active == index">
<p @click="getVedioPcLive(item.id)">实时视频</p>
<p @click="getVedioPcRec(item.id)">回放视频</p>
</div>
<div class="seenconsc shipin_out noneDiv">
<p>设备名称：{{ item.name }}</p>
<p>设备通道：{{ item.channelNo }}</p>
</div>
</div>
</div>
<!-- 灰色的 离线 && item.status == '0' -->
<div class="shipincss Shipin_yingzi blockDiv" v-if="showShipinjiankong_lixian && item.status == '0'">
<div class="jingicon shipin_zhengchang" :style="{ top: item.topPosition, left: item.leftPosition }"
v-if="showShipinjiankong_lixian">
<div class="myiconfont jingicon bluezibg huizibg" v-if="showShipinjiankong_lixian" @mouseover="enter"
@mouseleave="leave">&#xe644;</div>
<div class="seenconsc shipin_out noneDiv">
<p>设备名称：{{ item.name }}</p>
<p>设备通道：{{ item.channelNo }}</p>
</div>
</div>
</div>
</div>
<!-- 门禁管理 -->
<!-- <div class="ruqinbaojingcss" v-if="showMenjinguanli">
<div class="Menjincss Menjin_yingzi" v-if="showMenjinguanli_zhengchang">
<div class="myiconfont bluezibg jingicon menjin_zhengchang1" v-if="showMenjinguanli_zhengchang" @click="openshipinMenjinguanli()">&#xe60b;</div>
<div class="myiconfont bluezibg jingicon menjin_zhengchang2" v-if="showMenjinguanli_zhengchang">&#xe60b;
</div>
<div class="jingicon menjin_zhengchang1" v-if="showMenjinguanli_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showMenjinguanli_zhengchang"
@click="openshipinMenjinguanli()">&#xe60b;</div>
<div class="seencons shipin_out" v-if="seenshipinMenjinguanli">
<p @click="openshipinMenjinguanli()">开门</p>
</div>
<div class="seenconsc shipin_out" v-if="seen_shubiaoShipinjiankong">
<p>设备名称：1号楼1F西侧走廊像头1</p>
<p>设备编号：HK023123</p>
</div>
</div>
</div>
<div class="myiconfont huizibg jingicon menjin_lixian1" v-if="showMenjinguanli_lixian">&#xe60b;</div>
<div class="myiconfont redzibg jingicon menjin_baojing1" v-if="showMenjinguanli_baojing">&#xe60b;</div>
<div class="seencons menjin_zhengchang1b" v-if="seenshipinMenjinguanli">
<p @click="toMore()">开门</p>
</div>
</div> -->
<!--电子围栏-->
<div class="ruqinbaojingcss" v-if="showDianziweilan" v-for="(item, index) in dzwl_list">
<!-- <div class="myiconfont huizibg jingicon Dianziweilan_lixian1" v-if="showDianziweilan_lixian">&#xe6b8;</div> -->
<!-- <div class="myiconfont redzibg jingicon Dianziweilan_baojing1" v-if="showDianziweilan_baojing">&#xe6b8;</div> -->
<!-- 灰色的 离线 && item.status == '0' -->
<div class="Dianziweilancss Dianziweilan_yingzi" v-if="showDianziweilan_lixian && item.status == '0'">
<div class="jingicon Dianziweilan_zhengchang1"
:style="{ top: item.topPosition, left: item.leftPosition }" v-if="showDianziweilan_lixian">
<div class="myiconfont jingicon bluezibg huizibg" v-if="showDianziweilan_lixian">&#xe6b8;</div>
</div>
</div>
<!-- 蓝色的 在线 && item.status == '1' -->
<div class="Dianziweilancss Dianziweilan_yingzi" v-if="showDianziweilan_zhengchang && item.status == '1'">
<div class="jingicon Dianziweilan_zhengchang1"
:style="{ top: item.topPosition, left: item.leftPosition }" v-if="showDianziweilan_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showDianziweilan_zhengchang"
@click="openshipinDianziweilan(index)">&#xe6b8;</div>
<div class="seencons shipin_out" v-if="activeDzwl == index">
<p @click="openArm(item.id)">布防</p>
<p @click="disArm(item.id)">撤防</p>
<p @click="noCall(item.id)">报警确认</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sbottombars">
<!-- 下部机构导航 -->
<div class="tabhead">
<el-checkbox-group v-model="departmentTypeArray">
<!-- <el-checkbox-button label="1" checked><div @click="openruqinbaojing()"><span class="iconfontyuan myiconfont redziyuan icon-intruder-alarm"></span>入侵报警</div></el-checkbox-button> -->
<el-checkbox-button checked label="2" @change="openshipinjiankong()">
<div><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div>
</el-checkbox-button>
<el-checkbox-button checked label="3" @change="openmenjinguanli()">
<div><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div>
</el-checkbox-button>
<el-checkbox-button checked label="4" @change="opendianziweilan()">
<div><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="moress">
<!-- 视频监控按钮组 -->
<div class="mores">
<el-checkbox-group size="mini" v-model="btnShipinjiankong">
<el-checkbox-button checked label="备选项1" border @change="open_zhengchang()">
<div class="more">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe651;</span><span class="numzi bluezi">{{
statusData.online == null ? 0 : statusData.online }}</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border @change="open_lixian()">
<div class="more">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe651;</span><span class="numzi huizi">{{
statusData.offline == null ? 0 : statusData.offline }}</span>
</div>
</el-checkbox-button>
<!-- <el-checkbox-button checked label="备选项3" border>
<div class="more" @click="open_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe651;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button> -->
</el-checkbox-group>
</div>
</div>
</div>
<!-- 列表结束 -->
</div>
</div>
</div>
<!-- 查看监控 -->
<el-dialog title="查看视频" :visible.sync="dialogImageJK" width="800px" :before-close="handleCloseJK" style="z-index:999">
<iframe :src="this.spUrl" width="750" height="400" id="ysOpenDevice" allowfullscreen>
</iframe>
</el-dialog>
<!-- 查看回放监控 -->
<el-dialog title="查看视频" :visible.sync="dialogImageJKRec" width="800px" :before-close="handleCloseJKRec"
style="z-index:999">
<iframe :src="this.spRecUrl" width="750" height="400" id="ysOpenDevice" allowfullscreen>
</iframe>
</el-dialog>
<!-- 查看视频 -->
<el-dialog title="查看视频" :visible.sync="dialogImage" width="800px" :before-close="handleClose">
<div class="shipin">
<video id="video" :preload="preload" :height="height" :width="width" align="center" :controls="controls">
<source :src="videoSrc" type="video/mp4">
</video>
</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="dialogImage = false">取 消</el-button>
</span> -->
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import { getOtherList, sysArm, sysDisArm, getWareHouseList, getStatusCount } from '@/api/device/device'
import { getVedioPcRecById, getVedioPcLiveById } from '@/api/deviceImage/deviceImage'
import { getCounty } from '@/api/Common/areaPicker'
// import baojingchaxunAdd from './baojingchaxunAdd'
// import baojingchaxunInfo from './baojingchaxunInfo'
// import req from '@/api/baojingchaxun/baojingchaxun'
export default {
name: 'shipinzhongxin',
components: {
Pagination,
pageye,
ButtonBar
},
data() {
return {
checkList: ['选中且禁用', '复选框 A'],
btnRuqinbaojing: [],
btnShipinjiankong: [],
btnMenjinguanli: [],
btnDianziweilan: [],
statusData: {},
btndisabled: false,
moreFlag: false,
zc_list: [],
dzwl_list: [],
btnList: [
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
viewState: 1,
isSearchShow: false,
searchxianshitit: '显示查询条件',
sids: [],
// 查询 -----------
tableKey: 0,
list: [{
bianma: '212233433', supplierTypeValue: '222', weizhi: '212233433', time: '2023-02-26', anzhuangtime: '2023-02-26', gonghuashang: '222'
, supplierTypeValue: '222', zhuangtai: '222'
}
],
listLoading: false,
listQuery: {
params: {
manufacturerName: '',
supplierType: '',
useOrgSid: '',
createOrgSid: '',
manufacturerTelePhone: '',
contactName: ''
},
current: 1,
size: 5,
total: 0
},
cangku_list: [
{ dictValue: '仓库1', dictKey: '1' }
],
loudong_list: [
{ dictValue: '1号楼', dictKey: '1' }
],
supplierType_list: [{ dictValue: '一层', dictKey: '1' }],
Datalista: [],
dialogImage: false,
dialogImageJK: false,
dialogImageJKRec: false,
// 视频开始
videoSrc: '../../../image/cangkushipin.mp4',
ckList: [],
ckId: '',
playStatus: '',
muteStatus: '',
spUrl: '',
spRecUrl: '',
active: -1,
activeDzwl: -1,
isMute: true,
isPlay: false,
width: '100%', // 设置视频播放器的显示宽度（以像素为单位）
height: '430', // 设置视频播放器的显示高度（以像素为单位）
preload: 'auto', // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
autoplay: true,
departmentTypeArray: [],
icontu: ['redziyuan icon-intruder-alarm', 'greenziyuan icon-shipin1', 'yellowziyuan icon-menjin', 'blueziyuan icon-electronic-patrol'],
jigounavType: [
{ value: '4', label: '入侵报警', zi: 'icon-dituleiditu' },
{ value: '2', label: '视频监控', zi: 'icon-dituleiditu' },
{ value: '1', label: '门禁管理', zi: '禁' },
{ value: '3', label: '电子围栏', zi: '电' },
],
// 视频结束
seenshipinRuqinbaojing: false,
seenshipinShipinjiankong: false,
seenshipinShipinjiankong2: false,
seenshipinShipinjiankong3: false,
seenshipinShipinjiankong4: false,
seenshipinMenjinguanli: false,
seenshipinDianziweilan: false,
//
showRuqinbaojing: true,
showShipinjiankong: true,
showMenjinguanli: true,
showDianziweilan: true,
//鼠标移入
seen_shubiaoShipinjiankong: false,
seen_shubiaoShipinjiankong2: false,
seen_shubiaoShipinjiankong3: false,
seen_shubiaoShipinjiankong4: false,
//上边的按钮入侵报警正常
showRuqinbaojing_zhengchang: true,
//上边的按钮入侵报警离线
showRuqinbaojing_lixian: true,
//上边的按钮入侵报警报警
showRuqinbaojing_baojing: true,
//上边的按钮视频监控正常
showShipinjiankong_zhengchang: true,
//上边的按钮视频监控离线
showShipinjiankong_lixian: true,
//上边的按钮视频监控报警
showShipinjiankong_baojing: true,
//上边的按钮门禁管理正常
showMenjinguanli_zhengchang: true,
//上边的按钮门禁管理离线
showMenjinguanli_lixian: true,
//上边的按钮门禁管理报警
showMenjinguanli_baojing: true,
//上边的按钮电子围栏正常
showDianziweilan_zhengchang: true,
//上边的按钮电子围栏离线
showDianziweilan_lixian: true,
//上边的按钮电子围栏报警
showDianziweilan_baojing: true,
rules: {}
}
},
// mounted() {
// this.$refs['btnbar'].setButtonList(this.btnList)
// },
created() {
// 初始化变量
this.init()
},
methods: {
ckChange(item) {
if (item) {
this.moreFlag = true
} else {
this.moreFlag = false
}
getOtherList({ type: 1, ckId: item }).then((res) => {
if (res.code == 200) {
this.zc_list = res.data
}
})
getOtherList({ type: 2, ckId: item }).then((res) => {
if (res.code == 200) {
this.dzwl_list = res.data
}
console.log(this.dzwl_list)
})
},
bodyCloseMenus() {
this.active = -1
this.activeDzwl = -1
},
moreShow(ckId) {
// this.$router.push('/monitor/videos/moreShow')
this.$router.push({
path: '/monitor/videos/moreShow',
query: {
ckId: ckId
}
})
},
handleClose() {
this.dialogImage = false
// 关闭弹出框时 视频关闭播放
const video = document.getElementById('video')
video.pause()
},
handleCloseJK() {
this.dialogImageJK = false
},
handleCloseJKRec() {
this.dialogImageJKRec = false
},
handleVideo() {
this.$refs.videoDiolag.dialogImage = true
},
openshipinRuqinbaojing() {
this.seenshipinRuqinbaojing = !this.seenshipinRuqinbaojing
},
openshipinShipinjiankong(index) {
this.active = index
this.seenshipinShipinjiankong = !this.seenshipinShipinjiankong
},
openshipinShipinjiankong2() {
this.seenshipinShipinjiankong2 = !this.seenshipinShipinjiankong2
},
openshipinShipinjiankong3() {
this.seenshipinShipinjiankong3 = !this.seenshipinShipinjiankong3
},
openshipinShipinjiankong4() {
this.seenshipinShipinjiankong4 = !this.seenshipinShipinjiankong4
},
openshipinMenjinguanli() {
this.seenshipinMenjinguanli = !this.seenshipinMenjinguanli
},
openshipinDianziweilan(index) {
this.activeDzwl = index
this.seenshipinDianziweilan = !this.seenshipinDianziweilan
},
openArm(id) {
this.activeDzwl = -1
sysArm({ id: id }).then(res => {
console.log(res)
this.$message({ showClose: true, type: 'success', message: res.msg })
})
},
disArm(id) {
this.activeDzwl = -1
sysDisArm({ id: id }).then(res => {
this.$message({ showClose: true, type: 'success', message: res.msg })
})
},
noCall(id) {
this.activeDzwl = -1
sysDisArm({ id: id }).then(res => {
if (res.code == 200) {
sysArm({ id: id }).then(resp => {
this.$message({ showClose: true, type: 'success', message: res.msg })
})
}
})
},
openruqinbaojing() {
this.showRuqinbaojing = !this.showRuqinbaojing
},
abc() {
alert(1)
},
openshipinjiankong() {
this.showShipinjiankong = !this.showShipinjiankong
},
openmenjinguanli() {
this.showMenjinguanli = !this.showMenjinguanli
},
opendianziweilan() {
this.showDianziweilan = !this.showDianziweilan
},
openbtnRuqinbaojing() {
},
//上边的按钮入侵报警正常
openruqinbaojing_zhengchang() {
this.showRuqinbaojing = true
this.showRuqinbaojing_zhengchang = !this.showRuqinbaojing_zhengchang
},
//入侵报警离线
openruqinbaojing_lixian() {
this.showRuqinbaojing = true
this.showRuqinbaojing_lixian = !this.showRuqinbaojing_lixian
},
//入侵报警报警
openruqinbaojing_baojing() {
this.showRuqinbaojing = true
this.showRuqinbaojing_baojing = !this.showRuqinbaojing_baojing
},
//上边的按钮视频监控正常
openShipinjiankong_zhengchang() {
this.showShipinjiankong_zhengchang = !this.showShipinjiankong_zhengchang
},
//上边的按钮视频监控离线
openShipinjiankong_lixian() {
this.showShipinjiankong_lixian = !this.showShipinjiankong_lixian
},
//上边的按钮视频监控报警
openShipinjiankong_baojing() {
this.showShipinjiankong_baojing = !this.showShipinjiankong_baojing
},
//上边的按钮门禁管理正常
openMenjinguanli_zhengchang() {
this.showMenjinguanli_zhengchang = !this.showMenjinguanli_zhengchang
},
//上边的按钮门禁管理离线
openMenjinguanli_lixian() {
this.showMenjinguanli_lixian = !this.showMenjinguanli_lixian
},
//上边的按钮门禁管理报警
openMenjinguanli_baojing() {
this.showMenjinguanli_baojing = !this.showMenjinguanli_baojing
},
//上边的按钮电子围栏正常
openDianziweilan_zhengchang() {
this.showDianziweilan_zhengchang = !this.showDianziweilan_zhengchang
},
//上边的按钮电子围栏离线
openDianziweilan_lixian() {
this.showDianziweilan_lixian = !this.showDianziweilan_lixian
},
//上边的按钮电子围栏报警
openDianziweilan_baojing() {
this.showDianziweilan_baojing = !this.showDianziweilan_baojing
},
//////
//上边的按钮正常
open_zhengchang() {
this.showShipinjiankong_zhengchang = !this.showShipinjiankong_zhengchang
this.showMenjinguanli_zhengchang = !this.showMenjinguanli_zhengchang
this.showDianziweilan_zhengchang = !this.showDianziweilan_zhengchang
},
//上边的按钮离线
open_lixian() {
this.showShipinjiankong_lixian = !this.showShipinjiankong_lixian
this.showMenjinguanli_lixian = !this.showMenjinguanli_lixian
this.showDianziweilan_lixian = !this.showDianziweilan_lixian
},
//上边的按钮报警
open_baojing() {
this.showShipinjiankong_baojing = !this.showShipinjiankong_baojing
this.showMenjinguanli_baojing = !this.showMenjinguanli_baojing
this.showDianziweilan_baojing = !this.showDianziweilan_baojing
},
//鼠标移入
enter() {
this.seen_shubiaoShipinjiankong = true
},
leave() {
this.seen_shubiaoShipinjiankong = false
},
//鼠标移入2
enter2() {
this.seen_shubiaoShipinjiankong2 = true
},
leave2() {
this.seen_shubiaoShipinjiankong2 = false
},
//鼠标移入3
enter3() {
this.seen_shubiaoShipinjiankong3 = true
},
leave3() {
this.seen_shubiaoShipinjiankong3 = false
},
//鼠标移入2
enter4() {
this.seen_shubiaoShipinjiankong4 = true
},
leave4() {
this.seen_shubiaoShipinjiankong4 = false
},
resetState() {
this.viewState = 1
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'toAdd':
this.toAdd()
break
case 'doDel':
this.doDel()
break
case 'toChangShang':
this.toChangShang()
break
case 'toGain':
this.toGain()
break
case 'doExport':
this.doExport()
break
case 'doClose':
this.doClose()
break
default:
break
}
},
// 搜索条件效果
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
init() {
getOtherList({ type: 1 }).then((res) => {
if (res.code == 200) {
this.zc_list = res.data
}
})
getOtherList({ type: 2 }).then((res) => {
if (res.code == 200) {
this.dzwl_list = res.data
}
console.log(this.dzwl_list)
})
getStatusCount({ deviceType: null, statusType: null }).then(res => {
this.statusData = res.data
})
getWareHouseList().then(res => {
console.log(res)
if (res.code == 200) {
this.ckList = res.data
}
})
},
// 序号
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
// 查询列表信息
getList() {
// this.listLoading = true
// req.gysPagerList(this.listQuery).then((response) => {
// this.listLoading = false
// if (response.code === '200' && response.data && response.data.total > 0) {
// this.list = response.data.records
// this.listQuery.total = response.data.total
// } else {
// this.list = []
// this.listQuery.total = 0
// }
// })
},
// 查询按钮
handleFilter() {
this.listQuery.current = 1
this.getList()
},
handleReset() {
// this.listQuery = {
// params: {
// manufacturerName: '',
// supplierType: '',
// useOrgSid: '',
// createOrgSid: '',
// manufacturerTelePhone: '',
// contactName: ''
// },
// current: 1,
// size: 5
// }
// this.init()
},
// 打开添加对话框
toAdd() {
this.viewState = 2
this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid)
},
handleSelectionChange(row) {
const aa = []
row.forEach((element) => {
aa.push(element.sid)
})
this.sids = aa
},
// 根据本行ID删除数据
doDel() {
if (this.sids.length > 0) {
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
req.delBySids(this.sids.toString()).then(resp => {
if (resp.success) {
loading.close()
this.$message({ type: 'success', message: resp.msg, showClose: true })
this.getList()
} else {
loading.close()
}
}).catch(e => {
loading.close()
})
}).catch(() => {
})
} else {
this.$message({ type: 'error', message: '没有选择!!', showClose: true })
return
}
},
// toChangShang() {
// req.saveGysByOrgSid(this.listQuery.params.createOrgSid).then((resp) => {
// if (resp.success) {
// this.$message({ showClose: true, type: 'success', message: '获取成功' })
// this.getList()
// }
// })
// },
// toGain() {
// req.saveAllByOrgSid({ orgSid: this.listQuery.params.createOrgSid }).then((resp) => {
// if (resp.success) {
// this.$message({ showClose: true, type: 'success', message: '获取成功' })
// this.getList()
// }
// })
// },
handleEdit(row) {
this.viewState = 3
this.$refs['divadd'].showEdit(row)
// if (row.supplierTypeValue !== '主机厂' && row.supplierTypeValue !== '分公司') {
// this.viewState = 3
// this.$refs['divadd'].showEdit(row)
// } else {
// this.viewState = 5
// this.$refs['divHosts'].showInfo(row)
// }
},
// 打开查看
handleCheck(row) {
this.viewState = 4
this.$refs['divinfo'].showInfo(row)
},
// 导出
// doExport() {
// basefinbankExportExcel(this.sids).then((res) => {
// const blob = new Blob([res], {
// type: 'application/vnd.ms-excel'
// })
// const objectUrl = URL.createObjectURL(blob)
// window.location.href = objectUrl
// this.$notify({
// title: '提示',
// message: '导出成功',
// type: 'success',
// duration: 2000
// })
// })
// },
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.go(-1)
},
getVedioPcLive(id) {
getVedioPcLiveById({ id: id }).then(res => {
this.spUrl = res.data
this.dialogImageJK = true
})
},
getVedioPcRec(id) {
getVedioPcRecById({ id: id }).then(res => {
this.spRecUrl = res.data
this.dialogImageJKRec = true
})
},
toMore() {
this.active = -1
this.dialogImage = true
},
checkbox(item) {
// this.departmentTypeArray = this.departmentTypeArray.includes(item.value)
// ? [item.value]
// : []
},
}
}
</script>
<style scoped>
.main-content {
position: relative;
overflow: hidden;
}
.seencons {
background-color: #fff;
width: 130px;
z-index: 9900;
box-shadow: 0px 0px 10px #E9E9E9;
border-radius: 5px;
padding: 0 30px;
}
.seencons p {
padding: 0px 0 0px 0;
border-bottom: 1px solid #ececee;
font-size: 12px;
text-align: left;
cursor: pointer;
margin: 0;
}
/* // */
/* 鼠标移入 */
.seenconsc {
background-color: #fff;
width: 250px;
z-index: 9800;
box-shadow: 0px 0px 10px #E9E9E9;
border-radius: 5px;
padding: 0 30px;
}
.seenconsc p {
padding: 0px 0 0px 0;
border-bottom: 1px solid #ececee;
font-size: 12px;
text-align: left;
cursor: pointer;
margin: 0;
}
.shipin_out {
position: absolute;
top: 40px;
left: 35px;
}
/* .app-container{background-color: #f5f5f5;margin: 0;} */
.shipinlisttop {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
/* padding: 0 0 0 15px; */
margin: 20px 0;
background-color: #fff;
box-shadow: 0px 0px 10px #E9E9E9;
border-radius: 5px;
padding: 10px;
}
.tab-header {
background-color: #fff;
}
/* .shipinscons {height: 95%;text-align: center;overflow-y: auto;
margin: 20px auto 0;
text-align: center;position: relative;
padding: 20px 50px 20px 50px;
background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
} */
.shipinscons {
height: 95%;
text-align: center;
overflow-y: auto;
margin: 0px auto 0;
text-align: center;
position: relative;
padding: 20px 50px 20px 50px;
background-color: #fff;
box-shadow: 0px 0px 10px #E9E9E9;
border-radius: 5px;
}
.shipinscon {
width: 60%;
margin: 0px auto 0;
text-align: center;
position: relative;
padding: 20px 50px 20px 50px;
}
.shipinstu {
/* border:1px solid #0241c1; */
position: absolute;
left: 0;
margin: 0 auto;
text-align: center;
/* z-index: 0;
background: url("/image/cangkutu.png") center bottom no-repeat;
background-size: 100% 100%;min-height: 580px;
padding: 0 20px;position: relative; */
}
.shipinstu img {
margin: 0 auto;
height: 550px;
}
.shipinstu .ruqinbaojingcss {
position: absolute;
left: 0;
top: 0;
/* position:absolute; */
/* border: #e20202 solid 2px; */
width: 100%;
height: 100%;
/* float: left;
top:0; */
}
.Dianziweilancss {
position: absolute;
top: 4%;
right: 15%;
bottom: 4%;
left: 15%;
}
.shipincss {
position: absolute;
top: 2%;
right: 1%;
bottom: 2%;
left: 2%;
}
.Menjincss {
position: absolute;
top: 2%;
right: 2%;
bottom: 2%;
left: 2%;
}
.shipinstu .jingicon {
cursor: pointer;
position: relative;
font-size: 22px !important;
border-radius: 40px !important;
width: 40px !important;
height: 40px !important;
line-height: 40px;
padding: 0px;
text-align: center;
z-index: 20;
background-color: red;
}
.noneDiv {
display: none;
}
.blockDiv:hover .noneDiv {
display: block;
opacity: 1;
transition: 0.3s;
pointer-events: all;
}
.redzibg {
color: #fff;
background: radial-gradient(circle, #8c0303, #e20202);
border: 1px solid #fd0808;
}
.bluezibg {
color: #fff;
background: radial-gradient(circle, #0241c1, #327af9);
border: 1px solid #469efd;
}
.huizibg {
color: #fff;
background: radial-gradient(circle, #303030, #636363);
border: 1px solid #878788;
}
.shipinstu .ruqin_baojing1 {
position: absolute;
top: 10px;
left: 20%;
}
.shipinstu .ruqin_baojing1b {
position: absolute;
top: 50px;
left: 22%;
}
.shipinstu .ruqin_baojing2 {
position: absolute;
top: 10px;
left: 40%;
}
.shipinstu .ruqin_baojing3 {
position: absolute;
top: 10px;
left: 70%;
}
.shipinstu .ruqin_baojing4 {
position: absolute;
top: 10px;
left: 95%;
}
.shipinstu .ruqin_zhengchang1 {
position: absolute;
top: 10%;
left: 1%;
}
.shipinstu .ruqin_zhengchang1b {
position: absolute;
top: 15%;
left: 3%;
}
.shipinstu .ruqin_zhengchang2 {
position: absolute;
top: 30%;
left: 1%;
}
.shipinstu .ruqin_zhengchang3 {
position: absolute;
top: 45%;
left: 1%;
}
.shipinstu .ruqin_zhengchang4 {
position: absolute;
top: 65%;
left: 8%;
}
.shipinstu .ruqin_zhengchang5 {
position: absolute;
top: 90%;
left: 8%;
}
.shipinstu .ruqin_zhengchang6 {
position: absolute;
top: 90%;
left: 15%;
}
.shipinstu .ruqin_zhengchang7 {
position: absolute;
top: 90%;
left: 30%;
}
.shipinstu .ruqin_zhengchang8 {
position: absolute;
top: 90%;
left: 40%;
}
.shipinstu .ruqin_zhengchang9 {
position: absolute;
top: 90%;
left: 60%;
}
.shipinstu .ruqin_zhengchang10 {
position: absolute;
top: 90%;
left: 90%;
}
.shipinstu .ruqin_zhengchang11 {
position: absolute;
top: 70%;
left: 98%;
}
.shipinstu .ruqin_lixian1 {
position: absolute;
top: 50%;
left: 98%;
}
.shipinstu .ruqin_lixian2 {
position: absolute;
top: 30%;
left: 98%;
}
/* //视频监控// */
.shipinstu .shipin_baojing1 {
position: absolute;
top: 13%;
left: 2%;
}
.shipinstu .shipin_zhengchang {
position: absolute;
}
/* .shipinstu .shipin_out{position: absolute;top: 40%;left: 40%;z-index: 800;}
.shipinstu .shipin_dianout{position: absolute;top: 40%;left: 40%;z-index: 200;} */
.shipinstu .shipin_zhengchang1b {
position: absolute;
top: 7%;
left: 7%;
z-index: 8000;
}
.shipinstu .shipin_zhengchang1c {
position: absolute;
top: 7%;
left: 7%;
z-index: 8000;
}
.shipinstu .shipin_lixian1 {
position: absolute;
}
.shipinstu .shipin_zhengchang2 {
position: absolute;
top: 90%;
left: 2%;
}
.shipinstu .shipin_zhengchang3 {
position: absolute;
top: 2%;
left: 93%;
}
.shipinstu .shipin_zhengchang4 {
position: absolute;
top: 90%;
left: 93%;
}
/* //门禁管理// */
.shipinstu .menjin_baojing1 {
position: absolute;
top: 12%;
left: 90%;
}
.shipinstu .menjin_zhengchang1 {
position: absolute;
top: 14%;
left: 95%;
}
.shipinstu .menjin_zhengchang1b {
position: absolute;
top: 19%;
left: 92%;
z-index: 800;
}
.shipinstu .menjin_lixian1 {
position: absolute;
top: 78%;
left: 90%;
}
.shipinstu .menjin_zhengchang2 {
position: absolute;
top: 78%;
left: 95%;
}
/* //电子围栏// */
.shipinstu .Dianziweilan_baojing1 {
position: absolute;
top: 35px;
left: 42%;
z-index: 500;
}
.shipinstu .Dianziweilan_zhengchang1 {
position: absolute;
z-index: 500;
}
.shipinstu .Dianziweilan_zhengchang1b {
position: absolute;
top: 5%;
left: 88%;
z-index: 500;
}
.shipinstu .Dianziweilan_lixian1 {
position: absolute;
top: 87%;
left: 42%;
}
.shipinstu .Dianziweilan_zhengchang2 {
position: absolute;
top: 92%;
left: 93%;
}
.shipinstu .Dianziweilan_zhengchang3 {
position: absolute;
top: 0%;
left: 46%;
}
.shipinstu .Dianziweilan_zhengchang4 {
position: absolute;
top: 92%;
left: 46%;
}
.shipinstu .Dianziweilan_zhengchang5 {
position: absolute;
top: 0%;
left: 0%;
}
.shipinstu .Dianziweilan_zhengchang6 {
position: absolute;
top: 92%;
left: 0%;
}
.Dianziweilan_yingzi {
/* background-color: rgba(73, 74, 75, 0.2); */
border-radius: 30px;
}
.Shipin_yingzi {
/* background-color: rgba(70, 117, 192, 0.2); */
/* z-index: 200; */
}
.Menjin_yingzi {
/* background-color: rgba(70, 117, 192, 0.2); */
/* z-index: 200; */
}
.Shipinlixian_yingzi {
/* background-color: rgba(94, 4, 4, 0.2); */
z-index: 10;
}
.mores /deep/ .el-checkbox {
width: 126px;
margin: 0;
}
.mores /deep/ .el-checkbox-button {
background-color: #dbd9d9;
height: 40px;
margin: 0px 0 20px 0;
}
.mores /deep/ .el-checkbox-button__inner {
background-color: #fff;
height: 40px;
border: 1px solid #e1e2e4;
}
.mores /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
background-color: #e9f7fa;
border: 1px solid #469efd;
color: #000;
}
/* // 底部导航 */
.sbottombars {
/* padding: 30px;
background-color: #ffffff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; */
position: fixed;
bottom: 50px;
left: 230px;
width: 100%;
/* z-index: 900; */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.tabhead {
padding: 0 0px 0 0;
/* position: fixed;
bottom: 50px;
left: 230px;
z-index: 900; */
}
.moress {
/* position: absolute;bottom:30px;right: 20px;z-index: 9000;left: 20px; */
padding: 20px 0 0 170px;
margin: 0px 0 0px 0;
/* display: flex;
flex-direction: column;
justify-content: center;align-items: center; */
}
.mores {
padding: 0 0px;
margin: 0px 0 0px 0;
/* flex: 1; */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.mores .more {
flex: 1;
font-size: 14px;
padding: 0 0 10px 0;
cursor: pointer;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.mores .more p {
display: inline-block;
margin: 0;
font-size: 14px;
}
.mores .more .numzi {
display: inline-block;
margin: 0;
font-size: 18px;
font-weight: bold;
}
.mores .more .iconbox {
display: inline-block;
border-radius: 25px;
line-height: 25px;
width: 25px;
height: 25px;
color: #fff;
font-size: 18px;
text-align: center;
margin: 0 2px;
}
/* .iconbox_red {
color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
border: 1px solid #fd0808;
}
.iconbox_yellow {
background-color: #ff7521;
}
.iconbox_green {
background-color: #07C160;
}
.iconbox_blue {
color: #fff; background: radial-gradient(circle, #0241c1, #327af9);
border: 1px solid #469efd;
} */
.iconbox_hui {
background-color: #373739;
}
.huizi {
color: #373739;
}
.iconfontyuan {
font-size: 18px !important;
margin: 0 3px 0 3px;
border-radius: 60px !important;
width: 60px !important;
height: 60px !important;
padding: 5px;
}
.yellowziyuan {
color: #fff;
background-color: #f57c13;
}
.redziyuan {
color: #fff;
background-color: #ff0000;
}
.blueziyuan {
color: #fff;
background-color: #5b9cf7;
}
.greenziyuan {
color: #fff;
background-color: #06be4d;
}
.ziziyuan {
color: #fff;
background-color: #683afd;
}
.tabhead .bar {
background-color: #0b5394;
color: #f5f7fa;
border-right: 1px solid #fff;
padding: 11px 0;
text-align: center;
display: inline-block;
vertical-align: top;
width: calc((100% - 1px) / 4);
box-sizing: border-box;
font-size: 18px;
}
.tabhead .bar:last-of-type {
border-right: 0px solid #eeeeee;
width: calc((100% - 0px) / 4);
}
.tabhead .barb {
background-color: #fff;
color: #0b5394;
}
/* .leftbars{
position: absolute;
top: 60px;
left: 20px;
z-index: 900;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;}
.leftbars .bartops{width: 120px;}
.leftbars .bartops .libar{margin: 0 0 21px 0;padding: 10px;
background-color: #ffffff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;}
.leftbars .moress{flex: 1;} */
</style>