山东移动监控应用=>标准版智能安防
This commit is contained in:
aixianling
133
packages/IntelligentSecurity/AppISDevice/AppISDevice.vue
Normal file
133
packages/IntelligentSecurity/AppISDevice/AppISDevice.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<section class="AppISDevice">
|
||||
<ai-list>
|
||||
<ai-title slot="title" title="安防设备管理" isShowBottomBorder/>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #right>
|
||||
<el-input
|
||||
prefix-icon="iconfont iconSearch"
|
||||
v-model="search.title" placeholder="设备名、MAC号" clearable
|
||||
@clear="page.current = 1,search.title = '', getTableData()"
|
||||
v-throttle="() => {page.current = 1, getTableData()}" size="small"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
|
||||
:size.sync="page.size" @getList="getTableData">
|
||||
<el-table-column label="操作" slot="options" align="center">
|
||||
<el-row type="flex" slot-scope="{row}" align="middle" justify="center">
|
||||
<ai-area v-model="row.areaId" :instance="instance" :inputClicker="false" customClicker
|
||||
@change="handleSubmit(row)">
|
||||
<el-button type="text">绑定</el-button>
|
||||
</ai-area>
|
||||
<el-button type="text" @click="handleLocate(row)">标绘</el-button>
|
||||
<div/>
|
||||
<el-button type="text" @click="handleShow(row)">设置</el-button>
|
||||
</el-row>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(detail,v)"/>
|
||||
<setting-dialog v-model="dialog" :ins="instance"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocateDialog from "../components/locateDialog";
|
||||
import SettingDialog from "../components/settingDialog";
|
||||
|
||||
export default {
|
||||
name: "AppISDevice",
|
||||
components: {SettingDialog, LocateDialog},
|
||||
label: "安防设备管理",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
device: this
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{type: 'selection'},
|
||||
{label: "设备名", prop: "deviceName"},
|
||||
{label: "上级归属", prop: "areaName"},
|
||||
{label: "设备型号", prop: "devModel"},
|
||||
{label: "MAC号", prop: "devMac"},
|
||||
{label: "标绘状态", render: (h, {row}) => h('span', null, row?.lat ? '已绑定' : '待绑定')},
|
||||
{slot: "options"}
|
||||
]
|
||||
},
|
||||
isDetail() {
|
||||
return !!this.$route.query?.id
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {startTime: null, endTime: null, title: ""},
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
tableData: [],
|
||||
locate: false,
|
||||
dialog: false,
|
||||
detail: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load("zyDeviceBindStatus")
|
||||
if (this.isDetail) {
|
||||
//TODO 待补充
|
||||
} else this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
this.instance.post("/app/appzyvideoequipment/getVideoList", null, {
|
||||
params: {...this.search, ...this.page}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.page.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit(row) {
|
||||
return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
|
||||
...row, id: row.deviceId
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("提交成功!")
|
||||
this.getTableData()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleShow(row) {
|
||||
this.dialog = true
|
||||
this.detail = row
|
||||
},
|
||||
handleLocate(row, locate) {
|
||||
if (locate) {
|
||||
let {lat, lng} = locate.location
|
||||
this.handleSubmit({...row, lat, lng}).then(() => {
|
||||
this.locate = false
|
||||
this.getTableData()
|
||||
})
|
||||
} else {
|
||||
this.locate = true
|
||||
this.detail = row
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppISDevice {
|
||||
::v-deep .AiSearchBar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
374
packages/IntelligentSecurity/AppISManage/AppISManage.vue
Normal file
374
packages/IntelligentSecurity/AppISManage/AppISManage.vue
Normal file
@@ -0,0 +1,374 @@
|
||||
<template>
|
||||
<section class="AppISManage">
|
||||
<device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict"
|
||||
@treeCommand="handleSliderOption" @select="handleSelectMonitor"
|
||||
:render-item="renderTreeItem" ref="DeviceSlider"/>
|
||||
<div class="monitorPane">
|
||||
<div class="headerBar">
|
||||
<el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
|
||||
<i slot="prefix" class="iconfont iconjdq_led_Led1"/>
|
||||
<el-option v-for="(op,i) in splitOps" :key="i" v-bind="op"/>
|
||||
</el-select>
|
||||
<!-- <el-button icon="el-icon-full-screen" @click="handleFullscreen">全屏</el-button>-->
|
||||
</div>
|
||||
<div class="videoList">
|
||||
<div
|
||||
class="videoBox"
|
||||
v-for="(m,i) in monitors"
|
||||
:key="m.id"
|
||||
@mouseenter.stop="m.isShowPlayBtn = true"
|
||||
@mouseleave.stop="m.isShowPlayBtn = false"
|
||||
:style="currentSplitStyle">
|
||||
<AiMonitor :src="m.url" type="slw"></AiMonitor>
|
||||
<span :title="m.name">{{ m.name }}</span>
|
||||
<div class="videoBox-close" @click="removeMonitor(i)" v-if="m.isShowPlayBtn">
|
||||
<i class="el-icon-circle-close"></i>
|
||||
<span>关闭视频</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-dialog title="修改名称" :visible.sync="dialog" width="500px" @onConfirm="handleSubmit(selected)"
|
||||
@closed="selected={}">
|
||||
<el-form ref="form" :model="selected" label-width="80px" size="small" :rules="rules">
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input v-model="selected.name" clearable/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
<locate-dialog v-model="locate" :ins="instance" :latlng="latlng" @confirm="v=>handleLocate(selected,v)"/>
|
||||
<ai-area custom-clicker :input-clicker="false" :hideLevel="disabledLevel" v-model="selected.areaId"
|
||||
:instance="instance" ref="BindArea"
|
||||
@change="handleSubmit(selected)"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import DeviceSlider from "../components/deviceSlider";
|
||||
import LocateDialog from "../components/locateDialog";
|
||||
import AiMonitor from "dvcp-dv-ui/components/AiMonitor/AiMonitor";
|
||||
|
||||
export default {
|
||||
name: "AppISManage",
|
||||
components: {LocateDialog, DeviceSlider, AiMonitor},
|
||||
label: "监控实况",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
computed: {
|
||||
splitOps() {
|
||||
return [
|
||||
{label: "单分屏", value: 1, per: "100%"},
|
||||
{label: "四分屏", value: 4, per: "49%"},
|
||||
{label: "九分屏", value: 9, per: "32%"}
|
||||
]
|
||||
},
|
||||
currentSplitStyle() {
|
||||
let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
|
||||
return {width: per, height: per}
|
||||
},
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
slider: true,
|
||||
fullscreen: false,
|
||||
splitScreen: 1,
|
||||
monitors: [],
|
||||
dialog: false,
|
||||
locate: false,
|
||||
selected: {
|
||||
areaId: ''
|
||||
},
|
||||
videoUrl: '',
|
||||
latlng: null,
|
||||
disabledLevel: 0,
|
||||
rules: {
|
||||
name: [{required: true, message: "请填写 设备名称"}]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.selected.areaId = this.user.info.areaId
|
||||
this.disabledLevel = this.user.info.areaList.length - 1
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleFullscreen() {
|
||||
this.fullscreen = !this.fullscreen
|
||||
this.$fullscreen(this.fullscreen)
|
||||
},
|
||||
handleSelectMonitor(monitor) {
|
||||
if (monitor.type !== '1') return
|
||||
|
||||
let {id} = monitor,
|
||||
index = this.monitors.findIndex(e => e.id == id)
|
||||
if (index > -1) {
|
||||
this.$message.error('该监控视频已存在')
|
||||
} else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
|
||||
this.$message.error("可分屏监控已满,请先取消其他的监控")
|
||||
} else {
|
||||
this.showMonitor(monitor)
|
||||
}
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
if (e === 1 && this.monitors.length) {
|
||||
this.monitors = [this.monitors[0]]
|
||||
}
|
||||
},
|
||||
|
||||
removeMonitor(i) {
|
||||
this.monitors.splice(i, 1)
|
||||
},
|
||||
|
||||
showMonitor(monitor, refresh = false) {
|
||||
let {id: deviceId} = monitor
|
||||
deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
||||
params: {deviceId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.videoUrl = res.data
|
||||
let data = {
|
||||
url: res.data,
|
||||
isShowPlayBtn: false
|
||||
}
|
||||
if (refresh) {
|
||||
monitor.url = data.url
|
||||
} else if (this.splitScreen == 1) {
|
||||
this.monitors = [{...monitor, ...data}]
|
||||
} else {
|
||||
if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
|
||||
this.monitors.push({...monitor, ...data})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
renderTreeItem: function (h, {node, data}) {
|
||||
let show = data.deviceStatus == 1 ? 'show' : ''
|
||||
if (node.isLeaf) {
|
||||
return (
|
||||
<div class="flexRow">
|
||||
<i class={['iconfont', 'iconshipinjiankong', show]}/>
|
||||
<div>{node.label}</div>
|
||||
</div>
|
||||
)
|
||||
} else return (
|
||||
<div class="flexRow">
|
||||
<div>{node.label}</div>
|
||||
{data.id != 'no_area' ? <div class="sta">
|
||||
<p>{data.online || 0}</p>/{data.sum || 0}
|
||||
</div>
|
||||
: <div/>}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
handleSliderOption(e) {
|
||||
console.log(e)
|
||||
this.selected = {
|
||||
command: e.type,
|
||||
...e.node
|
||||
}
|
||||
this.selected.areaId = e.node.areaId || this.user.info.areaId
|
||||
if (e.type == "edit") {//修改名称
|
||||
this.dialog = true
|
||||
} else if (e.type == "area") {//绑定areaId
|
||||
this.$refs.BindArea?.chooseArea()
|
||||
} else if (e.type == "locate") {//地图标绘
|
||||
this.latlng = e.node.lat && e.node.lng ? {
|
||||
lat: e.node.lat,
|
||||
lng: e.node.lng
|
||||
} : ''
|
||||
this.locate = true
|
||||
}
|
||||
},
|
||||
handleSubmit(row) {
|
||||
delete row.createTime
|
||||
return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
|
||||
...row
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("提交成功!")
|
||||
this.dialog = false
|
||||
this.$refs.DeviceSlider?.getDevices()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleLocate(row, locate) {
|
||||
if (locate) {
|
||||
let {lat, lng} = locate.location
|
||||
this.handleSubmit({...row, lat, lng}).then(() => {
|
||||
this.locate = false
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.monitors = []
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppISManage {
|
||||
display: flex;
|
||||
background: #202330;
|
||||
height: 100%;
|
||||
|
||||
.monitorPane {
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 20px 20px 20px 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
::v-deep .headerBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.iconfont {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.el-input__icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-input__inner, .el-button {
|
||||
color: #fff;
|
||||
max-width: 100px;
|
||||
background: #2C2F3E;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
color: #26f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.videoList {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.videoBox {
|
||||
position: relative;
|
||||
background: #000;
|
||||
flex-shrink: 0;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 60%;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.videoBox-close {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
z-index: 11;
|
||||
width: 84px;
|
||||
height: 32px;
|
||||
line-height: 1;
|
||||
background: linear-gradient(180deg, #2E3447 0%, #151825 100%);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.el-tree-node__content:hover {
|
||||
.menuBtn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .flexRow {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
|
||||
.iconfont {
|
||||
color: #89b;
|
||||
|
||||
&.show {
|
||||
color: #19D286;
|
||||
}
|
||||
}
|
||||
|
||||
.sta {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
& > p {
|
||||
color: #19D286;
|
||||
}
|
||||
}
|
||||
|
||||
.menuBtn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
211
packages/IntelligentSecurity/AppISMap/AppISMap.vue
Normal file
211
packages/IntelligentSecurity/AppISMap/AppISMap.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<section class="AppISMap">
|
||||
<device-slider :show.sync="slider" :ins="instance" :dict="dict" @list="v=>list=v" @select="markerClickEvent"/>
|
||||
<div id="amap"/>
|
||||
<div ref="selectedInfoWin" class="selected">
|
||||
<b>{{ selected.deviceName }}</b>
|
||||
<div>{{ selected.lng }}，{{ selected.lat }}</div>
|
||||
<div v-if="selected.address">{{ selected.address }}</div>
|
||||
<div btn @click="handleShowMonitor">查看监控</div>
|
||||
</div>
|
||||
<el-dialog class="monitorDialog" :modal="false" :visible.sync="dialog" :title="selected.deviceName||'视频监控'"
|
||||
width="640px" @closed="monitor=''">
|
||||
<iframe v-if="monitor" :src="monitor" allow="autoplay *; microphone *; fullscreen *" allowfullscreen
|
||||
allowtransparency allowusermedia frameBorder="no"/>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeviceSlider from "../components/deviceSlider";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
|
||||
export default {
|
||||
name: "AppISMap",
|
||||
components: {DeviceSlider},
|
||||
label: "监控地图",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slider: true,
|
||||
AMap: null,
|
||||
map: null,
|
||||
selected: {},
|
||||
list: [],
|
||||
deviceToken: "",
|
||||
dialog: false,
|
||||
monitor: ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
immediate: true,
|
||||
handler(v) {
|
||||
if (v.length > 0) {
|
||||
this.renderDevicesOnMap()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
return new Promise(resolve => AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc",
|
||||
version: '2.0',
|
||||
plugins: ['AMap.Marker', 'AMap.PlaceSearch'],
|
||||
}).then(AMap => {
|
||||
this.AMap = AMap
|
||||
this.map = new this.AMap.Map('amap', {
|
||||
zoom: 14,
|
||||
})
|
||||
resolve()
|
||||
}))
|
||||
},
|
||||
renderDevicesOnMap() {
|
||||
this.list?.map(e => {
|
||||
if (this.AMap && e?.lat) {
|
||||
e.marker = new this.AMap.Marker({
|
||||
icon: this.$cdn + 'monitor/camera.png',
|
||||
position: new this.AMap.LngLat(e.lng, e.lat)
|
||||
}).on('click', () => this.markerClickEvent(e))
|
||||
this.map.add(e.marker)
|
||||
}
|
||||
})
|
||||
},
|
||||
markerClickEvent(device) {
|
||||
if (device?.marker) {
|
||||
this.map?.setCenter(new this.AMap.LngLat(device.lng, device.lat))
|
||||
device.marker.setIcon(this.$cdn + 'monitor/cameraSelected.png')
|
||||
this.selected = device
|
||||
let win = new this.AMap.InfoWindow({
|
||||
isCustom: true,
|
||||
autoMove: true,
|
||||
closeWhenClickMap: true,
|
||||
content: this.$refs.selectedInfoWin
|
||||
}).on('close', () => {
|
||||
device.marker.setIcon(this.$cdn + 'monitor/camera.png')
|
||||
this.selected = {}
|
||||
})
|
||||
win.open(this.map, new this.AMap.LngLat(device.lng, device.lat))
|
||||
}
|
||||
},
|
||||
getDeviceToken() {
|
||||
this.instance.post("/app/appzyvideoequipment/getAppUserToken").then(res => {
|
||||
if (res?.data) {
|
||||
this.deviceToken = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleShowMonitor() {
|
||||
this.dialog = true
|
||||
this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
||||
params: {token: this.deviceToken, deviceId: this.selected.deviceId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
let data = JSON.parse(res.data)
|
||||
this.monitor = data.url
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initMap().then(() => setTimeout(() => this.renderDevicesOnMap(), 1000))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppISMap {
|
||||
background: #202330;
|
||||
position: relative;
|
||||
|
||||
.deviceSlider {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 66;
|
||||
}
|
||||
|
||||
#amap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #fff;
|
||||
min-width: 280px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 12px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
||||
b {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
div[btn] {
|
||||
cursor: pointer;
|
||||
color: #89b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::v-deep .monitorDialog {
|
||||
|
||||
.el-dialog__header {
|
||||
font-size: 14px;
|
||||
color: #FFF;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: linear-gradient(180deg, #313B5B 0%, #1B202F 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
position: relative;
|
||||
top: unset;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .amap-logo, ::v-deep .amap-copyright {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .amap-marker-label {
|
||||
border-color: transparent;
|
||||
box-shadow: 1px 1px 0 0 rgba(#999, .2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
308
packages/IntelligentSecurity/components/deviceSlider.vue
Normal file
308
packages/IntelligentSecurity/components/deviceSlider.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<section class="deviceSlider">
|
||||
<div class="mainPane" v-if="show">
|
||||
<div flex overview>
|
||||
<b>监控设备</b>
|
||||
<div>
|
||||
<div>设备总数：{{ overview.total }}</div>
|
||||
<div flex>在线设备：<p v-text="overview.online"/></div>
|
||||
</div>
|
||||
<el-progress type="circle" :width="40" :percentage="overview.percent" color="#19D286" :stroke-width="4"/>
|
||||
</div>
|
||||
<div flex search>
|
||||
<el-select v-model="search.bind" size="mini" placeholder="全部" clearable @change="onChange">
|
||||
<el-option v-for="(op,i) in dict.getDict('deviceStatus')" :key="i" :value="op.dictValue"
|
||||
:label="op.dictName"/>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
size="mini"
|
||||
placeholder="设备名称"
|
||||
v-throttle="handleTreeFilter"
|
||||
prefix-icon="el-icon-search"
|
||||
@clear="search.name = '', handleTreeFilter()" clearable/>
|
||||
</div>
|
||||
<div title>设备列表</div>
|
||||
<div fill class="deviceList">
|
||||
<el-tree ref="deviceTree" :render-content="renderItem" :data="treeData" :props="propsConfig"
|
||||
@node-click="handleNodeClick" @node-contextmenu="nodeContextmenu"
|
||||
:filter-node-method="handleFilter"/>
|
||||
<ul
|
||||
v-if="isShowMenu && menuInfo.node.type==1 && permissions('video_config')"
|
||||
class="el-dropdown-menu el-popper"
|
||||
:style="{top: menuInfo.y + 'px', left: menuInfo.x + 'px', position: 'fixed', zIndex: 2023}"
|
||||
x-placement="top-end">
|
||||
<li class="el-dropdown-menu__item" @click="handleTreeCommand('edit', menuInfo.node)">修改名称</li>
|
||||
<!-- <li class="el-dropdown-menu__item" @click="handleTreeCommand('area', menuInfo.node)">行政地区</li> -->
|
||||
<li class="el-dropdown-menu__item" @click="handleTreeCommand('locate', menuInfo.node)">地图标绘</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightBtn" :class="{show}" @click="handleShow">
|
||||
<i class="iconfont iconArrow_Right"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "deviceSlider",
|
||||
props: {
|
||||
show: Boolean,
|
||||
ins: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
renderItem: Function
|
||||
},
|
||||
computed: {
|
||||
overview() {
|
||||
let total = this.list?.length || 0,
|
||||
online = this.list?.filter(e => e.deviceStatus == 1)?.length || 0
|
||||
return {
|
||||
total, online,
|
||||
percent: Math.ceil(online / total * 100) || 0
|
||||
}
|
||||
},
|
||||
propsConfig() {
|
||||
return {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}
|
||||
},
|
||||
treeData() {
|
||||
let {list, noArea, staData} = this
|
||||
let meta = [staData?.reduce((t, e) => {
|
||||
return t.type <= e.type ? t : e
|
||||
}, {name: '读取中...'})]
|
||||
meta.map(p => this.addChild(p, [...staData, ...list].map(s => ({
|
||||
...s,
|
||||
parentId: s.areaId || s.parent_id
|
||||
}))))
|
||||
return [...meta, {
|
||||
id: 'no_area',
|
||||
name: '未知区划',
|
||||
children: noArea
|
||||
}]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
noArea: [],
|
||||
staData: [],
|
||||
name: '',
|
||||
isShowMenu: false,
|
||||
search: {
|
||||
bind: ''
|
||||
},
|
||||
menuInfo: {
|
||||
x: '',
|
||||
y: '',
|
||||
node: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleShow() {
|
||||
this.$emit('update:show', !this.show)
|
||||
},
|
||||
|
||||
bindEvent() {
|
||||
this.isShowMenu = false
|
||||
},
|
||||
getDevices() {
|
||||
this.ins.post("/app/appzyvideoequipment/tree", null, {
|
||||
params: {size: 999}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.staData = res.data.count
|
||||
this.list = res.data.list
|
||||
this.noArea = res.data.noArea
|
||||
this.$emit('list', this.list)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleTreeCommand(e, node) {
|
||||
this.$emit('treeCommand', {
|
||||
type: e,
|
||||
node
|
||||
})
|
||||
},
|
||||
|
||||
nodeContextmenu(e, node) {
|
||||
this.isShowMenu = true
|
||||
let y = e.y + 6
|
||||
if (y + 202 > document.body.clientHeight) {
|
||||
y = y - 202
|
||||
}
|
||||
this.menuInfo = {
|
||||
x: e.x + 16, y,
|
||||
node
|
||||
}
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.isShowMenu = false
|
||||
this.$emit('select', data)
|
||||
},
|
||||
handleFilter(v, data) {
|
||||
if (!v) {
|
||||
return !this.search.bind ? true : data.deviceStatus === this.search.bind
|
||||
}
|
||||
|
||||
return data?.name?.indexOf(v) > -1 && (!this.search.bind ? true : data.deviceStatus === this.search.bind)
|
||||
},
|
||||
handleTreeFilter() {
|
||||
this.$refs.deviceTree?.filter(this.search.name)
|
||||
},
|
||||
|
||||
onChange() {
|
||||
this.$refs.deviceTree?.filter(this.search.name)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load("deviceStatus")
|
||||
this.getDevices()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.querySelector('html').addEventListener('click', this.bindEvent)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.deviceSlider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
div[flex] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.deviceList {
|
||||
overflow: auto;
|
||||
|
||||
::v-deep .el-tree {
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
background: #535353;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
div[fill] {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.mainPane {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
background: #333C53;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 16px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
b {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
div[overview], div[search] {
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
gap: 4px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
::v-deep.el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
div[title] {
|
||||
height: 28px;
|
||||
background: #3E4A69;
|
||||
padding: 0 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
::v-deep.deviceList {
|
||||
padding: 0 8px;
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
box-sizing: content-box;
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-progress__text, p {
|
||||
color: #19D286;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: #282F45;
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
|
||||
.el-tree-node:focus > .el-tree-node__content, .el-tree-node__content:hover {
|
||||
background: rgba(#fff, .1);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__icon {
|
||||
color: #89b;
|
||||
}
|
||||
}
|
||||
|
||||
.rightBtn {
|
||||
width: 16px;
|
||||
height: 80px;
|
||||
background: url("https://cdn.cunwuyun.cn/monitor/drawerBtn.png");
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.iconfont {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
|
||||
&.show > .iconfont {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
177
packages/IntelligentSecurity/components/locateDialog.vue
Normal file
177
packages/IntelligentSecurity/components/locateDialog.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<section class="locateDialog">
|
||||
<ai-dialog :visible.sync="dialog" title="标绘" @closed="$emit('visible',false),selected={}"
|
||||
@opened="$nextTick(()=>initMap())"
|
||||
@onConfirm="handleConfirm">
|
||||
<ai-t-map :map.sync="map" :lib.sync="TMap"/>
|
||||
<div class="poi">
|
||||
<el-autocomplete ref="poiInput" v-model="search" size="small" clearable :fetch-suggestions="handleSearch"
|
||||
placeholder="请输入地点" @select="handleSelect" :trigger-on-focus="false">
|
||||
<template slot-scope="{item}">
|
||||
<span style="direction: rtl" v-text="`${item.title}(${item.address})`"/>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</div>
|
||||
<el-form class="selected" v-if="!!selected.location" id="result" size="mini" label-suffix="："
|
||||
label-position="left">
|
||||
<div class="header">
|
||||
<i class="iconfont iconLocation"/>
|
||||
<span v-html="[selected.location.lng, selected.location.lat].join(',')"/>
|
||||
</div>
|
||||
<el-form-item label="地点">{{ selected.name || "未知地名" }}</el-form-item>
|
||||
<el-form-item label="类型" v-if="!!selected.type">{{ selected.type }}</el-form-item>
|
||||
<el-form-item label="地址" v-if="!!selected.address">{{ selected.address }}</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "locateDialog",
|
||||
model: {
|
||||
prop: "visible",
|
||||
event: "visible",
|
||||
},
|
||||
props: ['latlng', 'visible'],
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
search: "",
|
||||
map: null,
|
||||
selected: {},
|
||||
TMap: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
watch: {
|
||||
visible(v) {
|
||||
this.dialog = v
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMap(count = 0) {
|
||||
let {map, TMap} = this
|
||||
if (map) {
|
||||
if (!!this.latlng?.lat) {
|
||||
let position = new TMap.LatLng(this.latlng.lat, this.latlng.lng)
|
||||
map.setCenter(position)
|
||||
this.selected.marker = new TMap.MultiMarker({map, geometries: [{position}]})
|
||||
}
|
||||
map.on('click', res => {
|
||||
let {poi, latLng: location} = res, name = poi?.name || ""
|
||||
this.selected.marker?.setMap(null)
|
||||
this.selected = {location, name}
|
||||
this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
|
||||
})
|
||||
} else {
|
||||
if (count < 5) {
|
||||
count++
|
||||
setTimeout(() => this.initMap(count), 500)
|
||||
} else {
|
||||
console.error("地图渲染失败")
|
||||
}
|
||||
}
|
||||
},
|
||||
handleSearch(keyword, cb) {
|
||||
let {TMap} = this
|
||||
if (keyword && TMap) {
|
||||
let poi = new TMap.service.Search({pageSize: 10})
|
||||
poi.searchRegion({
|
||||
keyword, radius: 5000, cityName: this.user.info?.areaId?.substring(0, 6) || ""
|
||||
}).then(res => {
|
||||
if (res?.data?.length > 0) {
|
||||
cb(res.data)
|
||||
} else this.$message.error("未查到有效地点")
|
||||
})
|
||||
}
|
||||
},
|
||||
handleConfirm() {
|
||||
if (this.selected?.location) {
|
||||
this.$emit('confirm', this.selected)
|
||||
} else {
|
||||
this.$message.error('请先选择坐标位置')
|
||||
}
|
||||
},
|
||||
handleSelect(res) {
|
||||
let {map, TMap} = this
|
||||
if (map) {
|
||||
let {title: name, location} = res
|
||||
this.selected.marker?.setMap(null)
|
||||
this.selected = {location, name}
|
||||
this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
|
||||
map.setCenter(location)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dialog = this.visible
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.locateDialog {
|
||||
.color-999 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
height: 480px;
|
||||
position: relative;
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.poi {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
flex-direction: column;
|
||||
z-index: 202203281016;
|
||||
width: 400px;
|
||||
|
||||
div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
background: #fff;
|
||||
min-width: 200px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.header {
|
||||
color: #fff;
|
||||
background: #26f;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
91
packages/IntelligentSecurity/components/settingDialog.vue
Normal file
91
packages/IntelligentSecurity/components/settingDialog.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<section class="settingDialog">
|
||||
<ai-dialog :visible.sync="dialog" title="基础设置" @close="$emit('visible',false)">
|
||||
<el-form ref="deviceForm" size="small" label-width="140px">
|
||||
<el-form-item label="设备名称" class="full">
|
||||
<el-input v-model="form.name" clearable placeholder="设备名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="摄像头状态">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="高清视频">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="摄像头麦克风">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态指示灯">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="夜视">
|
||||
<el-radio v-model="form.status" label="自动"/>
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转180°">
|
||||
<el-radio v-model="form.status" label="开启"/>
|
||||
<el-radio v-model="form.status" label="关闭"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="WIFI网络" class="full">-</el-form-item>
|
||||
<el-form-item label="MAC地址">(34:75:6b:c9:10)</el-form-item>
|
||||
<el-form-item label="摄像头型号">C71</el-form-item>
|
||||
<el-form-item label="固件">20.0326.251.2486</el-form-item>
|
||||
<el-form-item label="嵌入式应用">2.3.37.8954</el-form-item>
|
||||
<el-form-item label="IMEI">110003953100302</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "settingDialog",
|
||||
model: {
|
||||
prop: "visible",
|
||||
event: "visible",
|
||||
},
|
||||
props: {
|
||||
visible: Boolean,
|
||||
detail: {default: () => ({})}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(v) {
|
||||
this.dialog = v
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form = JSON.parse(JSON.stringify(this.form))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.settingDialog {
|
||||
.el-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
width: 50%;
|
||||
|
||||
.el-form-item__label {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
&.full {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user