山东移动
This commit is contained in:
yanran200730
@@ -2,7 +2,7 @@
|
|||||||
const install = function(Vue) {
|
const install = function(Vue) {
|
||||||
if (install.installed) return Promise.resolve();
|
if (install.installed) return Promise.resolve();
|
||||||
else {
|
else {
|
||||||
let contexts = require.context('../project/sass/apps', true, /(\/.+)\/App[^\/]+\.vue$/);
|
let contexts = require.context('../project/shandong/apps', true, /(\/.+)\/App[^\/]+\.vue$/);
|
||||||
if (contexts) {
|
if (contexts) {
|
||||||
contexts.keys().map((e) => {
|
contexts.keys().map((e) => {
|
||||||
if (contexts(e).default) {
|
if (contexts(e).default) {
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ import Add from "./components/add";
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AppGridBlock",
|
name: "AppGridBlock",
|
||||||
label: "网格区块",
|
label: "网格区块--山东",
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
61
project/shandong/apps/horn/AppBroadcast/AppBroadcast.vue
Normal file
61
project/shandong/apps/horn/AppBroadcast/AppBroadcast.vue
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppBroadcast">
|
||||||
|
<keep-alive :include="['List']">
|
||||||
|
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||||
|
</keep-alive>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import List from './components/List'
|
||||||
|
import Add from './components/Add'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
label: '播发记录',
|
||||||
|
name: 'AppBroadcast',
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
component: 'List',
|
||||||
|
params: {},
|
||||||
|
include: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
Add,
|
||||||
|
List
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange(data) {
|
||||||
|
if (data.type === 'add') {
|
||||||
|
this.component = 'Add'
|
||||||
|
this.params = data.params
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type == 'list') {
|
||||||
|
this.component = 'List'
|
||||||
|
this.params = data.params
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (data.isRefresh) {
|
||||||
|
this.$refs.component.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.AppBroadcast {
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f6f9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
333
project/shandong/apps/horn/AppBroadcast/components/Add.vue
Normal file
333
project/shandong/apps/horn/AppBroadcast/components/Add.vue
Normal file
@@ -0,0 +1,333 @@
|
|||||||
|
<template>
|
||||||
|
<section style="height: 100%">
|
||||||
|
<ai-detail class="Add">
|
||||||
|
<!-- 返回按钮 -->
|
||||||
|
<template #title>
|
||||||
|
<ai-title title="添加广播" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #content>
|
||||||
|
<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
|
||||||
|
<ai-bar title="基础信息"></ai-bar>
|
||||||
|
<div class="flex">
|
||||||
|
<el-form-item label="播发内容" prop="mediaId">
|
||||||
|
<ai-select v-model="formData.mediaId" placeholder="播发内容" clearable :selectList="mediaList"></ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播放设备" prop="serialNo">
|
||||||
|
<ai-select v-model="formData.serialNo" placeholder="播放设备" clearable :selectList="equipmentList"></ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播发级别" prop="messageLevel">
|
||||||
|
<ai-select v-model="formData.messageLevel" placeholder="播发级别" clearable :selectList="$dict.getDict('dlbMessageUrgency')"></ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播放方式" prop="taskType" class="buildingTypes">
|
||||||
|
<el-radio-group v-model="formData.taskType">
|
||||||
|
<el-radio label="0">立即播放</el-radio>
|
||||||
|
<el-radio label="1">定时播放</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="定时策略" prop="cyclingType" v-if="formData.taskType != 0">
|
||||||
|
<ai-select v-model="formData.cyclingType" placeholder="定时策略" clearable :selectList="$dict.getDict('dlbDyclingType')"></ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播放天数" prop="checkList" class="buildingTypes" v-if="formData.taskType != 0 && formData.cyclingType == 2">
|
||||||
|
<el-checkbox-group v-model="formData.checkList">
|
||||||
|
<el-checkbox label="1">每周一</el-checkbox>
|
||||||
|
<el-checkbox label="2">每周二</el-checkbox>
|
||||||
|
<el-checkbox label="3">每周三</el-checkbox>
|
||||||
|
<el-checkbox label="4">每周四</el-checkbox>
|
||||||
|
<el-checkbox label="5">每周五</el-checkbox>
|
||||||
|
<el-checkbox label="6">每周六</el-checkbox>
|
||||||
|
<el-checkbox label="7">每周日</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播放天数" prop="broadcastDay" v-if="formData.taskType != 0 && formData.cyclingType == 3">
|
||||||
|
<el-input v-model="formData.broadcastDay" placeholder="播放天数" clearable size="small" maxlength="4"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="开始日期" prop="startDate" v-if="formData.taskType != 0">
|
||||||
|
<el-date-picker v-model="formData.startDate" type="date" placeholder="选择日期" size="small" value-format="yyyy-MM-dd"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="开始时间" prop="startTime" v-if="formData.taskType != 0">
|
||||||
|
<el-time-picker v-model="formData.startTime" placeholder="开始时间" size="small" :picker-options="{ start: newDate, minTime: newDate}" value-format="HH:mm:ss"></el-time-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="结束时间" prop="endTime" v-if="formData.taskType != 0">
|
||||||
|
<el-time-picker v-model="formData.endTime" placeholder="结束时间" size="small" :picker-options="{ start: formData.startTime, minTime: formData.startTime}" value-format="HH:mm:ss"></el-time-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="cancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirm()">提交</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Add',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
dict: Object,
|
||||||
|
params: Object,
|
||||||
|
instance: Function,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
let startTimePass = (rule, value, callback) => {
|
||||||
|
if (value) {
|
||||||
|
var myDate = new Date();
|
||||||
|
var time = myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
|
||||||
|
if (this.timeToSec(value) - this.timeToSec(time)> 0) {
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
callback(new Error('开始时间要大于当前时间'));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
callback(new Error('请选择开始时间'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
let endTimePass = (rule, value, callback) => {
|
||||||
|
if (value) {
|
||||||
|
if (this.timeToSec(value) - this.timeToSec(this.formData.startTime)> 0) {
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
callback(new Error('结束时间要大于开始时间'));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
callback(new Error('请选择结束时间'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
formData: {
|
||||||
|
mediaId: '',
|
||||||
|
serialNo: '',
|
||||||
|
messageLevel: '',
|
||||||
|
cyclingType: '',
|
||||||
|
taskType: '0',
|
||||||
|
cyclingDate: '',
|
||||||
|
broadcastDay: '',
|
||||||
|
startDate: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
checkList: []
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
mediaId: [
|
||||||
|
{ required: true, message: '请选择播发内容', trigger: 'change' }
|
||||||
|
],
|
||||||
|
serialNo: [
|
||||||
|
{ required: true, message: '请选择播放设备', trigger: 'change' }
|
||||||
|
],
|
||||||
|
messageLevel: [
|
||||||
|
{ required: true, message: '请选择播发级别', trigger: 'change' }
|
||||||
|
],
|
||||||
|
cyclingType: [
|
||||||
|
{ required: true, message: '请选择定时策略', trigger: 'change' }
|
||||||
|
],
|
||||||
|
taskType: [
|
||||||
|
{ required: true, message: '请选择播放方式', trigger: 'change' }
|
||||||
|
],
|
||||||
|
broadcastDay: [
|
||||||
|
{ required: true, message: '请输入播放天数', trigger: 'change' }
|
||||||
|
],
|
||||||
|
startDate: [
|
||||||
|
{ required: true, message: '请选择开始日期', trigger: 'change' }
|
||||||
|
],
|
||||||
|
startTime: [
|
||||||
|
{ required: true, validator: startTimePass, trigger: 'change' }
|
||||||
|
],
|
||||||
|
endTime: [
|
||||||
|
{ required: true, validator: endTimePass, trigger: 'change' }
|
||||||
|
],
|
||||||
|
checkList: [
|
||||||
|
{ required: true, message: '播放天数', trigger: 'change' }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
mediaList: [],
|
||||||
|
equipmentList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
|
||||||
|
isEdit() {
|
||||||
|
return !!this.params.id
|
||||||
|
},
|
||||||
|
newDate() {
|
||||||
|
var myDate = new Date();
|
||||||
|
var time = myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
|
||||||
|
return time
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.dict.load('dlbMessageUrgency', 'dlbBroadTaskType', 'dlbDyclingType').then(() => {
|
||||||
|
this.getEquipmentList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getMediaList() {
|
||||||
|
this.instance.post(`/app/appdlbresource/list?current=1&size=10000`).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.mediaList = []
|
||||||
|
if(res.data && res.data.records.length) {
|
||||||
|
res.data.records.map((item) => {
|
||||||
|
let info = {
|
||||||
|
dictName: item.name,
|
||||||
|
dictValue: item.id
|
||||||
|
}
|
||||||
|
this.mediaList.push(info)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(this.params.id) {
|
||||||
|
this.getDetail()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getEquipmentList() {
|
||||||
|
this.instance.post(`/app/appdlbquipment/getDlbDeviceList?current=1&size=10000&devStatus=5&keyword=`).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.equipmentList = []
|
||||||
|
if(res.data && res.data.records.length) {
|
||||||
|
res.data.records.map((item) => {
|
||||||
|
let info = {
|
||||||
|
dictName: item.deviceName,
|
||||||
|
dictValue: item.serialNo
|
||||||
|
}
|
||||||
|
this.equipmentList.push(info)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.getMediaList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
confirm() {
|
||||||
|
this.$refs['ruleForm'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if(this.formData.checkList.length) {
|
||||||
|
this.formData.cyclingDate = this.formData.checkList.join(',')
|
||||||
|
}
|
||||||
|
this.formData.coverageType = '4'
|
||||||
|
this.formData.id = ''
|
||||||
|
this.instance.post(`/app/appzyvideobroadcast/play`, {
|
||||||
|
...this.formData,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('提交成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.cancel(true)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getDetail() {
|
||||||
|
this.instance.post(`/app/appzyvideobroadcast/queryDetailById?id=${this.params.id}`).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.formData = {
|
||||||
|
...res.data,
|
||||||
|
checkList: []
|
||||||
|
}
|
||||||
|
this.formData.mediaId = String(this.formData.mediaId)
|
||||||
|
this.formData.cyclingType = String(this.formData.cyclingType)
|
||||||
|
if(this.formData.cyclingDate) {
|
||||||
|
this.formData.checkList = this.formData.cyclingDate.split(',')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
timeToSec(time) {
|
||||||
|
var s = "";
|
||||||
|
var hour = time.split(":")[0];
|
||||||
|
var min = time.split(":")[1];
|
||||||
|
var second = time.split(":")[2];
|
||||||
|
s = Number(hour * 3600) + Number(min * 60) + Number(second)
|
||||||
|
return s;
|
||||||
|
},
|
||||||
|
// 返回按钮
|
||||||
|
cancel(isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'list',
|
||||||
|
isRefresh: !!isRefresh,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Add {
|
||||||
|
height: 100%;
|
||||||
|
.ai-detail__title {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.ai-detail__content {
|
||||||
|
.ai-detail__content--wrapper {
|
||||||
|
.el-form {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 60px;
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
.el-form-item {
|
||||||
|
width: 48%;
|
||||||
|
}
|
||||||
|
.buildingTypes {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .mapDialog {
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.ai-dialog__content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-dialog__content--wrapper {
|
||||||
|
padding: 0 !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
width: 100%;
|
||||||
|
height: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchPlaceInput {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
top: 30px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchPlaceOutput {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
left: 25px;
|
||||||
|
height: initial;
|
||||||
|
top: 80px;
|
||||||
|
background: white;
|
||||||
|
z-index: 250;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.auto-item {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
156
project/shandong/apps/horn/AppBroadcast/components/List.vue
Normal file
156
project/shandong/apps/horn/AppBroadcast/components/List.vue
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppPetitionManage">
|
||||||
|
<ai-list>
|
||||||
|
<ai-title slot="title" title="播发记录" isShowBottomBorder/>
|
||||||
|
<template #content>
|
||||||
|
<ai-search-bar bottomBorder>
|
||||||
|
<template slot="left">
|
||||||
|
<ai-select v-model="search.messageType" placeholder="媒资类型" clearable
|
||||||
|
:selectList="$dict.getDict('dlbResourceType')"
|
||||||
|
@change=";(page.current = 1), getList()"></ai-select>
|
||||||
|
<ai-select v-model="search.messageUrgency" placeholder="级别" clearable
|
||||||
|
:selectList="$dict.getDict('dlbMessageUrgency')"
|
||||||
|
@change=";(page.current = 1), getList()"></ai-select>
|
||||||
|
</template>
|
||||||
|
<template slot="right">
|
||||||
|
<el-input v-model="search.messageName" size="small" placeholder="媒资名称" clearable
|
||||||
|
@keyup.enter.native=";(page.current = 1), getList()"
|
||||||
|
@clear=";(page.current = 1), (search.messageName = ''), getList()"
|
||||||
|
suffix-icon="iconfont iconSearch"/>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-search-bar class="ai-search-ba mar-t10">
|
||||||
|
<template slot="left">
|
||||||
|
<!-- <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button> -->
|
||||||
|
<!-- <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button> -->
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" :dict="dict"
|
||||||
|
:current.sync="page.current" :size.sync="page.size" @getList="getList"
|
||||||
|
@selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||||
|
<el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button type="text" @click="onAdd(row.broadcastId)">复制</el-button>
|
||||||
|
<el-button type="text" @click="cancel(row.broadcastId)"
|
||||||
|
v-if="row.broadcastStatus == 0 || row.broadcastStatus == 1 || row.broadcastStatus == 2">撤回
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
props: {
|
||||||
|
dict: Object,
|
||||||
|
instance: Function,
|
||||||
|
params: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isAdd: false,
|
||||||
|
page: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
search: {
|
||||||
|
messageName: '',
|
||||||
|
messageType: '',
|
||||||
|
messageUrgency: '',
|
||||||
|
},
|
||||||
|
id: '',
|
||||||
|
ids: [],
|
||||||
|
colConfigs: [
|
||||||
|
{prop: 'messageName', label: '媒资名称', width: 400},
|
||||||
|
{prop: 'messageType', label: '媒资类型', align: 'center', dict: "dlbResourceType"},
|
||||||
|
{prop: 'messageUrgency', label: '级别', align: 'center', dict: "dlbMessageUrgency"},
|
||||||
|
{prop: 'taskType', label: '播发方式', align: 'center', dict: "dlbBroadTaskType"},
|
||||||
|
{prop: 'startDate', label: '开始时间', align: 'center', width: 180},
|
||||||
|
{prop: 'broadcastStatus', label: '状态', align: 'center', dict: "dlbBroadcastStatus"},
|
||||||
|
{prop: 'areaName', label: '地区', align: 'center'},
|
||||||
|
{prop: 'createUserName', label: '创建人', align: 'center'},
|
||||||
|
{slot: 'options'},
|
||||||
|
],
|
||||||
|
tableData: [],
|
||||||
|
areaId: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
|
||||||
|
param() {
|
||||||
|
return {
|
||||||
|
...this.search,
|
||||||
|
areaId: this.user.info?.areaId,
|
||||||
|
ids: this.ids,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.areaId = this.user.info.areaId
|
||||||
|
this.dict.load('dlbResourceType', 'dlbMessageUrgency', 'dlbBroadTaskType', 'dlbBroadcastStatus', 'dlbMessageUrgency').then(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.instance.post(`/app/appzyvideobroadcast/getBroadcastRecords`, null, {
|
||||||
|
params: {
|
||||||
|
...this.page,
|
||||||
|
...this.search,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = parseInt(res.data.total)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onAdd(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'add',
|
||||||
|
params: {
|
||||||
|
id: id || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
cancel(id) {
|
||||||
|
this.$confirm('确定撤回该广播?').then(() => {
|
||||||
|
this.instance.post(`/app/appzyvideobroadcast/getBroadcastRecall?broadcastId=${id}`).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('撤回成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
removeAll() {
|
||||||
|
var id = this.ids.join(',')
|
||||||
|
this.remove(id)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppPetitionManage {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.mar-t10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppEquipmentManage">
|
||||||
|
<keep-alive :include="['List']">
|
||||||
|
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||||
|
</keep-alive>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import List from './components/List'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
label: '广播设备管理',
|
||||||
|
name: 'AppEquipmentManage',
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
component: 'List',
|
||||||
|
params: {},
|
||||||
|
include: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
List
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange(data) {
|
||||||
|
if (data.type === 'add') {
|
||||||
|
this.component = 'Add'
|
||||||
|
this.params = data.params
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type == 'list') {
|
||||||
|
this.component = 'List'
|
||||||
|
this.params = data.params
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (data.isRefresh) {
|
||||||
|
this.$refs.component.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.AppEquipmentManage {
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f6f9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppPetitionManage">
|
||||||
|
<ai-list>
|
||||||
|
<ai-title slot="title" title="广播设备管理" isShowBottomBorder/>
|
||||||
|
<template #content>
|
||||||
|
<ai-search-bar bottomBorder>
|
||||||
|
<template slot="right">
|
||||||
|
<el-input v-model="search.keyword" size="small" placeholder="设备名称/设备编号" clearable
|
||||||
|
@keyup.enter.native=";(page.current = 1), getList()"
|
||||||
|
@clear=";(page.current = 1), (search.keyword = ''), getList()" suffix-icon="iconfont iconSearch"/>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-search-bar class="ai-search-ba mar-t10">
|
||||||
|
<template slot="left">
|
||||||
|
<!-- <el-button icon="iconfont" type="primary" size="small">数据同步</el-button> -->
|
||||||
|
<!-- <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button> -->
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
|
||||||
|
:current.sync="page.current" :size.sync="page.size" @getList="getList"
|
||||||
|
@selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||||
|
<el-table-column slot="options" label="操作" align="center" width="280" fixed="right">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button type="text" @click="close(row.id)">停播</el-button>
|
||||||
|
<el-button type="text" @click="bind(row)">绑定行政区划</el-button>
|
||||||
|
<el-button type="text" @click="locate=true">地图标绘</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
<el-dialog
|
||||||
|
title="绑定行政区划"
|
||||||
|
:visible.sync="bindVisible"
|
||||||
|
width="800px">
|
||||||
|
<ai-area-get :instance="instance" v-model="areaId" :root="user.info.areaId" @select="handleAreaSelect"/>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="bindVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="bindArea">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
<locate-dialog v-model="locate" :ins="instance" @confirm="bindLocate"/>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
import LocateDialog from "../../../monitor/components/locateDialog";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
components: {LocateDialog},
|
||||||
|
props: {
|
||||||
|
dict: Object,
|
||||||
|
instance: Function,
|
||||||
|
params: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isAdd: false,
|
||||||
|
page: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
search: {
|
||||||
|
bind: '',
|
||||||
|
keyword: '',
|
||||||
|
},
|
||||||
|
id: '',
|
||||||
|
ids: [],
|
||||||
|
colConfigs: [
|
||||||
|
{
|
||||||
|
prop: 'deviceName',
|
||||||
|
label: '设备名称',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'areaName',
|
||||||
|
label: '所属行政区划',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'serialNo',
|
||||||
|
label: '设备编号',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'devStatus',
|
||||||
|
label: '设备状态',
|
||||||
|
width: '100',
|
||||||
|
align: 'center',
|
||||||
|
render: (h, {row}) => {
|
||||||
|
return h('span', null, this.dict.getLabel('dlbDevStatus', row.devStatus))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'bind',
|
||||||
|
label: '是否绑定区划',
|
||||||
|
width: '120',
|
||||||
|
align: 'center',
|
||||||
|
render: (h, {row}) => {
|
||||||
|
return h('span', null, this.dict.getLabel('yesOrNo', row.bind))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slot: 'options',
|
||||||
|
label: '操作',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData: [],
|
||||||
|
areaId: '',
|
||||||
|
bindVisible: false,
|
||||||
|
changeInfo: {},
|
||||||
|
locate: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
this.dict.load('dlbDevStatus', 'yesOrNo').then(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
bind(item) {
|
||||||
|
this.areaId = ''
|
||||||
|
this.changeInfo = item
|
||||||
|
this.bindVisible = true
|
||||||
|
},
|
||||||
|
handleAreaSelect(v) {
|
||||||
|
this.changeInfo.areaName = v?.[0]?.label
|
||||||
|
},
|
||||||
|
bindArea() {
|
||||||
|
if (!this.areaId) {
|
||||||
|
return this.$message.error('请先选择行政区划')
|
||||||
|
}
|
||||||
|
this.changeInfo.areaId = this.areaId
|
||||||
|
this.instance.post(`/app/appdlbquipment/addOrUpdate`, this.changeInfo).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('绑定行政区划成功！')
|
||||||
|
this.bindVisible = false
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
bindLocate(locate) {
|
||||||
|
if (locate) {
|
||||||
|
let {lat, lng} = locate.location, {changeInfo} = this
|
||||||
|
this.instance.post("/app/appdlbquipment/addOrUpdate", {
|
||||||
|
...changeInfo, lat, lng
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.$message.success("地图标绘成功!")
|
||||||
|
this.locate = true
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
close(id) {
|
||||||
|
this.$confirm('确定停播该设备?').then(() => {
|
||||||
|
this.instance.post(`/app/appdlbquipment/stop?deviceId=${id}`).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('停播成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.instance.post(`/app/appdlbquipment/getDlbDeviceList`, null, {
|
||||||
|
params: {
|
||||||
|
...this.page,
|
||||||
|
...this.search,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = parseInt(res.data.total)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppPetitionManage {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.mar-t10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
67
project/shandong/apps/horn/AppMediaManage/AppMediaManage.vue
Normal file
67
project/shandong/apps/horn/AppMediaManage/AppMediaManage.vue
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppMediaManage">
|
||||||
|
<keep-alive :include="['List']">
|
||||||
|
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||||
|
</keep-alive>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import List from './components/List'
|
||||||
|
import Add from './components/Add'
|
||||||
|
import Play from './components/Play'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
label: '媒资管理',
|
||||||
|
name: 'AppMediaManage',
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
component: 'List',
|
||||||
|
params: {},
|
||||||
|
include: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
Add,
|
||||||
|
List,
|
||||||
|
Play
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange(data) {
|
||||||
|
if (data.type === 'add') {
|
||||||
|
this.component = 'Add'
|
||||||
|
this.params = data.params
|
||||||
|
}
|
||||||
|
if (data.type === 'Play') {
|
||||||
|
this.component = 'Play'
|
||||||
|
this.params = data.params
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type == 'list') {
|
||||||
|
this.component = 'List'
|
||||||
|
this.params = data.params
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (data.isRefresh) {
|
||||||
|
this.$refs.component.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.AppMediaManage {
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f6f9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
189
project/shandong/apps/horn/AppMediaManage/components/Add.vue
Normal file
189
project/shandong/apps/horn/AppMediaManage/components/Add.vue
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
<template>
|
||||||
|
<section style="height: 100%">
|
||||||
|
<ai-detail class="Add">
|
||||||
|
<!-- 返回按钮 -->
|
||||||
|
<template #title>
|
||||||
|
<ai-title title="添加媒资信息" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
|
||||||
|
<ai-bar title="基础信息"></ai-bar>
|
||||||
|
<div class="flex">
|
||||||
|
<el-form-item label="媒资类型" prop="type" class="buildingTypes">
|
||||||
|
<el-radio-group v-model="formData.type">
|
||||||
|
<el-radio label='1'>音频广播</el-radio>
|
||||||
|
<el-radio label='3'>文本广播</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="媒资名称" prop="name" class="buildingTypes">
|
||||||
|
<el-input size="small" v-model="formData.name" placeholder="请输入" maxlength="30" show-word-limit></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文本内容" prop="content" class="buildingTypes" v-if="formData.type == 3">
|
||||||
|
<el-input size="small" type="textarea" :rows="2" v-model="formData.content" placeholder="请输入" maxlength="12000" show-word-limit></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="上传音频" prop="file" class="buildingTypes" v-if="formData.type == 1">
|
||||||
|
<ai-uploader
|
||||||
|
:isShowTip="true"
|
||||||
|
:instance="instance"
|
||||||
|
v-model="formData.file"
|
||||||
|
fileType="file"
|
||||||
|
acceptType=".mp3"
|
||||||
|
:limit="1">
|
||||||
|
<template slot="tips">最多上传1个附件,单个文件最大10MB<br/>支持.mp3格式
|
||||||
|
</template>
|
||||||
|
</ai-uploader>
|
||||||
|
<ai-audio :src="formData.file[0].url" style="width: 40px;height: 40px;margin-top:20px;" v-if="formData.file.length"></ai-audio>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="cancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirm()">提交</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Add',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
dict: Object,
|
||||||
|
params: Object,
|
||||||
|
instance: Function,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: {
|
||||||
|
type: '1',
|
||||||
|
name: '',
|
||||||
|
content: '',
|
||||||
|
file: [],
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入媒资名称', trigger: 'change' }
|
||||||
|
],
|
||||||
|
content: [
|
||||||
|
{ required: true, message: '请输入文本内容', trigger: 'change' }
|
||||||
|
],
|
||||||
|
file: [
|
||||||
|
{ required: true, message: '请上传音频', trigger: 'change' }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.instance.defaults.timeout = 6000000
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
confirm() {
|
||||||
|
this.$refs['ruleForm'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if(this.formData.file.length) {
|
||||||
|
this.formData.url = this.formData.file[0].url
|
||||||
|
}
|
||||||
|
this.instance.post(`/app/appdlbresource/addResource`, {...this.formData}).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('提交成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.cancel(true)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 返回按钮
|
||||||
|
cancel(isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'list',
|
||||||
|
isRefresh: !!isRefresh,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Add {
|
||||||
|
height: 100%;
|
||||||
|
.ai-detail__title {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.ai-detail__content {
|
||||||
|
.ai-detail__content--wrapper {
|
||||||
|
.el-form {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 60px;
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
.el-form-item {
|
||||||
|
width: 48%;
|
||||||
|
}
|
||||||
|
.buildingTypes {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .mapDialog {
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.ai-dialog__content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-dialog__content--wrapper {
|
||||||
|
padding: 0 !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
width: 100%;
|
||||||
|
height: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchPlaceInput {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
top: 30px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchPlaceOutput {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
left: 25px;
|
||||||
|
height: initial;
|
||||||
|
top: 80px;
|
||||||
|
background: white;
|
||||||
|
z-index: 250;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.auto-item {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
188
project/shandong/apps/horn/AppMediaManage/components/List.vue
Normal file
188
project/shandong/apps/horn/AppMediaManage/components/List.vue
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppPetitionManage">
|
||||||
|
<ai-list>
|
||||||
|
<ai-title slot="title" title="媒资管理" isShowBottomBorder/>
|
||||||
|
<template #content>
|
||||||
|
<ai-search-bar bottomBorder>
|
||||||
|
<template slot="left">
|
||||||
|
<ai-select v-model="search.type" placeholder="媒资类型" clearable :selectList="$dict.getDict('dlbResourceType')"
|
||||||
|
@change=";(page.current = 1), getList()"></ai-select>
|
||||||
|
</template>
|
||||||
|
<template slot="right">
|
||||||
|
<el-input v-model="search.name" size="small" placeholder="媒资名称" clearable
|
||||||
|
@keyup.enter.native=";(page.current = 1), getList()"
|
||||||
|
@clear=";(page.current = 1), (search.name = ''), getList()" suffix-icon="iconfont iconSearch"/>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-search-bar class="ai-search-ba mar-t10">
|
||||||
|
<template slot="left">
|
||||||
|
<el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button>
|
||||||
|
<el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
|
||||||
|
:current.sync="page.current" :size.sync="page.size" @getList="getList"
|
||||||
|
@selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||||
|
<el-table-column slot="content" label="内容" width="200" show-overflow-tooltip>
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<span type="text" v-if="row.type == 3">{{ row.content }}</span>
|
||||||
|
<ai-audio v-else-if="row.type == 1 && row.url" :src="row.url" skin="flat"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
|
||||||
|
<div class="table-options" slot-scope="{ row }">
|
||||||
|
<el-button type="text" @click="play(row.id)">播发</el-button>
|
||||||
|
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
props: {
|
||||||
|
dict: Object,
|
||||||
|
instance: Function,
|
||||||
|
params: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isAdd: false,
|
||||||
|
page: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
search: {
|
||||||
|
type: '',
|
||||||
|
name: '',
|
||||||
|
},
|
||||||
|
id: '',
|
||||||
|
ids: [],
|
||||||
|
colConfigs: [
|
||||||
|
{type: 'selection', width: 100, align: 'center'},
|
||||||
|
{
|
||||||
|
prop: 'name',
|
||||||
|
label: '媒资名称',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'type',
|
||||||
|
label: '媒资类型',
|
||||||
|
width: '100',
|
||||||
|
align: 'center',
|
||||||
|
render: (h, {row}) => {
|
||||||
|
return h('span', null, this.dict.getLabel('dlbResourceType', row.type))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slot: 'content',
|
||||||
|
},
|
||||||
|
{prop: 'createTime', label: '创建时间', align: 'center'},
|
||||||
|
{
|
||||||
|
prop: 'createUserName',
|
||||||
|
label: '创建人',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
// { prop: 'liveBuildingArea', label: '状态', align: 'center',width: 120 },
|
||||||
|
// { prop: 'liveBuildingArea', label: '发布次数', align: 'center',width: 120 },
|
||||||
|
{
|
||||||
|
slot: 'options',
|
||||||
|
label: '操作',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData: [],
|
||||||
|
areaId: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
param() {
|
||||||
|
return {
|
||||||
|
...this.search,
|
||||||
|
areaId: this.user.info?.areaId,
|
||||||
|
ids: this.ids,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.dict.load('dlbResourceType').then(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.instance
|
||||||
|
.post(`/app/appdlbresource/list`, null, {
|
||||||
|
params: {
|
||||||
|
...this.page,
|
||||||
|
...this.search,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
play (id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Play',
|
||||||
|
params: {
|
||||||
|
id: id || ''
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加
|
||||||
|
onAdd(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'add',
|
||||||
|
params: {
|
||||||
|
id: id || '',
|
||||||
|
areaId: this.areaId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
remove(id) {
|
||||||
|
this.$confirm('确定删除该数据?').then(() => {
|
||||||
|
this.instance.post(`/app/appdlbresource/delete?id=${id}`).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
removeAll() {
|
||||||
|
var id = this.ids.join(',')
|
||||||
|
this.remove(id)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppPetitionManage {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.mar-t10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
254
project/shandong/apps/horn/AppMediaManage/components/Play.vue
Normal file
254
project/shandong/apps/horn/AppMediaManage/components/Play.vue
Normal file
@@ -0,0 +1,254 @@
|
|||||||
|
<template>
|
||||||
|
<ai-detail>
|
||||||
|
<template #title>
|
||||||
|
<ai-title title="添加广播" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<ai-card title="基础信息">
|
||||||
|
<template #content>
|
||||||
|
<el-form class="ai-form" :model="formData" :rules="formRules" ref="ruleForm" label-width="120px">
|
||||||
|
<el-form-item label="播发内容" prop="mediaId">
|
||||||
|
<ai-select v-model="formData.mediaId" placeholder="播发内容" clearable :selectList="mediaList"></ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播放设备" prop="serialNo">
|
||||||
|
<ai-select v-model="formData.serialNo" placeholder="播放设备" clearable
|
||||||
|
:selectList="equipmentList"></ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播发级别" prop="messageLevel">
|
||||||
|
<ai-select v-model="formData.messageLevel" placeholder="播发级别" clearable
|
||||||
|
:selectList="$dict.getDict('dlbMessageUrgency')"></ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播放方式" prop="taskType" class="buildingTypes">
|
||||||
|
<el-radio-group v-model="formData.taskType">
|
||||||
|
<el-radio label="0">立即播放</el-radio>
|
||||||
|
<el-radio label="1">定时播放</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="定时策略" prop="cyclingType" v-if="formData.taskType != 0">
|
||||||
|
<ai-select v-model="formData.cyclingType" placeholder="定时策略" clearable
|
||||||
|
:selectList="$dict.getDict('dlbDyclingType')"></ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播放天数" prop="checkList" class="buildingTypes"
|
||||||
|
v-if="formData.taskType != 0 && formData.cyclingType == 2">
|
||||||
|
<el-checkbox-group v-model="formData.checkList">
|
||||||
|
<el-checkbox label="1">每周一</el-checkbox>
|
||||||
|
<el-checkbox label="2">每周二</el-checkbox>
|
||||||
|
<el-checkbox label="3">每周三</el-checkbox>
|
||||||
|
<el-checkbox label="4">每周四</el-checkbox>
|
||||||
|
<el-checkbox label="5">每周五</el-checkbox>
|
||||||
|
<el-checkbox label="6">每周六</el-checkbox>
|
||||||
|
<el-checkbox label="7">每周日</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="播放天数" prop="broadcastDay" v-if="formData.taskType != 0 && formData.cyclingType == 3">
|
||||||
|
<el-input v-model="formData.broadcastDay" placeholder="播放天数" clearable size="small"
|
||||||
|
maxlength="4"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="开始日期" prop="startDate" v-if="formData.taskType != 0">
|
||||||
|
<el-date-picker v-model="formData.startDate" type="date" placeholder="选择日期" size="small"
|
||||||
|
value-format="yyyy-MM-dd"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="开始时间" prop="startTime" v-if="formData.taskType != 0">
|
||||||
|
<el-time-picker v-model="formData.startTime" placeholder="开始时间" size="small"
|
||||||
|
:picker-options="{ start: newDate, minTime: newDate}"
|
||||||
|
value-format="HH:mm:ss"></el-time-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="结束时间" prop="endTime" v-if="formData.taskType != 0">
|
||||||
|
<el-time-picker v-model="formData.endTime" placeholder="结束时间" size="small"
|
||||||
|
:picker-options="{ start: formData.startTime, minTime: formData.startTime}"
|
||||||
|
value-format="HH:mm:ss"></el-time-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="cancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirm()">提交</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Add',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
dict: Object,
|
||||||
|
params: Object,
|
||||||
|
instance: Function,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
let startTimePass = (rule, value, callback) => {
|
||||||
|
if (value) {
|
||||||
|
var myDate = new Date();
|
||||||
|
var time = myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
|
||||||
|
if (this.timeToSec(value) - this.timeToSec(time) > 0) {
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
callback(new Error('开始时间要大于当前时间'));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
callback(new Error('请选择开始时间'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
let endTimePass = (rule, value, callback) => {
|
||||||
|
if (value) {
|
||||||
|
if (this.timeToSec(value) - this.timeToSec(this.formData.startTime) > 0) {
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
callback(new Error('结束时间要大于开始时间'));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
callback(new Error('请选择结束时间'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
formData: {
|
||||||
|
mediaId: '',
|
||||||
|
serialNo: '',
|
||||||
|
messageLevel: '',
|
||||||
|
cyclingType: '',
|
||||||
|
taskType: '0',
|
||||||
|
cyclingDate: '',
|
||||||
|
broadcastDay: '',
|
||||||
|
startDate: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
checkList: []
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
mediaId: [
|
||||||
|
{required: true, message: '请选择播发内容', trigger: 'change'}
|
||||||
|
],
|
||||||
|
serialNo: [
|
||||||
|
{required: true, message: '请选择播放设备', trigger: 'change'}
|
||||||
|
],
|
||||||
|
messageLevel: [
|
||||||
|
{required: true, message: '请选择播发级别', trigger: 'change'}
|
||||||
|
],
|
||||||
|
cyclingType: [
|
||||||
|
{required: true, message: '请选择定时策略', trigger: 'change'}
|
||||||
|
],
|
||||||
|
taskType: [
|
||||||
|
{required: true, message: '请选择播放方式', trigger: 'change'}
|
||||||
|
],
|
||||||
|
broadcastDay: [
|
||||||
|
{required: true, message: '请输入播放天数', trigger: 'change'}
|
||||||
|
],
|
||||||
|
startDate: [
|
||||||
|
{required: true, message: '请选择开始日期', trigger: 'change'}
|
||||||
|
],
|
||||||
|
startTime: [
|
||||||
|
{required: true, validator: startTimePass, trigger: 'change'}
|
||||||
|
],
|
||||||
|
endTime: [
|
||||||
|
{required: true, validator: endTimePass, trigger: 'change'}
|
||||||
|
],
|
||||||
|
checkList: [
|
||||||
|
{required: true, message: '播放天数', trigger: 'change'}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
mediaList: [],
|
||||||
|
equipmentList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
|
||||||
|
isEdit() {
|
||||||
|
return !!this.params.id
|
||||||
|
},
|
||||||
|
newDate() {
|
||||||
|
var myDate = new Date();
|
||||||
|
return myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.dict.load('dlbMessageUrgency', 'dlbBroadTaskType', 'dlbDyclingType')
|
||||||
|
Promise.all([this.getEquipmentList(), this.getMediaList()]).then(() => {
|
||||||
|
this.formData.mediaId = this.params.id
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getMediaList() {
|
||||||
|
return this.instance.post(`/app/appdlbresource/list?current=1&size=10000`).then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.mediaList = res.data.records?.map((item) => ({
|
||||||
|
dictName: item.name,
|
||||||
|
dictValue: item.id
|
||||||
|
})) || []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getEquipmentList() {
|
||||||
|
return this.instance.post(`/app/appdlbquipment/getDlbDeviceList?current=1&size=10000&devStatus=5`).then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.equipmentList = res.data.records?.map((item) => ({
|
||||||
|
dictName: item.deviceName,
|
||||||
|
dictValue: item.serialNo
|
||||||
|
})) || []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
confirm() {
|
||||||
|
this.$refs['ruleForm'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.formData.checkList.length) {
|
||||||
|
this.formData.cyclingDate = this.formData.checkList.join(',')
|
||||||
|
}
|
||||||
|
this.formData.coverageType = '4'
|
||||||
|
this.formData.id = ''
|
||||||
|
this.instance.post(`/app/appzyvideobroadcast/play`, {
|
||||||
|
...this.formData,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('提交成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.cancel(true)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getDetail() {
|
||||||
|
this.instance.post(`/app/appzyvideobroadcast/queryDetailById?id=${this.params.id}`).then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.formData = {
|
||||||
|
...res.data,
|
||||||
|
checkList: []
|
||||||
|
}
|
||||||
|
this.formData.mediaId = String(this.formData.mediaId)
|
||||||
|
this.formData.cyclingType = String(this.formData.cyclingType)
|
||||||
|
if (this.formData.cyclingDate) {
|
||||||
|
this.formData.checkList = this.formData.cyclingDate.split(',')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
timeToSec(time) {
|
||||||
|
var s = "";
|
||||||
|
var hour = time.split(":")[0];
|
||||||
|
var min = time.split(":")[1];
|
||||||
|
var second = time.split(":")[2];
|
||||||
|
s = Number(hour * 3600) + Number(min * 60) + Number(second)
|
||||||
|
return s;
|
||||||
|
},
|
||||||
|
// 返回按钮
|
||||||
|
cancel(isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'list',
|
||||||
|
isRefresh: !!isRefresh,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppMonitorDevice">
|
||||||
|
<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
|
||||||
|
@change="page.current=1,getTableData()" size="small"/>
|
||||||
|
<el-button type="primary" icon="iconfont iconSearch" @click="page.current=1,getTableData()">查询</el-button>
|
||||||
|
<el-button icon="iconfont iconResetting" @click="search={},page.current=1,getTableData()">重置</el-button>
|
||||||
|
</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: "AppMonitorDevice",
|
||||||
|
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>
|
||||||
|
.AppMonitorDevice {
|
||||||
|
::v-deep .AiSearchBar {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,284 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppMonitorManage">
|
||||||
|
<device-slider :show.sync="slider" :ins="instance" :dict="dict" @select="handleSelectMonitor"
|
||||||
|
:render-item="renderTreeItem" ref="DeviceSlider"/>
|
||||||
|
<div class="monitorPane">
|
||||||
|
<div class="headerBar">
|
||||||
|
<el-select default-first-option size="small" v-model="splitScreen">
|
||||||
|
<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="i" :style="currentSplitStyle">
|
||||||
|
<iframe :src="m.url" allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency
|
||||||
|
allowusermedia frameBorder="no"/>
|
||||||
|
</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" @confirm="v=>handleLocate(selected,v)"/>
|
||||||
|
<ai-area custom-clicker :input-clicker="false" v-model="selected.areaId" :instance="instance" ref="BindArea"
|
||||||
|
@change="handleSubmit(selected)"/>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DeviceSlider from "../components/deviceSlider";
|
||||||
|
import LocateDialog from "../components/locateDialog";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AppMonitorManage",
|
||||||
|
components: {LocateDialog, DeviceSlider},
|
||||||
|
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}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
slider: true,
|
||||||
|
fullscreen: false,
|
||||||
|
splitScreen: 1,
|
||||||
|
monitors: [],
|
||||||
|
dialog: false,
|
||||||
|
locate: false,
|
||||||
|
selected: {},
|
||||||
|
rules: {
|
||||||
|
name: [{required: true, message: "请填写 设备名称"}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
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})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
<el-dropdown class="menuBtn" onCommand={e => this.handleSliderOption(e, data)}>
|
||||||
|
<i class="iconfont iconMore"/>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item command="edit">修改名称</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="area">行政地区</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="locate">地图标绘</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</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(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()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
.AppMonitorManage {
|
||||||
|
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 {
|
||||||
|
background: #000;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
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
project/shandong/apps/monitor/AppMonitorMap/AppMonitorMap.vue
Normal file
211
project/shandong/apps/monitor/AppMonitorMap/AppMonitorMap.vue
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppMonitorMap">
|
||||||
|
<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: "AppMonitorMap",
|
||||||
|
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>
|
||||||
|
.AppMonitorMap {
|
||||||
|
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>
|
||||||
233
project/shandong/apps/monitor/components/deviceSlider.vue
Normal file
233
project/shandong/apps/monitor/components/deviceSlider.vue
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
<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="设备名称" prefix-icon="el-icon-search"
|
||||||
|
@change="handleTreeFilter" clearable/>
|
||||||
|
</div>
|
||||||
|
<div title>设备列表</div>
|
||||||
|
<div fill class="deviceList">
|
||||||
|
<el-scrollbar>
|
||||||
|
<el-tree ref="deviceTree" :data="treeData" :props="propsConfig" @node-click="handleNodeClick"
|
||||||
|
:render-content="renderItem" :filter-node-method="handleFilter"/>
|
||||||
|
</el-scrollbar>
|
||||||
|
</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,
|
||||||
|
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: '',
|
||||||
|
search: {
|
||||||
|
bind: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleShow() {
|
||||||
|
this.$emit('update:show', !this.show)
|
||||||
|
},
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleNodeClick(data) {
|
||||||
|
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(v) {
|
||||||
|
this.$refs.deviceTree?.filter(v)
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange () {
|
||||||
|
this.$refs.deviceTree?.filter(this.search.name)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.dict.load("deviceStatus")
|
||||||
|
this.getDevices()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.deviceSlider {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
div[flex] {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
176
project/shandong/apps/monitor/components/locateDialog.vue
Normal file
176
project/shandong/apps/monitor/components/locateDialog.vue
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<section class="locateDialog">
|
||||||
|
<ai-dialog :visible.sync="dialog" title="标绘" @closed="$emit('visible',false),selected={}"
|
||||||
|
@opened="$nextTick(()=>initMap())"
|
||||||
|
@onConfirm="handleConfirm">
|
||||||
|
<div id="amap" v-if="dialog"/>
|
||||||
|
<div class="poi">
|
||||||
|
<el-input ref="poiInput" v-model="search" size="small" clearable @change="handleSearch" placeholder="请输入地点"/>
|
||||||
|
</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 AMapLoader from '@amap/amap-jsapi-loader'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "locateDialog",
|
||||||
|
model: {
|
||||||
|
prop: "visible",
|
||||||
|
event: "visible",
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
visible: Boolean
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialog: false,
|
||||||
|
search: "",
|
||||||
|
poi: null,
|
||||||
|
map: null,
|
||||||
|
AMap: null,
|
||||||
|
selected: {},
|
||||||
|
geo: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
visible(v) {
|
||||||
|
this.dialog = v
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMap() {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: "b553334ba34f7ac3cd09df9bc8b539dc",
|
||||||
|
version: '2.0',
|
||||||
|
plugins: ['AMap.PlaceSearch', 'AMap.Marker', 'AMap.Geolocation'],
|
||||||
|
}).then(AMap => {
|
||||||
|
this.AMap = AMap
|
||||||
|
this.map = new AMap.Map('amap', {
|
||||||
|
zoom: 14,
|
||||||
|
}).on('click', res => {
|
||||||
|
this.map.clearMap()
|
||||||
|
this.selected = {location: res.lnglat}
|
||||||
|
this.poi?.searchNearBy('', res.lnglat, 100)
|
||||||
|
});
|
||||||
|
this.poi = new AMap.PlaceSearch().on('complete', ({poiList}) => {
|
||||||
|
this.map.clearMap()
|
||||||
|
if (poiList?.length > 0) {
|
||||||
|
poiList?.pois?.map(e => {
|
||||||
|
let marker = new AMap.Marker({
|
||||||
|
position: e.location,
|
||||||
|
}).on('click', () => this.selected = e)
|
||||||
|
this.map.add(marker)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
let marker = new AMap.Marker({
|
||||||
|
position: this.selected.location,
|
||||||
|
})
|
||||||
|
this.map.add(marker)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.geo = new AMap.Geolocation({
|
||||||
|
enableHighAccuracy: true,//是否使用高精度定位
|
||||||
|
zoomToAccuracy: true//定位成功后是否自动调整地图视野到定位点
|
||||||
|
})
|
||||||
|
this.map.addControl(this.geo)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleSearch(v) {
|
||||||
|
if (v) {
|
||||||
|
this.poi.searchNearBy(v, this.map.getCenter(), 50000)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleConfirm() {
|
||||||
|
if (this.selected?.location) {
|
||||||
|
this.$emit('confirm', this.selected)
|
||||||
|
} else {
|
||||||
|
this.$message.error('请先选择坐标位置')
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.dialog = this.visible
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.locateDialog {
|
||||||
|
::v-deep .el-dialog__body {
|
||||||
|
padding: 0;
|
||||||
|
height: 480px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.ai-dialog__content--wrapper {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#amap {
|
||||||
|
width: 100%;
|
||||||
|
height: 480px;
|
||||||
|
|
||||||
|
.amap-logo, .amap-copyright {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amap-marker-label {
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: 1px 1px 0 0 rgba(#999, .2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.poi {
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 10px;
|
||||||
|
display: flex;
|
||||||
|
height: 32px;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
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
project/shandong/apps/monitor/components/settingDialog.vue
Normal file
91
project/shandong/apps/monitor/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>
|
||||||
@@ -65,10 +65,10 @@ module.exports = {
|
|||||||
//设置代理,可解决跨5
|
//设置代理,可解决跨5
|
||||||
'/lan': {
|
'/lan': {
|
||||||
// target: "https://gsgate.cunwuyun.cn/",
|
// target: "https://gsgate.cunwuyun.cn/",
|
||||||
// target: 'http://192.168.1.87:9000/',
|
target: 'http://192.168.1.87:9000/',
|
||||||
// target: "http://192.168.1.113:9998/",
|
// target: "http://192.168.1.113:9998/",
|
||||||
// target: "http://192.168.1.245:9000/",
|
// target: "http://192.168.1.245:9000/",
|
||||||
target: "http://192.168.1.34:19898",
|
// target: "http://192.168.1.34:19898",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
//地址重写
|
//地址重写
|
||||||
|
|||||||
Reference in New Issue
Block a user