目录代码整合

packages/device/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>

packages/device/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>

packages/device/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
+                      v-throttle="() => {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>

packages/device/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>

packages/device/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
+                      v-throttle="() => {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>

packages/device/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>

packages/device/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>

packages/device/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
+                      v-throttle="() => {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>

packages/device/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>

packages/device/IntelligentSecurity/AppISDevice/AppISDevice.vue

@@ -0,0 +1,133 @@
+<template>
+  <section class="AppISDevice">
+    <ai-list>
+      <ai-title slot="title" title="安防设备管理" isShowBottomBorder/>
+      <template #content>
+        <ai-search-bar>
+          <template #right>
+            <el-input
+              prefix-icon="iconfont iconSearch"
+              v-model="search.title" placeholder="设备名、MAC号" clearable
+              @clear="page.current = 1,search.title = '', getTableData()"
+              v-throttle="() => {page.current = 1, getTableData()}" size="small"/>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
+                  :size.sync="page.size" @getList="getTableData">
+          <el-table-column label="操作" slot="options" align="center">
+            <el-row type="flex" slot-scope="{row}" align="middle" justify="center">
+              <ai-area v-model="row.areaId" :instance="instance" :inputClicker="false" customClicker
+                       @change="handleSubmit(row)">
+                <el-button type="text">绑定</el-button>
+              </ai-area>
+              <el-button type="text" @click="handleLocate(row)">标绘</el-button>
+              <div/>
+              <el-button type="text" @click="handleShow(row)">设置</el-button>
+            </el-row>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(detail,v)"/>
+    <setting-dialog v-model="dialog" :ins="instance"/>
+  </section>
+</template>
+
+<script>
+import LocateDialog from "../components/locateDialog";
+import SettingDialog from "../components/settingDialog";
+
+export default {
+  name: "AppISDevice",
+  components: {SettingDialog, LocateDialog},
+  label: "安防设备管理",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  provide() {
+    return {
+      device: this
+    }
+  },
+  computed: {
+    colConfigs() {
+      return [
+        {type: 'selection'},
+        {label: "设备名", prop: "deviceName"},
+        {label: "上级归属", prop: "areaName"},
+        {label: "设备型号", prop: "devModel"},
+        {label: "MAC号", prop: "devMac"},
+        {label: "标绘状态", render: (h, {row}) => h('span', null, row?.lat ? '已绑定' : '待绑定')},
+        {slot: "options"}
+      ]
+    },
+    isDetail() {
+      return !!this.$route.query?.id
+    }
+  },
+  data() {
+    return {
+      search: {startTime: null, endTime: null, title: ""},
+      page: {current: 1, size: 10, total: 0},
+      tableData: [],
+      locate: false,
+      dialog: false,
+      detail: {}
+    }
+  },
+  created() {
+    this.dict.load("zyDeviceBindStatus")
+    if (this.isDetail) {
+      //TODO 待补充
+    } else this.getTableData()
+  },
+  methods: {
+    getTableData() {
+      this.instance.post("/app/appzyvideoequipment/getVideoList", null, {
+        params: {...this.search, ...this.page}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    handleSubmit(row) {
+      return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
+        ...row, id: row.deviceId
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$message.success("提交成功!")
+          this.getTableData()
+        }
+      })
+    },
+    handleShow(row) {
+      this.dialog = true
+      this.detail = row
+    },
+    handleLocate(row, locate) {
+      if (locate) {
+        let {lat, lng} = locate.location
+        this.handleSubmit({...row, lat, lng}).then(() => {
+          this.locate = false
+          this.getTableData()
+        })
+      } else {
+        this.locate = true
+        this.detail = row
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppISDevice {
+  ::v-deep .AiSearchBar {
+    margin-bottom: 10px;
+  }
+}
+</style>

packages/device/IntelligentSecurity/AppISManage/AppISManage.vue

@@ -0,0 +1,520 @@
+<template>
+  <section class="AppISManage">
+    <device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict" @treeCommand="handleSliderOption" @select="handleSelectMonitor" :render-item="renderTreeItem" ref="DeviceSlider" />
+    <div class="monitorPane" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.6)">
+      <div class="headerBar">
+        <el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
+          <!-- <i slot="prefix" class="iconfont iconjdq_led_Led1"/> -->
+          <img slot="prefix" src="https://cdn.cunwuyun.cn/slw2.0/images/fp.png">
+          <el-option v-for="(op,i) in splitOps" :key="i" v-bind="op" />
+        </el-select>
+        <div class="headerBar-item" @click="playbackUrls = [], isShowBar = !isShowBar" :class="[isShowBar ? '' : 'cancel-xt']">
+          <img src="https://cdn.cunwuyun.cn/slw2.0/images/xt.png">
+          <span>{{ isShowBar ? '视频协同' : '取消协同' }}</span>
+        </div>
+      </div>
+      <div class="videoList">
+        <div class="videoBox" v-for="(m, i) in monitors" :key="m.id" :style="currentSplitStyle">
+          <AiMonitor :instance="instance" :deviceId="m.deviceId" :isShowBar="isShowBar" :id="m.id" :playbackUrls="playbackUrls" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor">
+          </AiMonitor>
+        </div>
+      </div>
+      <Synergy ref="Synergy" :ids="ids" :instance="instance" @replay="onReplay" :isLoading.sync="isLoading" @backLiveing="playbackUrls = []" @checkChange="onCheckChange" v-if="!isShowBar && monitors.length" style="width: 100%; height: 68px;">
+      </Synergy>
+    </div>
+    <ai-dialog title="修改名称" :visible.sync="dialog" width="500px" @onConfirm="handleSubmit(selected)" @closed="selected={}">
+      <el-form ref="form" :model="selected" label-width="80px" size="small" :rules="rules">
+        <el-form-item label="设备名称" prop="name">
+          <el-input v-model="selected.name" clearable />
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+    <locate-dialog v-model="locate" :ins="instance" :latlng="latlng" @confirm="v=>handleLocate(selected,v)" />
+    <ai-area custom-clicker :input-clicker="false" :hideLevel="disabledLevel" v-model="selected.areaId" :instance="instance" ref="BindArea" @change="handleSubmit(selected)" />
+  </section>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  import DeviceSlider from '../components/deviceSlider'
+  import LocateDialog from '../components/locateDialog'
+  import AiMonitor from '../components/AiSlwVideo'
+  import Synergy from '../components/Synergy'
+
+  export default {
+    name: 'AppISManage',
+    components: { LocateDialog, DeviceSlider, AiMonitor, Synergy },
+    label: '监控实况',
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+    },
+    computed: {
+      splitOps() {
+        return [
+          { label: '单分屏', value: 1, per: '100%' },
+          { label: '四分屏', value: 4, per: '49.2%' },
+          { label: '九分屏', value: 9, per: '32%' },
+        ]
+      },
+      currentSplitStyle() {
+        let per =
+          this.splitOps.find((e) => e.value == this.splitScreen)?.per || '100%'
+        return { width: per, height: per }
+      },
+      ...mapState(['user']),
+
+      ids() {
+        if (!this.monitors.length) return ''
+
+        return this.monitors.map((v) => v.id).join(',')
+      },
+    },
+
+    data() {
+      return {
+        slider: true,
+        fullscreen: false,
+        splitScreen: 1,
+        monitors: [],
+        dialog: false,
+        locate: false,
+        isLoading: false,
+        isShowBar: true,
+        selected: {
+          areaId: '',
+        },
+        videoUrl: '',
+        playbackUrls: [],
+        latlng: null,
+        disabledLevel: 0,
+        rules: {
+          name: [{ required: true, message: '请填写 设备名称' }],
+        },
+      }
+    },
+
+    watch: {
+      slider() {
+        this.$refs.AiMonitor &&
+          this.$refs.AiMonitor.forEach((e) => {
+            e.reset()
+          })
+
+        this.$refs.Synergy && this.$refs.Synergy.init()
+      },
+    },
+
+    created() {
+      this.selected.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length - 1
+    },
+
+    methods: {
+      handleFullscreen() {
+        this.fullscreen = !this.fullscreen
+        this.$fullscreen(this.fullscreen)
+      },
+      handleSelectMonitor(monitor) {
+        if (monitor.type !== '1') return
+
+        let { id } = monitor,
+          index = this.monitors.findIndex((e) => e.id == id)
+        if (index > -1) {
+          this.$message.error('该监控视频已存在')
+        } else if (
+          this.monitors.length >= this.splitScreen &&
+          this.splitScreen > 1
+        ) {
+          this.$message.error('可分屏监控已满,请先取消其他的监控')
+        } else {
+          this.showMonitor(monitor)
+        }
+      },
+
+      onCheckChange(e) {
+        this.monitors.forEach((item, index) => {
+          if (e.indexOf(item.index) === -1) {
+            this.monitors.splice(index, 1)
+          }
+        })
+      },
+
+      onChange(e) {
+        if (e === 1 && this.monitors.length) {
+          this.monitors = [this.monitors[0]]
+        }
+
+        this.$refs.AiMonitor &&
+          this.$refs.AiMonitor.forEach((e) => {
+            e.reset()
+          })
+      },
+
+      onReplay(e) {
+        this.isLoading = true
+        this.instance
+          .post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
+            params: {
+              ids: this.ids,
+              startTime: e.startTime,
+              endTime: e.endTime,
+              nvrCodes: this.ids,
+            },
+          })
+          .then((res) => {
+            if (res.code == 0) {
+              if (res.data && res.data.length) {
+                this.playbackUrls = res.data
+                this.isLoading = false
+              }
+            }
+          })
+          .catch(() => {
+            this.isLoading = false
+          })
+      },
+
+      removeMonitor(i) {
+        this.monitors.splice(i, 1)
+
+        if (!this.monitors.length) {
+          this.isShowBar = true
+        }
+      },
+
+      showMonitor(monitor, refresh = false) {
+        let { id: deviceId } = monitor
+
+        if (deviceId) {
+          this.isLoading = true
+          this.instance.post('/app/appzyvideoequipment/getWebSdkUrl', null, {
+            params: { deviceId },
+          }).then((res) => {
+            if (res?.data) {
+              this.videoUrl = res.data
+              let data = {
+                url: res.data,
+                isShowPlayBtn: false,
+              }
+              if (refresh) {
+                monitor.url = data.url
+              } else if (this.splitScreen == 1) {
+                this.monitors = [{ ...monitor, ...data }]
+              } else {
+                if (
+                  this.monitors.findIndex((e) => e.id == monitor.id) === -1 &&
+                  this.monitors.length <= this.splitScreen
+                ) {
+                  this.monitors.push({ ...monitor, ...data })
+                }
+              }
+            }
+
+            this.isLoading = false
+          }).catch(() => {
+            this.isLoading = false
+          })
+        }
+      },
+      renderTreeItem: function (h, { node, data }) {
+        let show = data.deviceStatus == 1 ? 'show' : ''
+        const ids = this.ids.split(',')
+        const index = ids.indexOf(data.id) + 1
+        if (node.isLeaf) {
+          return (
+            <div class="flexRow">
+              {index > 0 ? <span>{index}</span> : ''}
+              <i class={['iconfont', 'iconshipinjiankong', show]} />
+              <div>{node.label}</div>
+            </div>
+          )
+        } else
+          return (
+            <div class="flexRow">
+              <div>{node.label}</div>
+              {data.id != 'no_area' ? (
+                <div class="sta">
+                  <p>{data.online || 0}</p>/{data.sum || 0}
+                </div>
+              ) : (
+                <div />
+              )}
+            </div>
+          )
+      },
+      handleSliderOption(e) {
+        this.selected = {
+          command: e.type,
+          ...e.node,
+        }
+        this.selected.areaId = e.node.areaId || this.user.info.areaId
+        if (e.type == 'edit') {
+          //修改名称
+          this.dialog = true
+        } else if (e.type == 'area') {
+          //绑定areaId
+          this.$refs.BindArea?.chooseArea()
+        } else if (e.type == 'locate') {
+          //地图标绘
+          this.latlng =
+            e.node.lat && e.node.lng
+              ? {
+                  lat: e.node.lat,
+                  lng: e.node.lng,
+                }
+              : ''
+          this.locate = true
+        }
+      },
+      handleSubmit(row) {
+        delete row.createTime
+        return this.instance
+          .post('/app/appzyvideoequipment/addOrUpdate', {
+            ...row,
+          })
+          .then((res) => {
+            if (res?.code == 0) {
+              this.$message.success('提交成功!')
+              this.dialog = false
+              this.$refs.DeviceSlider?.getDevices()
+            }
+          })
+      },
+      handleLocate(row, locate) {
+        if (locate) {
+          let { lat, lng } = locate.location
+          this.handleSubmit({ ...row, lat, lng }).then(() => {
+            this.locate = false
+          })
+        }
+      },
+    },
+    beforeDestroy() {
+      this.monitors = []
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppISManage {
+    display: flex;
+    background: #202330;
+    height: 100%;
+
+    .monitorPane {
+      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;
+
+        .headerBar-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100px;
+          height: 40px;
+          background: #2c2f3e;
+          border-radius: 4px;
+          color: #fff;
+          font-size: 12px;
+          cursor: pointer;
+
+          &.cancel-xt {
+            background: linear-gradient(90deg, #299fff 0%, #0c61ff 100%);
+          }
+
+          &:hover {
+            opacity: 0.7;
+          }
+
+          span {
+            margin-left: 6px;
+          }
+        }
+
+        .iconfont {
+          color: #fff;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          font-size: 20px;
+        }
+
+        .el-input__icon {
+          color: #fff;
+        }
+
+        .el-input--prefix .el-input__inner {
+          padding-left: 16px;
+        }
+
+        .el-input--suffix .el-input__inner {
+          padding-right: 16px;
+        }
+
+        .el-input__prefix {
+          top: 50%;
+          left: 10px;
+          height: auto;
+          transform: translateY(-50%);
+        }
+
+        .el-input {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          width: 100px;
+          height: 40px;
+          padding: 0 12px;
+          box-sizing: border-box;
+          background: #2c2f3e;
+        }
+
+        input {
+          text-align: center;
+        }
+
+        .el-input__inner,
+        .el-button {
+          color: #fff;
+          border: none;
+          background: transparent;
+
+          &:hover {
+            color: #26f;
+          }
+        }
+      }
+
+      .videoList {
+        display: flex;
+        justify-content: flex-start;
+        align-content: flex-start;
+        flex-wrap: wrap;
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+        gap: 8px;
+      }
+
+      .videoBox {
+        position: relative;
+        background: #000;
+        flex-shrink: 0;
+
+        & > span {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          z-index: 11;
+          width: 60%;
+          height: 38px;
+          line-height: 38px;
+          padding: 0 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #fff;
+          font-size: 16px;
+        }
+
+        .videoBox-close {
+          display: flex;
+          position: absolute;
+          align-items: center;
+          justify-content: center;
+          right: 8px;
+          top: 8px;
+          z-index: 11;
+          width: 84px;
+          height: 32px;
+          line-height: 1;
+          background: linear-gradient(180deg, #2e3447 0%, #151825 100%);
+          border-radius: 2px;
+          cursor: pointer;
+          font-size: 12px;
+          color: #fff;
+
+          &:hover {
+            opacity: 0.8;
+          }
+
+          span {
+            margin-left: 4px;
+          }
+
+          i {
+            position: relative;
+            font-size: 16px;
+          }
+        }
+
+        iframe {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    ::v-deep.el-tree-node__content:hover {
+      .menuBtn {
+        display: block;
+      }
+    }
+
+    ::v-deep .flexRow {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: #fff;
+
+      span {
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        text-align: center;
+        color: #fff;
+        font-size: 12px;
+        border-radius: 1px;
+        background: #2266ff;
+      }
+
+      .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>

packages/device/IntelligentSecurity/AppISMap/AppISMap.vue

@@ -0,0 +1,211 @@
+<template>
+  <section class="AppISMap">
+    <device-slider :show.sync="slider" :ins="instance" :dict="dict" @list="v=>list=v" @select="markerClickEvent"/>
+    <div id="amap"/>
+    <div ref="selectedInfoWin" class="selected">
+      <b>{{ selected.deviceName }}</b>
+      <div>{{ selected.lng }}，{{ selected.lat }}</div>
+      <div v-if="selected.address">{{ selected.address }}</div>
+      <div btn @click="handleShowMonitor">查看监控</div>
+    </div>
+    <el-dialog class="monitorDialog" :modal="false" :visible.sync="dialog" :title="selected.deviceName||'视频监控'"
+               width="640px" @closed="monitor=''">
+      <iframe v-if="monitor" :src="monitor" allow="autoplay *; microphone *; fullscreen *" allowfullscreen
+              allowtransparency allowusermedia frameBorder="no"/>
+    </el-dialog>
+  </section>
+</template>
+
+<script>
+import DeviceSlider from "../components/deviceSlider";
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+export default {
+  name: "AppISMap",
+  components: {DeviceSlider},
+  label: "监控地图",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  data() {
+    return {
+      slider: true,
+      AMap: null,
+      map: null,
+      selected: {},
+      list: [],
+      deviceToken: "",
+      dialog: false,
+      monitor: ""
+    }
+  },
+  watch: {
+    list: {
+      immediate: true,
+      handler(v) {
+        if (v.length > 0) {
+          this.renderDevicesOnMap()
+        }
+      }
+    }
+  },
+  methods: {
+    initMap() {
+      return new Promise(resolve => AMapLoader.load({
+        key: "b553334ba34f7ac3cd09df9bc8b539dc",
+        version: '2.0',
+        plugins: ['AMap.Marker', 'AMap.PlaceSearch'],
+      }).then(AMap => {
+        this.AMap = AMap
+        this.map = new this.AMap.Map('amap', {
+          zoom: 14,
+        })
+        resolve()
+      }))
+    },
+    renderDevicesOnMap() {
+      this.list?.map(e => {
+        if (this.AMap && e?.lat) {
+          e.marker = new this.AMap.Marker({
+            icon: this.$cdn + 'monitor/camera.png',
+            position: new this.AMap.LngLat(e.lng, e.lat)
+          }).on('click', () => this.markerClickEvent(e))
+          this.map.add(e.marker)
+        }
+      })
+    },
+    markerClickEvent(device) {
+      if (device?.marker) {
+        this.map?.setCenter(new this.AMap.LngLat(device.lng, device.lat))
+        device.marker.setIcon(this.$cdn + 'monitor/cameraSelected.png')
+        this.selected = device
+        let win = new this.AMap.InfoWindow({
+          isCustom: true,
+          autoMove: true,
+          closeWhenClickMap: true,
+          content: this.$refs.selectedInfoWin
+        }).on('close', () => {
+          device.marker.setIcon(this.$cdn + 'monitor/camera.png')
+          this.selected = {}
+        })
+        win.open(this.map, new this.AMap.LngLat(device.lng, device.lat))
+      }
+    },
+    getDeviceToken() {
+      this.instance.post("/app/appzyvideoequipment/getAppUserToken").then(res => {
+        if (res?.data) {
+          this.deviceToken = res.data
+        }
+      })
+    },
+    handleShowMonitor() {
+      this.dialog = true
+      this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
+        params: {token: this.deviceToken, deviceId: this.selected.deviceId}
+      }).then(res => {
+        if (res?.data) {
+          let data = JSON.parse(res.data)
+          this.monitor = data.url
+        }
+      })
+    }
+  },
+  created() {
+    this.initMap().then(() => setTimeout(() => this.renderDevicesOnMap(), 1000))
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppISMap {
+  background: #202330;
+  position: relative;
+
+  .deviceSlider {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 66;
+  }
+
+  #amap {
+    width: 100%;
+    height: 100%;
+  }
+
+  .selected {
+    background: #fff;
+    min-width: 280px;
+    box-sizing: border-box;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+    padding: 12px;
+    color: #999;
+    font-size: 12px;
+
+    b {
+      color: #333;
+      font-size: 16px;
+    }
+
+    & > * + * {
+      margin-top: 4px;
+    }
+
+    div[btn] {
+      cursor: pointer;
+      color: #89b;
+      font-size: 14px;
+    }
+
+  }
+
+  ::v-deep .monitorDialog {
+
+    .el-dialog__header {
+      font-size: 14px;
+      color: #FFF;
+      height: 40px;
+      padding: 0 16px;
+      background: linear-gradient(180deg, #313B5B 0%, #1B202F 100%);
+      display: flex;
+      align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+
+      span {
+        color: #fff;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .el-dialog__headerbtn {
+        position: relative;
+        top: unset;
+        right: unset;
+      }
+    }
+
+    .el-dialog__body {
+      padding: 0;
+      height: 360px;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  ::v-deep .amap-logo, ::v-deep .amap-copyright {
+    display: none !important;
+  }
+
+  ::v-deep .amap-marker-label {
+    border-color: transparent;
+    box-shadow: 1px 1px 0 0 rgba(#999, .2);
+  }
+}
+</style>

packages/device/IntelligentSecurity/components/AiSlwVideo.vue

@@ -0,0 +1,566 @@
+<template>
+  <div class="slw" :id="videoId" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.6)">
+    <div class="slw-title">
+      <h2>{{ name }}</h2>
+      <div class="slw-title__close" @click="removeMonitor">
+        <i class="el-icon-circle-close"></i>
+        <span>关闭视频</span>
+      </div>
+    </div>
+    <iframe v-if="isShow" :id="iframeId" allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no" style="width: 100%; height: 100%;" :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
+    </iframe>
+    <div class="slw-bottom" v-if="isShowBar">
+      <Timeline class="Timeline" v-if="times.length" :times="times" @replay="onReplay" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
+      <div class="action-bar">
+        <div class="left">
+          <div class="left-btns">
+            <el-tooltip effect="dark" :content="isPause ? '播放' : '暂停'" placement="top">
+              <img :src="isPause ? 'https://cdn.cunwuyun.cn/slw2.0/images/play.png' : 'https://cdn.cunwuyun.cn/slw2.0/images/pause.png'" @click="changePlayStatus">
+            </el-tooltip>
+          </div>
+          <div class="volume" @mouseleave.stop="isShowVolume = false">
+            <img @mouseenter.stop="isShowVolume = true" src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
+            <div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
+              <el-slider input-size="mini" v-model="volume" vertical @change="onVolume" height="80px">
+              </el-slider>
+            </div>
+          </div>
+          <div class="play-status">
+            <div class="live">
+              <span class="label" v-if="isLiveing"></span>
+              <i v-if="isLiveing">直播中</i>
+              <em>{{ date }}</em>
+            </div>
+            <div v-if="!isLiveing" class="back-btn" @click="backLiveing">回到直播</div>
+          </div>
+        </div>
+        <div class="right">
+          <el-tooltip effect="dark" content="选择日期" placement="top">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
+          </el-tooltip>
+          <el-tooltip effect="dark" content="截屏" placement="top">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/screenshots.png" @click="screenshots">
+          </el-tooltip>
+          <el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏'" placement="top">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/full-screen.png" @click="fullscreen">
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+    <ai-dialog title="选择日期" :visible.sync="isShowDate" width="520px" @onConfirm="onConfirm">
+      <el-form class="ai-form" ref="form" :model="form" label-width="80px" size="small">
+        <el-form-item label="选择日期" prop="date" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
+          <el-date-picker value-format="yyyy-MM-dd" v-model="form.date" type="date" :picker-options="pickerOptions" placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+  import Timeline from './Timeline'
+
+  export default {
+    props: ['name', 'isShowBar', 'instance', 'id', 'playbackUrls'],
+
+    name: 'slwVideo',
+
+    components: {
+      Timeline
+    },
+
+    data () {
+      return {
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          }
+        },
+        currIndex: 0,
+        isShowDate: false,
+        isShowPlayBtn: false,
+        isShow: true,
+        isShowVolume: false,
+        isLiveing: true,
+        form: {
+          date: ''
+        },
+        isLoading: false,
+        times: [],
+        date: '',
+        isPause: false,
+        width: '',
+        volume: 100,
+        videoId: `slwvideo-${new Date().getTime()}`,
+        iframeId: `video-${new Date().getTime()}`,
+        isFullscreen: false,
+        replayUrl: '',
+        liveingUrl: ''
+      }
+    },
+
+    computed: {
+      src () {
+        if (this.playbackUrls.length) {
+          const arr =  this.playbackUrls.filter(v => v.id === this.id)
+          return arr.length ? arr[0].playbackUrl : []
+        }
+
+        if (this.isLiveing) {
+          return this.liveingUrl
+        }
+
+        return this.replayUrl
+      }
+    },
+
+    watch: {
+      src: {
+        handler (val) {
+          if (val) {
+            this.isShow = false
+
+            this.$nextTick(() => {
+              this.isShow = true
+            })
+          }
+        }
+      }
+    },
+
+    mounted () {
+      this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+      this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+      this.$nextTick(() => {
+        this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'
+
+        document.addEventListener('fullscreenchange', this.fullScreenChange)
+      })
+
+      this.getSlwPlaybackTime()
+
+      if (this.id) {
+        this.getLiveingUrl()
+      }
+    },
+
+    methods: {
+      destroyed () {
+        document.removeEventListener('fullscreenchange', this.fullScreenChange)
+      },
+
+      backLiveing () {
+        this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.getLiveingUrl()
+        this.getSlwPlaybackTime()
+      },
+
+      getLiveingUrl () {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${this.id}`).then(res => {
+          if (res.data) {
+            this.liveingUrl = res.data
+            this.isLiveing = true
+          }
+
+          this.isLoading = false
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      onReplay (e) {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
+          params: {
+            ids: this.id,
+            startTime: `${this.form.date} ${e}`,
+            endTime: this.form.date + ` ${Number(e.substr(0, 2)) + 6 > 9 ? Number(e.substr(0, 2)) + 6 : '0' + (Number(e.substr(0, 2)) + 6)}:00:00`,
+            nvrCodes: ''
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              this.replayUrl = res.data[0].playbackUrl
+              this.isLiveing = false
+            }
+            this.isLoading = false
+          }
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      getSlwPlaybackTime () {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
+          params: {
+            ids: this.id,
+            startTime: this.date + ' 00:00:00',
+            endTime: this.date + ' 23:59:59',
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              const times = res.data[0].times
+
+              this.times = times.map(item => {
+                const startTime = (item.startTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+                const endTime = (item.endTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+
+                return {
+                  startTime: Number(startTime.toFixed(0)),
+                  endTime: Number(endTime.toFixed(0))
+                }
+              }).sort((a, b) => {
+                return a.startTime - b.startTime
+              })
+            }
+
+            this.isLoading = false
+          }
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      fullScreenChange () {
+        if (document.fullscreenElement) {
+          this.reset()
+        } else {
+          this.reset()
+        }
+      },
+      exitFullscreen () {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen()
+        } else if (document.msExitFullscreen) {
+          window.top.document.msExitFullscreen()
+        }
+      },
+
+      changePlayStatus () {
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
+        subPage.postMessage({
+          type: 'play',
+          value: this.isPause
+        }, '*')
+        
+        this.isPause = !this.isPause
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.date = this.form.date
+            this.isShowDate = false
+            this.getSlwPlaybackTime()
+          }
+        })
+      },
+
+      onVolume (e) {
+        const v = (e / 100).toFixed(1)
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
+        subPage.postMessage({
+          type: 'volume',
+          value: Number(v)
+        }, '*')
+      },
+
+      fullscreen () {
+        if (this.isFullscreen) {
+          this.exitFullscreen()
+        } else {
+          this.requestFullScreen(document.querySelector(`#${this.videoId}`))
+        }
+
+        this.isFullscreen = !this.isFullscreen
+        this.reset()
+      },
+
+      reset () {
+        setTimeout(() => {
+          this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'
+          this.$nextTick(() => {
+            this.$refs.timeline && this.$refs.timeline.init()
+          })
+        }, 100)
+      },
+
+      screenshots () {
+        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
+        subPage.postMessage({
+          type: 'screenshot'
+        }, '*')
+      },
+
+      removeMonitor () {
+        this.$emit('close')
+      },
+
+      requestFullScreen (elem) {
+        if (elem.requestFullscreen) {
+          elem.requestFullscreen()
+        } else if (elem.mozRequestFullScreen) {
+          elem.mozRequestFullScreen()
+        } else if (elem.webkitRequestFullscreen) {
+          elem.webkitRequestFullscreen()
+        } else if (elem.msRequestFullscreen) {
+          elem = window.top.document.body
+          elem.msRequestFullscreen()
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .slw {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    iframe {
+      border: none;
+    }
+
+    .slw-bottom {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      transition: all ease-in-out 0.5s;
+      transform: translateY(100%);
+    }
+
+    &:hover {
+      .slw-title {
+        transform: translateY(0%);
+      }
+      .slw-bottom {
+        transform: translateY(0%);
+      }
+    }
+
+    .slw-title {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: space-between;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 16px;
+      background: rgba(0, 0, 0, 0.8);
+      transition: all ease 0.5s;
+      transform: translateY(-100%);
+
+      h2 {
+        max-width: 70%;
+        font-size: 16px;
+        color: #fff;
+        font-weight: normal;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;  
+      }
+
+      .slw-title__close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 84px;
+        height: 32px;
+        background: linear-gradient(180deg, #2E3447 0%, #151825 100%);
+        border-radius: 2px;
+        cursor: pointer;
+        font-size: 12px;
+        color: #fff;
+
+        &:hover {
+          opacity: 0.9;
+        }
+
+        span {
+          margin-left: 4px;
+        }
+
+        i {
+          position: relative;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .action-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 40px;
+      padding: 0 16px;
+      background: rgba(0, 0, 0, 0.8);
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .play-status {
+          display: flex;
+          align-items: center;
+          margin-left: 12px;
+
+          em {
+            margin-left: 12px;
+            font-style: normal;
+            color: #fff;
+            font-size: 12px;
+          }
+
+          .back-btn {
+            padding: 4px 10px;
+            border-radius: 6px;
+            color: #ddd;
+            font-size: 12px;
+            cursor: pointer;
+            background: #343747;
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+
+          .live {
+            display: flex;
+            align-items: center;
+            line-height: 1;
+            padding: 2px 5px;
+            color: rgba(0,255,0,.8);
+
+            i {
+              font-size: 12px;
+              font-style: normal;
+            }
+
+            .label {
+              width: 6px;
+              height: 6px;
+              margin-right: 12px;
+              background: rgba(0,255,0,.8);
+              border-radius: 50%;
+              position: relative;
+
+              &:after {
+                content: "";
+                width: 12px;
+                height: 12px;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                -webkit-transform: translate(-50%,-50%);
+                transform: translate(-50%,-50%);
+                border-radius: 50%;
+                border: 4px solid rgba(0,255,0,.2);
+              }
+            }
+          }
+        }
+
+        .volume {
+          display: flex;
+          align-items: center;
+          position: relative;
+          height: 100%;
+
+          .volume-slider {
+            display: none;
+            position: absolute;
+            bottom: 15px;
+            left: 50%;
+            z-index: -1;
+            opacity: 0;
+            padding: 20px 0 10px;
+            background-color: rgba(0, 0,0,.8);
+            transform: translate(-50%, 0);
+            transition: all ease 0.3s;
+
+            &.active {
+              display: block;
+              z-index: 1;
+              opacity: 1;
+            }
+          }
+        }
+
+        img {
+          cursor: pointer;
+        }
+
+        .left-btns {
+          display: flex;
+          align-items: center;
+          margin-right: 10px;
+
+          span {
+            flex: 1;
+            height: 100%;
+            line-height: 24px;
+            background: #222838;
+            color: #c9c9c9;
+            font-size: 12px;
+            cursor: pointer;
+
+            &.active {
+              color: #fff;
+              background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
+            }
+          }
+        }
+      }
+
+      .right {
+        color: #c9c9c9;
+        font-size: 12px;
+
+        span {
+          margin-right: 32px;
+          cursor: pointer;
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+
+        img {
+          margin-right: 16px;
+          cursor: pointer;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+      }
+
+      & > div {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+</style>

packages/device/IntelligentSecurity/components/PlaybackTime.vue

@@ -0,0 +1,129 @@
+<template>
+  <div :class="wrapper" class="canvas" v-if="isInit">
+    <canvas
+      :id="id"
+      :style="{height: '10px'}"
+      v-if="canvasWidth"
+      :width="canvasWidth"
+      height="10">
+    </canvas>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['times', 'deviceId'],
+
+    data () {
+      return {
+        ctx: null,
+        canvasWidth: '',
+        canvasHeight: '',
+        isInit: false,
+        wrapper: `canvas-${new Date().getTime()}`,
+        id: `timeline-${new Date().getTime()}-${this.deviceId}`,
+        timer: null
+      }
+    },
+
+    watch: {
+      times: {
+        deep: true,
+        handler (v) {
+          if (v.length && this.ctx) {
+            this.init()
+          }
+        }
+      }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    destroyed () {
+      clearInterval(this.timer)
+    },
+
+    methods: {
+      init () {
+        if (this.ctx) {
+          this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+        }
+        this.isInit = false
+        this.$nextTick(() => {
+          this.isInit = true
+          this.$nextTick(() => {
+            this.canvasWidth = document.querySelector(`.${this.wrapper}`).offsetWidth
+            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight
+
+            this.$nextTick(() => {
+              const el = document.querySelector(`#${this.id}`)
+              this.ctx = el.getContext('2d')
+              this.ctx.width  = document.querySelector('.canvas').offsetWidth
+              this.ctx.height  = document.querySelector('.canvas').offsetHeight
+              this.renderPlayback()
+            })
+          })
+        })
+      },
+
+      countdown () {
+        this.timer = setInterval(() => {
+          if (this.isLiveing) {
+            this.initNowTime()
+          } else {
+            this.x = this.x + this.canvasWidth / (24 * 60 * 60)
+          }
+        }, 1000)
+      },
+
+      initNowTime () {
+        const date = new Date()
+        const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()
+
+        this.x = this.canvasWidth / (24 * 60 * 60) * seconds
+      },
+
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.beginPath()
+        ctx.lineWidth = lineWidth
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.strokeStyle = lineColor
+        ctx.stroke()
+      },
+
+      renderPlayback () {
+        const ctx = this.ctx
+        const unit = this.canvasWidth / (24 * 60 * 60)
+        this.times.forEach(item => {
+          this.drawLine(ctx, {
+            beginX: item.startTime * unit,
+            beginY: 28,
+            endX: item.startTime * unit,
+            endY: 0,
+            lineColor: 'rgba(0, 156, 255, 1)',
+            lineWidth: item.endTime * unit - item.startTime * unit
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .canvas {
+    position: relative;
+    width: 100%;
+    height: 10px;
+
+    canvas {
+      width: 100%;
+      height: 10px;
+    }
+  }
+</style>

packages/device/IntelligentSecurity/components/Synergy.vue

@@ -0,0 +1,683 @@
+<template>
+  <div class="synergr" :id="videoId" v-if="isInit" @mouseleave="isHide = true" @mousemove.stop="onMousemove" @mouseup="onMouseUp">
+    <canvas id="synergr-canvas" :style="{height: '28px'}" v-if="canvasWidth" @click="onClick" :width="canvasWidth" height="28">
+    </canvas>
+    <div class="time" v-show="!isHide && left > 100" :style="{left: (left) + 'px'}">{{ time }}</div>
+    <img @mousedown="onDragDown" class="drag-img" :style="{left: (x) + 'px'}" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
+    <div class="slw-bottom">
+      <div class="action-bar">
+        <div class="left">
+          <!-- <div
+            class="volume"
+            @mouseleave.stop="isShowVolume = false">
+            <img 
+              @mouseenter.stop="isShowVolume = true"
+              src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
+            <div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
+              <el-slider
+                input-size="mini"
+                v-model="volume"
+                vertical
+                @change="onVolume"
+                height="80px">
+              </el-slider>
+            </div>
+          </div> -->
+          <div class="play-status">
+            <div class="live">
+              <span class="label" v-if="isLiveing"></span>
+              <i v-if="isLiveing">直播中</i>
+              <em>{{ date }}</em>
+            </div>
+            <div v-if="!isLiveing" class="back-btn" @click="backLiveing">回到直播</div>
+          </div>
+        </div>
+        <div class="right">
+          <el-tooltip effect="dark" content="选择日期" placement="top">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="playback">
+      <div class="synergr-more" @click="isShowTimeline = !isShowTimeline" :class="[isShowTimeline ? 'active' : '']">
+        <img :title="isShowTimeline ? '收起' : '展开'" src="https://cdn.cunwuyun.cn/slw2.0/images/arrow.png" />
+      </div>
+      <div class="playback-list" v-if="isShowTimeline">
+        <el-checkbox-group v-model="checked" @change="onCheckChange">
+          <div class="playback-item" v-for="(item, index) in times" :key="index">
+            <el-checkbox :label="item.id">
+              <span>通道{{ index + 1 }}</span>
+            </el-checkbox>
+            <PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" v-if="item.times.length" :deviceId="item.id" :times="item.times"></PlaybackTime>
+            <i :style="{left: (x - 17) + 'px'}"></i>
+          </div>
+        </el-checkbox-group>
+      </div>
+    </div>
+    <ai-dialog title="选择日期" :visible.sync="isShowDate" width="520px" @onConfirm="onConfirm">
+      <el-form class="ai-form" ref="form" :model="form" label-width="80px" size="small">
+        <el-form-item label="选择日期" prop="date" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
+          <el-date-picker value-format="yyyy-MM-dd" v-model="form.date" type="date" :picker-options="pickerOptions" placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+  import PlaybackTime from './PlaybackTime'
+
+  export default {
+    props: ['ids', 'instance', 'isLoading'],
+
+    name: 'Synergy',
+
+    components: {
+      PlaybackTime
+    },
+
+    data () {
+      return {
+        canvasWidth: 0,
+        currIndex: 0,
+        checked: [],
+        isShowDate: false,
+        isShow: true,
+        isShowVolume: false,
+        isLiveing: true,
+        form: {
+          date: ''
+        },
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          }
+        },
+        times: [],
+        isShowTimeline: true,
+        checkList: [],
+        isInit: false,
+        left: 0,
+        date: '',
+        scale: 3,
+        width: '',
+        isHide: false,
+        x: 0,
+        time: '',
+        videoId: `synergr-${new Date().getTime()}`,
+        isFullscreen: false,
+        timer: null
+      }
+    },
+
+    watch: {
+      ids: {
+        handler (val) {
+          if (val) {
+            this.checked = this.ids.split(',')
+            this.getSlwPlaybackTime()
+          }
+        },
+        immediate: false,
+        deep: true
+      }
+    },
+
+    mounted () {
+      this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+      this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+
+      this.getSlwPlaybackTime()
+      this.checked = this.ids.split(',')
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    methods: {
+      onMousemove (e) {
+        const canvasInfo = document.querySelector(`#synergr-canvas`).getBoundingClientRect()
+        const seconds = 24 * 60 * 60
+        const x = e.clientX - canvasInfo.left + 100
+
+        if (x < 100 || x > this.canvasWidth + 100) {
+          this.isHide = true
+
+          return false
+        }
+
+        const unit = seconds / this.canvasWidth * (x - 100)
+        this.left = x
+        this.time = this.secTotime(unit)
+        this.isHide = false
+
+        if (!this.isChoose) return
+        this.x = e.clientX - canvasInfo.left + 100
+        this.ratioW = this.x / this.canvasWidth
+      },
+
+      onDragDown () {
+        this.isChoose = true
+      },
+
+      onCheckChange (e) {
+        this.$emit('checkChange', e)
+      },
+
+      backLiveing () {
+        this.$emit('backLiveing')
+        this.isLiveing = true
+        this.initNowTime()
+        this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.getSlwPlaybackTime()
+      },
+
+      onMouseUp () {
+        if (!this.isChoose) return
+
+        clearInterval(this.timer)
+        this.timer = null
+        this.isChoose = false
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * (this.x - 100))
+        this.$emit('replay', {
+          startTime: `${this.form.date} ${time}`,
+          endTime: this.form.date + ` ${Number(time.substr(0, 2)) + 6 > 9 ? Number(time.substr(0, 2)) + 6 : '0' + (Number(time.substr(0, 2)) + 6)}:59:59`
+        })
+
+        this.isLiveing = false
+      },
+
+      init () {
+        this.$nextTick(() => {
+          this.isInit = true
+          this.$nextTick(() => {
+            this.canvasWidth = document.querySelector(`#${this.videoId}`).offsetWidth - 116
+            this.canvasHeight = document.querySelector(`#${this.videoId}`).offsetHeight
+
+            this.$nextTick(() => {
+              const el = document.querySelector(`#synergr-canvas`)
+              this.ctx = el.getContext('2d')
+              this.ctx.width  = document.querySelector(`#${this.videoId}`).offsetWidth - 116
+              this.ctx.height  = document.querySelector(`#${this.videoId}`).offsetHeight
+
+              if (this.x > 0) {
+                this.x = this.canvasWidth * this.ratioW
+              } else {
+                this.initNowTime()
+              }
+
+              this.renderTimeLine()
+              this.countdown()
+            })
+          })
+        })
+      },
+
+      countdown () {
+        this.timer = setInterval(() => {
+          this.initNowTime()
+        }, 1000)
+      },
+
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.beginPath()
+        ctx.lineWidth = lineWidth
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.strokeStyle = lineColor
+        ctx.stroke()
+      },
+
+      onClick (e) {
+        const canvasInfo = document.querySelector(`#synergr-canvas`).getBoundingClientRect()
+        this.x = e.clientX - canvasInfo.left + 100
+        clearInterval(this.timer)
+        this.timer = null
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * (this.x - 100))
+        this.$emit('replay', {
+          startTime: `${this.form.date} ${time}`,
+          endTime: this.form.date + ` ${Number(time.substr(0, 2)) + 6 > 9 ? Number(time.substr(0, 2)) + 6 : '0' + (Number(time.substr(0, 2)) + 6)}:00:00`
+        })
+        this.isLiveing = false
+      },
+
+      renderTimeLine () {
+        const ctx = this.ctx
+        ctx.fillStyle = 'rgba(40, 43, 58, 1)'
+        ctx.fillRect(0, 0, this.canvasWidth, 28)
+        
+        ctx.fillStyle = '#fff'
+        ctx.font = '12px Arial'
+        const w = this.canvasWidth / 24 
+
+        for (let i = 0; i < 25; i ++) {
+          this.drawLine(ctx, {
+            beginX: i * w,
+            beginY: 28,
+            endX: i * w,
+            endY: (i % this.scale === 0 || i === 0) ? 22 : 24,
+            lineColor: (i % this.scale === 0 || i === 0) ? '#000' : '#000',
+            lineWidth: (i % this.scale === 0 || i === 0) ? 1 : 1
+          })
+
+          if ((i % this.scale === 0 || i === 0)) {
+            const text = (i < 10 ? '0' + i : i) + ': 00'
+              const textWidth = ctx.measureText(text).width
+            if (i === 24) {
+              ctx.fillText(text, i * w - textWidth, 21)
+            } else if (i === 0) {
+              ctx.fillText(text, 0, 21)
+            } else {
+              ctx.fillText(text, i * w - textWidth / 2, 21)
+            }
+          }
+        }
+      },
+
+      initNowTime () {
+        const date = new Date()
+        const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()
+
+        this.x = seconds / (24 * 60 * 60) * this.canvasWidth + 100
+      },
+
+      secTotime (s) {
+        let second = parseInt(s)
+        let minute = 0
+        let hour = 0
+        if (second > 60) {
+          minute = parseInt(second / 60)
+          second = parseInt(second % 60)
+          if (minute > 60) {
+            hour = parseInt(minute / 60)
+            minute = parseInt(minute % 60)
+          }
+        }
+
+        hour = `${parseInt(hour) > 9 ? parseInt(hour) : '0' + parseInt(hour)}`
+        minute = `${parseInt(minute) > 9 ? parseInt(minute) : '0' + parseInt(minute)}`
+        second = `${parseInt(second) > 9 ? parseInt(second) : '0' + parseInt(second)}`
+        return `${hour}:${minute}:${second}`
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.isShowDate = false
+            this.date = this.form.date
+            this.getSlwPlaybackTime()
+          }
+        })
+      },
+
+      getSlwPlaybackTime () {
+        this.$emit('update:isLoading', true)
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
+          params: {
+            ids: this.ids,
+            startTime: this.date + ' 00:00:00',
+            endTime: this.date + ' 23:59:59',
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              this.times = res.data.map(v => {
+                return {
+                  id: v.id,
+                  times: v.times.map(item => {
+                    const startTime = (item.startTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+                    const endTime = (item.endTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+
+                    return {
+                      startTime: Number(startTime.toFixed(0)),
+                      endTime: Number(endTime.toFixed(0))
+                    }
+                  }).sort((a, b) => {
+                    return a.startTime - b.startTime
+                  })
+                }
+              })
+            }
+
+            this.$emit('update:isLoading', false)
+          }
+        }).catch(() => {
+          this.$emit('update:isLoading', false)
+        })
+      },
+
+      onVolume (e) {
+        const v = (e / 100).toFixed(1)
+        const subPage = document.querySelector(`#${this.id}`).contentWindow
+        subPage.postMessage({
+          type: 'volume',
+          value: Number(v)
+        }, '*')
+      },
+
+      reset () {
+        setTimeout(() => {
+          this.init()
+        }, 60)
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .synergr {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    font-size: 0;
+    background: rgba(40, 43, 58, 1);
+
+    #synergr-canvas {
+      margin: 0 0 0 100px;
+    }
+
+    .playback {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      z-index: 1;
+      width: 100%;
+      padding-top: 6px;
+      text-align: center;
+      transform: translate(-50%, -100%);
+      background: #202330;
+
+      .synergr-more {
+        width: 80px;
+        height: 16px;
+        margin: 0 auto;
+        cursor: pointer;
+        background: url(https://cdn.cunwuyun.cn/slw2.0/images/more.png);
+        color: #fff;
+
+        img {
+          position: relative;
+          transition: all ease 0.5s;
+          transform: rotate(180deg);
+        }
+
+        &.active img {
+          transform: rotate(0);
+        }
+      }
+
+      .playback-list {
+        padding: 8px 16px;
+        background: rgba(22, 24, 33, 1);
+        font-size: 12px;
+        color: #FFFFFF;
+
+        .playback-item {
+          position: relative;
+          display: flex;
+          align-items: center;
+          width: 100%;
+          margin-bottom: 4px;
+
+          i {
+            position: absolute;
+            top: 50%;
+            z-index: 1;
+            width: 2px;
+            height: 12px;
+            background: #FFC916;
+            transform: translateY(-50%);
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .playback-item__timeline {
+            flex: 1;
+            height: 12px;
+            line-height: 1;
+            border-radius: 6px;
+          }
+
+          .el-checkbox {
+            display: flex;
+            align-items: center;
+            // width: 100%;
+
+            .el-checkbox__label {
+              display: flex;
+              align-items: center;
+              flex: 1;
+
+              span {
+                width: 60px;
+                color: #fff;
+                text-align: left;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .time-scale {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: center;
+      left: 0;
+      top: 28px;
+      z-index: 1;
+      user-select: none;
+      width: 12px;
+      height: 24px;
+
+      span {
+        width: 2px;
+        height: 24px;
+        background: rgba(255, 255, 255, 0.8);
+      }
+    }
+
+    .drag-img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      user-select: none;
+      cursor: e-resize;
+      -webkit-user-drag: none;
+      transform: translateX(-50%);
+    }
+
+    .time {
+      position: absolute;
+      bottom: 40px;
+      left: 0;
+      z-index: 1;
+      padding: 2px 4px;
+      font-size: 12px;
+      color: #fff;
+      background: rgba(0, 0, 0, 1);
+      transform: translate(-50%, 100%);
+    }
+
+    .slw-bottom {
+      width: 100%;
+      height: 40px;
+    }
+
+    &:hover {
+      .slw-title {
+        transform: translateY(0%);
+      }
+      .slw-bottom {
+        transform: translateY(0%);
+      }
+    }
+
+    .action-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 40px;
+      padding: 0 16px;
+      transition: all ease-in-out 0.5s;
+      background: rgba(46, 53, 75, 1);
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .play-status {
+          display: flex;
+          align-items: center;
+
+          em {
+            margin-left: 12px;
+            font-style: normal;
+            color: #fff;
+            font-size: 12px;
+          }
+
+          .back-btn {
+            padding: 4px 10px;
+            border-radius: 6px;
+            color: #ddd;
+            font-size: 12px;
+            cursor: pointer;
+            background: #343747;
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+
+          .live {
+            display: flex;
+            align-items: center;
+            line-height: 1;
+            padding: 2px 5px;
+            color: rgba(0,255,0,.8);
+
+            i {
+              font-size: 12px;
+              font-style: normal;
+            }
+
+            .label {
+              width: 6px;
+              height: 6px;
+              margin-right: 12px;
+              background: rgba(0,255,0,.8);
+              border-radius: 50%;
+              position: relative;
+
+              &:after {
+                content: "";
+                width: 12px;
+                height: 12px;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                -webkit-transform: translate(-50%,-50%);
+                transform: translate(-50%,-50%);
+                border-radius: 50%;
+                border: 4px solid rgba(0,255,0,.2);
+              }
+            }
+          }
+        }
+
+        .volume {
+          display: flex;
+          align-items: center;
+          position: relative;
+          height: 100%;
+
+          .volume-slider {
+            display: none;
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            z-index: -1;
+            opacity: 0;
+            padding: 20px 0 10px;
+            background-color: rgba(0, 0,0,.8);
+            transform: translate(-50%, 0);
+            transition: all ease 0.3s;
+
+            &.active {
+              display: block;
+              z-index: 1;
+              opacity: 1;
+            }
+          }
+        }
+
+        img {
+          cursor: pointer;
+        }
+
+        .left-btns {
+          display: flex;
+          align-items: center;
+          margin-right: 10px;
+
+          span {
+            flex: 1;
+            height: 100%;
+            line-height: 24px;
+            background: #222838;
+            color: #c9c9c9;
+            font-size: 12px;
+            cursor: pointer;
+
+            &.active {
+              color: #fff;
+              background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
+            }
+          }
+        }
+      }
+
+      .right {
+        color: #c9c9c9;
+        font-size: 12px;
+
+        span {
+          margin-right: 32px;
+          cursor: pointer;
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+
+        img {
+          margin-right: 16px;
+          cursor: pointer;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+      }
+
+      & > div {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+</style>

packages/device/IntelligentSecurity/components/Timeline.vue

@@ -0,0 +1,293 @@
+<template>
+  <div :class="wrapper" class="canvas" @click="onClick" @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true" v-if="isInit">
+    <canvas :id="id" :style="{height: '52px'}" v-if="canvasWidth" :width="canvasWidth" height="52">
+    </canvas>
+    <div class="time" v-show="!isHide" :style="{left: left + 'px'}">{{ time }}</div>
+    <div class="time-scale" :style="{left: x + 'px'}">
+      <span></span>
+    </div>
+    <img @mousedown="onDragDown" class="drag-img" :style="{left: x + 'px'}" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['isLiveing', 'times'],
+
+    data () {
+      return {
+        ctx: null,
+        canvasWidth: '',
+        canvasHeight: '',
+        scale: 4,
+        time: '',
+        left: 0,
+        x: 0,
+        ratioW: '',
+        isHide: true,
+        isInit: false,
+        isChoose: false,
+        wrapper: `canvas-${new Date().getTime()}`,
+        id: `timeline-${new Date().getTime()}`,
+        timer: null
+      }
+    },
+
+    watch: {
+      isLiveing () {
+        this.countdown()
+      },
+
+      times: {
+        deep: true,
+        handler (v) {
+          if (v.length && this.ctx) {
+            this.init()
+          }
+        }
+      }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    destroyed () {
+      clearInterval(this.timer)
+    },
+
+    methods: {
+      onMousemove (e) {
+        const canvasInfo = document.querySelector(`#${this.id}`).getBoundingClientRect()
+        const seconds = 24 * 60 * 60
+
+        if (e.clientY - canvasInfo.top < 29) {
+          const x = e.clientX - canvasInfo.left
+          const unit = seconds / this.canvasWidth * x
+          this.left = x
+          this.time = this.secTotime(unit)
+          this.isHide = false
+
+          if (!this.isChoose) return
+          this.x = e.clientX - canvasInfo.left
+          this.ratioW = this.x / this.canvasWidth
+        } else {
+          this.isHide = true
+        }
+      },
+
+      onClick (e) {
+        const canvasInfo = document.querySelector(`#${this.id}`).getBoundingClientRect()
+
+        if (e.clientY - canvasInfo.top < 29) {
+          this.x = e.clientX - canvasInfo.left
+          clearInterval(this.timer)
+          this.timer = null
+          const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+
+          this.$emit('replay', time)
+        }
+      },
+
+      onDragDown () {
+        this.isChoose = true
+      },
+
+      onMouseUp () {
+        if (!this.isChoose) return
+
+        clearInterval(this.timer)
+        this.timer = null
+        this.isChoose = false
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+        this.$emit('replay', time)
+      },
+
+      secTotime (s) {
+        let second = parseInt(s)
+        let minute = 0
+        let hour = 0
+        if (second > 60) {
+          minute = parseInt(second / 60)
+          second = parseInt(second % 60)
+          if (minute > 60) {
+            hour = parseInt(minute / 60)
+            minute = parseInt(minute % 60)
+          }
+        }
+
+        hour = `${parseInt(hour) > 9 ? parseInt(hour) : '0' + parseInt(hour)}`
+        minute = `${parseInt(minute) > 9 ? parseInt(minute) : '0' + parseInt(minute)}`
+        second = `${parseInt(second) > 9 ? parseInt(second) : '0' + parseInt(second)}`
+        return `${hour}:${minute}:${second}`
+      },
+
+      init () {
+        if (this.timer) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+          
+        this.ratioW = this.x / this.canvasWidth
+        this.$nextTick(() => {
+          this.isInit = true
+          this.$nextTick(() => {
+            this.canvasWidth = document.querySelector(`.${this.wrapper}`).offsetWidth
+            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight
+
+            this.$nextTick(() => {
+              const el = document.querySelector(`#${this.id}`)
+              this.ctx = el.getContext('2d')
+              this.ctx.width  = document.querySelector('.canvas').offsetWidth
+              this.ctx.height  = document.querySelector('.canvas').offsetHeight
+
+              if (this.x > 0) {
+                this.x = this.ratioW * this.canvasWidth
+              } else {
+                this.initNowTime()
+              }
+
+              this.renderTimeLine()
+              this.renderPlayback()
+
+              this.countdown()
+            })
+          })
+        })
+      },
+
+      countdown () {
+        this.timer = setInterval(() => {
+          if (this.isLiveing) {
+            this.initNowTime()
+          } else {
+            this.x = this.x + this.canvasWidth / (24 * 60 * 60)
+          }
+        }, 1000)
+      },
+
+      initNowTime () {
+        const date = new Date()
+        const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()
+
+        this.x = this.canvasWidth / (24 * 60 * 60) * seconds
+      },
+
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.lineWidth = lineWidth
+        ctx.strokeStyle = lineColor
+        ctx.beginPath()
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.closePath()
+        ctx.stroke()
+      },
+
+      renderPlayback () {
+        const ctx = this.ctx
+        const unit = this.canvasWidth / (24 * 60 * 60)
+        this.times.forEach(item => {
+          this.drawLine(ctx, {
+            beginX: item.startTime * unit,
+            beginY: 28,
+            endX: item.startTime * unit,
+            endY: 0,
+            lineColor: 'rgba(0, 156, 255, 1)',
+            lineWidth: item.endTime * unit - item.startTime * unit
+          })
+        })
+      },
+
+      renderTimeLine () {
+        const ctx = this.ctx
+        ctx.fillStyle = 'rgba(51, 60, 83, 0.8)'
+        ctx.fillRect(0, 0, this.canvasWidth, 28)
+        ctx.fillStyle = 'rgba(32, 40, 61, 0.8)'
+        ctx.fillRect(0, 28, this.canvasWidth, 24)
+
+        
+        ctx.fillStyle = '#fff'
+        ctx.font = '12px Arial'
+        const w = this.canvasWidth / 24 
+
+        for (let i = 1; i < 25; i ++) {
+          this.drawLine(ctx, {
+            beginX: i * w,
+            beginY: 28,
+            endX: i * w,
+            endY: i % this.scale === 0 ? 16 : 20,
+            lineColor: i % this.scale === 0 ? 'red' : '#000',
+            lineWidth: i % this.scale === 0 ? 1 : 1
+          })
+
+          if (i % this.scale === 0) {
+            const text = (i < 10 ? '0' + i : i) + ': 00'
+            const textWidth = ctx.measureText(text).width
+            if (i === 24) {
+              ctx.fillText(text, i * w - textWidth, 44)
+            } else {
+              ctx.fillText(text, i * w - textWidth / 2, 44)
+            }
+          }
+        }
+
+        if (!this.times.length) {
+        ctx.stroke()
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .canvas {
+    position: relative;
+    width: 100%;
+    height: 52px;
+
+    .drag-img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      user-select: none;
+      cursor: e-resize;
+      -webkit-user-drag: none;
+      // transform: translateX(-50%);
+    }
+
+    .time-scale {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: center;
+      left: 0;
+      bottom: 0;
+      z-index: 1;
+      user-select: none;
+      width: 12px;
+      height: 24px;
+
+      span {
+        width: 2px;
+        height: 24px;
+        background: rgba(255, 255, 255, 0.8);
+      }
+    }
+
+    .time {
+      position: absolute;
+      bottom: 22px;
+      left: 0;
+      z-index: 1;
+      padding: 2px 4px;
+      font-size: 12px;
+      color: #fff;
+      background: rgba(0, 0, 0, 1);
+      transform: translate(-50%, 100%);
+    }
+  }
+</style>

packages/device/IntelligentSecurity/components/deviceSlider.vue

@@ -0,0 +1,319 @@
+<template>
+  <section class="deviceSlider">
+    <div class="mainPane" v-if="show">
+      <div flex overview>
+        <b>监控设备</b>
+        <div>
+          <div>设备总数：{{ overview.total }}</div>
+          <div flex>在线设备：<p v-text="overview.online"/></div>
+        </div>
+        <el-progress type="circle" :width="40" :percentage="overview.percent" color="#19D286" :stroke-width="4"/>
+      </div>
+      <div flex search>
+        <el-select v-model="search.bind" size="mini" placeholder="全部" clearable @change="onChange">
+          <el-option v-for="(op,i) in dict.getDict('deviceStatus')" :key="i" :value="op.dictValue"
+                     :label="op.dictName"/>
+        </el-select>
+        <el-input
+            v-model="search.name"
+            size="mini"
+            placeholder="设备名称"
+            v-throttle="handleTreeFilter"
+            prefix-icon="el-icon-search"
+            @clear="search.name = '', handleTreeFilter()" clearable/>
+      </div>
+      <div title>设备列表</div>
+      <div fill class="deviceList">
+        <el-tree ref="deviceTree" highlight-current :render-content="renderItem" :data="treeData" :props="propsConfig"
+                 @node-click="handleNodeClick" @node-contextmenu="nodeContextmenu"
+                 :filter-node-method="handleFilter"/>
+        <ul
+          v-if="isShowMenu && menuInfo.node.type==1 && permissions('video_config')"
+          class="el-dropdown-menu el-popper"
+          :style="{top: menuInfo.y + 'px', left: menuInfo.x + 'px', position: 'fixed', zIndex: 2023}"
+          x-placement="top-end">
+          <li class="el-dropdown-menu__item" @click="handleTreeCommand('edit', menuInfo.node)">修改名称</li>
+          <li class="el-dropdown-menu__item" @click="handleTreeCommand('locate', menuInfo.node)">地图标绘</li>
+        </ul>
+      </div>
+    </div>
+    <div class="rightBtn" :class="{show}" @click="handleShow">
+      <i class="iconfont iconArrow_Right"/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "deviceSlider",
+  props: {
+    show: Boolean,
+    ins: Function,
+    dict: Object,
+    permissions: Function,
+    renderItem: Function
+  },
+  computed: {
+    overview() {
+      let total = this.list?.length || 0,
+          online = this.list?.filter(e => e.deviceStatus == 1)?.length || 0
+      return {
+        total, online,
+        percent: Math.ceil(online / total * 100) || 0
+      }
+    },
+    propsConfig() {
+      return {
+        label: 'name',
+        children: 'children'
+      }
+    },
+    treeData() {
+      let {list, noArea, staData} = this
+      let meta = [staData?.reduce((t, e) => {
+        return t.type <= e.type ? t : e
+      }, {name: '读取中...'})]
+      meta.map(p => this.addChild(p, [...staData, ...list].map(s => ({
+        ...s,
+        parentId: s.areaId || s.parent_id
+      }))))
+      return [...meta, {
+        id: 'no_area',
+        name: '未知区划',
+        children: noArea
+      }]
+    }
+  },
+  data() {
+    return {
+      list: [],
+      noArea: [],
+      staData: [],
+      name: '',
+      isShowMenu: false,
+      search: {
+        bind: ''
+      },
+      menuInfo: {
+        x: '',
+        y: '',
+        node: {}
+      }
+    }
+  },
+  methods: {
+    handleShow() {
+      this.$emit('update:show', !this.show)
+    },
+
+    bindEvent() {
+      this.isShowMenu = false
+    },
+    getDevices() {
+      this.ins.post("/app/appzyvideoequipment/tree", null, {
+        params: {size: 999}
+      }).then(res => {
+        if (res?.data) {
+          this.staData = res.data.count
+          this.list = res.data.list
+          this.noArea = res.data.noArea
+          this.$emit('list', this.list)
+        }
+      })
+    },
+
+    handleTreeCommand(e, node) {
+      this.$emit('treeCommand', {
+        type: e,
+        node
+      })
+    },
+
+    nodeContextmenu(e, node) {
+      this.isShowMenu = true
+      let y = e.y + 6
+      if (y + 202 > document.body.clientHeight) {
+        y = y - 202
+      }
+      this.menuInfo = {
+        x: e.x + 16, y,
+        node
+      }
+    },
+    handleNodeClick(data) {
+      this.isShowMenu = false
+      this.$emit('select', data)
+    },
+    handleFilter(v, data) {
+      if (!v) {
+        return !this.search.bind ? true : data.deviceStatus === this.search.bind
+      }
+
+      return data?.name?.indexOf(v) > -1 && (!this.search.bind ? true : data.deviceStatus === this.search.bind)
+    },
+    handleTreeFilter() {
+      this.$refs.deviceTree?.filter(this.search.name)
+    },
+
+    onChange() {
+      this.$refs.deviceTree?.filter(this.search.name)
+    }
+  },
+  created() {
+    this.dict.load("deviceStatus")
+    this.getDevices()
+  },
+
+  mounted() {
+    document.querySelector('html').addEventListener('click', this.bindEvent)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.deviceSlider {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: #fff;
+  overflow: hidden;
+
+  div[flex] {
+    display: flex;
+    align-items: center;
+  }
+
+  .deviceList {
+    overflow: auto;
+
+    ::v-deep .el-tree {
+      width: -webkit-fit-content;
+      width: -moz-fit-content;
+      width: fit-content;
+      min-width: 100%;
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      height: 15px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+      background: #535353;
+    }
+
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+      background: #fff;
+    }
+  }
+
+  div[fill] {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .mainPane {
+    width: 280px;
+    height: 100%;
+    background: #333C53;
+    display: flex;
+    flex-direction: column;
+    padding-top: 16px;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    b {
+      font-size: 18px;
+    }
+
+    div[overview], div[search] {
+      box-sizing: border-box;
+      font-size: 12px;
+      justify-content: space-between;
+      padding: 0 16px;
+      gap: 4px;
+      margin-bottom: 16px;
+
+      ::v-deep.el-input__inner {
+        color: #fff;
+      }
+    }
+
+    div[title] {
+      height: 28px;
+      background: #3E4A69;
+      padding: 0 16px;
+      line-height: 28px;
+    }
+
+    ::v-deep.deviceList {
+      padding: 0 8px;
+
+      .el-scrollbar {
+        height: 100%;
+
+        .el-scrollbar__wrap {
+          box-sizing: content-box;
+          padding-bottom: 17px;
+        }
+      }
+    }
+
+    ::v-deep .el-progress__text, p {
+      color: #19D286;
+    }
+
+    ::v-deep .el-input__inner {
+      background: #282F45;
+      border: none;
+    }
+
+    ::v-deep .el-tree {
+      background: transparent;
+      color: #fff;
+
+      .el-tree-node__content {
+        background: transparent!important;
+      }
+      
+      .el-tree-node__children .is-current .el-tree-node__content {
+        background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%)!important;
+      }
+
+      .el-tree-node__content:hover {
+        background: transparent;
+      }
+
+      .el-tree-node__content {
+        height: 32px;
+      }
+    }
+
+    ::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>

packages/device/IntelligentSecurity/components/locateDialog.vue

@@ -0,0 +1,177 @@
+<template>
+  <section class="locateDialog">
+    <ai-dialog :visible.sync="dialog" title="标绘" @closed="$emit('visible',false),selected={}"
+               @opened="$nextTick(()=>initMap())"
+               @onConfirm="handleConfirm">
+      <ai-t-map :map.sync="map" :lib.sync="TMap"/>
+      <div class="poi">
+        <el-autocomplete ref="poiInput" v-model="search" size="small" clearable :fetch-suggestions="handleSearch"
+                         placeholder="请输入地点" @select="handleSelect" :trigger-on-focus="false">
+          <template slot-scope="{item}">
+            <span style="direction: rtl" v-text="`${item.title}(${item.address})`"/>
+          </template>
+        </el-autocomplete>
+      </div>
+      <el-form class="selected" v-if="!!selected.location" id="result" size="mini" label-suffix="："
+               label-position="left">
+        <div class="header">
+          <i class="iconfont iconLocation"/>
+          <span v-html="[selected.location.lng, selected.location.lat].join(',')"/>
+        </div>
+        <el-form-item label="地点">{{ selected.name || "未知地名" }}</el-form-item>
+        <el-form-item label="类型" v-if="!!selected.type">{{ selected.type }}</el-form-item>
+        <el-form-item label="地址" v-if="!!selected.address">{{ selected.address }}</el-form-item>
+      </el-form>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "locateDialog",
+  model: {
+    prop: "visible",
+    event: "visible",
+  },
+  props: ['latlng', 'visible'],
+  data() {
+    return {
+      dialog: false,
+      search: "",
+      map: null,
+      selected: {},
+      TMap: null
+    }
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  watch: {
+    visible(v) {
+      this.dialog = v
+    }
+  },
+  methods: {
+    initMap(count = 0) {
+      let {map, TMap} = this
+      if (map) {
+        if (!!this.latlng?.lat) {
+          let position = new TMap.LatLng(this.latlng.lat, this.latlng.lng)
+          map.setCenter(position)
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position}]})
+        }
+        map.on('click', res => {
+          let {poi, latLng: location} = res, name = poi?.name || ""
+          this.selected.marker?.setMap(null)
+          this.selected = {location, name}
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
+        })
+      } else {
+        if (count < 5) {
+          count++
+          setTimeout(() => this.initMap(count), 500)
+        } else {
+          console.error("地图渲染失败")
+        }
+      }
+    },
+    handleSearch(keyword, cb) {
+      let {TMap} = this
+      if (keyword && TMap) {
+        let poi = new TMap.service.Search({pageSize: 10})
+        poi.searchRegion({
+          keyword, radius: 5000, cityName: this.user.info?.areaId?.substring(0, 6) || ""
+        }).then(res => {
+          if (res?.data?.length > 0) {
+            cb(res.data)
+          } else this.$message.error("未查到有效地点")
+        })
+      }
+    },
+    handleConfirm() {
+      if (this.selected?.location) {
+        this.$emit('confirm', this.selected)
+      } else {
+        this.$message.error('请先选择坐标位置')
+      }
+    },
+    handleSelect(res) {
+      let {map, TMap} = this
+      if (map) {
+        let {title: name, location} = res
+        this.selected.marker?.setMap(null)
+        this.selected = {location, name}
+        this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
+        map.setCenter(location)
+      }
+    }
+  },
+  created() {
+    this.dialog = this.visible
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.locateDialog {
+  .color-999 {
+    color: #999;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 0;
+    height: 480px;
+    position: relative;
+
+    .ai-dialog__content--wrapper {
+      padding: 0 !important;
+    }
+
+    .poi {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      display: flex;
+      height: 32px;
+      flex-direction: column;
+      z-index: 202203281016;
+      width: 400px;
+
+      div {
+        flex-shrink: 0;
+      }
+    }
+
+    .selected {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+      background: #fff;
+      min-width: 200px;
+      box-sizing: border-box;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+      .header {
+        color: #fff;
+        background: #26f;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        height: 32px;
+        font-size: 14px;
+        gap: 4px;
+        padding: 0 8px;
+      }
+
+      .el-form-item {
+        padding: 0 8px;
+        margin: 0;
+      }
+    }
+  }
+}
+
+
+</style>

packages/device/IntelligentSecurity/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>

packages/device/monitor/AppMonitorDevice/AppMonitorDevice.vue

@@ -0,0 +1,131 @@
+<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
+            @clear="page.current = 1,search.title = '', getTableData()"
+                      v-throttle="() => {page.current = 1, getTableData()}" size="small"/>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
+                  :size.sync="page.size" @getList="getTableData">
+          <el-table-column label="操作" slot="options" align="center">
+            <el-row type="flex" slot-scope="{row}" align="middle" justify="center">
+              <ai-area v-model="row.areaId" :instance="instance" :inputClicker="false" customClicker
+                       @change="handleSubmit(row)">
+                <el-button type="text">绑定</el-button>
+              </ai-area>
+              <el-button type="text" @click="handleLocate(row)">标绘</el-button>
+              <div/>
+              <el-button type="text" @click="handleShow(row)">设置</el-button>
+            </el-row>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(detail,v)"/>
+    <setting-dialog v-model="dialog" :ins="instance"/>
+  </section>
+</template>
+
+<script>
+import LocateDialog from "../components/locateDialog";
+import SettingDialog from "../components/settingDialog";
+
+export default {
+  name: "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>

packages/device/monitor/AppMonitorManage/AppMonitorManage.vue

@@ -0,0 +1,301 @@
+<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" :latlng="latlng" @confirm="v=>handleLocate(selected,v)"/>
+    <ai-area custom-clicker :input-clicker="false" v-model="selected.areaId" :hideLevel="disabledLevel" :instance="instance" ref="BindArea"
+             @change="handleSubmit(selected)"/>
+  </section>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  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}
+      },
+      ...mapState(['user'])
+    },
+
+    data() {
+      return {
+        slider: true,
+        fullscreen: false,
+        splitScreen: 1,
+        monitors: [],
+        dialog: false,
+        locate: false,
+        selected: {
+          areaId: ''
+        },
+        latlng: null,
+        disabledLevel: 0,
+        rules: {
+          name: [{required: true, message: "请填写 设备名称"}]
+        }
+      }
+    },
+
+    created () {
+      this.selected.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length
+    },
+
+    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.latlng = data.lat && data.lng ? {
+            lat: data.lat,
+            lng: data.lng
+          } : ''
+          this.locate = true
+        }
+      },
+      handleSubmit(row) {
+        delete row.createTime
+        return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
+          ...row
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("提交成功!")
+            this.dialog = false
+            this.$refs.DeviceSlider?.getDevices()
+          }
+        })
+      },
+      handleLocate(row, locate) {
+        if (locate) {
+          let {lat, lng} = locate.location
+          this.handleSubmit({...row, lat, lng}).then(() => {
+            this.locate = false
+          })
+        }
+      }
+    },
+    beforeDestroy() {
+      this.monitors = []
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.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>

packages/device/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>

packages/device/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>

packages/device/monitor/components/locateDialog.vue

@@ -0,0 +1,181 @@
+<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: ['latlng', 'visible'],
+  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,
+          center: this.latlng ? [this.latlng.lng, this.latlng.lat] : ''
+        }).on('click', res => {
+          this.map.clearMap()
+          this.selected = {location: res.lnglat}
+          this.poi?.searchNearBy('', res.lnglat, 100)
+        });
+        if (this.latlng) {
+          let marker = new AMap.Marker({
+            position: [this.latlng.lng, this.latlng.lat]
+          })
+          this.map.add(marker)
+        }
+        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>

packages/device/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>

packages/device/tutelage/AppEarlyWarning/AppEarlyWarning.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="doc-circulation ailist-wrapper">
+    <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 Monitor from '../AppWristband/components/Monitor'
+
+  export default {
+    name: 'AppEarlyWarning',
+    label: '健康预警',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
+
+    components: {
+      List,
+      Monitor
+    },
+
+    mounted () {
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Monitor') {
+          this.component = 'Monitor'
+          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">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>

packages/device/tutelage/AppEarlyWarning/components/List.vue

@@ -0,0 +1,266 @@
+<template>
+  <ai-list class="early-warning">
+    <template slot="title">
+      <ai-title title="健康预警" isShowArea isShowBottomBorder v-model="search.areaId" :instance="instance" @change="search.current = 1, getList()">
+        <template #rightBtn>
+          <el-button type="primary" @click="getRules(), isShow = true">预警规则</el-button>
+        </template>
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-date-picker
+            v-model="search.createTimeRange"
+            type="daterange"
+            size="small"
+            @change="search.current = 1, getList()"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+          <ai-select
+            v-model="search.item"
+            @change="search.current = 1, getList()"
+            placeholder="预警类型"
+            :selectList="dict.getDict('intelligentGuardianshipItem3')">
+          </ai-select>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="search.name"
+            size="small"
+            v-throttle="() => {search.current = 1, getList()}"
+            placeholder="请输入成员姓名、设备号"
+            clearable
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        v-loading="loading"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="$router.push({name: '监护地图', query: {id: row.deviceId, lat: row.lat, lng: row.lng}})">地图查看</el-button>
+              <el-button type="text" @click="toMonitor(row.deviceId)">监测数据</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="690px"
+        title="预警规则"
+        @close="currIndex = 0"
+        @onConfirm="onConfirm">
+        <el-radio-group v-model="currIndex" size="small">
+          <el-radio-button :label="0">体温</el-radio-button>
+          <el-radio-button :label="1">心率</el-radio-button>
+          <el-radio-button :label="2">血压</el-radio-button>
+          <el-radio-button :label="3">血氧</el-radio-button>
+          <el-radio-button :label="4">电量</el-radio-button>
+        </el-radio-group>
+        <el-form label-width="70px">
+          <div class="rules-form" v-for="(item, index) in rules" :key="index" v-show="currIndex === index">
+            <el-form-item label="规则推送">
+              <el-switch
+                v-model="item.pushType" active-value="1" inactive-value="0">
+              </el-switch>
+            </el-form-item>
+            <el-form-item label="预警规则">
+              <el-input size="small" placeholder="请输入" v-model="item.gtValue" v-if="index !== 4 && index !== 3">
+                <template slot="prepend"><el-button>大于</el-button></template>
+              </el-input>
+              <el-input size="small" placeholder="请输入" v-model="item.ltValue">
+                <template slot="prepend"><el-button type="info">小于</el-button></template>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-form>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          areaId: '',
+          createTimeRange: [],
+          item: ''
+        },
+        currIndex: 0,
+        isShow: false,
+        loading: false,
+        rules: [],
+        total: 0,
+        colConfigs: [
+          { prop: 'name', label: '姓名' },
+          { prop: 'mid', label: '设备号' },
+          {
+            prop: 'departmentNames',
+            label: '年龄',
+            align: 'center',
+            render: (h, { row }) => {
+              return h('span', {}, this.getIdInfo(row.idNumber, 3))
+            }
+          },
+          { prop: 'sex', align: 'center', label: '性别', formart: v => v === '1' ? '男' : '女' },
+          { prop: 'phone', align: 'center', label: '联系方式' },
+          { prop: 'areaName', align: 'center', label: '所属地区' },
+          { prop: 'type', align: 'center', label: '预警类型', formart: v => this.dict.getLabel('intelligentGuardianshipItem3', v) },
+          { prop: 'itemValue', align: 'center', label: '预警值' },
+          { prop: 'gpsDesc', align: 'center', width: 150, label: '预警地点' },
+          { prop: 'createTime', align: 'center', label: '预警时间' }
+        ],
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    mounted() {
+      this.search.areaId = this.user.info.areaId
+      this.dict.load(['intelligentGuardianshipItem3']).then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList () {
+        this.instance.post(`/app/appintelligentguardianshipalarm/list`, null, {
+          params: {
+            ...this.search,
+            type: 0,
+            createTimeRange: (this.search.createTimeRange && this.search.createTimeRange.length) ? this.search.createTimeRange.join(',') : ','
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records.map(v => {
+              return {
+                ...v,
+                type: this.dict.getLabel('ntelligentGuardianshipItem3', v.item)
+              }
+            })
+            this.total = res.data.total
+
+            this.$nextTick(() => {
+              this.loading = false
+            })
+          } else {
+            this.loading = false
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+
+      getRules () {
+        this.instance.post(`/app/appintelligentguardianshipalarm/queryAlarmConfig`).then(res => {
+          if (res.code == 0) {
+            this.rules = res.data.sort((a, b) => a.item - b.item)
+
+            if (!res.data.length) {
+              this.rules = [0, 1, 2, 3, 4].map(index => {
+                return {
+                  gtValue: '',
+                  item: index,
+                  ltValue: '',
+                  pushType: '1'
+                }
+              })
+            }
+          }
+        })
+      },
+
+      onConfirm () {
+        this.instance.post(`/app/appintelligentguardianshipalarm/addOrUpdateConfig`, this.rules).then(res => {
+          if (res.code == 0) {
+            this.$message.success('提交成功')
+            this.isShow = false
+          }
+        })
+      },
+
+      getIdInfo (UUserCard, num) {
+        if (num == 1) {
+          var birth = UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
+          return birth
+        }
+        if (num == 2) {
+          if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
+            return '1'
+          } else {
+            return '0'
+          }
+        }
+
+        if (num == 3) {
+          var myDate = new Date()
+          var month = myDate.getMonth() + 1
+          var day = myDate.getDate()
+          var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
+          if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
+            age ++
+          }
+
+          return age
+        }
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appintelligentguardianshipdevice/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toMonitor (id) {
+        this.$emit('change', {
+          type: 'Monitor',
+          params: {
+            id: id || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.early-warning {
+  .rules-form {
+    margin-top: 20px;
+  }
+}
+</style>

packages/device/tutelage/AppSoS/AppSoS.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="doc-circulation ailist-wrapper">
+    <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 Monitor from '../AppWristband/components/Monitor'
+
+  export default {
+    name: 'AppSOS',
+    label: 'SOS求助',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
+
+    components: {
+      List,
+      Monitor
+    },
+
+    mounted () {
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Monitor') {
+          this.component = 'Monitor'
+          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">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>

packages/device/tutelage/AppSoS/components/List.vue

@@ -0,0 +1,188 @@
+<template>
+  <ai-list class="early-warning">
+    <template slot="title">
+      <ai-title title="SOS求助" isShowArea isShowBottomBorder v-model="search.areaId" :instance="instance" @change="search.current = 1, getList()">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-date-picker
+            @change="search.current = 1, getList()"
+            v-model="search.createTimeRange"
+            type="daterange"
+            size="small"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="search.name"
+            size="small"
+            v-throttle="() => {search.current = 1, getList()}"
+            placeholder="请输入成员姓名、设备号"
+            clearable
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        v-loading="loading"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="$router.push({name: '监护地图', query: {id: row.deviceId, lat: row.lat, lng: row.lng}})">地图查看</el-button>
+              <el-button type="text" @click="toMonitor(row.deviceId)">监测数据</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          areaId: '',
+          createTimeRange: []
+        },
+        currIndex: 0,
+        isShow: false,
+        loading: false,
+        total: 0,
+        colConfigs: [
+          { prop: 'name', label: '姓名' },
+          { prop: 'mid', label: '设备号' },
+          {
+            prop: 'departmentNames',
+            label: '年龄',
+            align: 'center',
+            render: (h, { row }) => {
+              return h('span', {}, this.getIdInfo(row.idNumber, 3))
+            }
+          },
+          { prop: 'sex', align: 'center', label: '性别', formart: v => v === '1' ? '男' : '女' },
+          { prop: 'phone', align: 'center', label: '联系方式' },
+          { prop: 'areaName', align: 'center', label: '所属地区' },
+          { prop: 'type', align: 'center', label: '预警类型' },
+          { prop: 'gpsDesc', align: 'center', width: 150, label: '预警地点' },
+          { prop: 'createTime', align: 'center', label: '预警时间' }
+        ],
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    mounted() {
+      this.search.areaId = this.user.info.areaId
+      this.getList()
+    },
+
+    methods: {
+      getList () {
+        this.loading = true
+        this.instance.post(`/app/appintelligentguardianshipalarm/list`, null, {
+          params: {
+            ...this.search,
+            item: 5,
+            type: 1,
+            createTimeRange: (this.search.createTimeRange && this.search.createTimeRange.length) ? this.search.createTimeRange.join(',') : ','
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records.map(v => {
+              return {
+                ...v,
+                type: 'SOS'
+              }
+            })
+            this.total = res.data.total
+
+            this.$nextTick(() => {
+              this.loading = false
+            })
+          } else {
+            this.loading = false
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+
+      getIdInfo (UUserCard, num) {
+        if (num == 1) {
+          var birth = UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
+          return birth
+        }
+        if (num == 2) {
+          if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
+            return '1'
+          } else {
+            return '0'
+          }
+        }
+
+        if (num == 3) {
+          var myDate = new Date()
+          var month = myDate.getMonth() + 1
+          var day = myDate.getDate()
+          var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
+          if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
+            age ++
+          }
+
+          return age
+        }
+      },
+
+      onConfirm () {
+
+      },
+
+      toMonitor (id) {
+        this.$emit('change', {
+          type: 'Monitor',
+          params: {
+            id: id || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.early-warning {
+  .rules-form {
+    margin-top: 20px;
+  }
+}
+</style>

packages/device/tutelage/AppWristband/AppWristband.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="doc-circulation ailist-wrapper">
+    <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 Monitor from './components/Monitor'
+
+  export default {
+    name: 'AppWristband',
+    label: '人员设备',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
+
+    components: {
+      Add,
+      List,
+      Monitor
+    },
+
+    mounted () {
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Add') {
+          this.component = 'Add'
+          this.params = data.params
+        }
+
+        if (data.type === 'Monitor') {
+          this.component = 'Monitor'
+          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">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>

packages/device/tutelage/AppWristband/components/Add.vue

@@ -0,0 +1,300 @@
+<template>
+  <ai-detail class="wristband-add">
+    <template slot="title">
+      <ai-title :title="id ? '编辑人员' : '添加人员'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <el-form ref="form" :model="form" label-width="120px" label-position="right">
+        <ai-card title="个人信息">
+          <template #content>
+            <div class="ai-form">
+              <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
+                <el-input size="small" placeholder="请输入姓名" v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="身份证号码" prop="idNumber" :rules="[{ required: true, message: '请输入身份证号码', trigger: 'blur' }, {validator: validatorId, trigger: 'blur'}]">
+                <el-input size="small" @blur="onBlur" placeholder="请输入身份证号码" v-model="form.idNumber"></el-input>
+              </el-form-item>
+              <el-form-item label="年龄" prop="age" :rules="[{ required: true, message: '请输入年龄', trigger: 'blur' }]">
+                <el-input size="small" disabled placeholder="请输入年龄" v-model="form.age"></el-input>
+              </el-form-item>
+              <el-form-item label="性别" prop="sex" placeholder="请选择性别" :rules="[{ required: true, message: '请选择性别', trigger: 'change' }]">
+                <el-radio-group v-model="form.sex" disabled>
+                  <el-radio label="1">男</el-radio>
+                  <el-radio label="0">女</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="设备号" prop="mid" :rules="[{ required: true, message: '请输入设备号', trigger: 'blur' }]">
+                <el-input size="small" placeholder="请输入设备号" v-model="form.mid"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式" prop="phone">
+                <el-input size="small" placeholder="请输入联系方式" v-model="form.phone"></el-input>
+              </el-form-item>
+              <el-form-item label="所属地区" prop="areaName" style="width: 100%;" :rules="[{ required: true, message: '请选择地区', trigger: 'change' }]">
+                <ai-area-get v-model="form.areaId" :root="areaRootid" :instance="instance" :name.sync="form.areaName" @change="onAreaChange"></ai-area-get>
+              </el-form-item>
+              <el-form-item label="备注" style="width: 100%;" prop="remark">
+                <el-input size="small" placeholder="请输入备注" v-model="form.remark"></el-input>
+              </el-form-item>
+            </div>
+          </template>
+        </ai-card>
+        <ai-card title="监护人信息">
+          <template #right>
+            <el-button type="text" @click="isShow = true">添加监护人</el-button>
+          </template>
+          <template #content>
+            <ai-table
+              :border="true"
+              :tableData="form.guardians"
+              :isShowPagination="false"
+              :col-configs="colConfigs"
+              :stripe="false"
+              @getList="() => {}">
+              <el-table-column
+                slot="index"
+                type="index"
+                width="100px"
+                label="序号"
+                align="center">
+              </el-table-column>
+              <el-table-column
+                slot="options"
+                width="120px"
+                label="操作"
+                align="center">
+                <template slot-scope="{ row, $index }">
+                  <div class="table-options">
+                    <el-button type="text" @click="edit(row, $index)">编辑</el-button>
+                    <el-button type="text" @click="remove($index)">删除</el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </ai-table>
+          </template>
+        </ai-card>
+      </el-form>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="690px"
+        :title="guardiansId ? '修改监护人' : '添加监护人'"
+        @close="onClose"
+        @onConfirm="onUserConfirm">
+        <el-form
+          ref="userForm"
+          :model="userForm"
+          label-width="130px"
+          label-position="right">
+          <el-form-item
+            label="监护人姓名"
+            prop="guardianName"
+            :rules="[{ required: true, message: '请输入监护人姓名', trigger: 'blur' }]">
+            <el-input
+              size="small"
+              :maxLength="30"
+              v-model="userForm.guardianName"
+              placeholder="请输入监护人姓名">
+            </el-input>
+          </el-form-item>
+          <el-form-item
+            label="监护人联系电话"
+            prop="guardianPhone"
+            :rules="[{ required: true, message: '请输入监护人联系电话', trigger: 'blur' }]">
+            <el-input
+              size="small"
+              :maxLength="11"
+              v-model="userForm.guardianPhone"
+              placeholder="请输入监护人联系电话">
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+    </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',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      const validatorId = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入身份证号'))
+        } else if (!this.idCardNoUtil.checkIdCardNo(value)) {
+          callback(new Error('身份证号格式错误'))
+        } else {
+          callback()
+        }
+      }
+      return {
+        info: {},
+        isShow: false,
+        colConfigs: [
+          { slot: 'index', label: '序号', width: 200 },
+          { prop: 'guardianName', label: '监护人姓名' },
+          { prop: 'guardianPhone', label: '监护人联系电话' }
+        ],
+        userForm: {
+          guardianName: '',
+          guardianPhone: ''
+        },
+        validatorId,
+        form: {
+          guardians: [],
+          idNumber: '',
+          name: '',
+          phone: '',
+          age: '',
+          areaName: '',
+          areaId: '',
+          sex: '',
+          remark: '',
+          mid: ''
+        },
+        areaRootid: '',
+        id: '',
+        guardiansId: ''
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created () {
+      this.areaRootid = this.user.info.areaId
+
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appintelligentguardianshipdevice/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = {
+              ...res.data
+            }
+            this.form.age = this.getIdInfo(res.data.idNumber, 3)
+          }
+        })
+      },
+
+      onAreaChange (e) {
+        if (e) {
+          this.$nextTick(() => {
+            this.$refs.form.clearValidate('areaName')
+          })
+        } else {
+          setTimeout(() => {
+            this.$refs.form.validateField('areaName')
+          }, 80);
+        }
+      },
+
+      onBlur () {
+        this.form.age = this.getIdInfo(this.form.idNumber, 3)
+        this.form.sex = this.getIdInfo(this.form.idNumber, 2)
+      },
+
+      getIdInfo (UUserCard, num) {
+        if (num == 1) {
+          var birth = UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
+          return birth
+        }
+        if (num == 2) {
+          if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
+            return '1'
+          } else {
+            return '0'
+          }
+        }
+
+        if (num == 3) {
+          var myDate = new Date()
+          var month = myDate.getMonth() + 1
+          var day = myDate.getDate()
+          var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
+          if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
+            age ++
+          }
+
+          return age
+        }
+      },
+
+      onClose () {
+        this.userForm.guardianName = ''
+        this.userForm.guardianPhone = ''
+        this.guardiansId = ''
+      },
+
+      edit (row, index) {
+        this.guardiansId = index
+        this.userForm = {
+          ...row
+        }
+        this.isShow = true
+      },
+
+      onUserConfirm () {
+        this.$refs.userForm.validate((valid) => {
+          if (valid) {
+            if (this.guardiansId || this.guardiansId === 0) {
+              this.isShow = false
+              this.$set(this.form.guardians, this.guardiansId, JSON.parse(JSON.stringify(this.userForm)))
+            } else {
+              this.isShow = false
+              this.form.guardians.push(JSON.parse(JSON.stringify(this.userForm)))
+            }
+          }
+        })
+      },
+
+      confirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appintelligentguardianshipdevice/addOrUpdate`, {
+              ...this.form
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 600)
+              }
+            })
+          }
+        })
+      },
+
+      remove (index) {
+        this.form.guardians.splice(index, 1)
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>

packages/device/tutelage/AppWristband/components/List.vue

@@ -0,0 +1,278 @@
+<template>
+  <ai-list class="addressBook">
+    <template slot="title">
+      <ai-title title="人员设备" isShowArea isShowBottomBorder v-model="search.areaId" :instance="instance" @change="search.current = 1, getList()"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar" bottomBorder>
+        <template #left>
+          <ai-select
+            v-model="search.abnormalStatus"
+            @change="search.current = 1, getList()"
+            placeholder="异常状态"
+            :selectList="dict.getDict('intelligentGuardianshipAbnormalStatus')">
+          </ai-select>
+          <ai-select
+            v-model="search.onlineStatus"
+            @change="search.current = 1, getList()"
+            placeholder="在线状态"
+            :selectList="onlineStatusList">
+          </ai-select>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="search.name"
+            size="small"
+            v-throttle="() => {search.current = 1, getList()}"
+            placeholder="请输入成员姓名、设备号、监护人"
+            clearable
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-search-bar class="search-bar" style="margin-top: 12px;">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        v-loading="loading"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        @handleSelectionChange="handleSelectionChange"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="options" width="240px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="$router.push({name: '监护地图', query: {id: row.id, lat: row.lat, lng: row.lng}})">地图查看</el-button>
+              <el-button type="text" @click="toMonitor(row.id)">监测数据</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <div slot="paginationBtns" class="table__btns">
+          <span style="margin-right: 8px;" @click="removeAll">批量删除</span>
+        </div>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          areaId: '',
+          abnormalStatus: '',
+          onlineStatus: ''
+        },
+        abnormalStatusList: [{
+          dictName: '正常',
+          dictValue: '0'
+        }, {
+          dictName: '异常',
+          dictValue: '1'
+        }],
+        onlineStatusList: [{
+          dictName: '离线',
+          dictValue: '0'
+        }, {
+          dictName: '在线',
+          dictValue: '1'
+        }],
+        ids: [],
+        loading: false,
+        total: 0,
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user']),
+      colConfigs () {
+        return [
+          { type: 'selection', label: ''},
+          { prop: 'name', label: '姓名' },
+          { prop: 'mid', label: '设备号', width: 140 },
+          {
+            prop: 'departmentNames',
+            label: '年龄',
+            align: 'center',
+            render: (h, { row }) => {
+              return h('span', {}, this.getIdInfo(row.idNumber, 3))
+            }
+          },
+          { prop: 'sex', align: 'center', label: '性别', formart: v => v === '1' ? '男' : '女' },
+          { prop: 'phone', align: 'center', label: '联系方式', width: 120 },
+          { prop: 'guardianCount', align: 'center', label: '监护人数' },
+          { prop: 'areaName', align: 'center', label: '所属地区' },
+          { prop: 'electricQuantity', align: 'center', label: '电量', formart: v => v ? `${v}%` : '-' },
+          { prop: 'createTime', align: 'center', width: 150, label: '最后更新时间' },
+          { prop: 'temperature', align: 'center', label: '体温' },
+          {
+            prop: 'abnormalStatus',
+            align: 'center',
+            label: '是否异常',
+            render: (h, { row }) => {
+              return h('span', {
+                style: {
+                  color: this.getStatusColor(row.abnormalStatus)
+                }
+              }, this.getStatus(row.abnormalStatus))
+            }
+          },
+          {
+            prop: 'onlineStatus',
+            align: 'center',
+            label: '在线状态',
+            render: (h, { row }) => {
+              return h('span', {
+                style: {
+                  color: row.onlineStatus === '1' ? '#2EA222' : '#F46'
+                }
+              }, row.onlineStatus === '1' ? '在线' : '离线')
+            }
+          }
+        ]
+      }
+    },
+
+    mounted() {
+      this.search.areaId = this.user.info.areaId
+
+      this.dict.load(['intelligentGuardianshipAbnormalStatus']).then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      handleSelectionChange (e) {
+        this.ids = e.map(v => v.id).join(',')
+      },
+
+      getStatusColor (status) {
+        if (!status && status !== '0') return ''
+
+        return {
+          '0': '#2EA222',
+          '1': '#F46',
+          '2': '#D326C7'
+        }[status]
+      },
+
+      getStatus (status) {
+        if (!status && status !== '0') return '-'
+
+        return {
+          '0': '正常',
+          '1': '异常',
+          '2': '求助'
+        }[status]
+      },
+
+      getList () {
+        this.loading = true
+        this.instance.post(`/app/appintelligentguardianshipdevice/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+
+            this.$nextTick(() => {
+              this.loading = false
+            })
+          } else {
+            this.loading = false
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+
+      getIdInfo (UUserCard, num) {
+        if (num == 1) {
+          var birth = UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
+          return birth
+        }
+        if (num == 2) {
+          if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
+            return '1'
+          } else {
+            return '0'
+          }
+        }
+
+        if (num == 3) {
+          var myDate = new Date()
+          var month = myDate.getMonth() + 1
+          var day = myDate.getDate()
+          var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
+          if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
+            age ++
+          }
+
+          return age
+        }
+      },
+
+      removeAll () {
+        if (!this.ids) return
+
+        this.remove(this.ids)
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appintelligentguardianshipdevice/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toMonitor (id) {
+        this.$emit('change', {
+          type: 'Monitor',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      toAdd(id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            id: id || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

packages/device/tutelage/AppWristband/components/Monitor.vue

@@ -0,0 +1,194 @@
+<template>
+  <ai-detail class="statistics">
+    <template slot="title">
+      <ai-title title="监测数据" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+    </template>
+    <template slot="content">
+      <div class="statistics-wrapper">
+        <div class="statistics-wrapper__title">
+          <span :class="[currIndex === 0 ? 'active' : '']" @click="search.current = 1, currIndex = 0, getList()">体温</span>
+          <span :class="[currIndex === 1 ? 'active' : '']" @click="search.current = 1, currIndex = 1, getList()">心率</span>
+          <span :class="[currIndex === 2 ? 'active' : '']" @click="search.current = 1, currIndex = 2, getList()">血压</span>
+          <span :class="[currIndex === 3 ? 'active' : '']" @click="search.current = 1, currIndex = 3, getList()">血氧</span>
+        </div>
+        <div class="statistics-wrapper__body">
+          <div style="padding: 16px;">
+            <ai-search-bar>
+              <template #left>
+                <el-date-picker
+                  @change="search.current = 1, getList()"
+                  v-model="search.createTimeRange"
+                  type="daterange"
+                  size="small"
+                  value-format="yyyy-MM-dd"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </template>
+            </ai-search-bar>
+            <ai-table
+              class="detail-table__table"
+              :border="true"
+              style="margin-top: 4px;"
+              :tableData="tableData"
+              :col-configs="colConfigs"
+              :total="total"
+              :stripe="false"
+              :current.sync="search.current"
+              :size.sync="search.size"
+              @getList="getList">
+            </ai-table>
+          </div>
+        </div>
+      </div>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'Statistics',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        currIndex: 0,
+        search: {
+          name: '',
+          current: 1,
+          size: 10,
+          createTimeRange: []
+        },
+        tableData: [],
+        total: 0
+      }
+    },
+
+    computed: {
+      colConfigs () {
+        return [
+          {prop: 'deviceName', label: '姓名', align: 'center' },
+          {prop: 'deviceMID', label: '设备号', width: 280, align: 'center' },
+          {prop: 'itemValue', label: this.getLabel(), align: 'center' },
+          {prop: 'sampleTime', label: '更新时间', align: 'center' },
+          {
+            prop: 'abnormalStatus',
+            align: 'center',
+            label: '是否异常',
+            render: (h, { row }) => {
+              return h('span', {
+                style: {
+                  color: this.getStatusColor(row.abnormalStatus)
+                }
+              }, this.getStatus(row.abnormalStatus))
+            }
+          }
+        ]
+      }
+    },
+
+    mounted () {
+      this.getList()
+    },
+    methods: {
+      getList () {
+        this.instance.post(`/app/appintelligentguardianshipdevice/queryMonitorList?deviceId=${this.params.id}&item=${this.currIndex}`, null, {
+          params: {
+            ...this.search,
+            createTimeRange: (this.search.createTimeRange && this.search.createTimeRange.length) ? this.search.createTimeRange.join(',') : ','
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      getStatusColor (status) {
+        if (!status && status !== '0') return ''
+
+        return {
+          '0': '#2EA222',
+          '1': '#F46',
+          '2': '#F46'
+        }[status]
+      },
+
+      getStatus (status) {
+        if (!status && status !== '0') return ''
+
+        return {
+          '0': '正常',
+          '1': '异常',
+          '2': '异常'
+        }[status]
+      },
+
+      getLabel () {
+        return ['体温(℃)', '心率', '血压', '血氧'][this.currIndex]
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .statistics {
+    * {
+      box-sizing: border-box;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .statistics-wrapper {
+      background: #FFFFFF;
+      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+      border-radius: 2px;
+
+      .statistics-wrapper__title {
+        display: flex;
+        align-items: center;
+        height: 56px;
+        padding: 0 16px;
+        border-bottom: 1px solid #EEEEEE;
+
+        span {
+          height: 56px;
+          line-height: 56px;
+          margin-right: 32px;
+          color: #888888;
+          font-size: 16px;
+          font-weight: 600;
+          cursor: pointer;
+          user-select: none;
+          border-bottom: 3px solid transparent;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &.active {
+            color: #222222;
+            border-color: #2266FF;
+          }
+        }
+      }
+
+      .statistics-wrapper__body--list {
+        padding: 0 40px 20px;
+    }
+    }
+  }
+</style>