28384
This commit is contained in:
yanran200730
@@ -26,151 +26,163 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
</ai-dialog>
|
</ai-dialog>
|
||||||
<locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(selected,v)"/>
|
<locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(selected,v)"/>
|
||||||
<ai-area custom-clicker :input-clicker="false" v-model="selected.areaId" :instance="instance" ref="BindArea"
|
<ai-area custom-clicker :input-clicker="false" v-model="selected.areaId" :hideLevel="disabledLevel" :instance="instance" ref="BindArea"
|
||||||
@change="handleSubmit(selected)"/>
|
@change="handleSubmit(selected)"/>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DeviceSlider from "../components/deviceSlider";
|
import { mapState } from 'vuex'
|
||||||
import LocateDialog from "../components/locateDialog";
|
import DeviceSlider from "../components/deviceSlider";
|
||||||
|
import LocateDialog from "../components/locateDialog";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AppMonitorManage",
|
name: "AppMonitorManage",
|
||||||
components: {LocateDialog, DeviceSlider},
|
components: {LocateDialog, DeviceSlider},
|
||||||
label: "监控实况",
|
label: "监控实况",
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
dict: Object,
|
dict: Object,
|
||||||
permissions: Function
|
permissions: Function
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
splitOps() {
|
|
||||||
return [
|
|
||||||
{label: "单分屏", value: 1, per: "100%"},
|
|
||||||
{label: "四分屏", value: 4, per: "49%"},
|
|
||||||
{label: "九分屏", value: 9, per: "32%"}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
currentSplitStyle() {
|
computed: {
|
||||||
let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
|
splitOps() {
|
||||||
return {width: per, height: per}
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
slider: true,
|
slider: true,
|
||||||
fullscreen: false,
|
fullscreen: false,
|
||||||
splitScreen: 1,
|
splitScreen: 1,
|
||||||
monitors: [],
|
monitors: [],
|
||||||
dialog: false,
|
dialog: false,
|
||||||
locate: false,
|
locate: false,
|
||||||
selected: {},
|
selected: {
|
||||||
rules: {
|
areaId: ''
|
||||||
name: [{required: true, message: "请填写 设备名称"}]
|
},
|
||||||
|
disabledLevel: 0,
|
||||||
|
rules: {
|
||||||
|
name: [{required: true, message: "请填写 设备名称"}]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleFullscreen() {
|
|
||||||
this.fullscreen = !this.fullscreen
|
|
||||||
this.$fullscreen(this.fullscreen)
|
|
||||||
},
|
},
|
||||||
handleSelectMonitor(monitor) {
|
|
||||||
let {id} = monitor,
|
created () {
|
||||||
index = this.monitors.findIndex(e => e.id == id)
|
this.selected.areaId = this.user.info.areaId
|
||||||
if (index > -1) {
|
this.disabledLevel = this.user.info.areaList.length
|
||||||
this.monitors.splice(index, 1)
|
},
|
||||||
this.monitors.map((e, i) => {
|
|
||||||
if (i > index) {
|
methods: {
|
||||||
this.showMonitor(e, true)
|
handleFullscreen() {
|
||||||
|
this.fullscreen = !this.fullscreen
|
||||||
|
this.$fullscreen(this.fullscreen)
|
||||||
|
},
|
||||||
|
handleSelectMonitor(monitor) {
|
||||||
|
let {id} = monitor,
|
||||||
|
index = this.monitors.findIndex(e => e.id == id)
|
||||||
|
if (index > -1) {
|
||||||
|
this.monitors.splice(index, 1)
|
||||||
|
this.monitors.map((e, i) => {
|
||||||
|
if (i > index) {
|
||||||
|
this.showMonitor(e, true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
|
||||||
|
this.$message.warning("可分屏监控已满,请先取消其他的监控")
|
||||||
|
} else {
|
||||||
|
this.showMonitor(monitor)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showMonitor(monitor, refresh = false) {
|
||||||
|
let {id: deviceId} = monitor
|
||||||
|
deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
||||||
|
params: {deviceId}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
let data = JSON.parse(res.data)
|
||||||
|
if (refresh) {
|
||||||
|
monitor.url = data.url
|
||||||
|
} else if (this.splitScreen == 1) {
|
||||||
|
this.monitors = [{...monitor, ...data}]
|
||||||
|
} else {
|
||||||
|
this.monitors.push({...monitor, ...data})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
|
},
|
||||||
this.$message.warning("可分屏监控已满,请先取消其他的监控")
|
renderTreeItem: function (h, {node, data}) {
|
||||||
} else {
|
let show = data.deviceStatus==1 ? 'show' : ''
|
||||||
this.showMonitor(monitor)
|
if (node.isLeaf) {
|
||||||
}
|
return (
|
||||||
},
|
<div class="flexRow">
|
||||||
showMonitor(monitor, refresh = false) {
|
<i class={['iconfont', 'iconshipinjiankong', show]}/>
|
||||||
let {id: deviceId} = monitor
|
<div>{node.label}</div>
|
||||||
deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
<el-dropdown class="menuBtn" onCommand={e => this.handleSliderOption(e, data)}>
|
||||||
params: {deviceId}
|
<i class="iconfont iconMore"/>
|
||||||
}).then(res => {
|
<el-dropdown-menu slot="dropdown">
|
||||||
if (res?.data) {
|
<el-dropdown-item command="edit">修改名称</el-dropdown-item>
|
||||||
let data = JSON.parse(res.data)
|
<el-dropdown-item command="area">行政地区</el-dropdown-item>
|
||||||
if (refresh) {
|
<el-dropdown-item command="locate">地图标绘</el-dropdown-item>
|
||||||
monitor.url = data.url
|
</el-dropdown-menu>
|
||||||
} else if (this.splitScreen == 1) {
|
</el-dropdown>
|
||||||
this.monitors = [{...monitor, ...data}]
|
</div>
|
||||||
} else {
|
)
|
||||||
this.monitors.push({...monitor, ...data})
|
} else return (
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
renderTreeItem: function (h, {node, data}) {
|
|
||||||
let show = data.deviceStatus==1 ? 'show' : ''
|
|
||||||
if (node.isLeaf) {
|
|
||||||
return (
|
|
||||||
<div class="flexRow">
|
<div class="flexRow">
|
||||||
<i class={['iconfont', 'iconshipinjiankong', show]}/>
|
|
||||||
<div>{node.label}</div>
|
<div>{node.label}</div>
|
||||||
<el-dropdown class="menuBtn" onCommand={e => this.handleSliderOption(e, data)}>
|
{data.id != 'no_area' ? <div class="sta">
|
||||||
<i class="iconfont iconMore"/>
|
<p>{data.online || 0}</p>/{data.sum || 0}
|
||||||
<el-dropdown-menu slot="dropdown">
|
</div>
|
||||||
<el-dropdown-item command="edit">修改名称</el-dropdown-item>
|
: <div/>}
|
||||||
<el-dropdown-item command="area">行政地区</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="locate">地图标绘</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
} else return (
|
},
|
||||||
<div class="flexRow">
|
handleSliderOption(command, data) {
|
||||||
<div>{node.label}</div>
|
this.selected = JSON.parse(JSON.stringify({...data, command}))
|
||||||
{data.id != 'no_area' ? <div class="sta">
|
if (command == "edit") {//修改名称
|
||||||
<p>{data.online || 0}</p>/{data.sum || 0}
|
this.dialog = true
|
||||||
</div>
|
} else if (command == "area") {//绑定areaId
|
||||||
: <div/>}
|
this.$refs.BindArea?.chooseArea()
|
||||||
</div>
|
} else if (command == "locate") {//地图标绘
|
||||||
)
|
this.locate = true
|
||||||
},
|
|
||||||
handleSliderOption(command, data) {
|
|
||||||
this.selected = JSON.parse(JSON.stringify({...data, command}))
|
|
||||||
if (command == "edit") {//修改名称
|
|
||||||
this.dialog = true
|
|
||||||
} else if (command == "area") {//绑定areaId
|
|
||||||
this.$refs.BindArea?.chooseArea()
|
|
||||||
} else if (command == "locate") {//地图标绘
|
|
||||||
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()
|
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
},
|
handleSubmit(row) {
|
||||||
handleLocate(row, locate) {
|
delete row.createTime
|
||||||
if (locate) {
|
return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
|
||||||
let {lat, lng} = locate.location
|
...row
|
||||||
this.handleSubmit({...row, lat, lng}).then(() => {
|
}).then(res => {
|
||||||
this.locate = false
|
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 = []
|
||||||
}
|
}
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.monitors = []
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user