diff --git a/examples/entries.js b/examples/entries.js
index e728db8c..2a92d843 100644
--- a/examples/entries.js
+++ b/examples/entries.js
@@ -2,7 +2,7 @@
 const install = function(Vue) {
 	if (install.installed) return Promise.resolve();
 	else {
-		let contexts = require.context('../project/sass/apps', true, /(\/.+)\/App[^\/]+\.vue$/);
+		let contexts = require.context('../project/shandong/apps', true, /(\/.+)\/App[^\/]+\.vue$/);
 		if (contexts) {
 			contexts.keys().map((e) => {
 				if (contexts(e).default) {
diff --git a/project/shandong/apps/AppGridBlock/AppGridBlock.vue b/project/shandong/apps/grid/AppGridBlock/AppGridBlock.vue
similarity index 97%
rename from project/shandong/apps/AppGridBlock/AppGridBlock.vue
rename to project/shandong/apps/grid/AppGridBlock/AppGridBlock.vue
index be98134d..19c80e2c 100644
--- a/project/shandong/apps/AppGridBlock/AppGridBlock.vue
+++ b/project/shandong/apps/grid/AppGridBlock/AppGridBlock.vue
@@ -20,7 +20,7 @@ import Add from "./components/add";
 
 export default {
   name: "AppGridBlock",
-  label: "网格区块",
+  label: "网格区块--山东",
 
   props: {
     instance: Function,
diff --git a/project/shandong/apps/AppGridBlock/components/add.vue b/project/shandong/apps/grid/AppGridBlock/components/add.vue
similarity index 100%
rename from project/shandong/apps/AppGridBlock/components/add.vue
rename to project/shandong/apps/grid/AppGridBlock/components/add.vue
diff --git a/project/shandong/apps/AppGridBlock/components/list.vue b/project/shandong/apps/grid/AppGridBlock/components/list.vue
similarity index 100%
rename from project/shandong/apps/AppGridBlock/components/list.vue
rename to project/shandong/apps/grid/AppGridBlock/components/list.vue
diff --git a/project/shandong/apps/AppGridBlock/index.js b/project/shandong/apps/grid/AppGridBlock/index.js
similarity index 100%
rename from project/shandong/apps/AppGridBlock/index.js
rename to project/shandong/apps/grid/AppGridBlock/index.js
diff --git a/project/shandong/apps/AppGridMap/AppGridMap.vue b/project/shandong/apps/grid/AppGridMap/AppGridMap.vue
similarity index 100%
rename from project/shandong/apps/AppGridMap/AppGridMap.vue
rename to project/shandong/apps/grid/AppGridMap/AppGridMap.vue
diff --git a/project/shandong/apps/AppGridMap/components/list.vue b/project/shandong/apps/grid/AppGridMap/components/list.vue
similarity index 100%
rename from project/shandong/apps/AppGridMap/components/list.vue
rename to project/shandong/apps/grid/AppGridMap/components/list.vue
diff --git a/project/shandong/apps/AppGridMember/AppGridMember.vue b/project/shandong/apps/grid/AppGridMember/AppGridMember.vue
similarity index 100%
rename from project/shandong/apps/AppGridMember/AppGridMember.vue
rename to project/shandong/apps/grid/AppGridMember/AppGridMember.vue
diff --git a/project/shandong/apps/AppGridMember/components/Family.vue b/project/shandong/apps/grid/AppGridMember/components/Family.vue
similarity index 100%
rename from project/shandong/apps/AppGridMember/components/Family.vue
rename to project/shandong/apps/grid/AppGridMember/components/Family.vue
diff --git a/project/shandong/apps/AppGridMember/components/add.vue b/project/shandong/apps/grid/AppGridMember/components/add.vue
similarity index 100%
rename from project/shandong/apps/AppGridMember/components/add.vue
rename to project/shandong/apps/grid/AppGridMember/components/add.vue
diff --git a/project/shandong/apps/AppGridMember/components/list.vue b/project/shandong/apps/grid/AppGridMember/components/list.vue
similarity index 100%
rename from project/shandong/apps/AppGridMember/components/list.vue
rename to project/shandong/apps/grid/AppGridMember/components/list.vue
diff --git a/project/shandong/apps/horn/AppBroadcast/AppBroadcast.vue b/project/shandong/apps/horn/AppBroadcast/AppBroadcast.vue
new file mode 100644
index 00000000..151f99d3
--- /dev/null
+++ b/project/shandong/apps/horn/AppBroadcast/AppBroadcast.vue
@@ -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>
diff --git a/project/shandong/apps/horn/AppBroadcast/components/Add.vue b/project/shandong/apps/horn/AppBroadcast/components/Add.vue
new file mode 100644
index 00000000..d6dcfdba
--- /dev/null
+++ b/project/shandong/apps/horn/AppBroadcast/components/Add.vue
@@ -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>
diff --git a/project/shandong/apps/horn/AppBroadcast/components/List.vue b/project/shandong/apps/horn/AppBroadcast/components/List.vue
new file mode 100644
index 00000000..3ca46b6a
--- /dev/null
+++ b/project/shandong/apps/horn/AppBroadcast/components/List.vue
@@ -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>
diff --git a/project/shandong/apps/horn/AppEquipmentManage/AppEquipmentManage.vue b/project/shandong/apps/horn/AppEquipmentManage/AppEquipmentManage.vue
new file mode 100644
index 00000000..fb34f2a6
--- /dev/null
+++ b/project/shandong/apps/horn/AppEquipmentManage/AppEquipmentManage.vue
@@ -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>
diff --git a/project/shandong/apps/horn/AppEquipmentManage/components/List.vue b/project/shandong/apps/horn/AppEquipmentManage/components/List.vue
new file mode 100644
index 00000000..7868bec9
--- /dev/null
+++ b/project/shandong/apps/horn/AppEquipmentManage/components/List.vue
@@ -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>
diff --git a/project/shandong/apps/horn/AppMediaManage/AppMediaManage.vue b/project/shandong/apps/horn/AppMediaManage/AppMediaManage.vue
new file mode 100644
index 00000000..ba6966e8
--- /dev/null
+++ b/project/shandong/apps/horn/AppMediaManage/AppMediaManage.vue
@@ -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>
diff --git a/project/shandong/apps/horn/AppMediaManage/components/Add.vue b/project/shandong/apps/horn/AppMediaManage/components/Add.vue
new file mode 100644
index 00000000..3350d301
--- /dev/null
+++ b/project/shandong/apps/horn/AppMediaManage/components/Add.vue
@@ -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>
diff --git a/project/shandong/apps/horn/AppMediaManage/components/List.vue b/project/shandong/apps/horn/AppMediaManage/components/List.vue
new file mode 100644
index 00000000..88c34217
--- /dev/null
+++ b/project/shandong/apps/horn/AppMediaManage/components/List.vue
@@ -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>
diff --git a/project/shandong/apps/horn/AppMediaManage/components/Play.vue b/project/shandong/apps/horn/AppMediaManage/components/Play.vue
new file mode 100644
index 00000000..818186b6
--- /dev/null
+++ b/project/shandong/apps/horn/AppMediaManage/components/Play.vue
@@ -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>
diff --git a/project/shandong/apps/monitor/AppMonitorDevice/AppMonitorDevice.vue b/project/shandong/apps/monitor/AppMonitorDevice/AppMonitorDevice.vue
new file mode 100644
index 00000000..4ebaa8bd
--- /dev/null
+++ b/project/shandong/apps/monitor/AppMonitorDevice/AppMonitorDevice.vue
@@ -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>
diff --git a/project/shandong/apps/monitor/AppMonitorManage/AppMonitorManage.vue b/project/shandong/apps/monitor/AppMonitorManage/AppMonitorManage.vue
new file mode 100644
index 00000000..757584d9
--- /dev/null
+++ b/project/shandong/apps/monitor/AppMonitorManage/AppMonitorManage.vue
@@ -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>
diff --git a/project/shandong/apps/monitor/AppMonitorMap/AppMonitorMap.vue b/project/shandong/apps/monitor/AppMonitorMap/AppMonitorMap.vue
new file mode 100644
index 00000000..4574adaf
--- /dev/null
+++ b/project/shandong/apps/monitor/AppMonitorMap/AppMonitorMap.vue
@@ -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>
diff --git a/project/shandong/apps/monitor/components/deviceSlider.vue b/project/shandong/apps/monitor/components/deviceSlider.vue
new file mode 100644
index 00000000..d7a5754b
--- /dev/null
+++ b/project/shandong/apps/monitor/components/deviceSlider.vue
@@ -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>
diff --git a/project/shandong/apps/monitor/components/locateDialog.vue b/project/shandong/apps/monitor/components/locateDialog.vue
new file mode 100644
index 00000000..13cdd466
--- /dev/null
+++ b/project/shandong/apps/monitor/components/locateDialog.vue
@@ -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>
diff --git a/project/shandong/apps/monitor/components/settingDialog.vue b/project/shandong/apps/monitor/components/settingDialog.vue
new file mode 100644
index 00000000..138776e1
--- /dev/null
+++ b/project/shandong/apps/monitor/components/settingDialog.vue
@@ -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>
diff --git a/vue.config.js b/vue.config.js
index d7d99c65..55e5c84b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -65,10 +65,10 @@ module.exports = {
       //设置代理,可解决跨5
       '/lan': {
         // 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.245:9000/",
-        target: "http://192.168.1.34:19898",
+        // target: "http://192.168.1.34:19898",
         changeOrigin: true,
         pathRewrite: {
           //地址重写