jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加电子巡更，消防报警等页面，修改首页，视频中心页面等

master
zyc@123456 2 years ago
parent
0bc6999e69
commit
0fa7124dfc
9 changed files with 2309 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/layout/components/Sidebar/Item.vue
  2. 57
      src/layout/components/Sidebar/index.vue
  3. 40
      src/router/index.js
  4. 740
      src/views/dianzixungeng/dianzixungengL.vue
  5. 317
      src/views/echarts/components/PieChartrenyuanb.vue
  6. 29
      src/views/index.vue
  7. 274
      src/views/monitor/videos/index.vue
  8. 161
      src/views/shebeitaizhang/shebeitaizhangList.vue
  9. 740
      src/views/xiaofangbaojing/xiaofangbaojingL.vue

9
src/layout/components/Sidebar/Item.vue
View File

@ -19,7 +19,10 @@ export default {
if (icon) {
if (icon.includes('el-icon')) {
vnodes.push(<i class={[icon, 'sub-el-icon']} />)
} else {
} else if (icon.includes('icon-')) {
// vnodes.push(<span class="myiconfont icon-shipin1"></span>)
vnodes.push(<span class={[icon, 'myiconfont']}></span>)
}else {
vnodes.push(<svg-icon icon-class={icon}/>)
}
}
@ -38,4 +41,8 @@ export default {
width: 1em;
height: 1em;
}
.myiconfont{
width: 1em;margin: 0 20px 0 0px;
height: 1em;
}
</style>

57
src/layout/components/Sidebar/index.vue
View File

@ -38,7 +38,10 @@
alwaysShow: true,
component: "index",
meta: {
icon: "el-icon-menu",
// icon: "el-icon-menu",
icon: "icon-shouye",
title: "首页",
},
name: "",
@ -58,7 +61,7 @@
alwaysShow: true,
component: "monitor",
meta: {
icon: "el-icon-menu",
icon: "icon-shipin1",
title: "视频中心",
},
name: "",
@ -94,11 +97,31 @@
// path: "/gongyingshang/gongyingshanggaunli",
// }]
// },
{
alwaysShow: true,
component: "dianzixungeng",
meta: {
icon: "icon-jingwuicon_svg-",
title: "电子巡更",
},
name: "",
path: "/dianzixungeng/dianzixungengL",
// children: [{
// alwaysShow: true,
// component: "index",
// meta: {
// icon: "el-icon-help",
// title: "电子巡更",
// },
// name: "/dianzixungeng/dianzixungengL",
// path: "/dianzixungeng/dianzixungengL",
// }]
},
{
alwaysShow: true,
component: "renlianshibie",
meta: {
icon: "el-icon-menu",
icon: "icon-renlianshibie6",
title: "人脸识别",
},
name: "",
@ -114,11 +137,31 @@
// path: "/renlianshibie/renlianshibieList",
// }]
},
{
alwaysShow: true,
component: "xiaofangbaojing",
meta: {
icon: "icon-baojingshu",
title: "消防报警",
},
name: "",
path: "/xiaofangbaojing/xiaofangbaojingL",
// children: [{
// alwaysShow: true,
// component: "index",
// meta: {
// icon: "el-icon-help",
// title: "消防报警",
// },
// name: "/xiaofangbaojing/xiaofangbaojingL",
// path: "/xiaofangbaojing/xiaofangbaojingL",
// }]
},
{
alwaysShow: true,
component: "shebeitaizhang",
meta: {
icon: "el-icon-menu",
icon: "icon-supervision",
title: "设备台账",
},
name: "",
@ -138,7 +181,7 @@
alwaysShow: true,
component: "baojingchaxun",
meta: {
icon: "el-icon-menu",
icon: "icon-baojing",
title: "报警查询",
},
name: "",
@ -158,7 +201,7 @@
alwaysShow: true,
component: "shebeizhuangtai",
meta: {
icon: "el-icon-menu",
icon: "icon-shebeizhuangtai1",
title: "设备状态",
},
name: "",
@ -178,7 +221,7 @@
alwaysShow: true,
component: "shebeirizhi",
meta: {
icon: "el-icon-menu",
icon: "icon-nenghaoshuju",
title: "设备日志",
},
name: "",

40
src/router/index.js
View File

@ -192,6 +192,46 @@ export const constantRoutes = [
},
],
},
////电子巡更
{
path: "/dianzixungengL",
component: Layout,
redirect: "/dianzixungeng/dianzixungengL",
meta: {
title: "电子巡更",
},
children: [
{
path: "/dianzixungeng/dianzixungengL",
component: () => import("@/views/dianzixungeng/dianzixungengL.vue"),
name: "dianzixungengL",
meta: {
title: "电子巡更",
noCache: true,
},
},
],
},
////消防报警
{
path: "/xiaofangbaojingL",
component: Layout,
redirect: "/xiaofangbaojing/xiaofangbaojingL",
meta: {
title: "消防报警",
},
children: [
{
path: "/xiaofangbaojing/xiaofangbaojingL",
component: () => import("@/views/xiaofangbaojing/xiaofangbaojingL.vue"),
name: "xiaofangbaojingL",
meta: {
title: "消防报警",
noCache: true,
},
},
],
},
////
...codemenu,

740
src/views/dianzixungeng/dianzixungengL.vue
View File

@ -0,0 +1,740 @@
<template>
<div class="app-container">
<div v-show="viewState == 1">
<!-- <button-bar view-title="视频中心" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> -->
<div class="main-content">
<div class="shipinlisttop">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header">
<el-form-item label="选择仓库">
<el-select v-model="listQuery.params.cangku" filterable clearable placeholder="请选择仓库">
<el-option v-for="item in cangku_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 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 class="mores" >
<div class="more">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe63e;</span>
</div>
<div class="more">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe63e;</span>
</div>
<div class="more" v-show="showRuqinbaojing||showMenjinguanli||showDianziweilan == true">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe63e;</span>
</div>
</div>
<!-- <div class="mores" v-show="showShipinjiankong == true">
<div class="more">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe63e;</span>
</div>
<div class="more">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe63e;</span>
</div>
</div> -->
<!-- 11 -->
</div>
<div class="shipinscon">
<div class="shipinstu">
<!-- 111入侵报警 -->
<div class="ruqinbaojing" v-show="showRuqinbaojing">
<div class="myiconfont bluezibg jingicon ruqin_zhengchang1" @click="openshipinRuqinbaojing()">&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe63e;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe63e;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe63e;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe63e;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe63e;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe63e;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe63e;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe63e;</div>
<!-- 显示文字 -->
<div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
<!-- 111end -->
<!-- 222视频监控 -->
<div class="ruqinbaojing" v-show="showShipinjiankong">
<div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter" @mouseleave="leave" @click="openshipinShipinjiankong()">&#xe644;</div>
<div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
<div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
<!-- 显示文字 -->
<div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
<p @click="toMore()">实时视频</p>
<p @click="toMore()">回放视频</p>
</div>
<!-- 鼠标移入显示文字 -->
<div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
<p>设备名称：1号楼1F西侧走廊像机1</p>
<p>设备编号：HK023123</p>
<p>设备IP：192.168.1.2</p>
</div>
</div>
<!-- 2222end -->
<!-- 333门禁管理 -->
<div class="ruqinbaojing" v-show="showMenjinguanli">
<div class="myiconfont bluezibg jingicon menjin_zhengchang1" @click="openshipinMenjinguanli()">&#xe60b;</div>
<div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
<div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
<!-- 显示文字 -->
<div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
<p @click="toMore()">开门</p>
</div>
</div>
<!-- 333end -->
<!--444门电子围栏-->
<div class="ruqinbaojing" v-show="showDianziweilan">
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1" @click="openshipinDianziweilan()">&#xe6b8;</div>
<div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
<div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
<!-- 显示文字 -->
<div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
<!-- 444end -->
</div>
<!-- 下部机构导航 -->
<div class="tabhead">
<!-- <el-checkbox-group v-model="departmentTypeArray" @change="getList">
<el-checkbox-button v-for="(item,index) in jigounavType" :key="index" :label="item.value" :value="item.value">
<span class="iconfontyuan myiconfont" :class="icontu[index]"></span>
{{item.label}}
</el-checkbox-button>
</el-checkbox-group> -->
<!-- <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 label="2"><div @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
<el-checkbox-button label="3"><div @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
<el-checkbox-button label="4"><div @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
</el-checkbox-group> -->
</div>
<!-- 列表结束 -->
</div>
</div>
</div>
<!-- 查看视频 -->
<el-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
<div class="shipin">
<video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls">
<source :src="videoSrc" type="video/mp4">
</video>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
// import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons'
// 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'],
btndisabled: false,
btnList: [
// {
// type: 'primary',
// size: 'small',
// icon: 'plus',
// btnKey: 'toAdd',
// btnLabel: '新增'
// },
// {
// type: 'danger',
// size: 'small',
// icon: 'del',
// btnKey: 'doDel',
// btnLabel: '删除'
// },
// {
// type: 'primary',
// size: 'small',
// icon: '',
// btnKey: 'toChangShang',
// btnLabel: '获取厂商'
// },
// {
// type: 'primary',
// size: 'small',
// icon: '',
// btnKey: 'toGain',
// btnLabel: '获取分公司'
// },
// {
// type: 'success',
// size: 'small',
// icon: 'export',
// btnKey: 'build',
// btnLabel: '导出'
// },
{
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: [
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
],
dialogImage: false,
// 视频开始
videoSrc: '../../../image/cangkushipin.mp4',
playStatus: '',
muteStatus: '',
isMute: true,
isPlay: true,
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,
seenshipinMenjinguanli: false,
seenshipinDianziweilan: false,
//
showRuqinbaojing: true,
showShipinjiankong: false,
showMenjinguanli: false,
showDianziweilan: false,
//鼠标移入
seen_shubiaoShipinjiankong: false,
rules: {}
}
},
// mounted() {
// this.$refs['btnbar'].setButtonList(this.btnList)
// },
created() {
// 初始化变量
// this.init()
},
methods: {
openshipinRuqinbaojing() {
this.seenshipinRuqinbaojing = !this.seenshipinRuqinbaojing
},
openshipinShipinjiankong() {
this.seenshipinShipinjiankong = !this.seenshipinShipinjiankong
},
openshipinMenjinguanli() {
this.seenshipinMenjinguanli = !this.seenshipinMenjinguanli
},
openshipinDianziweilan() {
this.seenshipinDianziweilan = !this.seenshipinDianziweilan
},
// 、、、、
openruqinbaojing() {
this.showRuqinbaojing = !this.showRuqinbaojing
},
openshipinjiankong() {
this.showShipinjiankong = !this.showShipinjiankong
},
openmenjinguanli() {
this.showMenjinguanli = !this.showMenjinguanli
},
opendianziweilan() {
this.showDianziweilan = !this.showDianziweilan
},
//鼠标移入
enter() {
this.seen_shubiaoShipinjiankong = true
},
leave() {
this.seen_shubiaoShipinjiankong = 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() {
// getOrgSidByPath({ orgPath: window.sessionStorage.getItem('defaultOrgPath') }).then((res) => {
// if (res.success) {
// this.listQuery.params.createOrgSid = res.data
// this.getType()
// this.getList()
// }
// })
// },
// getType() {
// typeValues({
// type: 'supplierType'
// }).then((res) => {
// if (res.code === '200') {
// this.supplierType_list = res.data
// console.log('选择楼层', this.supplierType_list)
// }
// })
// },
// 序号
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)
},
toMore() {
this.dialogImage = true
},
checkbox(item) {
// this.departmentTypeArray = this.departmentTypeArray.includes(item.value)
// ? [item.value]
// : []
},
}
}
</script>
<style scoped>
.seencons{background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 0 10px;}
.seencons p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:center;cursor: pointer;}
/* // */
/* 鼠标移入 */
.seenconsc{background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 0 10px;}
.seenconsc p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;}
/* .app-container{background-color: #f5f5f5;margin: 0;} */
.shipinlisttop {
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;}
.shipinscon {margin: 20px 0 0 0;
padding: 20px 50px 20px 50px;background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
}
.shipinstu {z-index: 0;
background: url("/image/cangkutub.png") center bottom no-repeat;
background-size: 100% 100%;min-height: 580px;
padding: 0 20px;position: relative;
}
.shipinstu .jingicon {cursor: pointer;
font-size: 22px !important;
border-radius: 40px !important;
width: 40px !important;
height: 40px !important;line-height: 40px;
padding: 0px;text-align: center;
}
.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: 35px;left: 22%;}
.shipinstu .shipin_zhengchang1{position: absolute;top: 22%;left: 25%;}
.shipinstu .shipin_zhengchang1b{position: absolute;top: 28%;left: 26%;z-index: 800;}
.shipinstu .shipin_zhengchang1c{position: absolute;top: 28%;left: 26%;z-index: 200;}
.shipinstu .shipin_lixian1{position: absolute;top: 50%;left: 30%;}
/* //门禁管理// */
.shipinstu .menjin_baojing1{position: absolute;top: 35px;left: 32%;}
.shipinstu .menjin_zhengchang1{position: absolute;top: 22%;left: 35%;}
.shipinstu .menjin_zhengchang1b{position: absolute;top: 28%;left: 37%;}
.shipinstu .menjin_lixian1{position: absolute;top: 50%;left: 40%;}
/* //电子围栏// */
.shipinstu .Dianziweilan_baojing1{position: absolute;top: 35px;left: 42%;}
.shipinstu .Dianziweilan_zhengchang1{position: absolute;top: 22%;left: 45%;}
.shipinstu .Dianziweilan_zhengchang1b{position: absolute;top: 28%;left: 47%;}
.shipinstu .Dianziweilan_lixian1{position: absolute;top: 50%;left: 46%;}
.mores{padding: 0 10px;display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;}
.mores .more{flex: 1;font-size: 14px;padding: 0 10px;cursor: pointer;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;}
.mores .more p {display: inline-block;
font-size: 14px;
}
.mores .more .iconbox {display: inline-block;
border-radius: 30px;
line-height: 30px;
width: 30px;
height: 30px;
color: #fff;
font-size: 18px;text-align: center;margin: 0 5px;
}
/* .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;}
/* // 底部导航 */
.tabhead {
position: fixed;
bottom: 50px;
left: 230px;
z-index: 900;
/* background-color: rgba( #04154d, 0.8); */
/* box-shadow: 0px 0px 6px #0d27c2; */
}
.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;} */
</style>

317
src/views/echarts/components/PieChartrenyuanb.vue
View File

@ -0,0 +1,317 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts'
// require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import router from '../../../router/index'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart',
},
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '100%',
},
chartData: {
type: Object,
required: true,
},
},
data() {
return {
chart: null,
startCharts: null,
charPie3currentIndex: 0,
dataLen: 0,
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
},
},
},
// mounted() {
// this.$nextTick(() => {
// this.initChart()
// })
// },
mounted() {
this.$nextTick(() => {
this.initChart()
})
// 加的自适应
// this.init(); // 初始化图表
let _this = this
window.addEventListener('resize', function () {
if (_this.resizeTimer) clearTimeout(_this.resizeTimer)
_this.resizeTimer = setTimeout(function () {
_this.chart.resize()
}, 100)
})
},
beforeDestroy() {
if (!this.chart) {
return
}
if (this.startCharts) {
clearInterval(this.startCharts)
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({
legend,
seriesName,
Data,
nextUrl,
unit,
params,
color,
} = {}) {
var option = {
title: {
text: seriesName,
// subtext: '纯属虚构',
x: 'center',
// bottom: 0,
top: 0,
// left: 30,
textStyle: {
// fontSize: 20,
color: '#b7d8fa',
fontSize: 0,
// fontWeight: 'bolder' // 字体加粗
},
},
grid: {
left: 10,
right: 10,
bottom: 10,
top: 0,
containLabel: true,
},
tooltip: {
show: false,
trigger: 'item',
formatter: '{b} : {c} ' + unit + ' ({d}%)',
// formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {show: false,
// right: '10',
bottom: '0',
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
textStyle: {
fontSize: 14,
color: '#b7d8fa',
// fontWeight: 'bolder' // 字体加粗
},
},
series: [
{
name: seriesName, // 'WEEKLY WRITE ARTICLES',
type: 'pie',
color: color,
// color:[ 'green','blue'],
// roseType: 'radius',
radius: [55, 60],
center: ['50%', '50%'],
data: Data.seriesData,
// roseType: 'area',
// [
// { value: 320, name: 'Industries' },
// { value: 240, name: 'Technology' },
// { value: 149, name: 'Forex' },
// { value: 100, name: 'Gold' },
// { value: 59, name: 'Forecasts' }
// ],
// itemStyle: {
// borderRadius: 3
// borderColor: '#091243',
// borderWidth: 2
// },
animationEasing: 'cubicInOut',
animationDuration: 2600,
emphasis: {
label: {
show: false,
},
},
label: {
show: false,
// formatter: '{b}:\n{c} ' + unit,
formatter: '{d}%',
position: 'center',
emphasis: {
show: true,
textStyle: {
fontSize: '22',
color: '#3595f9',
},
},
},
label22: {
normal: {
show: false,
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ',
formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ',
// backgroundColor: '#eee',
// borderColor: '#aaa',
// borderWidth: 1,
// borderRadius: 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
padding: [0, 7],
rich: {
// a: {
// color: '#999',
// lineHeight: 22,
// align: 'center'
// },
// abg: {
// backgroundColor: '#333',
// width: '100%',
// align: 'right',
// height: 22,
// borderRadius: [4, 4, 0, 0]
// },
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0,
},
b: {
fontSize: 14,
lineHeight: 33,
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2,
},
},
},
},
},
],
}
this.chart.setOption(option)
this.chart.on('click', function (param) {
if (nextUrl != null && nextUrl.length > 0) {
// 判断 nexurl数与那个列
var url = ''
for (var i = 0; i < nextUrl.length; i++) {
if (nextUrl[i].name === param.name) {
url = nextUrl[i].url
}
}
// --在当前路径新窗口打开
router.push({
path: url,
query: {
id: param.name,
start: params.start,
end: params.end,
},
})
// --在最外层新窗口打开
// let routeUrl = router.resolve({
// path: './situationMapZhiDui',
// query: { id: 96 }
// })
// window.open(routeUrl.href, '_blank')
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link>
// 方法2：this.$router.push({name:'details',params:{id:123}})
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}})
}
})
var _this = this
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
_this.charPie3currentIndex = 0
// 2、鼠标移动上去的时候的高亮动画
this.chart.on('mouseover', function (param) {
isSet = false
// 取消之前高亮的图形
_this.chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
// dataIndex: _this.charPie3currentIndex
})
// 高亮当前图形
_this.chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: param.dataIndex,
})
// 显示 tooltip
// _this.chart.dispatchAction({
// type: "showTip",
// seriesIndex: 0,
// dataIndex: param.dataIndex,
// });
})
// 3、自动高亮展示
var chartHover = function () {
_this.dataLen = option.series[0].data.length
// 取消之前高亮的图形
_this.chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
// dataIndex: _this.charPie3currentIndex
})
_this.charPie3currentIndex =
(_this.charPie3currentIndex + 1) % _this.dataLen
// 高亮当前图形
_this.chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: _this.charPie3currentIndex,
})
// 显示 tooltip
// _this.chart.dispatchAction({
// type: "showTip",
// seriesIndex: 0,
// dataIndex: _this.charPie3currentIndex,
// });
}
clearInterval(_this.startCharts)
_this.startCharts = setInterval(chartHover, 2000)
// 4、鼠标移出之后，恢复自动高亮
this.chart.on('mouseout', function (param) {
if (!isSet) {
clearInterval(_this.startCharts)
_this.startCharts = setInterval(chartHover, 2000)
isSet = true
}
})
},
},
}
</script>

29
src/views/index.vue
View File

@ -25,7 +25,7 @@
<div class="rights">
<div class="note">正常：<span class="bluezi">36</span></div>
<div class="note">离线：<span class="huizi">16</span></div>
<div class="note">报警：<span class="redzi">15</span></div>
<div class="note"><span class="redzi"></span></div>
</div>
</div>
</div>
@ -86,7 +86,7 @@
<div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>视频监控</div>
<div class="bar">
<pie-chartrenyuan :chart-data="ruqinbaojing_Chart" ></pie-chartrenyuan>
<pie-chartrenyuan :chart-data="shipinjiankong_Chart" ></pie-chartrenyuan>
</div>
</div>
<!-- 第1个图表 -->
@ -130,7 +130,7 @@
<!-- 第1 -->
<div class="news">
<div class="title">
<div class="newstits">报警消息</div>
<div class="newstits">待办</div>
<div class="more" @click="toMore()">更多></div>
</div>
<div class="content">
@ -144,7 +144,7 @@
<!-- 第1 -->
<div class="news">
<div class="title">
<div class="newstits">视频消息</div>
<div class="newstits">工作流</div>
<div class="more" @click="toMore()">更多></div>
</div>
<div class="content">
@ -198,7 +198,27 @@
// radius: ['50%', '55%']
}
// 1.2视频监控饼图
const shipinjiankong_Chart = {
// seriesName: '视频监控',
unit: '次',
color: ['#fe7f02', '#049f51', '#fdc004'],
Data: {
seriesData: [
{ value: 39, name: '正常' },
{ value: 16, name: '离线' },
// { value: 12, name: '报警' }
]
},
label: {
normal: {
position: 'inner',
show: false
}
},
// radius: ['50%', '55%']
}
export default {
name: 'index',
components: {
@ -207,6 +227,7 @@
data() {
return {
ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
shipinjiankong_Chart:shipinjiankong_Chart,
token:'',
Datalista: [
{ title: '您有新任务了', createTime: '2023-05-23' },

274
src/views/monitor/videos/index.vue
View File

@ -6,9 +6,14 @@
<div class="shipinlisttop">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header">
<el-form-item label="选择仓库">
<el-select v-model="listQuery.params.cangku" filterable clearable placeholder="请选择仓库">
<el-option v-for="item in cangku_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-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="选择楼层">
@ -18,51 +23,139 @@
</el-form-item>
</el-form>
<div class="mores">
<div class="mores" >
<div class="more">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox iconbox_blue">&#xe608;</span>
<span class="myiconfont iconbox bluezibg">&#xe608;</span>
</div>
<div class="more">
<p class="huizi">离线</p>
<span class="myiconfont iconbox iconbox_hui">&#xe608;</span>
<span class="myiconfont iconbox huizibg">&#xe608;</span>
</div>
<div class="more">
<div class="more" v-show="showRuqinbaojing||showMenjinguanli||showDianziweilan == true">
<p class="redzi">报警</p>
<span class="myiconfont iconbox iconbox_red">&#xe608;</span>
<span class="myiconfont iconbox redzibg">&#xe608;</span>
</div>
</div>
<!-- <div class="mores" v-show="showShipinjiankong == true">
<div class="more">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe608;</span>
</div>
<div class="more">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe608;</span>
</div>
</div> -->
<!-- 11 -->
</div>
<div class="shipinscon">
<div class="shipinstu">
<div class="myiconfont redzibg jingicon jingicona1">&#xe608;</div>
<div class="myiconfont redzibg jingicon jingicona2">&#xe608;</div>
<div class="myiconfont redzibg jingicon jingicona3">&#xe608;</div>
<div class="myiconfont redzibg jingicon jingicona4">&#xe608;</div>
<div class="myiconfont bluezibg jingicon jingiconb1">&#xe608;</div>
<div class="myiconfont bluezibg jingicon jingiconb2">&#xe608;</div>
<div class="myiconfont bluezibg jingicon jingiconb3">&#xe608;</div>
<div class="myiconfont bluezibg jingicon jingiconb4">&#xe608;</div>
<!-- 111入侵报警 -->
<div class="ruqinbaojing" v-show="showRuqinbaojing">
<div class="myiconfont bluezibg jingicon ruqin_zhengchang1" @click="openshipinRuqinbaojing()">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe608;</div>
<!-- 显示文字 -->
<div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
<!-- 111end -->
<!-- 222视频监控 -->
<div class="ruqinbaojing" v-show="showShipinjiankong">
<div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter" @mouseleave="leave" @click="openshipinShipinjiankong()">&#xe644;</div>
<div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
<div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
<!-- 显示文字 -->
<div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
<p @click="toMore()">实时视频</p>
<p @click="toMore()">回放视频</p>
</div>
<!-- 鼠标移入显示文字 -->
<div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
<p>设备名称：1号楼1F西侧走廊像机1</p>
<p>设备编号：HK023123</p>
<p>设备IP：192.168.1.2</p>
</div>
</div>
<!-- 2222end -->
<!-- 333门禁管理 -->
<div class="ruqinbaojing" v-show="showMenjinguanli">
<div class="myiconfont bluezibg jingicon menjin_zhengchang1" @click="openshipinMenjinguanli()">&#xe60b;</div>
<div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
<div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
<!-- 显示文字 -->
<div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
<p @click="toMore()">开门</p>
</div>
</div>
<!-- 333end -->
<!--444门电子围栏-->
<div class="ruqinbaojing" v-show="showDianziweilan">
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1" @click="openshipinDianziweilan()">&#xe6b8;</div>
<div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
<div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
<!-- 显示文字 -->
<div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
<!-- 444end -->
</div>
<!-- 下部机构导航 -->
<div class="tabhead">
<el-checkbox-group v-model="departmentTypeArray" @change="getList">
<!-- <el-checkbox-group v-model="departmentTypeArray" @change="getList">
<el-checkbox-button v-for="(item,index) in jigounavType" :key="index" :label="item.value" :value="item.value">
<span class="iconfontyuan myiconfont" :class="icontu[index]"></span>
{{item.label}}
</el-checkbox-button>
</el-checkbox-group> -->
<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 label="2"><div @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
<el-checkbox-button label="3"><div @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
<el-checkbox-button label="4"><div @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
</el-checkbox-group>
</div>
<!-- 列表结束 -->
</div>
</div>
</div>
<!-- 查看视频 -->
<el-dialog v-el-drag-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
<el-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
<div class="shipin">
<video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls">
<source :src="videoSrc" type="video/mp4">
@ -160,7 +253,14 @@ export default {
size: 5,
total: 0
},
supplierType_list: [],
cangku_list: [
{dictValue:'仓库1',dictKey:'1'}
],
loudong_list: [
{dictValue:'1号楼',dictKey:'1'}
],
supplierType_list: [ {dictValue:'一层',dictKey:'1'}],
Datalista: [
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
@ -193,17 +293,63 @@ export default {
{ value: '3', label: '电子围栏', zi: '电' },
],
// 视频结束
seenshipinRuqinbaojing: false,
seenshipinShipinjiankong: false,
seenshipinMenjinguanli: false,
seenshipinDianziweilan: false,
//
showRuqinbaojing: true,
showShipinjiankong: false,
showMenjinguanli: false,
showDianziweilan: false,
//鼠标移入
seen_shubiaoShipinjiankong: false,
rules: {}
}
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
// mounted() {
// this.$refs['btnbar'].setButtonList(this.btnList)
// },
created() {
// 初始化变量
// this.init()
},
methods: {
openshipinRuqinbaojing() {
this.seenshipinRuqinbaojing = !this.seenshipinRuqinbaojing
},
openshipinShipinjiankong() {
this.seenshipinShipinjiankong = !this.seenshipinShipinjiankong
},
openshipinMenjinguanli() {
this.seenshipinMenjinguanli = !this.seenshipinMenjinguanli
},
openshipinDianziweilan() {
this.seenshipinDianziweilan = !this.seenshipinDianziweilan
},
// 、、、、
openruqinbaojing() {
this.showRuqinbaojing = !this.showRuqinbaojing
},
openshipinjiankong() {
this.showShipinjiankong = !this.showShipinjiankong
},
openmenjinguanli() {
this.showMenjinguanli = !this.showMenjinguanli
},
opendianziweilan() {
this.showDianziweilan = !this.showDianziweilan
},
//鼠标移入
enter() {
this.seen_shubiaoShipinjiankong = true
},
leave() {
this.seen_shubiaoShipinjiankong = false
},
resetState() {
this.viewState = 1
},
@ -411,6 +557,16 @@ export default {
</script>
<style scoped>
.seencons{background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 0 10px;}
.seencons p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:center;cursor: pointer;}
/* // */
/* 鼠标移入 */
.seenconsc{background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 0 10px;}
.seenconsc p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;}
/* .app-container{background-color: #f5f5f5;margin: 0;} */
.shipinlisttop {
display: flex;
@ -432,38 +588,72 @@ export default {
background-size: 100% 100%;min-height: 580px;
padding: 0 20px;position: relative;
}
.shipinstu .jingicon {
.shipinstu .jingicon {cursor: pointer;
font-size: 22px !important;
border-radius: 40px !important;
width: 40px !important;
height: 40px !important;line-height: 40px;
padding: 0px;text-align: center;
}
.redzibg {
color: #fff; background: radial-gradient(circle, #9c0808, #c50101);
border: 1px solid #eb0606;
color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
border: 1px solid #fd0808;
}
.bluezibg {
color: #fff;
color: #fff; background: radial-gradient(circle, #2669f1, #327af9);
color: #fff; background: radial-gradient(circle, #0241c1, #327af9);
border: 1px solid #469efd;
}
.shipinstu .jingicona1{position: absolute;top: 10px;left: 1%;}
.shipinstu .jingicona2{position: absolute;top: 10px;left: 40%;}
.shipinstu .jingicona3{position: absolute;top: 10px;left: 70%;}
.shipinstu .jingicona4{position: absolute;top: 10px;left: 95%;}
.shipinstu .jingiconb1{position: absolute;top: 30%;left: 1%;}
.shipinstu .jingiconb2{position: absolute;top: 150px;left: 30%;}
.shipinstu .jingiconb3{position: absolute;top: 150px;left: 50%;}
.shipinstu .jingiconb4{position: absolute;top: 150px;left: 70%;}
.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: 35px;left: 22%;}
.shipinstu .shipin_zhengchang1{position: absolute;top: 22%;left: 25%;}
.shipinstu .shipin_zhengchang1b{position: absolute;top: 28%;left: 26%;z-index: 800;}
.shipinstu .shipin_zhengchang1c{position: absolute;top: 28%;left: 26%;z-index: 200;}
.shipinstu .shipin_lixian1{position: absolute;top: 50%;left: 30%;}
/* //门禁管理// */
.shipinstu .menjin_baojing1{position: absolute;top: 35px;left: 32%;}
.shipinstu .menjin_zhengchang1{position: absolute;top: 22%;left: 35%;}
.shipinstu .menjin_zhengchang1b{position: absolute;top: 28%;left: 37%;}
.shipinstu .menjin_lixian1{position: absolute;top: 50%;left: 40%;}
/* //电子围栏// */
.shipinstu .Dianziweilan_baojing1{position: absolute;top: 35px;left: 42%;}
.shipinstu .Dianziweilan_zhengchang1{position: absolute;top: 22%;left: 45%;}
.shipinstu .Dianziweilan_zhengchang1b{position: absolute;top: 28%;left: 47%;}
.shipinstu .Dianziweilan_lixian1{position: absolute;top: 50%;left: 46%;}
.mores{padding: 0 10px;display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;}
.mores .more{flex: 1;font-size: 14px;padding: 0 10px;
.mores .more{flex: 1;font-size: 14px;padding: 0 10px;cursor: pointer;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@ -479,8 +669,9 @@ export default {
color: #fff;
font-size: 18px;text-align: center;margin: 0 5px;
}
.iconbox_red {
background-color: #df2f07;
/* .iconbox_red {
color: #fff; background: radial-gradient(circle, #8c0303, #e20202);
border: 1px solid #fd0808;
}
.iconbox_yellow {
@ -492,8 +683,9 @@ export default {
background-color: #07C160;
}
.iconbox_blue {
background-color: #3f9bfa;
}
color: #fff; background: radial-gradient(circle, #0241c1, #327af9);
border: 1px solid #469efd;
} */
.iconbox_hui {
background-color: #373739;
}

161
src/views/shebeitaizhang/shebeitaizhangList.vue
View File

@ -1,6 +1,36 @@
<template>
<div class="app-container">
<div v-show="viewState == 1">
<div class="app-container">
<div class="app-containerb" v-show="viewState == 1">
<!-- 饼图 -->
<div class="tbars">
<!-- 第1个图表 -->
<div class="tbar">
<div class="bar">
<pie-chartrenyuan :chart-data="wanhao_Chart"></pie-chartrenyuan>
<!-- <div class="zhongzi">75%</div> -->
</div>
<div class="title"><span class="iconfont icon-jiating greenzi"></span>完好率</div>
</div>
<!-- 第1个图表 -->
<div class="tbar">
<div class="bar">
<pie-chartrenyuan :chart-data="weixiu_Chart" ></pie-chartrenyuan>
<!-- <div class="zhongzi">15%</div> -->
</div>
<div class="title"><span class="iconfont icon-jiating greenzi"></span>维修率</div>
</div>
<!-- 第1个图表 -->
<div class="tbar">
<div class="bar">
<pie-chartrenyuan :chart-data="sunhai_Chart"></pie-chartrenyuan>
<!-- <div class="zhongzi">10%</div> -->
</div>
<div class="title"><span class="iconfont icon-jiating greenzi"></span>损害率</div>
</div>
</div>
<div class="webye" >
<button-bar view-title="设备台账" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle" />
<div class="main-content">
<div class="searchcon">
@ -111,12 +141,14 @@
</div>
</div>
</div>
</div>
<shebeitaizhangAdd v-show="viewState == 2" ref="divadd" @doback="resetState" @reloadlist="handleFilter" />
<shebeitaizhangInfo v-show="viewState == 4" ref="divinfo" @doback="resetState" />
</div>
</div>
</template>
<script>
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
@ -124,6 +156,70 @@
import shebeitaizhangAdd from './shebeitaizhangAdd'
import shebeitaizhangInfo from './shebeitaizhangInfo'
// import req from '@/api/shebeitaizhang/shebeitaizhang'
import * as echarts from "echarts";
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuanb'
// 1.1完好率饼图
const wanhao_Chart = {
// seriesName: '完好率',
unit: '次',
color: ['#30e9ff', '#d9d9d9', '#fdc004'],
Data: {
seriesData: [
{ value: 75, name: '完好' },
{ value: 25, name: '不完好' },
// { value: 12, name: '报警' }
]
},
label: {
normal: {
position: 'inner',
show: false
}
},
// radius: ['50%', '55%']
}
// 1.2维修率饼图
const weixiu_Chart = {
// seriesName: '维修率',
unit: '次',
color: ['#fe7f02', '#fdc004'],
Data: {
seriesData: [
{ value: 15, name: '维修' },
{ value: 85, name: '无维修' },
// { value: 12, name: '报警' }
]
},
label: {
normal: {
position: 'inner',
show: false
}
},
// radius: ['50%', '55%']
}
// 1.3损害率饼图
const sunhai_Chart = {
// seriesName: '损害率',
unit: '次',
color: [ '#d2cece','#ff0202', '#fdc004'],
Data: {
seriesData: [
{ value: 10, name: '损害' },
{ value: 90, name: '无损害' }
]
},
label: {
normal: {
position: 'inner',
show: false
}
},
// radius: ['50%', '55%']
}
export default {
name: 'shebeitaizhangList',
@ -132,10 +228,13 @@
pageye,
ButtonBar,
shebeitaizhangAdd,
shebeitaizhangInfo,
shebeitaizhangInfo,PieChartrenyuan
},
data() {
return {
wanhao_Chart: wanhao_Chart, // 1.1
weixiu_Chart:weixiu_Chart,
sunhai_Chart: sunhai_Chart,
btndisabled: false,
btnList: [
{
@ -460,4 +559,56 @@
</script>
<style scoped>
</style>
.app-containerb{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: flex-start;
}
.webye{flex: 1;text-align: left;}
/* 饼图部分 */
.tbars {width: 250px;height: 100%;
/* display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: flex-start; */
margin: 0 20px 0 0;
padding: 10px;
background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
}
.tbar {
/* width: 25%; */
margin: 0 0px 0 0;
/* background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; */
padding: 10px;
}
.tbar:last-of-type {
margin: 0;
}
.tbar0 {
border-bottom: 0px solid #032ab8;
}
.tbar .title {
font-size: 20px;
padding: 0px 20px;text-align: center;
font-weight: bold; color: #333;font-size: 16px;
/* border-bottom: 1px solid #ececee; */
}
.tbar .title span {
padding: 0 10px 0 0;
}
.tbar .bar {position: relative;
/* display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center; */
margin: 0;
padding: 0px;
height: 190px;
}
.tbar .bar .zhongzi {position: absolute;top:0;bottom: 0;left: 0;right: 0;line-height: 240px;text-align: center;
font-weight: bold; color: #333;font-size: 18px;
}
</style>

740
src/views/xiaofangbaojing/xiaofangbaojingL.vue
View File

@ -0,0 +1,740 @@
<template>
<div class="app-container">
<div v-show="viewState == 1">
<!-- <button-bar view-title="视频中心" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> -->
<div class="main-content">
<div class="shipinlisttop">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header">
<el-form-item label="选择仓库">
<el-select v-model="listQuery.params.cangku" filterable clearable placeholder="请选择仓库">
<el-option v-for="item in cangku_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 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 class="mores" >
<div class="more">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe613;</span>
</div>
<!-- <div class="more">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe613;</span>
</div> -->
<div class="more" v-show="showRuqinbaojing||showMenjinguanli||showDianziweilan == true">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe677;</span>
</div>
</div>
<!-- <div class="mores" v-show="showShipinjiankong == true">
<div class="more">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe613;</span>
</div>
<div class="more">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe613;</span>
</div>
</div> -->
<!-- 11 -->
</div>
<div class="shipinscon">
<div class="shipinstu">
<!-- 111入侵报警 -->
<div class="ruqinbaojing" v-show="showRuqinbaojing">
<div class="myiconfont bluezibg jingicon ruqin_zhengchang1" @click="openshipinRuqinbaojing()">&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe613;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe613;</div>
<!-- <div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe613;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe613;</div> -->
<div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe677;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe677;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe677;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe677;</div>
<!-- 显示文字 -->
<div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
<!-- 111end -->
<!-- 222视频监控 -->
<div class="ruqinbaojing" v-show="showShipinjiankong">
<div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter" @mouseleave="leave" @click="openshipinShipinjiankong()">&#xe644;</div>
<div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
<div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
<!-- 显示文字 -->
<div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
<p @click="toMore()">实时视频</p>
<p @click="toMore()">回放视频</p>
</div>
<!-- 鼠标移入显示文字 -->
<div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
<p>设备名称：1号楼1F西侧走廊像机1</p>
<p>设备编号：HK023123</p>
<p>设备IP：192.168.1.2</p>
</div>
</div>
<!-- 2222end -->
<!-- 333门禁管理 -->
<div class="ruqinbaojing" v-show="showMenjinguanli">
<div class="myiconfont bluezibg jingicon menjin_zhengchang1" @click="openshipinMenjinguanli()">&#xe60b;</div>
<div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
<div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
<!-- 显示文字 -->
<div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
<p @click="toMore()">开门</p>
</div>
</div>
<!-- 333end -->
<!--444门电子围栏-->
<div class="ruqinbaojing" v-show="showDianziweilan">
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1" @click="openshipinDianziweilan()">&#xe6b8;</div>
<div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
<div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
<!-- 显示文字 -->
<div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
<!-- 444end -->
</div>
<!-- 下部机构导航 -->
<div class="tabhead">
<!-- <el-checkbox-group v-model="departmentTypeArray" @change="getList">
<el-checkbox-button v-for="(item,index) in jigounavType" :key="index" :label="item.value" :value="item.value">
<span class="iconfontyuan myiconfont" :class="icontu[index]"></span>
{{item.label}}
</el-checkbox-button>
</el-checkbox-group> -->
<!-- <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 label="2"><div @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
<el-checkbox-button label="3"><div @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
<el-checkbox-button label="4"><div @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
</el-checkbox-group> -->
</div>
<!-- 列表结束 -->
</div>
</div>
</div>
<!-- 查看视频 -->
<el-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
<div class="shipin">
<video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls">
<source :src="videoSrc" type="video/mp4">
</video>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
// import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons'
// 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'],
btndisabled: false,
btnList: [
// {
// type: 'primary',
// size: 'small',
// icon: 'plus',
// btnKey: 'toAdd',
// btnLabel: '新增'
// },
// {
// type: 'danger',
// size: 'small',
// icon: 'del',
// btnKey: 'doDel',
// btnLabel: '删除'
// },
// {
// type: 'primary',
// size: 'small',
// icon: '',
// btnKey: 'toChangShang',
// btnLabel: '获取厂商'
// },
// {
// type: 'primary',
// size: 'small',
// icon: '',
// btnKey: 'toGain',
// btnLabel: '获取分公司'
// },
// {
// type: 'success',
// size: 'small',
// icon: 'export',
// btnKey: 'build',
// btnLabel: '导出'
// },
{
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: [
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' },
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' },
],
dialogImage: false,
// 视频开始
videoSrc: '../../../image/cangkushipin.mp4',
playStatus: '',
muteStatus: '',
isMute: true,
isPlay: true,
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,
seenshipinMenjinguanli: false,
seenshipinDianziweilan: false,
//
showRuqinbaojing: true,
showShipinjiankong: false,
showMenjinguanli: false,
showDianziweilan: false,
//鼠标移入
seen_shubiaoShipinjiankong: false,
rules: {}
}
},
// mounted() {
// this.$refs['btnbar'].setButtonList(this.btnList)
// },
created() {
// 初始化变量
// this.init()
},
methods: {
openshipinRuqinbaojing() {
this.seenshipinRuqinbaojing = !this.seenshipinRuqinbaojing
},
openshipinShipinjiankong() {
this.seenshipinShipinjiankong = !this.seenshipinShipinjiankong
},
openshipinMenjinguanli() {
this.seenshipinMenjinguanli = !this.seenshipinMenjinguanli
},
openshipinDianziweilan() {
this.seenshipinDianziweilan = !this.seenshipinDianziweilan
},
// 、、、、
openruqinbaojing() {
this.showRuqinbaojing = !this.showRuqinbaojing
},
openshipinjiankong() {
this.showShipinjiankong = !this.showShipinjiankong
},
openmenjinguanli() {
this.showMenjinguanli = !this.showMenjinguanli
},
opendianziweilan() {
this.showDianziweilan = !this.showDianziweilan
},
//鼠标移入
enter() {
this.seen_shubiaoShipinjiankong = true
},
leave() {
this.seen_shubiaoShipinjiankong = 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() {
// getOrgSidByPath({ orgPath: window.sessionStorage.getItem('defaultOrgPath') }).then((res) => {
// if (res.success) {
// this.listQuery.params.createOrgSid = res.data
// this.getType()
// this.getList()
// }
// })
// },
// getType() {
// typeValues({
// type: 'supplierType'
// }).then((res) => {
// if (res.code === '200') {
// this.supplierType_list = res.data
// console.log('选择楼层', this.supplierType_list)
// }
// })
// },
// 序号
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)
},
toMore() {
this.dialogImage = true
},
checkbox(item) {
// this.departmentTypeArray = this.departmentTypeArray.includes(item.value)
// ? [item.value]
// : []
},
}
}
</script>
<style scoped>
.seencons{background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 0 10px;}
.seencons p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:center;cursor: pointer;}
/* // */
/* 鼠标移入 */
.seenconsc{background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 0 10px;}
.seenconsc p{padding: 0px 0 5px 0;border-bottom: 1px solid #ececee;font-size: 12px;text-align:left;cursor: pointer;}
/* .app-container{background-color: #f5f5f5;margin: 0;} */
.shipinlisttop {
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;}
.shipinscon {margin: 20px 0 0 0;
padding: 20px 50px 20px 50px;background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
}
.shipinstu {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 .jingicon {cursor: pointer;
font-size: 22px !important;
border-radius: 40px !important;
width: 40px !important;
height: 40px !important;line-height: 40px;
padding: 0px;text-align: center;
}
.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: 35px;left: 22%;}
.shipinstu .shipin_zhengchang1{position: absolute;top: 22%;left: 25%;}
.shipinstu .shipin_zhengchang1b{position: absolute;top: 28%;left: 26%;z-index: 800;}
.shipinstu .shipin_zhengchang1c{position: absolute;top: 28%;left: 26%;z-index: 200;}
.shipinstu .shipin_lixian1{position: absolute;top: 50%;left: 30%;}
/* //门禁管理// */
.shipinstu .menjin_baojing1{position: absolute;top: 35px;left: 32%;}
.shipinstu .menjin_zhengchang1{position: absolute;top: 22%;left: 35%;}
.shipinstu .menjin_zhengchang1b{position: absolute;top: 28%;left: 37%;}
.shipinstu .menjin_lixian1{position: absolute;top: 50%;left: 40%;}
/* //电子围栏// */
.shipinstu .Dianziweilan_baojing1{position: absolute;top: 35px;left: 42%;}
.shipinstu .Dianziweilan_zhengchang1{position: absolute;top: 22%;left: 45%;}
.shipinstu .Dianziweilan_zhengchang1b{position: absolute;top: 28%;left: 47%;}
.shipinstu .Dianziweilan_lixian1{position: absolute;top: 50%;left: 46%;}
.mores{padding: 0 10px;display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;}
.mores .more{flex: 1;font-size: 14px;padding: 0 10px;cursor: pointer;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;}
.mores .more p {display: inline-block;
font-size: 14px;
}
.mores .more .iconbox {display: inline-block;
border-radius: 30px;
line-height: 30px;
width: 30px;
height: 30px;
color: #fff;
font-size: 18px;text-align: center;margin: 0 5px;
}
/* .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;}
/* // 底部导航 */
.tabhead {
position: fixed;
bottom: 50px;
left: 230px;
z-index: 900;
/* background-color: rgba( #04154d, 0.8); */
/* box-shadow: 0px 0px 6px #0d27c2; */
}
.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;} */
</style>
Write Preview
Loading…
Cancel
Save