增加电瓶车入梯视频报警&发短信功能

dist/assets/map-btn5.25198a07.js

-import{d as e,p as a,g as r,a as t,o as l,b as o,F as s,l as n,m as d,e as k,t as u,h as c,q as i,j as y,c as v,n as f}from"./vendor.698b4251.js";var A=e({name:"Brief",props:{list:{type:Array,required:!0},color:{type:String,default:null},size:{type:String,default:"0.22rem"}}});const p=c("data-v-074669a4");a("data-v-074669a4");const z={class:"brief-container"},h={key:1},m={class:"count-group"},w=i(" / ");r();const g=p(((e,a,r,c,i,y)=>{const v=t("m-count");return l(),o("div",z,[(l(!0),o(s,null,n(e.list,(a=>(l(),o("div",{key:a.name},[a.icon?(l(),o("img",{key:0,src:a.icon,style:`width:${e.size};height:${e.size}`},null,12,["src"])):d("",!0),Array.isArray(a.value)?(l(),o("div",h,[k("div",m,[k(v,{class:"count yellow",value:a.value[0]},null,8,["value"]),w,k(v,{class:"count",value:a.value[1]},null,8,["value"])]),k("p",null,u(a.name),1)])):(l(),o("div",{key:2,class:{center:!a.icon}},[k(v,{class:"count yellow",style:{color:e.color},value:a.value},null,8,["style","value"]),k("p",null,u(a.name),1)],2))])))),128))])}));A.render=g,A.__scopeId="data-v-074669a4";var F=e({name:"Circle",props:{type:{type:String,default:"circle"},color:{type:[String,Array],default:["#0094FF","#1DF9FF"]},value:{type:Number,default:0},name:{type:String,default:""},showInfo:{type:Boolean,default:!0},rate:{type:Number,default:1.8},strokeWidth:{type:Number,default:6},gapDegree:{type:Number,default:0}},setup(e){const a=y(null),r=v((()=>Array.isArray(e.color)?{"0%":e.color[0],"100%":e.color[1]}:e.color)),t=v((()=>a.value?a.value.clientWidth/(e.rate||1.8):0));return{circleWrapperRef:a,strokeColor:r,width:t}}});const b=c("data-v-fb0eadd2");a("data-v-fb0eadd2");const N={ref:"circleWrapperRef",class:"circle-wrapper"};r();const j=b(((e,a,r,s,n,d)=>{const c=t("a-progress");return l(),o("div",N,[k(c,{width:e.width,"stroke-color":e.strokeColor,percent:e.value,type:e.type,"show-info":e.showInfo,"stroke-width":e.strokeWidth,"gap-degree":e.gapDegree},null,8,["width","stroke-color","percent","type","show-info","stroke-width","gap-degree"]),f(e.$slots,"default",{},(()=>[k("p",null,u(e.name),1)]))],512)}));F.render=j,F.__scopeId="data-v-fb0eadd2";var S="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAhFBMVEUykf8zkv8zkf8ykv8zkf8zkf8xkv80kv8zkv8zkv8zkf8ykf8zkf8ykv8zkv8ykf8ykf8zkf8ykf8zkf8ykf8ykf8zkv8ykv8zkf8zkf8zkv8zkf8zkv80kv8zkf8ykv8zkv8ykf8ukv8wkP8zkv8ykf8ykv8zkf8ykv8xk/8ykv8zkf9rRIMBAAAAK3RSTlMz18NK/Ow643ht+PWQ28xmsayllopyVz7x0reDXETWnH1RNjXh38a8Y049lTPWQgAAAgNJREFUSMftl+tysjAQhoWAgpyPogiK5357//f35Q2h2tYJUacz7Uz3T9YlD/smm4NM2IyetBmbgH2WnhBNnjSiP/j3w1M3OR0re3n23x6FWezRuwXOI/A0ndMHay/aMDPos1m5Jry2+/6h70RFHds9nmjBzBZo2gyB4ijojQY8FZqP3U1otxG0Mw6n6Bcu5Jtk0LF40GvGYDZHXsFGZ4+sIBN+jlemY3CM8XZIuqLe7AjxFeJMDU/nMsPudC1TNCjy1XCBzhhbRlezoTzhzlINQ3XI24WHGfJLNwSd8YgLp1HCoRTnQMFliAQYB3SvlfBB1nPTK5AZLTgzPFLCUHuR1V6JSAm5qPeSt7kSxtJ0eetjnoAIr4ITcGerhFveo8bmIKTmdAQtZzyq8F4lbA77ZwnaPouGRKHhlApYyoWzvjkOVsMCrfZKuKNBXPFOn8TYsdnikbUdoKx7kbuX7GXi1xZ+MQJvhxUF3E83zr/rCRGM7mdDprhzQrijcGRhSdUfYqwFa2qcYXk/w+xmKDYih8U4jJ0FmyfRTmTNDYJVnd65jV0h+ENo2NI/dLo3xtajT2Yu9O+qJrFu0cB97JZ8y1pJVnGxf/x+bi5OXrvl7rf8M6jNr5YwPdihe2bowSbdtVILPr0C13fZ2V5vwrLW+GJm+ePr/Ad/F/zSR9lLn4P/AQwwqd82rS6wAAAAAElFTkSuQmCC";export{A as _,F as a,S as b};

dist/assets/map-btn5.65d5e714.js

+import{d as e,p as a,a as r,r as t,o as l,b as o,F as s,f as n,l as d,e as k,t as u,w as i,g as c,h as f,c as y,j as v}from"./index.3b29ff34.js";var A=e({name:"Brief",props:{list:{type:Array,required:!0},color:{type:String,default:null},size:{type:String,default:"0.22rem"}}});const p=i("data-v-074669a4");a("data-v-074669a4");const z={class:"brief-container"},h={key:1},m={class:"count-group"},w=c(" / ");r();const g=p(((e,a,r,i,c,f)=>{const y=t("m-count");return l(),o("div",z,[(l(!0),o(s,null,n(e.list,(a=>(l(),o("div",{key:a.name},[a.icon?(l(),o("img",{key:0,src:a.icon,style:`width:${e.size};height:${e.size}`},null,12,["src"])):d("",!0),Array.isArray(a.value)?(l(),o("div",h,[k("div",m,[k(y,{class:"count yellow",value:a.value[0]},null,8,["value"]),w,k(y,{class:"count",value:a.value[1]},null,8,["value"])]),k("p",null,u(a.name),1)])):(l(),o("div",{key:2,class:{center:!a.icon}},[k(y,{class:"count yellow",style:{color:e.color},value:a.value},null,8,["style","value"]),k("p",null,u(a.name),1)],2))])))),128))])}));A.render=g,A.__scopeId="data-v-074669a4";var F=e({name:"Circle",props:{type:{type:String,default:"circle"},color:{type:[String,Array],default:["#0094FF","#1DF9FF"]},value:{type:Number,default:0},name:{type:String,default:""},showInfo:{type:Boolean,default:!0},rate:{type:Number,default:1.8},strokeWidth:{type:Number,default:6},gapDegree:{type:Number,default:0}},setup(e){const a=f(null),r=y((()=>Array.isArray(e.color)?{"0%":e.color[0],"100%":e.color[1]}:e.color)),t=y((()=>a.value?a.value.clientWidth/(e.rate||1.8):0));return{circleWrapperRef:a,strokeColor:r,width:t}}});const b=i("data-v-fb0eadd2");a("data-v-fb0eadd2");const N={ref:"circleWrapperRef",class:"circle-wrapper"};r();const j=b(((e,a,r,s,n,d)=>{const i=t("a-progress");return l(),o("div",N,[k(i,{width:e.width,"stroke-color":e.strokeColor,percent:e.value,type:e.type,"show-info":e.showInfo,"stroke-width":e.strokeWidth,"gap-degree":e.gapDegree},null,8,["width","stroke-color","percent","type","show-info","stroke-width","gap-degree"]),v(e.$slots,"default",{},(()=>[k("p",null,u(e.name),1)]))],512)}));F.render=j,F.__scopeId="data-v-fb0eadd2";var S="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAhFBMVEUykf8zkv8zkf8ykv8zkf8zkf8xkv80kv8zkv8zkv8zkf8ykf8zkf8ykv8zkv8ykf8ykf8zkf8ykf8zkf8ykf8ykf8zkv8ykv8zkf8zkf8zkv8zkf8zkv80kv8zkf8ykv8zkv8ykf8ukv8wkP8zkv8ykf8ykv8zkf8ykv8xk/8ykv8zkf9rRIMBAAAAK3RSTlMz18NK/Ow643ht+PWQ28xmsayllopyVz7x0reDXETWnH1RNjXh38a8Y049lTPWQgAAAgNJREFUSMftl+tysjAQhoWAgpyPogiK5357//f35Q2h2tYJUacz7Uz3T9YlD/smm4NM2IyetBmbgH2WnhBNnjSiP/j3w1M3OR0re3n23x6FWezRuwXOI/A0ndMHay/aMDPos1m5Jry2+/6h70RFHds9nmjBzBZo2gyB4ijojQY8FZqP3U1otxG0Mw6n6Bcu5Jtk0LF40GvGYDZHXsFGZ4+sIBN+jlemY3CM8XZIuqLe7AjxFeJMDU/nMsPudC1TNCjy1XCBzhhbRlezoTzhzlINQ3XI24WHGfJLNwSd8YgLp1HCoRTnQMFliAQYB3SvlfBB1nPTK5AZLTgzPFLCUHuR1V6JSAm5qPeSt7kSxtJ0eetjnoAIr4ITcGerhFveo8bmIKTmdAQtZzyq8F4lbA77ZwnaPouGRKHhlApYyoWzvjkOVsMCrfZKuKNBXPFOn8TYsdnikbUdoKx7kbuX7GXi1xZ+MQJvhxUF3E83zr/rCRGM7mdDprhzQrijcGRhSdUfYqwFa2qcYXk/w+xmKDYih8U4jJ0FmyfRTmTNDYJVnd65jV0h+ENo2NI/dLo3xtajT2Yu9O+qJrFu0cB97JZ8y1pJVnGxf/x+bi5OXrvl7rf8M6jNr5YwPdihe2bowSbdtVILPr0C13fZ2V5vwrLW+GJm+ePr/Ad/F/zSR9lLn4P/AQwwqd82rS6wAAAAAElFTkSuQmCC";export{A as _,F as a,S as b};

dist/index.html

@@ -6,9 +6,9 @@
   <link rel="icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>南京东路街道</title>
-  <script type="module" crossorigin src="./assets/index.c3aaf7d0.js"></script>
-  <link rel="modulepreload" href="./assets/vendor.698b4251.js">
-  <link rel="stylesheet" href="./assets/index.43f4e30d.css">
+<script type="module" crossorigin src="./assets/index.3b29ff34.js"></script>
+  <link rel="modulepreload" href="./assets/vendor.3a6a5816.js">
+  <link rel="stylesheet" href="./assets/index.21162620.css">
 </head>
 
 <body>

src/ajax/api.ts

@@ -39,6 +39,8 @@ export default {
   GET_COMMUNITY_FACILITY: '/service-special-nandong/communityRelations', // 小区设施
   GET_ISSUE_LIST: '/service-special-nandong/management/factors', // 管理要素列表
   GET_COMBINE_LIST: '/service-special-nandong/league/linkage', // 联勤联动列表
+  /** 报警发短信 */
+  POST_ALARM: '/service-alarm-nandong/public/alarm',
 
   /** 工作站 */
   GET_STATION: '/service-special-nandong/workstations', // 工作站信息

src/ajax/axios.ts

@@ -64,6 +64,7 @@ interface RequestOptions {
     | 'application/json;charset=UTF-8'
     | 'application/x-www-form-urlencoded;charset=UTF-8'
   showLoading?: boolean
+  headers?: { [key: string]: string }
 }
 
 /**
@@ -80,6 +81,7 @@ const ajax = ({
   params = {},
   contentType = 'application/json;charset=UTF-8',
   showLoading = true,
+  headers = {},
 }: RequestOptions) => {
   if (!url || typeof url != 'string') {
     throw new Error('接口URL不正确')
@@ -94,6 +96,7 @@ const ajax = ({
       'Access-Control-Allow-Headers':
         'Authorization,Origin, X-Requested-With, Content-Type, Accept',
       'Access-Control-Allow-Methods': '*',
+      ...headers,
     },
   }
   if (method === 'GET') {

src/components/MyComponent/MyChart/my-pie.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, onMounted, watchEffect } from 'vue'
+import { defineComponent, PropType, onMounted, watchEffect, watch } from 'vue'
 import { use } from 'echarts/core'
 import { PieChart } from 'echarts/charts'
 use([PieChart])

src/components/MyComponent/main.styl

@@ -24,6 +24,7 @@ $primary-color = #47B3FF
 $secondary-color = #5BD5FF
 $primary-bg = rgba(49,94,139,.3)
 $primary-border = rgba(91,213,255,.5)
+$red = #CB1B45
 $blue = #2F86EE
 $yellow = #ffd400
 $green = #4F953B

src/view/community.vue

@@ -35,11 +35,24 @@
       </div>
     </div>
     <SiteSelector />
+    <div class="operates">
       <img
-      class="rotate-btn"
         src="@/assets/images/map-btn5.png"
+        title="旋转90度"
         @click="rotateAngle"
       />
+      <img
+        src="@/assets/images/map-btn6.png"
+        title="电瓶车入梯报警"
+        @click="showMonitor = true"
+      />
+    </div>
+    <m-modal v-model="showMonitor" title="电瓶车入梯监控" width="50%">
+      <div>
+        <VideoComponent :video-src="video" />
+        <div class="alarm-btn" @click="handleAlarm">报警</div>
+      </div>
+    </m-modal>
     <m-drawer v-model="showDrawer" width="32vw">
       <div class="community-device">
         <p>类型：{{ drawerInfo.key }}</p>
@@ -62,6 +75,7 @@ import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
 import LeftSection from '@/view/community/left-section.vue'
 import RightSection from '@/view/community/right-section.vue'
 import SiteSelector from '@/view/community/site-selector.vue'
+import VideoComponent from '@/view/components/video-component.vue'
 import store from '@/store'
 import point from '@/assets/images/point.png'
 import point1 from '@/assets/images/point1.png'
@@ -71,12 +85,14 @@ import point4 from '@/assets/images/point4.png'
 import point5 from '@/assets/images/point5.png'
 import point6 from '@/assets/images/point6.png'
 import point7 from '@/assets/images/point7.png'
+import video from '@/assets/images/ele-monitor.mp4'
 import { useRoute } from 'vue-router'
 import { ajax, api } from '@/ajax'
+import { message } from 'ant-design-vue'
 
 export default defineComponent({
   name: 'Main',
-  components: { LeftSection, RightSection, SiteSelector },
+  components: { LeftSection, RightSection, SiteSelector, VideoComponent },
   setup() {
     const rotation = ref(0)
     const rotateAngle = () => {
@@ -217,20 +233,21 @@ export default defineComponent({
       //   }, 1000)
       // }, 5000)
     }
-    const btns = ref([
-      { name: '美丽家园', key: '微更新' },
-      { name: '周边设施', key: '小区设施' },
-      { name: '监控设施', key: '摄像头' },
-    ])
+    const btns = computed(() => {
       if (curId.value === '527635870583459841') {
-      btns.value = [
+        return [
           { name: '美丽家园', key: '微更新' },
           { name: '加装电梯', key: '电梯加装' },
           { name: '周边设施', key: '小区设施' },
           { name: '监控设施', key: '摄像头' },
         ]
       }
-
+      return [
+        { name: '美丽家园', key: '微更新' },
+        { name: '周边设施', key: '小区设施' },
+        { name: '监控设施', key: '摄像头' },
+      ]
+    })
     // 点击下方分类撒点
     const curBtn = ref<string | null>(null)
     const handleClick = async (key: string) => {
@@ -267,6 +284,20 @@ export default defineComponent({
       map.value.hideCommunity()
       curBtn.value = key
     }
+    const showMonitor = ref(false)
+    const handleAlarm = async () => {
+      const res: any = await ajax.post({
+        url: api.POST_ALARM,
+        params: {
+          equipmentAddr: '摄像头',
+          equipmentNo: '上海市',
+        },
+        headers: { AccessCode: '43gh4hjv34j1234bb51j23k4bh' },
+      })
+      if (res.code == '200' && res.msg === 'success') {
+        message.success('短信发送成功！')
+      }
+    }
     return {
       rotation,
       rotateAngle,
@@ -280,6 +311,9 @@ export default defineComponent({
       btns,
       curBtn,
       handleClick,
+      showMonitor,
+      video,
+      handleAlarm,
     }
   },
 })
@@ -287,13 +321,16 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import '../components/MyComponent/main.styl'
-.rotate-btn
-  width .2rem
-  height @width
+.operates
   position fixed
   right calc(49vw + .1rem)
   top .45rem
   z-index 999
+  >img
+    display block
+    width .2rem
+    height @width
+    margin-bottom .05rem
     cursor pointer
     transition transform .3s ease
     &:hover
@@ -343,4 +380,37 @@ export default defineComponent({
         right 0
         background rgba(91,213,255,.4)
         box-shadow 0 0 0.1rem 0.02rem rgba(91,213,255,.5)
+.alarm-btn
+  display inline-block
+  width 1rem
+  padding .06rem 0
+  margin-left 50%
+  transform translateX(-50%)
+  text-align center
+  font-size .12rem
+  font-weight bold
+  cursor pointer
+  z-index 1
+  position relative
+  color #fff
+  background hsl(236,32%,26%)
+  overflow hidden
+  transition color .2s ease-in-out
+  &:before
+    content ''
+    z-index -1
+    position absolute
+    top 50%
+    left @top
+    width 1em
+    height @width
+    border-radius 50%
+    background $edge
+    transform-origin center
+    transform translate3d(-50%, -50%, 0) scale3d(0,0,0)
+    transition transform .25s ease-in-out
+  &:hover
+    color #161616
+    &:before
+      transform translate3d(-50%, -50%, 0) scale3d(15, 15, 15)
 </style>

src/view/community/left-section.vue

@@ -44,6 +44,7 @@
           :key="i"
           :style="`border-left-color: ${getColor(item.classification)}`"
         >
+          <div>
             <div>
               <img :src="getIcon(item.relationName)" />
               <p>{{ item.sectName }}</p>
@@ -55,6 +56,7 @@
             <i :style="`background:${getColor(item.classification)}`" />
           </div>
         </div>
+      </div>
       <div v-show="memberList.length > 0" class="industry">
         <div class="title">
           <img src="@/assets/images/p9.png" />
@@ -184,7 +186,7 @@ export default defineComponent({
       addrList.value = (
         await ajax.get({
           url: api.GET_COMMUNITY_FACILITY,
-          params: { sectId: id },
+          params: { sectId: id, pageSize: 1000 },
         })
       ).data.content.filter((item: any) => item.classification != '微更新')
       memberList.value =
@@ -289,25 +291,37 @@ export default defineComponent({
         opacity .2
         box-shadow 0 0 .05rem .02rem $edge
 .address
-  display flex
-  flex-wrap wrap
+  // display flex
+  // flex-wrap wrap
   height 3rem
   overflow-y auto
   >div
-    display flex
-    flex-direction column
-    justify-content space-around
+    display inline-block
     width 48%
+    height .6rem
+    margin-bottom .06rem
+    margin-right @margin-bottom
+    overflow hidden
     padding .03rem .05rem
     box-sizing border-box
     position relative
-    margin-bottom .06rem
-    margin-right @margin-bottom
     background rgba(33,58,89,.2)
     border .01rem solid rgba(91,213,255,.1)
     border-left .02rem solid transparent
-    overflow hidden
-    height .6rem
+    i
+      position absolute
+      right -0.1rem
+      bottom -0.1rem
+      width .2rem
+      height .2rem
+      transform rotate(45deg)
+      opacity .4
+    >div
+      display flex
+      width 100%
+      height 100%
+      flex-direction column
+      justify-content space-around
       >div
         display flex
         align-items center
@@ -322,14 +336,6 @@ export default defineComponent({
         display flex
         justify-content space-between
         font-size .08rem
-    i
-      position absolute
-      right -0.1rem
-      bottom -0.1rem
-      width .2rem
-      height .2rem
-      transform rotate(45deg)
-      opacity .4
 .industry
   .title
     display flex

src/view/components/map-btns.vue

@@ -86,7 +86,7 @@ export default defineComponent({
         { key: 'home', icon: btn3 },
         { key: '', icon: btn4 },
         { key: '', icon: btn5 },
-        { key: '', icon: btn6 },
+        // { key: '', icon: btn6 },
       ]
       return [mapType, ...list]
     })
@@ -115,18 +115,16 @@ export default defineComponent({
     const searchKey = ref('')
     const caseList = computed(() => store.state.caseList)
     const options = computed(() => {
-      const result: { [key: string]: any } = {
-        street: [
+      if (store.state.curView.type === 'street') {
+        return [
           { label: '第一工作站', value: 'workArea1' },
           { label: '第二工作站', value: 'workArea2' },
           { label: '第三工作站', value: 'workArea3' },
-        ],
-        work1: [
           { label: '振兴小区', value: 'zhenxing' },
           { label: '威海路62弄', value: 'weihai' },
-        ],
+        ]
       }
-      return result[store.state.curView.type] || []
+      return []
     })
     const checkboxValues = ref([])
     const handleChange = (e: any) => {

src/view/components/video-component.vue

 <template>
   <div class="video-component">
     <video
-      v-if="isVideo"
+      v-if="isM3U8"
       ref="videoRef"
       class="video"
       autoplay="autoplay"
@@ -9,6 +9,9 @@
     >
       您的浏览器不支持播放此视频。
     </video>
+    <video v-else-if="isMP4" class="video" autoplay="autoplay" controls>
+      <source :src="videoSrc" type="video/mp4" />
+    </video>
     <iframe v-else class="video" :src="videoSrc" frameborder="0" />
   </div>
 </template>
@@ -34,11 +37,11 @@ export default defineComponent({
   },
   setup(props) {
     const videoRef = ref<any | null>(null)
-    const isVideo = computed(
-      () =>
-        props.videoSrc &&
-        (props.videoSrc.indexOf('m3u8') >= 0 ||
-          props.videoSrc.indexOf('mp4') >= 0)
+    const isM3U8 = computed(
+      () => props.videoSrc && props.videoSrc.indexOf('m3u8') >= 0
+    )
+    const isMP4 = computed(
+      () => props.videoSrc && props.videoSrc.indexOf('mp4') >= 0
     )
     const init = () => {
       if (!videoRef.value) return
@@ -58,12 +61,14 @@ export default defineComponent({
       }
     }
     onMounted(async () => {
+      if (!isM3U8.value) return
       await nextTick()
       init()
     })
     return {
       videoRef,
-      isVideo,
+      isM3U8,
+      isMP4,
     }
   },
 })

src/view/hooks/useSwitchMap.ts

@@ -86,9 +86,13 @@ export default function useSwitchMap(map: any) {
           | null
       ) => {
         if (!name) return
+        let color = '#FF6161'
+        if (name.indexOf('workArea') >= 0) {
+          color = '#FFCE34'
+        }
         return map.value.addPolyLine({
           paths: store.state[name].paths,
-          strokeColor: '#FF6161',
+          strokeColor: color,
         })
       }
     )