diff --git a/src/apps/AppDocumentFlow/AppDocumentFlow.vue b/src/apps/AppDocumentFlow/AppDocumentFlow.vue
new file mode 100644
index 00000000..54137c00
--- /dev/null
+++ b/src/apps/AppDocumentFlow/AppDocumentFlow.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="document-flow">
+    <ai-top-fixed>
+      <header class="pad">
+        <u-search placeholder="请输入公文名称" v-model="documentName" @clear="documentName='',getList()" @search="getList"
+                  clearabled :show-action="false" height="64"></u-search>
+      </header>
+    </ai-top-fixed>
+    <div class="list pad" v-if="list.length">
+      <div class="card" v-for="(item,index) in list" :key="index" @click="handleClick(item)">
+        <u-row>
+          <em v-if="item.redStatus==0"></em>
+          <span>{{ item.documentName }}</span>
+        </u-row>
+        <u-gap height="16"></u-gap>
+        <u-row>
+          <label>公文类型：</label>
+          <text style="color: #1365DD;">{{ $dict.getLabel("officialDocumentName", item.documentType) }}</text>
+        </u-row>
+        <u-gap height="8"></u-gap>
+        <u-row>
+          <label>登记人：</label>
+          <text>{{ item.createUserName }}</text>
+        </u-row>
+        <u-gap height="8"></u-gap>
+        <u-row>
+          <label>登记日期：</label>
+          <text>{{ item.createTime }}</text>
+        </u-row>
+        <img :src=" $cdn + tag(item.readType)" alt="">
+      </div>
+    </div>
+    <AiEmpty v-else></AiEmpty>
+    <u-loadmore :status="status" v-if="list.length"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  appName: "公文流转",
+  data() {
+    return {
+      documentName: "",
+      current: 1,
+      list: [],
+      status: "加载更多"
+    }
+  },
+  onLoad() {
+    this.$dict.load("officialDocumentName")
+  },
+  methods: {
+    tag(status) {
+      return {
+        "0": 'common/1ps.png',
+        "1": 'common/2cy.png'
+      }[status]
+    },
+    getList() {
+      this.$http.post("/app/appofficialdocumentinfo/appList", null, {
+        params: {
+          documentName: this.documentName,
+          size: 10,
+          current: this.current
+        }
+      }).then(res => {
+        if (res && res.data) {
+          if (this.current > 1 && this.current > res.data.pages) {
+            this.status = "已经到底啦"
+          }
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+        }
+      })
+    },
+    handleClick({id}) {
+      uni.navigateTo({
+        url: "/pages/documentFlow/components/detail?id=" + id
+      })
+    }
+  },
+  onShow() {
+    this.getList()
+  },
+  onReachBottom() {
+    this.current = this.current + 1;
+    this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.document-flow {
+  min-height: 100%;
+  background: #F5F5F5;
+
+  ::v-deep .content {
+    padding: 0;
+  }
+
+  header {
+    height: 112px;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+  }
+
+  .list {
+    margin: 32px 0;
+
+    .card {
+      background: #FFFFFF;
+      border-radius: 8px;
+      box-sizing: border-box;
+      padding: 32px;
+      position: relative;
+      margin-bottom: 32px;
+
+      .u-row {
+        flex-wrap: nowrap !important;
+      }
+
+      em {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: #FF4466;
+        font-style: normal;
+        margin-right: 8px;
+        flex-shrink: 0;
+      }
+
+      span {
+        font-size: 32px;
+        font-weight: 600;
+        color: #333333;
+      }
+
+      label {
+        font-size: 30px;
+        color: #999999;
+      }
+
+      text {
+        font-size: 30px;
+        color: #343D65;
+      }
+
+      img {
+        width: 160px;
+        height: 160px;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+      }
+    }
+  }
+
+  .pad {
+    box-sizing: border-box;
+    padding: 32px 32px 0 32px;
+  }
+}
+</style>
diff --git a/src/apps/AppDocumentFlow/components/approval.vue b/src/apps/AppDocumentFlow/components/approval.vue
new file mode 100644
index 00000000..93a8f2d9
--- /dev/null
+++ b/src/apps/AppDocumentFlow/components/approval.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="approval">
+    <div class="card">
+      <header>批示意见</header>
+      <textarea placeholder="请输入批示意见" v-model.trim="description" maxlength="200"></textarea>
+      <u-row justify="between">
+        <span @click="description=''">清空内容</span>
+        <span>{{ description.length || 0 }}/200</span>
+      </u-row>
+    </div>
+    <ai-back/>
+    <u-button type="primary" @click="submit">提交</u-button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "approval",
+  components: {AiBack},
+  data() {
+    return {
+      id: null,
+      description: ""
+    }
+  },
+  onLoad(opt) {
+    this.id = opt.id
+  },
+  methods: {
+    submit() {
+      this.$http.post("/app/appofficialdocumentinfo/instructionById", null, {
+        params: {
+          id: this.id,
+          description: this.description
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.$u.toast("批示成功")
+          uni.navigateBack()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.approval {
+  background: #F5F5F5;
+
+  .card {
+    background-color: #FFFFFF;
+    box-sizing: border-box;
+    padding: 32px;
+
+    header {
+      font-size: 32px;
+      color: #333333;
+      margin-bottom: 16px;
+      font-weight: bold;
+    }
+
+    textarea {
+      width: 100%;
+    }
+
+    span:first-child {
+      font-size: 28px;
+      color: #1365DD;
+    }
+
+    span:last-child {
+      font-size: 24px;
+      color: #999999;
+    }
+  }
+
+  .u-btn {
+    width: 100%;
+    height: 112px !important;
+    font-size: 32px;
+    color: #FFFFFF;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background: #197DF0 !important;
+  }
+}
+</style>
diff --git a/src/apps/AppDocumentFlow/components/detail.vue b/src/apps/AppDocumentFlow/components/detail.vue
new file mode 100644
index 00000000..141dd0d4
--- /dev/null
+++ b/src/apps/AppDocumentFlow/components/detail.vue
@@ -0,0 +1,437 @@
+<template>
+  <div class="detail">
+    <template v-if="!userSelect">
+      <div class="card">
+        <header>{{ detail.documentName }}</header>
+        <u-gap height="16"></u-gap>
+        <u-row>
+          <span>公文编号：</span>
+          <span>{{ detail.documentCode }}</span>
+        </u-row>
+        <u-gap height="8"></u-gap>
+        <u-row>
+          <span>公文类型：</span>
+          <span>{{ $dict.getLabel("officialDocumentName", detail.documentType) }}</span>
+        </u-row>
+        <u-gap height="8"></u-gap>
+        <u-row>
+          <span>紧急程度：</span>
+          <span
+              :style="{color:$dict.getColor('documentEmergencyLevel',detail.emergencyLevel)}">{{ $dict.getLabel("documentEmergencyLevel", detail.emergencyLevel) }}</span>
+        </u-row>
+        <u-gap height="8"></u-gap>
+        <u-row>
+          <span>发文机关：</span>
+          <span>{{ detail.issuingUnit }}</span>
+        </u-row>
+        <u-gap height="8"></u-gap>
+        <u-row>
+          <span>发文字号：</span>
+          <span>{{ detail.issuingFont }}</span>
+        </u-row>
+        <u-gap height="8"></u-gap>
+        <u-row>
+          <span>签发人：</span>
+          <span>{{ detail.signer }}</span>
+        </u-row>
+        <u-gap height="16"></u-gap>
+        <img v-if="detail.confidentialityLevel" :src="$cdn + tag(detail.confidentialityLevel)" alt="">
+      </div>
+      <div class="card" style="margin-bottom: 0;padding-top: 0">
+        <div class="label">备注</div>
+        <span>{{ detail.remark }}</span>
+      </div>
+      <div class="card" style="padding-top: 0" v-if="detail.files && detail.files.length">
+        <div class="label">相关附件</div>
+        <div class="file" v-for="(item,index) in detail.files" :key="index" @click="preFile(item)">
+          <u-row justify="between">
+            <label class="left">
+              <img :src="$cdn + 'common/appendix.png'" alt="">
+              <span>{{ item.fileName }}.{{ item.postfix }}</span>
+            </label>
+            <span>{{ (item.size / 1024).toFixed(2) }}KB</span>
+          </u-row>
+        </div>
+      </div>
+      <div class="card">
+        <div class="label" style="96px;">{{ detail.readType == 0 ? "流转信息" : "传阅情况" }}
+          <em>({{ $dict.getLabel("documentStatus", detail.status) }})</em></div>
+        <div class="progress">
+          <div class="item" v-for="(item,index) in detail.flowUsers" :key="index">
+            <div class="avatar">{{ item.flowUserName && item.flowUserName.substr(-2) }}</div>
+            <div class="right">
+              <u-row justify="between">
+                <text class="status" :style="{color:item.readStatus==1?'#FF8822':'#1365DD'}">{{
+                    $dict.getLabel(detail.readType == 1 ? "readingStatus" :
+                        "documentFlowStatus", detail.readType == 0 ? item.flowStatus : item.readStatus)
+                  }}
+                </text>
+                <text class="date">{{ item.flowTime }}</text>
+              </u-row>
+              <u-row justify="between">
+                <text class="name">{{ item.flowUserName }}</text>
+              </u-row>
+              <u-row justify="between">
+                <text class="note">{{ item.description }}</text>
+              </u-row>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer" v-if="detail.flowRight==1 && detail.readType==0">
+        <div @click="handleClick(0)">批示</div>
+        <div @click="handleClick(1)">流转</div>
+      </div>
+
+      <div class="footer" v-if="detail.readType==1 && detail.flowRight==1" @click="read"
+           style="background-color: #1365DD;color: #FFFFFF">我已阅完
+      </div>
+
+    </template>
+
+    <AiSelectEnterprise :visible.sync="userSelect" v-if="userSelect" :multiple="false"
+                        @change="change"></AiSelectEnterprise>
+
+    <AiBack v-if="!userSelect"/>
+  </div>
+</template>
+
+<script>
+import AiBack from "../../../components/AiBack";
+import AiSelectEnterprise from "../../../components/AiSelectEnterprise";
+import {mapActions} from "vuex";
+
+export default {
+  name: "detail",
+  components: {AiBack, AiSelectEnterprise},
+  data() {
+    return {
+      id: null,
+      detail: {},
+      userSelect: false,
+    }
+  },
+
+  onLoad(opt) {
+    this.$dict.load("officialDocumentName", "documentEmergencyLevel", "documentStatus", "readingStatus", "documentFlowStatus")
+    this.id = opt.id
+  },
+
+  methods: {
+    ...mapActions(['previewFile', 'injectJWeixin']),
+    read() {
+      this.$http.post("/app/appofficialdocumentinfo/readById", null, {
+        params: {
+          id: this.id
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.$u.toast("已阅读")
+          this.getDetail()
+        }
+      })
+    },
+    preFile(e) {
+      if ([".jpg", ".png", ".gif"].includes(e.postfix.toLowerCase())) {
+        uni.previewImage({
+          current: e.url,
+          urls: [e.url]
+        })
+      } else {
+        this.previewFile({...e})
+      }
+    },
+    change(e) {
+      this.$http.post("/app/appofficialdocumentinfo/flowById", null, {
+        params: {
+          flowUserId: e[0].id,
+          flowUserName: e[0].name,
+          id: this.id,
+          avatar: e[0].avatar,
+          flag: 0
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.$u.toast("流转成功")
+          this.getDetail()
+        }
+      })
+    },
+
+    tag(status) {
+      return {
+        "0": "common/mm.png",
+        "1": "common/jm.png",
+        "2": "common/tm.png"
+      }[status]
+    },
+    getDetail() {
+      this.$http.post("/app/appofficialdocumentinfo/queryDetailById", null, {
+        params: {
+          id: this.id,
+          flag: 1
+        }
+      }).then(res => {
+        if (res && res.data) {
+          this.detail = res.data
+        }
+      })
+    },
+    handleClick(status) {
+      if (status == 0) {
+        uni.navigateTo({
+          url: "/pages/documentFlow/components/approval?id=" + this.id
+        })
+      } else {
+        this.userSelect = true
+      }
+    }
+  },
+  onShow() {
+    this.getDetail()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail {
+  min-height: 100%;
+  background-color: #F5F5F5;
+  padding-bottom: 140px;
+  position: relative;
+
+  .card {
+    background-color: #FFFFFF;
+    margin-bottom: 8px;
+    box-sizing: border-box;
+    padding: 16px 32px;
+    position: relative;
+
+    header {
+      font-size: 40px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 64px;
+      letter-spacing: 1px;
+    }
+
+    .u-row {
+      & > div {
+        background-color: #2266FF;
+        border-radius: 50%;
+        text-align: center;
+        font-size: 22px;
+        font-weight: bold;
+        color: #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      & > span:first-child {
+        font-size: 30px;
+        color: #999999;;
+        line-height: 48px;
+      }
+
+      & > span:last-child {
+        font-size: 30px;
+        color: #343D65;
+        margin-left: 16px;
+        line-height: 48px;
+      }
+    }
+
+    & > img {
+      width: 190px;
+      height: 190px;
+      position: absolute;
+      right: 0;
+      top: 74px;
+    }
+
+    & > span {
+      font-size: 32px;
+      color: #333333;
+      line-height: 48px;
+      letter-spacing: 1px;
+      display: inline-block;
+    }
+
+    .label {
+      height: 80px;
+      font-size: 32px;
+      color: #333333;
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+
+      & > em {
+        font-style: normal;
+        font-size: 32px;
+        color: #1365DD;
+      }
+    }
+
+    .file {
+      height: 128px;
+      background: #FFFFFF;
+      border-radius: 8px;
+      border: 1px solid #CCCCCC;
+      box-sizing: border-box;
+      padding: 0 16px;
+      margin-bottom: 32px;
+
+      & > .u-row {
+        height: 100%;
+
+        .left {
+          width: 500px;
+          display: flex;
+          align-items: center;
+
+          & > img {
+            flex-shrink: 0;
+            width: 96px;
+            height: 96px;
+          }
+
+          & > span {
+            font-size: 32px;
+            color: #333333;
+            display: inline-block;
+            line-height: 44px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+          }
+        }
+
+        & > span {
+          font-size: 28px;
+          color: #999999;
+        }
+      }
+    }
+
+    .active {
+      background-color: #F3F6F9;
+    }
+
+    .progress {
+      margin-top: 8px;
+
+      .item {
+        display: flex;
+        align-items: center;
+        position: relative;
+        min-height: 136px;
+        margin-bottom: 80px;
+
+        .avatar {
+          width: 80px;
+          height: 80px;
+          border-radius: 50%;
+          background-color: #2266FF;
+          font-size: 28px;
+          color: #FFFFFF;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+
+        .right {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+
+          & > .u-row {
+            margin-left: 40px;
+
+            .status {
+              font-size: 32px;
+              color: #333333;
+            }
+
+            .date {
+              font-size: 28px;
+              color: #999999;
+            }
+
+            .name {
+              font-size: 28px;
+              color: #666666;
+              margin: 8px 0;
+            }
+
+            .note {
+              font-size: 28px;
+              color: #343D65;
+            }
+          }
+        }
+
+        &:after {
+          content: "";
+          width: 4px;
+          height: 100%;
+          background-color: #EEEEEE;
+          position: absolute;
+          left: 40px;
+          top: 112px;
+        }
+
+        &:last-child:after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .footer {
+    height: 112px;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 36px;
+
+    & > div {
+      color: #333333;
+    }
+
+    & > div:first-child {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    & > div:last-child {
+      width: 50%;
+      height: 100%;
+      color: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #1365DD;
+    }
+
+    & > label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #1365DD;
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppIntelligentSecurity/AppIntelligentSecurity.vue b/src/apps/AppIntelligentSecurity/AppIntelligentSecurity.vue
new file mode 100644
index 00000000..8033f29d
--- /dev/null
+++ b/src/apps/AppIntelligentSecurity/AppIntelligentSecurity.vue
@@ -0,0 +1,353 @@
+<template>
+  <section class="videoSurveillance">
+    <AiTopFixed>
+      <!-- <div class="header" flex>
+        <div flex v-for="(node,i) in nodes" :key="i">
+          <div :class="{current:isCurrent(i)}" v-text="node.nodeName" @click="gotoNode(node,i)"/>
+          <u-icon v-if="!isCurrent(i)" name="arrow-right" color="#ddd"/>
+        </div>
+      </div> -->
+      <div class="area-content">
+        <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect" :name.sync="areaName">
+          <img src="./img/local-icon.png" alt="">
+          <span class="label" v-if="areaName">{{ areaName }}</span>
+          <span v-else>请选择</span>
+          <u-icon name="arrow-down" color="#666" size="24"/>
+        </AiAreaPicker>
+      </div>
+    </AiTopFixed>
+    <div class="num-content">
+      <!-- <img src="./img/on-icon.png" alt="">在线 {{count.online || 0}}
+      <img src="./img/off-icon.png" alt="" class="mar-l40">离线 {{count.sum - count.online || 0}} -->
+      <div class="item">
+        <div id="echarts" style="width:100%;height:100%;"></div>
+        <img src="./img/monitor-icon.png" alt="" class="monitor-icon">
+      </div>
+      <div class="item">
+        <h3>{{ count.online || 0 }}</h3>
+        <p>在线</p>
+      </div>
+      <div class="item">
+        <h3>{{ count.sum - count.online || 0 }}</h3>
+        <p>离线</p>
+      </div>
+      <div class="item">
+        <h3>{{ onlineRate * 100 || 0 }}%</h3>
+        <p>在线率</p>
+      </div>
+    </div>
+    <!-- <div class="list">
+      <div class="item" v-for="row in monitors" :key="row.nodeId" :class="{online:!row.online}">
+        <template v-if="!!row.deviceId">
+          <img :src="`${$cdn}video/video-img.png`" alt="" class="videoIcon" @click="showMonitor(row)">
+          <div class="area-name" v-text="row.deviceName" @click="showMonitor(row)"/>
+          <div class="deviceStatus" v-text="!row.online?'在线':'离线'" @click="showMonitor(row)"/>
+        </template>
+        <template v-else>
+          <div class="area-name" v-text="row.nodeName" @click="getMore(row)"/>
+          <u-icon name="arrow-right" color="#ddd" @click="getMore(row)"/>
+        </template>
+      </div>
+    </div> -->
+    <div class="list-content">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="showMonitor(item)">
+        <img class="img" :src="item.indexUrl" alt="" v-if="item.deviceStatus == 1">
+        <img class="img" src="./img/offline.png" alt="" v-else>
+        <p>{{ item.name }}</p>
+        <img class="icon" src="./img/play-icon.png" alt="" v-if="item.deviceStatus == 1">
+        <img class="icon" src="./img/not-play-icon.png" alt="" v-else>
+      </div>
+      <AiEmpty v-if="!list.length"/>
+    </div>
+  </section>
+</template>
+<script>
+import echarts from 'echarts'
+import {mapState} from 'vuex'
+
+export default {
+  name: "AppVideoSurveillance",
+  appName: "智慧安防",
+  data() {
+    return {
+      nodes: [
+        {nodeName: "首页"}
+      ],
+      monitors: [],
+
+      areaId: '',
+      areaName: '',
+      list: [],
+      count: {},
+      Echart: null,
+      onlineRate: '',
+      offlineRate: ''
+    }
+  },
+  computed: {...mapState(['user'])},
+  methods: {
+    getMonitors(nodeId, queryType = 0) {
+      this.monitors = []
+      this.$http.post("/app/appzyvideoequipment/getTree", {
+        nodeId, queryType
+      }).then(res => {
+        if (res?.data) {
+          this.monitors = JSON.parse(res.data)?.[queryType == 0 ? 'node' : 'device'] || []
+        }
+      })
+    },
+    getMore(row) {
+      this.nodes.push(row)
+      this.getMonitors(row.nodeId, row.hasChild == 1 ? 0 : 1)
+    },
+    isCurrent(index) {
+      return index == Math.max(this.nodes?.length - 1, 0)
+    },
+    gotoNode(node, index) {
+      this.nodes.splice(index + 1)
+      this.getMonitors(node.nodeId)
+    },
+    getList() {
+      this.$http.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId}`).then(res => {
+        if (res?.data) {
+          this.list = res.data.list
+          this.count = res.data.count
+          this.onlineRate = (this.count.online / this.count.sum).toFixed(2)
+          this.offlineRate = (1 - this.onlineRate).toFixed(2)
+          this.initEchart()
+        }
+      })
+    },
+    areaSelect(e) {
+      this.areaId = e
+      this.getList()
+    },
+    showMonitor(row) {
+      if (row.deviceStatus != 1) return
+      uni.navigateTo({url: `./monitorDetail?id=${row.id}`})
+    },
+    initEchart() {
+      var option = {
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {value: this.onlineRate},
+              {value: this.offlineRate},
+            ],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              },
+              normal: {
+                color: function (params) {
+                  //自定义颜色
+                  var colorList = ['#3192F4', '#ccc',];
+                  return colorList[params.dataIndex]
+                }
+              }
+            }
+          }
+        ]
+      };
+
+      option && this.Echart.setOption(option)
+    },
+  },
+  onShow() {
+    document.title = '智慧安防'
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.getList()
+  },
+  mounted() {
+    this.Echart = echarts.init(document.getElementById('echarts'))
+  }
+}
+</script>
+<style lang="scss" scoped>
+.videoSurveillance {
+  ::v-deep .placeholder {
+    margin-bottom: 8px;
+  }
+
+  .header {
+    color: #666;
+
+    .current {
+      color: #4E8EEE;
+    }
+  }
+
+  .list {
+    padding-left: 32px;
+    background: #FFF;
+
+    .item {
+      width: 100%;
+      border-bottom: 1px solid #DDD;
+      padding: 0 32px 0 0;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+
+      &.online {
+        .videoIcon {
+          filter: none;
+        }
+
+        .deviceStatus {
+          color: #4E8EEE;
+          background: #E7F1FD;
+        }
+      }
+
+      .videoIcon {
+        width: 48px;
+        height: 32px;
+        margin-right: 8px;
+        filter: grayscale(100%);
+      }
+
+      .area-name {
+        font-size: 34px;
+        font-weight: 500;
+        color: #333;
+        flex: 1;
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .deviceStatus {
+        margin-left: 8px;
+        height: 22px;
+        padding: 0 8px;
+        line-height: 22px;
+        font-size: 13px;
+        color: #666;
+        background: #E9E9E9;
+      }
+
+      &:last-of-type {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .area-content {
+    display: inline-block;
+    width: 100%;
+    line-height: 64px;
+
+    img {
+      width: 42px;
+      vertical-align: middle;
+      margin-right: 16px;
+    }
+
+    .u-icon {
+      margin-left: 6px;
+    }
+  }
+
+  .num-content {
+    width: calc(100% - 40px);
+    height: 164px;
+    background: #EEE;
+    border-radius: 16px;
+    margin: 32px 0 0 20px;
+    display: flex;
+
+    .item {
+      flex: 1;
+      text-align: center;
+      position: relative;
+
+      .monitor-icon {
+        width: 48px;
+        height: 48px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -24px;
+        margin-top: -24px;
+      }
+
+      h3 {
+        font-size: 44px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #333;
+        line-height: 60px;
+        margin-top: 32px;
+      }
+
+      p {
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 40px;
+      }
+    }
+  }
+
+  .list-content {
+    width: 100%;
+    padding: 38px 0 0 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .item {
+      display: inline-block;
+      width: calc(50% - 36px);
+      margin-right: 36px;
+      border-radius: 16px;
+      position: relative;
+      margin-bottom: 32px;
+      vertical-align: top;
+
+      .img {
+        width: 100%;
+        height: 218px;
+        margin-bottom: 8px;
+        border-radius: 16px;
+      }
+
+      p {
+        width: 100%;
+        font-size: 34px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 48px;
+        word-break: break-all;
+      }
+
+      .icon {
+        width: 40px;
+        height: 48px;
+        position: absolute;
+        top: 84px;
+        left: 158px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppIntelligentSecurity/img/local-icon.png b/src/apps/AppIntelligentSecurity/img/local-icon.png
new file mode 100644
index 00000000..3e23aff6
Binary files /dev/null and b/src/apps/AppIntelligentSecurity/img/local-icon.png differ
diff --git a/src/apps/AppIntelligentSecurity/img/monitor-icon.png b/src/apps/AppIntelligentSecurity/img/monitor-icon.png
new file mode 100644
index 00000000..2b146a8d
Binary files /dev/null and b/src/apps/AppIntelligentSecurity/img/monitor-icon.png differ
diff --git a/src/apps/AppIntelligentSecurity/img/not-play-icon.png b/src/apps/AppIntelligentSecurity/img/not-play-icon.png
new file mode 100644
index 00000000..6e103f02
Binary files /dev/null and b/src/apps/AppIntelligentSecurity/img/not-play-icon.png differ
diff --git a/src/apps/AppIntelligentSecurity/img/off-icon.png b/src/apps/AppIntelligentSecurity/img/off-icon.png
new file mode 100644
index 00000000..3483b3f8
Binary files /dev/null and b/src/apps/AppIntelligentSecurity/img/off-icon.png differ
diff --git a/src/apps/AppIntelligentSecurity/img/offline.png b/src/apps/AppIntelligentSecurity/img/offline.png
new file mode 100644
index 00000000..e8d8e71e
Binary files /dev/null and b/src/apps/AppIntelligentSecurity/img/offline.png differ
diff --git a/src/apps/AppIntelligentSecurity/img/on-icon.png b/src/apps/AppIntelligentSecurity/img/on-icon.png
new file mode 100644
index 00000000..7f1dddfc
Binary files /dev/null and b/src/apps/AppIntelligentSecurity/img/on-icon.png differ
diff --git a/src/apps/AppIntelligentSecurity/img/play-icon.png b/src/apps/AppIntelligentSecurity/img/play-icon.png
new file mode 100644
index 00000000..4521b790
Binary files /dev/null and b/src/apps/AppIntelligentSecurity/img/play-icon.png differ
diff --git a/src/apps/AppIntelligentSecurity/monitorDetail.vue b/src/apps/AppIntelligentSecurity/monitorDetail.vue
new file mode 100644
index 00000000..50868d05
--- /dev/null
+++ b/src/apps/AppIntelligentSecurity/monitorDetail.vue
@@ -0,0 +1,86 @@
+<template>
+  <section class="monitorDetail">
+    <div class="videoBox">
+      <iframe ref="monitorIns" :style="style" :src="monitor.url" allow="autoplay *; microphone *; fullscreen *"
+              allowfullscreen allowtransparency allowusermedia frameBorder="no"/>
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "monitorDetail",
+  data() {
+    return {
+      style: {},
+      monitor: {}
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.detectOrient()
+    })
+    document.title = '视频监控'
+  },
+
+  methods: {
+    getDetail(deviceId) {
+      deviceId && this.$http.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
+        params: {deviceId}
+      }).then(res => {
+        if (res?.data) {
+          this.monitor = JSON.parse(res.data)
+        }
+      })
+    },
+
+    detectOrient() {
+      var width = document.querySelector('.monitorDetail').clientWidth
+      var height = document.querySelector('.monitorDetail').clientHeight
+      if (width >= height) { // 竖屏
+        this.style = {
+          width: '100%',
+          height: '100%',
+          transform: 'rotate(0eg)',
+          transformOrigin: `0 0`
+        }
+      } else {
+        this.style = {
+          width: height + 'px',
+          height: width + 'px',
+          transform: 'rotate(90deg)',
+          transformOrigin: `${width / 2}px ${width / 2}px`
+        }
+      }
+    }
+  },
+  onLoad(params) {
+    this.getDetail(params.id)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.monitorDetail {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  color: #fff;
+
+  .videoBox {
+    width: 100vw;
+    height: 100vh;
+
+    iframe {
+
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppPhoneList/AppPhoneList.vue b/src/apps/AppPhoneList/AppPhoneList.vue
new file mode 100644
index 00000000..817bc901
--- /dev/null
+++ b/src/apps/AppPhoneList/AppPhoneList.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="AppMailList">
+    <AiTopFixed>
+      <!-- <div class="header-top">
+        <div>区域选择</div>
+        <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName">
+          <span class="label" v-if="areaName">{{ areaName }}</span>
+          <span v-else>请选择</span>
+          <u-icon name="arrow-right" color="#666" size="24" style="margin-left:4px;" />
+        </AiAreaPicker>
+      </div> -->
+      <div class="currentLeft-top">
+        <div class="left">
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName">
+            <span class="label" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <u-icon name="arrow-down" color="#666" size="24" style="margin-left:4px;" />
+          </AiAreaPicker>
+        </div>
+
+        <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#F5F5F5" search-icon-color="#ccc" color="#666" height="58" @search="getList" @clear="handerClear"></u-search>
+      </div>
+    </AiTopFixed>
+    <div class="list-content">
+      <u-index-list :scrollTop="scrollTop" :index-list="indexList">
+        <div v-for="(letter, index) in indexList" :key="index">
+          <u-index-anchor :index="letter"/>
+          <div class="item" v-for="(item, index) in list.filter(e=>e.nameInitials==letter)">
+            <div class="title">{{item.label}}</div>
+            <div class="phone-list">
+              <div class="item-info">
+                <p>{{item.name}}</p>
+                <div class="phone">
+                  <span>{{item.type}}</span>{{item.phone}}
+                </div>
+              </div>
+            </div>
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)"  class="phone-icon" >
+          </div>
+        </div>
+      </u-index-list>
+    </div>
+    <AiEmpty v-if="!list.length"/>
+    <!-- <div class="id-list">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <u-index-anchor :index="item.label" />
+      </div>
+    </div> -->
+    <div class="footer-btn" @click="toAddList">我添加的</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: "AppMailList",
+  appName: "便民通讯录(山东)",
+  inject: {
+    root: {}
+  },
+  data() {
+    return {
+      scrollTop: 0,
+      list: [],
+      indexList: [],
+      areaId: '',
+      areaName: '',
+      keyword: ''
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.getList()
+    uni.$on('updateList', () => {
+      this.getList()
+    })
+  },
+  onShow() {
+    document.title = "便民通讯录"
+  },
+
+  methods: {
+    areaSelect(e) {
+      this.areaId = e
+      this.getList()
+    },
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
+    handerClear() {
+      this.keyword = ''
+      this.getList()
+    },
+    getList() {
+      this.$http.post(`/app/appconvenientaddressbook/list`, null, {
+        params: {
+          areaId: this.areaId,
+          isPublic: 1,
+          resource: "portal",
+          size: 999,
+          name: this.keyword
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.indexList = [...new Set(res.data.records.map(e=>e.nameInitials))];
+          this.list = res.data.records;
+        }
+      })
+    },
+    toAddList() {
+      // this.$emit('change', {
+      //   type: 'MyAddList',
+      // })
+      uni.navigateTo({url: `./myAddList`})
+    },
+  },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppMailList {
+  ::v-deep .fixed{
+    z-index: 9999;
+  }
+  .header-top {
+    display: flex;
+    background: #fff;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 16px;
+  }
+  // background-color: #F3F6F9;
+  .list-content{
+    padding-bottom: 112px;
+    // .title{
+    //   padding-left: 48px;
+    //   line-height: 64px;
+    //   font-size: 26px;
+    //   font-family: PingFangSC-Semibold, PingFang SC;
+    //   font-weight: 600;
+    //   color: #999;
+    // }
+    .item{
+      position: relative;
+    }
+    .phone-list{
+      background-color: #fff;
+      width: 100%;
+      .item-info{
+        width: 680px;
+        padding: 32px 48px;
+        box-sizing: border-box;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+        p{
+          font-size: 32px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 44px;
+          word-break: break-all;
+          margin-bottom: 8px;
+          width: 100%;
+          word-break: break-all;
+        }
+        .phone{
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 36px;
+          width: 100%;
+          word-break: break-all;
+          span{
+            display: inline-block;
+            margin-right: 16px;
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+  .footer-btn{
+    width: 100%;
+    text-align: center;
+    height: 112px;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    z-index: 999;
+  }
+  ::v-deep .u-index-anchor  {
+    top: 0!important;
+  }
+  .phone-icon{
+    width: 40px;
+    height: 40px;
+    vertical-align: sub;
+    position: absolute;
+    top: 60px;
+    right: 64px;
+  } 
+  .currentLeft-top {
+    display: flex;
+    align-items: center;
+
+    .left {
+      width: 40%;
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
+  ::v-deep  .u-search{
+    margin-bottom: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppPhoneList/add.vue b/src/apps/AppPhoneList/add.vue
new file mode 100644
index 00000000..c058353c
--- /dev/null
+++ b/src/apps/AppPhoneList/add.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="add">
+    <div class="pad-l32">
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>名称</span>
+        <div class="value">
+          <u-input type="text" placeholder="请输入" v-model="userInfo.name" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48"  :maxlength="30" :clearable="false" />
+        </div>
+      </div>
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>类型</span>
+        <div class="value">
+          <u-input type="text" placeholder="请输入" v-model="userInfo.type" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48"  :maxlength="30" :clearable="false" />
+        </div>
+      </div>
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>电话</span>
+        <div class="value">
+          <u-input type="number" placeholder="请输入" v-model="userInfo.phone" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48"  :maxlength="11" :clearable="false" />
+        </div>
+      </div>
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>是否公开</span>
+        <div class="value" @click="showSelect=true">
+          <span v-if="userInfo.isPublic !== ''">{{$dict.getLabel('yesOrNo', userInfo.isPublic)}}</span>
+          <span v-else class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label"><span class="tips">*</span>地区</span>
+        <div class="value">
+          <AiAreaPicker :areaId="user.areaId" v-model="userInfo.areaId" :name.sync="userInfo.areaName" @select="areaSelect">
+            <span class="label" v-if="userInfo.areaName">{{ userInfo.areaName }}</span>
+            <span v-else class="color-999">请选择</span>
+            <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          </AiAreaPicker>
+        </div>
+      </div>
+    </div>
+
+    
+    <div class="footer" @click="submit">
+      <div class="btn">保存</div>
+    </div>
+
+    <u-select v-model="showSelect" :list="$dict.getDict('yesOrNo')"  label-name="dictName" value-name="dictValue" @confirm="confirmSelect"></u-select>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  props: ['params'],
+  data() {
+    return {
+      id: '',
+      userInfo: {
+        id: '',
+        name: '',
+        phone: '',
+        type: '',
+        isPublic: '',
+        areaId: '',
+        areaName: ''
+      },
+      showSelect: false,
+      flag: true
+    }
+  },
+  computed: { ...mapState(['user']) },
+  onLoad(option) {  
+    this.userInfo.areaId = this.user.areaId  
+    this.userInfo.areaName = this.user.areaName  
+    this.$dict.load('yesOrNo').then(() => {
+      if(option.id) {
+        this.userInfo.id = option.id
+        this.getDetail()
+      }
+    })
+  },
+  onShow() {
+    document.title = "新增"
+  },
+
+  methods: {
+    areaSelect(e) {
+      this.userInfo.areaId = e
+    },
+    confirmSelect(e) {
+      this.userInfo.isPublic = e[0].value
+    },
+    getDetail() {
+      this.$http.post(`/app/appconvenientaddressbook/queryDetailById?id=${this.userInfo.id}`).then(res => {
+        if (res.code == 0) {
+          this.userInfo = res.data
+        }
+      })
+    },
+    submit() {
+      if(!this.userInfo.name) {
+        return this.$u.toast('请输入名称')
+      }
+      if(!this.userInfo.type) {
+        return this.$u.toast('请输入类型')
+      }
+      if(!this.userInfo.phone) {
+        return this.$u.toast('请输入电话')
+      }
+      if(this.userInfo.isPublic === '') {
+        return this.$u.toast('请选择是否公开')
+      }
+      if(!this.userInfo.areaId) {
+        return this.$u.toast('请选择地区')
+      }
+      if(!this.flag) return
+      this.$http.post(`/app/appconvenientaddressbook/addOrUpdate`, this.userInfo).then(res => {
+        if (res.code == 0) {
+          this.flag = false
+          this.$u.toast('提交成功')
+          uni.$emit('updateList')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 600)
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  padding-bottom: 112px;
+  .border{
+    border-bottom: 1px solid #ddd;
+  }
+  .item{
+    width: 100%;
+    padding: 40px 32px 40px 0;
+    background: #FFFFFF;
+    display: flex;
+    justify-content: space-between;
+    font-size: 34px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #666;
+    line-height: 48px;
+    box-sizing: border-box;
+    .color-999{
+      color: #999;
+    }
+    .value{
+      color: #333;
+      .u-icon{
+        margin-left: 16px;
+      }
+    }
+    .tips{
+      display: inline-block;
+      width: 16px;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FF4466;
+      line-height: 44px;
+      margin-right: 4px;
+    }
+  }
+  .footer{
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+  .btn{
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #3975C6;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+  .pad-l32{
+    padding-left: 32px;
+    background-color: #fff;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppPhoneList/img/del-icon.png b/src/apps/AppPhoneList/img/del-icon.png
new file mode 100644
index 00000000..7362fa33
Binary files /dev/null and b/src/apps/AppPhoneList/img/del-icon.png differ
diff --git a/src/apps/AppPhoneList/img/edit-icon.png b/src/apps/AppPhoneList/img/edit-icon.png
new file mode 100644
index 00000000..ff67d71d
Binary files /dev/null and b/src/apps/AppPhoneList/img/edit-icon.png differ
diff --git a/src/apps/AppPhoneList/img/empty.png b/src/apps/AppPhoneList/img/empty.png
new file mode 100644
index 00000000..77bc8fe0
Binary files /dev/null and b/src/apps/AppPhoneList/img/empty.png differ
diff --git a/src/apps/AppPhoneList/list.vue b/src/apps/AppPhoneList/list.vue
new file mode 100644
index 00000000..5be9370c
--- /dev/null
+++ b/src/apps/AppPhoneList/list.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="list">
+    <div class="list-content">
+      <u-index-list :scrollTop="scrollTop" :index-list="indexList">
+        <div v-for="(letter, index) in indexList" :key="index">
+          <u-index-anchor :index="letter"/>
+          <div class="item" v-for="(item, index) in list.filter(e=>e.nameInitials==letter)">
+            <div class="title">{{item.label}}</div>
+            <div class="phone-list">
+              <div class="item-info">
+                <p>{{item.name}}</p>
+                <div class="phone">
+                  <span>{{item.type}}</span>{{item.phone}}
+                </div>
+              </div>
+            </div>
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)"  class="phone-icon" >
+          </div>
+        </div>
+      </u-index-list>
+    </div>
+    <AiEmpty v-if="!list.length"/>
+    <!-- <div class="id-list">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <u-index-anchor :index="item.label" />
+      </div>
+    </div> -->
+    <div class="footer-btn" @click="toAddList">我添加的</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      scrollTop: 0,
+      list: [],
+      indexList: []
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.getList()
+  },
+  onShow() {
+    document.title = "便民通讯录"
+  },
+
+  methods: {
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
+    getList() {
+      this.$http.post(`/app/appconvenientaddressbook/list`, null, {
+        params: {
+          areaId: this.user.areaId,
+          isPublic: 1,
+          resource: "portal",
+          size: 999
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.indexList = [...new Set(res.data.records.map(e=>e.nameInitials))];
+          this.list = res.data.records;
+        }
+      })
+    },
+    toAddList() {
+      // this.$emit('change', {
+      //   type: 'MyAddList',
+      // })
+      uni.navigateTo({url: `./myAddList`})
+    },
+  },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  background-color: #F3F6F9;
+  .list-content{
+    padding-bottom: 112px;
+    // .title{
+    //   padding-left: 48px;
+    //   line-height: 64px;
+    //   font-size: 26px;
+    //   font-family: PingFangSC-Semibold, PingFang SC;
+    //   font-weight: 600;
+    //   color: #999;
+    // }
+    .item{
+      position: relative;
+    }
+    .phone-list{
+      background-color: #fff;
+      width: 100%;
+      .item-info{
+        width: 680px;
+        padding: 32px 48px;
+        box-sizing: border-box;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+        p{
+          font-size: 32px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 44px;
+          word-break: break-all;
+          margin-bottom: 8px;
+          width: 100%;
+          word-break: break-all;
+        }
+        .phone{
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 36px;
+          width: 100%;
+          word-break: break-all;
+          span{
+            display: inline-block;
+            margin-right: 16px;
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+  .footer-btn{
+    width: 100%;
+    text-align: center;
+    height: 112px;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    z-index: 999;
+  }
+  ::v-deep .u-index-anchor  {
+    top: 0!important;
+  }
+  .phone-icon{
+    width: 40px;
+    height: 40px;
+    vertical-align: sub;
+    position: absolute;
+    top: 60px;
+    right: 64px;
+  } 
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppPhoneList/myAddList.vue b/src/apps/AppPhoneList/myAddList.vue
new file mode 100644
index 00000000..82b955ec
--- /dev/null
+++ b/src/apps/AppPhoneList/myAddList.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="myAddList">
+    <div class="list-content" v-if="list.length">
+      <div class="item-info" v-for="(item, index) in list" :key="index">
+        <div class="left">
+          <p>{{item.name}}</p>
+          <div class="phone">
+            <span>{{item.type}}</span>{{item.phone}}
+          </div>
+        </div>
+        <div class="right">
+          <img src="./img/edit-icon.png" alt="" @click="edit(item.id)">
+          <img src="./img/del-icon.png" alt="" @click="del(item)">
+        </div>
+      </div>
+    </div>
+    <div class="empty" v-else>
+      <img src="./img/empty.png" alt="">
+      <p>您还未添加便民通讯录<br/>点击<span>新增按钮</span>试试吧</p>
+    </div>
+    <div class="footer-btn" @click="edit('')">新增</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      list: [],
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.getList()
+    uni.$on('updateList', () => {
+      this.getList()
+    })
+  },
+  onShow() {
+    document.title = "便民通讯录"
+  },
+
+  methods: {
+    getList() {
+      this.$http.post(`/app/appconvenientaddressbook/list`, null, {
+        params: {
+          areaId: this.user.areaId,
+          createUserId: this.user.id
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.list = res.data.records
+        }
+      })
+    },
+    edit(id) {
+      // this.$emit('change', {
+      //   type: 'Add',
+      //   params: {
+      //     id: id,
+      //   }
+      // })
+      uni.navigateTo({url: `./add?id=${id}`})
+    },
+    del(item) {
+      this.$confirm("是否确认删除该发布信息？").then(() => {
+        this.$http.post("/app/appconvenientaddressbook/delete", null, {
+          params: {ids: item.id}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$u.toast("删除成功!")
+            this.getList()
+          }
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.myAddList {
+  height: 100%;
+  background-color: #F3F6F9;
+  .list-content{
+    padding-bottom: 112px;
+    .item-info{
+      width: 100%;
+      padding: 32px 48px;
+      box-sizing: border-box;
+      background-color: #fff;
+      margin-bottom: 4px;
+      p{
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 44px;
+        word-break: break-all;
+        margin-bottom: 8px;
+      }
+      .phone{
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 36px;
+        span{
+          display: inline-block;
+          margin-right: 16px;
+          color: #999;
+        }
+      }
+      .left{
+        display: inline-block;
+        width: calc(100% - 176px);
+      }
+      .right{
+        display: inline-block;
+        width: 176px;
+        img{
+          width: 56px;
+          height: 56px;
+          margin-left: 32px;
+          vertical-align: super;
+        }
+      }
+    }
+  }
+  .empty{
+    height: 100%;
+    background-color: #fff;
+    img{
+      width: 282px;
+      height: 306px;
+      margin: 168px 0 0 234px;
+    }
+    p{
+      text-align: center;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 44px;
+      span{
+        color: #467DFE;
+      }
+    }
+  }
+  .footer-btn{
+    width: 100%;
+    text-align: center;
+    height: 112px;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    z-index: 999;
+  }
+}
+</style>
diff --git a/src/apps/AppVideoSurveillance/monitorDetail.vue b/src/apps/AppVideoSurveillance/monitorDetail.vue
index 50868d05..ed72a183 100644
--- a/src/apps/AppVideoSurveillance/monitorDetail.vue
+++ b/src/apps/AppVideoSurveillance/monitorDetail.vue
@@ -22,7 +22,7 @@ export default {
     this.$nextTick(() => {
       this.detectOrient()
     })
-    document.title = '视频监控'
+    document.title = '智慧安防'
   },
 
   methods: {