Merge remote-tracking branch 'origin/dev' into dev

src/views/door/platformVideo/index.vue

@@ -51,7 +51,7 @@
       <el-table-column label="操作" align="left" width="500px">
         <template slot-scope="{row}">
           <el-button v-show="!row.PLATFORMDOORVIDEO_ID" type="success" icon="el-icon-edit" size="mini" @click="handleIn(row)">加入</el-button>
-          <el-button v-show="row.PLATFORMDOORVIDEO_ID" type="warning" size="mini" style="margin: 0;" @click="getOutsourced(row)">查询绑定</el-button>
+          <el-button v-show="row.PLATFORMDOORVIDEO_ID" type="warning" size="mini" style="margin: 0;" @click="getRelevanceDoor(row)">查询绑定</el-button>
           <el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(row)">播放</el-button>
           <el-button type="warning" size="mini" @click="getRTSP(row)">获取rtsp地址</el-button>
           <el-button type="info" icon="el-icon-location-information" size="mini" @click="handleMap(row)">定位</el-button>
@@ -93,13 +93,13 @@
     </el-dialog>
     <!-- 反查重点工程 -->
     <el-dialog
-      :visible.sync="outsourcedListVisible"
+      :visible.sync="doorListVisible"
       :title="'绑定列表'"
       width="80%">
       <el-table
         v-loading="listLoading"
         ref="multipleTable"
-        :data="outsourcedList"
+        :data="doorList"
         :row-key="getRowKey"
         :header-cell-style="{
           'font-weight': 'bold',
@@ -112,25 +112,23 @@
       >
 
         <el-table-column type="index" label="序号" width="50" align="center" />
-        <el-table-column prop="OUTSOURCED_NAME" label="重点工程名称" show-overflow-tooltip />
+        <el-table-column prop="DOOR_NAME" label="门口门禁名称" show-overflow-tooltip />
 
-        <el-table-column prop="STATE" label="状态" width="100" >
+        <el-table-column prop="STATUS" label="状态" width="100" >
           <template slot-scope="{row}">
-            <span v-if="row.STATE == 0">未开工</span>
+            <span v-if="row.STATUS == 0">正常</span>
-            <span v-if="row.STATE == 1">进行中</span>
+            <span v-if="row.STATUS == 1">停用</span>
-            <span v-if="row.STATE == 2">已结束</span>
+            <span v-if="row.STATUS == 2">临时关闭</span>
-            <span v-if="row.STATE == -1">开工申请中</span>
-            <span v-if="row.STATE == -2">结束申请中</span>
           </template>
         </el-table-column>
         <el-table-column label="操作" align="center" width="400">
           <template slot-scope="{row}">
-            <el-button type="danger" icon="el-icon-delete" size="mini" @click="untie(row.VIDEOMANAGER_ID)">解绑</el-button>
+            <el-button type="danger" icon="el-icon-delete" size="mini" @click="untie(row.DOOR_VIDEO_ID)">解绑</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="outsourcedListVisible = false">返 回</el-button>
+        <el-button @click="doorListVisible = false">返 回</el-button>
       </div>
     </el-dialog>
     <!-- 反查重点工程END -->
@@ -155,9 +153,9 @@ export default {
         page: 1,
         limit: 20
       },
-      outsourcedListVisible: false, // 重点工程
+      doorListVisible: false, // 重点工程
       controlRowTemp: null, // 正在操作的row，用于删除后刷新
-      outsourcedList: [], // 重点工程
+      doorList: [], // 重点工程
       total: 0,
       KEYWORDS: '',
       tempList: [],
@@ -234,7 +232,6 @@ export default {
         tempList.forEach(item => {
           for (let i = 0; i < this.tempList.length; i++) {
             if (item.indexCode === this.tempList[i].INDEXCODE) {
-              console.log(item.indexCode === this.tempList[i].INDEXCODE)
               item.PLATFORMDOORVIDEO_ID = this.tempList[i].PLATFORMDOORVIDEO_ID
               item.LONGITUDE = this.tempList[i].LONGITUDE
               item.LATITUDE = this.tempList[i].LATITUDE
@@ -243,7 +240,6 @@ export default {
           }
         })
         this.varList = tempList
-        console.log(tempList)
         this.total = res.data.total
       }).catch((e) => {
         this.listLoading = false
@@ -284,7 +280,6 @@ export default {
             type: 'success'
           })
           this.listLoading = false
-          this.allCodes.push(row.indexCode)
           this.varList = []
           await this.getAllList()
           this.getList()
@@ -371,8 +366,8 @@ export default {
           }
         ).then(async(res) => {
           // this.dialogVideoHLS = true
-          this.getList()
           await this.getAllList()
+          this.getList()
         }).catch((e) => {
         })
       }).catch(() => {
@@ -480,20 +475,19 @@ export default {
       this.player.dispose()
       this.dialogVideoHLS = false
     },
-    // 获取重点工程列表
+    async getRelevanceDoor(row) {
-    async getOutsourced(row) {
       this.listLoading = true
-      this.outsourcedListVisible = true
+      this.doorListVisible = true
       this.controlRowTemp = row
-      this.outsourcedList = []
+      this.doorList = []
       requestFN(
-        `/videoResources/getRelevanceOutsourced?VIDEO_ID=${row.PLATFORMDOORVIDEO_ID}`,
+        '/mkmjDoorVideo/getRelevanceDoor',
         {
-
+          VIDEO_ID: row.PLATFORMDOORVIDEO_ID
         }
       ).then((data) => {
         this.listLoading = false
-        this.outsourcedList = data.varList
+        this.doorList = data.varList
       }).catch((e) => {
         this.listLoading = false
       })
@@ -505,18 +499,17 @@ export default {
         type: 'warning'
       }).then(() => {
         this.listLoading = true
-        console.log(this.VIDEOMANAGER_ID)
         requestFN(
-          '/videomanager/delete',
+          '/mkmjDoorVideo/delete',
           {
-            VIDEOMANAGER_ID: id
+            DOOR_VIDEO_ID: id
           }
         ).then(() => {
           this.$message({
             message: '删除成功',
             type: 'success'
           })
-          this.getOutsourced(this.controlRowTemp)
+          this.getRelevanceDoor(this.controlRowTemp)
           this.listLoading = false
         }).catch((e) => {
           this.listLoading = false

src/views/gatemachine/area/components/EditDevice.vue

@@ -200,7 +200,7 @@ export default {
         requestFN(
           '/mkmjDevice/listAllForArea',
           {
-            KEYWORDS: this.doorFilterText
+            CORPINFO_ID: this.$parent.CORPINFO_ID
           }
         ).then((data) => {
           this.listLoading = false

src/views/gatemachine/area/components/edit.vue

@@ -5,6 +5,19 @@
     </div>
     <div>
       <el-form v-loading="dialogFormVisible" ref="form" :model="form" :rules="rules" label-width="150px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="所属分公司：" prop="CORPINFO_ID">
+              <el-select v-model="form.CORPINFO_ID" filterable placeholder="请选择" style="width: 205px">
+                <el-option
+                  v-for="item in corpList"
+                  :key="item.CORPINFO_ID"
+                  :label="item.CORP_NAME"
+                  :value="item.CORPINFO_ID"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="区域名称：" prop="AREA_NAME">
@@ -105,13 +118,16 @@ export default {
       DEPARTMENT_ID_OLD: '',
       DEVICE_NAMES: '',
       form: {
+        CORPINFO_ID: '',
         AREA_NAME: '',
         AREA_ID: '',
         DEVICE_IDS: ''
       },
+      corpList: [],
       riskForm: {},
       KEYWORDS: '',
       rules: {
+        CORPINFO_ID: [{ required: true, message: '所属分公司不能为空', trigger: 'blur' }],
         AREA_NAME: [{ required: true, message: '区域名称不为空', trigger: 'blur' }]
       },
       formLabelWidth: '120px',
@@ -136,6 +152,7 @@ export default {
     await this.getdeviceList()
     this.form.AREA_ID = this.$parent.AREA_ID || ''
     this.form.DEVICE_IDS = this.$parent.DEVICE_IDS || ''
+    this.getCorpList()
     if (this.form.AREA_ID) {
       this.getDataByID()
     }
@@ -263,6 +280,16 @@ export default {
         this.listLoading = false
       })
     },
+    getCorpList() {
+      requestFN(
+        '/corpinfo/getSelectByCorpInfo',
+        {
+        }
+      ).then((data) => {
+        this.corpList = JSON.parse(data.corpInfoJson)
+      }).catch((e) => {
+      })
+    },
     // 返回列表
     goBack() {
       this.$parent.activeName = 'List'

src/views/gatemachine/area/components/list.vue

@@ -290,6 +290,7 @@ export default {
     },
     handleOpen(row) {
       this.$parent.AREA_ID = row.AREA_ID
+      this.$parent.CORPINFO_ID = row.CORPINFO_ID
       this.$parent.activeName = 'DeviceList'
     },
     handleDelete(row) {

src/views/gatemachine/area/components/listDevice.vue

@@ -100,6 +100,7 @@ export default {
       msg: 'add',
       config: config,
       dialogFormMap: false,
+      CORPINFO_ID: '',
       PATH_ID: '',
       AREA_ID: '',
       AREA_LEAVE: '',
@@ -143,6 +144,7 @@ export default {
     this.AREA_ID = this.$parent.AREA_ID
     this.AREA_LEAVE = this.$parent.AREA_LEAVE
     this.DOOR_TYPE = this.$parent.DOOR_TYPE
+    this.CORPINFO_ID = this.$parent.CORPINFO_ID
     this.getList()
     this.hasButton()
   },

src/views/gatemachine/gateDoor/components/EditDevice.vue

@@ -258,7 +258,10 @@ export default {
     handleAdd() {
       requestFN(
         '/mkmjDevice/add',
-        this.form
+        {
+          ...this.form,
+          CORPINFO_ID: this.$parent.CORPINFO_ID
+        }
       ).then((data) => {
         if (data.msg === '保存成功') {
           this.$message.success(data.msg)

src/views/gatemachine/gateDoor/components/platformvideo.vue

@@ -130,8 +130,7 @@ export default {
       requestFN(
         '/platform/door/video/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
         {
-          KEYWORDS: this.KEYWORDS,
+          KEYWORDS: this.KEYWORDS
-          CORPINFO_ID: this.$parent.CORPINFO_ID
         }
       ).then((data) => {
         this.listLoading = false

src/views/gatemachine/gateDoor/components/videoList.vue

@@ -183,6 +183,7 @@ export default {
       LONGITUDE: '',
       disabledForm: true,
       form: {
+        CORPINFO_ID: '',
         DOOR_ID: '',
         VIDEO_RESOURCES_ID: '',
         PLATFORMVIDEOMANAGEMENT_ID: '',
@@ -207,8 +208,8 @@ export default {
   },
   created() {
     this.form.DOOR_ID = this.$parent.DOOR_ID
+    this.form.CORPINFO_ID = this.$parent.CORPINFO_ID
     this.getList()
-    this.getVideoResourcesSelect()
   },
   beforeDestroy() {
     this.map && this.map.removeEventListener('click', this.MapClick)
@@ -216,15 +217,6 @@ export default {
     clearInterval(this.timer)
   },
   methods: {
-    getVideoResourcesSelect() {
-      requestFN(
-        '/videoResources/listAll', {
-          UNITS_ID: this.$parent.UNITS_ID
-        }
-      ).then((res) => {
-        this.videoResourcesList = res.varList
-      })
-    },
     /**
      * 初始化天地图对象
      */
@@ -290,6 +282,7 @@ export default {
       this.dialogFormMap = true
       var DOOR_ID = this.form.DOOR_ID
       this.form = {
+        CORPINFO_ID: this.$parent.CORPINFO_ID,
         DOOR_ID: DOOR_ID,
         DOOR_VIDEO_ID: row.DOOR_VIDEO_ID,
         LATITUDE: row.LATITUDE,
@@ -328,39 +321,34 @@ export default {
     showVideo(row) {
       this.$message.warning('单次播放最多五分钟')
       this.start()
-      if (!row.PLATFORMVIDEOMANAGEMENT_ID) {
+      requestFN(
-        this.VIDEOURL = row.VIDEOURL
+        '/platform/door/video/getHlsPath',
-        this.dialogVideo = true
+        {
-      } else {
+          INDEXCODE: row.INDEXCODE
-        requestFN(
+        }
-          '/platformvideomanagement/getHlsPath',
+      ).then((res) => {
-          {
+        this.dialogVideoHLS = true
-            INDEXCODE: row.INDEXCODE
+        this.$nextTick(() => {
-          }
+          // eslint-disable-next-line no-undef
-        ).then((res) => {
+          this.player = new Aliplayer({
-          this.dialogVideoHLS = true
+            'id': 'aLiVideoPlayer',
-          this.$nextTick(() => {
+            'source': res.data.url,
-            // eslint-disable-next-line no-undef
+            'width': '100%',
-            this.player = new Aliplayer({
+            'height': '500px',
-              'id': 'aLiVideoPlayer',
+            'autoplay': true,
-              'source': res.data.url,
+            'isLive': true,
-              'width': '100%',
+            'rePlay': false,
-              'height': '500px',
+            'playsinline': true,
-              'autoplay': true,
+            'preload': true,
-              'isLive': true,
+            'controlBarVisibility': 'hover',
-              'rePlay': false,
+            'useH5Prism': true
-              'playsinline': true,
+          }, function(player) {
-              'preload': true,
+            console.log('The player is created')
-              'controlBarVisibility': 'hover',
-              'useH5Prism': true
-            }, function(player) {
-              console.log('The player is created')
-            })
           })
-        }).catch((e) => {
-          this.listLoading = false
         })
-      }
+      }).catch((e) => {
+        this.listLoading = false
+      })
     },
     setPosition() {
       this.dialogFormMap = false
@@ -431,7 +419,8 @@ export default {
               PLATFORMVIDEOMANAGEMENT_ID: this.form.PLATFORMVIDEOMANAGEMENT_ID,
               LONGITUDE: this.form.LONGITUDE,
               LATITUDE: this.form.LATITUDE,
-              DOOR_ID: this.form.DOOR_ID
+              DOOR_ID: this.form.DOOR_ID,
+              CORPINFO_ID: this.form.CORPINFO_ID
             }
           ).then((data) => {
             this.listLoading = false
@@ -551,6 +540,7 @@ export default {
     resetForm() {
       var DOOR_ID = this.form.DOOR_ID
       this.form = {
+        CORPINFO_ID: this.$parent.CORPINFO_ID,
         VIDEO_TYPE: 1,
         CODE: '',
         DOOR_ID: DOOR_ID,

src/views/map/components/menjin.vue

@@ -135,6 +135,9 @@ export default {
     }
   },
   created() {
+    console.info('corpInfoId', this.corpInfoId)
+    console.info('area', this.area)
+    console.info('gangkou', this.gangkou)
     this.getDoorWayRecords(0)
     this.getOnlineGateMachine()
     this.getMkmjGateStatistics()
@@ -148,7 +151,7 @@ export default {
     this.initEcharts1()
   },
   beforeDestroy() {
-    Echarts1 = null
+    if (Echarts1) { Echarts1 = null }
   },
   methods: {
     initEcharts1(data) {
@@ -160,7 +163,7 @@ export default {
         XaxisData.push(e.AREA_NAME)
         seriesData1.push(e.CAR_IN + 0 + e.PEOPLE_IN)
         seriesData2.push(e.CAR_OUT + 0 + e.PEOPLE_OUT)
-      });
+      })
 
       Echarts1 = echarts.init(document.querySelector('#main1'))
       const option = {
@@ -301,24 +304,22 @@ export default {
         '/map/getOnlineGateMachine', {
           AREA: this.area,
           CORPINFO_ID: this.corpInfoId,
-          GANGKOU: this.gangkou,
+          GANGKOU: this.gangkou
         }
       ).then((data) => {
         data.varList.forEach(e => {
-          if (e.AREA_PARENT_ID == '393705'){
+          if (e.AREA_PARENT_ID == '393705') {
             // 东港区
             this.block1OptionsList[0].count1 = e.AREA_COUNT
             this.block1OptionsList[0].count2 = e.CAR
             this.block1OptionsList[0].count3 = e.PEOPLE
-          }else if (e.AREA_PARENT_ID == '371709'){
+          } else if (e.AREA_PARENT_ID == '371709') {
             // 西港区
             this.block1OptionsList[1].count1 = e.AREA_COUNT
             this.block1OptionsList[1].count2 = e.CAR
             this.block1OptionsList[1].count3 = e.PEOPLE
           }
-
+        })
-        });
-
       })
     },
     getDoorManagement() {

src/views/map/components/menjin2.vue

@@ -0,0 +1,470 @@
+<template>
+  <div class="menjin">
+    <div class="block1">
+      <layout-title title="设备在线情况"/>
+      <div class="options">
+        <div v-for="(item,index) in block1OptionsList" :key="index" class="option">
+          <div class="title active">{{ item.title }}</div>
+          <div class="circular">
+            <img :src="item.img" alt="">
+          </div>
+          <div class="label">
+            {{ item.label1 }}：<count-to :start-val="0" :end-val="item.count1" :duration="3600"/>
+          </div>
+          <div v-if="item.label2" class="label">
+            {{ item.label2 }}：<count-to :start-val="0" :end-val="item.count2" :duration="3600"/>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block4">
+      <layout-title title="区域进出记录"/>
+      <div class="content">
+        <div class="options">
+          <div
+            v-for="(item,index) in block4OptionsTabs"
+            :key="index"
+            :class="['title', {active:index === block4OptionsIndex}]"
+            @click="block4OptionsClick(index)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div id="main1"/>
+      </div>
+    </div>
+    <div class="block3">
+      <layout-title title="口门进出记录"/>
+      <div class="content">
+        <div class="options">
+          <div
+            v-for="(item,index) in block3OptionsList"
+            :key="index"
+            :class="['title', {active:index === block3OptionsIndex}]"
+            @click="block3OptionsClick(index)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="table">
+          <div class="tr">
+            <div class="td">卡口名称</div>
+            <div class="td">{{ block3OptionsIndex===0 ? '人员':'车牌' }}</div>
+            <div class="td">时间</div>
+            <div class="td">状态</div>
+          </div>
+          <div v-for="(item,index) in block3List" :key="index" class="tr">
+            <div class="td line1">{{ item.DOORNAME }}</div>
+            <div class="td">{{ item.NAME }}</div>
+            <div class="td line1">{{ item.TIME.substring(11) }}</div>
+            <div class="td">{{ item.STATUS }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import layoutTitle from './title.vue'
+import CountTo from 'vue-count-to'
+import { requestFN } from '@/utils/request'
+import * as echarts from 'echarts'
+
+let myChart1
+export default {
+  components: {
+    layoutTitle,
+    CountTo
+  },
+  props: {
+    corpInfoId: {
+      type: String,
+      default: ''
+    },
+    area: {
+      type: String,
+      default: ''
+    },
+    gangkou: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      block1OptionsList: [
+        {
+          title: '人员闸机数',
+          img: require('../../../assets/map/menjin/ico1.png'),
+          label1: '在线数',
+          count1: 0
+          // label2: '离线数',
+          // count2: 0
+        },
+        {
+          title: '车辆闸机数',
+          img: require('../../../assets/map/menjin/ico2.png'),
+          label1: '在线数',
+          count1: 0
+          // label2: '离线数',
+          // count2: 0
+        },
+        {
+          title: '摄像头数',
+          img: require('../../../assets/map/menjin/ico3.png'),
+          label1: '摄像头数',
+          count1: 0
+        }
+      ],
+      block3OptionsList: ['人员闸机', '车辆闸机'],
+      block3OptionsIndex: 1,
+      block2List: [],
+      block3List: [],
+      block4OptionsTabs: ['人员', '车辆'],
+      block4OptionsIndex: 0,
+      block4OptionsList: []
+    }
+  },
+  mounted() {
+    this.getMachineCount() // 设备数
+    this.getEntryAndExitCount()// echar
+    this.listPerpleCarGateMachine('1') // 进出记录
+    window.onresize = function() {
+      myChart1 && myChart1.resize()
+    }
+  },
+  destroyed() {
+    myChart1 = null
+  },
+  methods: {
+    getEntryAndExitCount() {
+      requestFN(
+        '/mkmjRelation/getAllCarAndPeopleInfoCountByArea',
+        { CORPINFO_ID: this.corpInfoId }
+      ).then((data) => {
+        this.block4OptionsList = data.varList
+        this.initEcharts1(this.block4OptionsList)
+      }).catch((e) => {
+      })
+    },
+    initEcharts1(data) {
+      const xAxisData = []
+      const entryData = []
+      const exitData = []
+      for (let i = 0; i < data.length; i++) {
+        if (this.block4OptionsIndex === 0) {
+          if (data[i].TYPE === 'person') {
+            xAxisData.push(data[i].AREA_NAME)
+            console.log(data[i])
+            entryData.push(data[i].INPERSONCOUNT)
+            exitData.push(data[i].OUTPERSONCOUNT)
+          }
+        }
+        if (this.block4OptionsIndex === 1) {
+          if (data[i].TYPE === 'car') {
+            xAxisData.push(data[i].AREA_NAME)
+            console.log(data[i])
+            entryData.push(data[i].INCARCOUNT)
+            exitData.push(data[i].OUTCARCOUNT)
+          }
+        }
+      }
+      myChart1 && myChart1.dispose()
+      myChart1 = echarts.init(document.querySelector('#main1'))
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '8%',
+          top: '16%',
+          containLabel: true
+        },
+        legend: {
+          data: ['进', '出'],
+          right: 10,
+          top: 12,
+          textStyle: {
+            color: '#fff'
+          },
+          itemWidth: 12,
+          itemHeight: 10
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData,
+          axisLine: {
+            lineStyle: {
+              color: 'white'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              fontFamily: 'Microsoft YaHei'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: 'white'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(255,255,255,0.3)'
+            }
+          },
+          axisLabel: {}
+        },
+        series: [{
+          name: '进',
+          type: 'bar',
+          barWidth: '15%',
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#8bd46e'
+              }, {
+                offset: 1,
+                color: '#09bcb7'
+              }]),
+              barBorderRadius: 12
+            }
+          },
+          data: entryData
+        },
+        {
+          name: '出',
+          type: 'bar',
+          barWidth: '15%',
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#fccb05'
+              }, {
+                offset: 1,
+                color: '#f5804d'
+              }]),
+              barBorderRadius: 11
+            }
+
+          },
+          data: exitData
+        }
+        ]
+      }
+      myChart1.setOption(option)
+    },
+    block4OptionsClick(index) {
+      console.log(index)
+      this.block4OptionsIndex = index
+      this.initEcharts1(this.block4OptionsList)
+    },
+    getMachineCount() {
+      requestFN(
+        '/map/getDoorCount',
+        {
+          CORPINFO_ID: this.corpInfoId
+        }
+      ).then((data) => {
+        this.block1OptionsList[0].count1 = data.data.personMachineCount
+        this.block1OptionsList[1].count1 = data.data.carMachineCount
+        this.block1OptionsList[2].count1 = data.data.cameraCount
+      }).catch((e) => {
+      })
+    },
+
+    listPerpleCarGateMachine(type) {
+      requestFN(
+        '/map/getDoorRecord',
+        {
+          TYPE: type,
+          CORPINFO_ID: this.corpInfoId
+        }
+      ).then((data) => {
+        this.block3List = data.varList.slice(0, 8)
+      }).catch((e) => {
+      })
+    },
+    block3OptionsClick(index) {
+      this.block3OptionsIndex = index
+      this.listPerpleCarGateMachine(index)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.menjin {
+  .title {
+    background-image: url("../../../assets/map/menjin/title_on.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 113px;
+    height: 26px;
+    font-size: 14px;
+    line-height: 26px;
+    text-align: center;
+    color: #fff;
+
+    &.active {
+      background-image: url("../../../assets/map/menjin/title.png");
+    }
+  }
+
+  .block1 {
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+
+    .options {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 15px;
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+
+      .option {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .circular {
+          margin-top: 5px;
+          background-image: url("../../../assets/map/menjin/img1.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          width: 50px;
+          height: 50px;
+          text-align: center;
+          padding-top: 13px;
+
+          img {
+            width: 30px;
+            height: 26px;
+            animation: scale 2s infinite;
+          }
+        }
+
+        .label {
+          margin-top: 5px;
+          font-size: 12px;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .block4 {
+    margin-top: 10px;
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+
+    .content {
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+      padding: 10px;
+
+      .options {
+        display: flex;
+        justify-content: flex-end;
+
+        .title {
+          cursor: pointer;
+        }
+      }
+      #main1{
+        margin-top: 10px;
+        width: 100%;
+        height: 200px;
+      }
+    }
+  }
+
+  .block3 {
+    margin-top: 10px;
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+
+    .content {
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+      padding: 10px;
+
+      .options {
+        display: flex;
+        justify-content: flex-end;
+
+        .title {
+          cursor: pointer;
+        }
+      }
+
+      .table {
+        margin-top: 5px;
+
+        .tr {
+          display: flex;
+
+          &:nth-child(odd) {
+            background-color: rgba(42, 86, 158, 0.53);
+          }
+
+          .td {
+            flex: 1;
+            text-align: center;
+            font-size: 12px;
+            color: #fff;
+            padding: 5px;
+
+            &:nth-child(2) {
+              flex-basis: 20%;
+            }
+
+            &.green {
+              color: #7ccf41;
+            }
+
+            &.yellow {
+              color: #ffcb05;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.line1 {
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

src/views/map/components/menjin_index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div>
+    {{ corpInfoId }}
+    {{ area }}
+    {{ gangkou }}
+    <menjin2 v-if="corpInfoId" :corp-info-id="corpInfoId" :area="area" :gangkou="gangkou"/>
+    <menjin v-else :corp-info-id="corpInfoId" :area="area" :gangkou="gangkou"/>
+  </div>
+</template>
+
+<script>
+import menjin from './menjin'
+import menjin2 from './menjin2'
+export default {
+  components: {
+    menjin,
+    menjin2
+  },
+  props: {
+    corpInfoId: {
+      type: String,
+      default: ''
+    },
+    area: {
+      type: String,
+      default: ''
+    },
+    gangkou: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.menjin {
+  .title {
+    background-image: url("../../../assets/map/menjin/title_on.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 113px;
+    height: 26px;
+    font-size: 14px;
+    line-height: 26px;
+    text-align: center;
+    color: #fff;
+
+    &.active {
+      background-image: url("../../../assets/map/menjin/title.png");
+    }
+  }
+
+  .block1 {
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+
+    .options {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 15px;
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+
+      .option {
+        display: flex;
+        align-items: center;
+        .img{
+          width: 81px;
+          height: 93px;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .info{
+          margin-left: 10px;
+          font-size: 14px;
+          color: #fff;
+          div{
+            margin-top: 5px;
+          }
+        }
+      }
+    }
+  }
+
+  .block2 {
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+    margin-top: 10px;
+
+    .options {
+      padding: 10px 15px;
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+      #main1{
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .block3 {
+    margin-top: 10px;
+    width: 410px;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+
+    .content {
+      border: 1px solid;
+      border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+      padding: 10px;
+
+      .options {
+        display: flex;
+        justify-content: flex-end;
+
+        .title {
+          cursor: pointer;
+        }
+      }
+
+      .table {
+        margin-top: 5px;
+        .scroll {
+          max-height: 200px;
+          overflow-y: auto;
+
+          &::-webkit-scrollbar {
+            width: 5px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            border-radius: 5px;
+            background: rgba(2, 30, 81, 0.851);
+          }
+
+          &::-webkit-scrollbar-track {
+            border-radius: 5px;
+            background: rgba(255, 255, 255, 0.1);
+          }
+
+          .tr {
+            &:nth-child(odd) {
+              background-color: transparent;
+            }
+          }
+        }
+        .tr {
+          display: flex;
+
+          &:nth-child(odd) {
+            background-color: rgba(42, 86, 158, 0.53);
+          }
+
+          .td {
+            flex: 1;
+            text-align: center;
+            font-size: 12px;
+            color: #fff;
+            padding: 5px;
+
+            &:nth-child(2) {
+              flex-basis: 20%;
+            }
+
+            &:nth-child(3) {
+              flex: none;
+              flex-basis: 50px;
+            }
+
+            &.green {
+              color: #7ccf41;
+            }
+
+            &.yellow {
+              color: #ffcb05;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.line1 {
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

src/views/map/index.vue

@@ -226,13 +226,13 @@
           enter-active-class="animate__animated animate__fadeInDown"
           leave-active-class="animate__animated animate__fadeOutUp"
         >
-        <div class="people_trajectory" v-if="isPeopleTrajectory">
+          <div v-if="isPeopleTrajectory" class="people_trajectory">
-          <el-select v-model="peopleTrajectoryValue" popper-class="people_trajectory_select">
+            <el-select v-model="peopleTrajectoryValue" popper-class="people_trajectory_select">
-            <el-option v-for="item in onePerLocArr" :key="item.id" :value="item.id" :label="item.id"/>
+              <el-option v-for="item in onePerLocArr" :key="item.id" :value="item.id" :label="item.id"/>
-          </el-select>
+            </el-select>
-          <el-button class="search_btn" @click="addTrajectory">搜索</el-button>
+            <el-button class="search_btn" @click="addTrajectory">搜索</el-button>
-          <el-button class="reset_btn" @click="()=>{removeTrajectory();peopleTrajectoryValue = ''}">重置</el-button>
+            <el-button class="reset_btn" @click="()=>{removeTrajectory();peopleTrajectoryValue = ''}">重置</el-button>
-        </div>
+          </div>
         </transition>
       </div>
     </transition>
@@ -256,7 +256,7 @@
       :gangkou="gangkouActive"
       :infoname="dialog.infoname"
       :name="dialog.name"
-      :GATE_VIDEO_ID="dialog.GATE_VIDEO_ID"
+      :gate-video-id="dialog.GATE_VIDEO_ID"
       :person-photo="dialog.personPhoto"
       :ry-dept-name="dialog.RyDeptName"
       :ry-post-name="dialog.RyPostName"
@@ -280,7 +280,7 @@ import cmtIndex from './components/cmt_index.vue'
 import menjinCzks from './components/menjinCzks.vue'
 import renyuanCzks from './components/renyuanCzks.vue'
 import renyuanCmt from './components/renyuanCmt.vue'
-import menjin from './components/menjin.vue'
+import menjin from './components/menjin_index.vue'
 import menjinOld from './components/menjin_old.vue'
 import menjinCfd from './components/menjinCfd.vue'
 import menjinCmt from './components/menjinCmt.vue'
@@ -945,7 +945,7 @@ export default {
         RyPostName: '',
         RyRealName: '',
         personTypeName: '',
-        GATE_VIDEO_ID:''
+        GATE_VIDEO_ID: ''
       },
       /* 曹妃甸使用参数开始*/
       // 人员定位
@@ -1235,8 +1235,8 @@ export default {
         VIIDPort: '8088'
       },
       trajectoryEntityCollection: {},
-      isPeopleTrajectory:false,
+      isPeopleTrajectory: false,
-      peopleTrajectoryValue:''
+      peopleTrajectoryValue: ''
     }
   },
   mounted() {
@@ -1455,7 +1455,7 @@ export default {
           }
           const point_type = pick.id._monitoItems.data.point_type
           const point_id = pick.id._monitoItems.data.id
-          if (point_type == '标记点CAMERA'){
+          if (point_type == '标记点CAMERA') {
             console.log(pick.id._monitoItems.data)
             this.dialog.GATE_VIDEO_ID = pick.id._monitoItems.data.GATE_VIDEO_ID
           }
@@ -2141,7 +2141,7 @@ export default {
           }
           this.carLocArr = []
         }
-        if(urlType === 'peopleTrajectory'){
+        if (urlType === 'peopleTrajectory') {
           this.isPeopleTrajectory = false
         }
         if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
@@ -2149,8 +2149,8 @@ export default {
           this.clearMqttPoint('+/UwbBQ/')
           this.removeTrajectory()
           for (let i = 0; i < this.bottomOptionsList[pindex].list.length; i++) {
-            if(this.bottomOptionsList[pindex].list[i].type === 'peopleTrajectory'){
+            if (this.bottomOptionsList[pindex].list[i].type === 'peopleTrajectory') {
-              if(this.bottomOptionsList[pindex].list[i].check){
+              if (this.bottomOptionsList[pindex].list[i].check) {
                 this.bottomOptionsList[pindex].list[i].check = false
                 this.isPeopleTrajectory = false
                 break
@@ -2174,20 +2174,20 @@ export default {
           }
         })
       } else {
-        if(urlType === 'peopleTrajectory'){
+        if (urlType === 'peopleTrajectory') {
           let flag = false
           for (let i = 0; i < this.bottomOptionsList[pindex].list.length; i++) {
-            if(this.bottomOptionsList[pindex].list[i].type === 'peoplePosition'){
+            if (this.bottomOptionsList[pindex].list[i].type === 'peoplePosition') {
-              if(!this.bottomOptionsList[pindex].list[i].check){
+              if (!this.bottomOptionsList[pindex].list[i].check) {
                 flag = true
                 break
               }
             }
           }
-          if(flag){
+          if (flag) {
             this.$message.warning('请先选择人员定位！！！')
             return
-          }else{
+          } else {
             this.isPeopleTrajectory = true
           }
         }
@@ -2672,7 +2672,7 @@ export default {
                   personTypeName: item.personTypeName,
                   data_id: item.cardId + '',
                   point_type: 'peoplePositionCzks',
-                  label: item.realName,
+                  label: item.realName
 
                 }
                 czksPerLoc.push(perLoc)