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

2024-09-05 16:03:45 +08:00 · 2024-09-05 16:03:45 +08:00 · a9b9fe0b4f
parent 6e18df9743 1e6a491d77
commit a9b9fe0b4f
12 changed files with 798 additions and 105 deletions
--- a/src/views/door/platformVideo/index.vue
+++ b/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.STATE == 1">进行中</span>
-            <span v-if="row.STATE == 2">已结束</span>
-            <span v-if="row.STATE == -1">开工申请中</span>
-            <span v-if="row.STATE == -2">结束申请中</span>
+            <span v-if="row.STATUS == 0">正常</span>
+            <span v-if="row.STATUS == 1">停用</span>
+            <span v-if="row.STATUS == 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 getOutsourced(row) {
+    async getRelevanceDoor(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
--- a/src/views/gatemachine/area/components/EditDevice.vue
+++ b/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
--- a/src/views/gatemachine/area/components/edit.vue
+++ b/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'
--- a/src/views/gatemachine/area/components/list.vue
+++ b/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) {
--- a/src/views/gatemachine/area/components/listDevice.vue
+++ b/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()
  },
--- a/src/views/gatemachine/gateDoor/components/EditDevice.vue
+++ b/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)
--- a/src/views/gatemachine/gateDoor/components/platformvideo.vue
+++ b/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,
-          CORPINFO_ID: this.$parent.CORPINFO_ID
+          KEYWORDS: this.KEYWORDS
        }
      ).then((data) => {
        this.listLoading = false
--- a/src/views/gatemachine/gateDoor/components/videoList.vue
+++ b/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) {
-        this.VIDEOURL = row.VIDEOURL
-        this.dialogVideo = true
-      } else {
-        requestFN(
-          '/platformvideomanagement/getHlsPath',
-          {
-            INDEXCODE: row.INDEXCODE
-          }
-        ).then((res) => {
-          this.dialogVideoHLS = true
-          this.$nextTick(() => {
-            // eslint-disable-next-line no-undef
-            this.player = new Aliplayer({
-              'id': 'aLiVideoPlayer',
-              'source': res.data.url,
-              'width': '100%',
-              'height': '500px',
-              'autoplay': true,
-              'isLive': true,
-              'rePlay': false,
-              'playsinline': true,
-              'preload': true,
-              'controlBarVisibility': 'hover',
-              'useH5Prism': true
-            }, function(player) {
-              console.log('The player is created')
-            })
+      requestFN(
+        '/platform/door/video/getHlsPath',
+        {
+          INDEXCODE: row.INDEXCODE
+        }
+      ).then((res) => {
+        this.dialogVideoHLS = true
+        this.$nextTick(() => {
+          // eslint-disable-next-line no-undef
+          this.player = new Aliplayer({
+            'id': 'aLiVideoPlayer',
+            'source': res.data.url,
+            'width': '100%',
+            'height': '500px',
+            'autoplay': true,
+            'isLive': true,
+            'rePlay': false,
+            'playsinline': true,
+            'preload': true,
+            '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,
--- a/src/views/map/components/menjin.vue
+++ b/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() {
--- a/src/views/map/components/menjin2.vue
+++ b/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>
--- a/src/views/map/components/menjin_index.vue
+++ b/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>
--- a/src/views/map/index.vue
+++ b/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">
-          <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-select>
-          <el-button class="search_btn" @click="addTrajectory">搜索</el-button>
-          <el-button class="reset_btn" @click="()=>{removeTrajectory();peopleTrajectoryValue = ''}">重置</el-button>
-        </div>
+          <div v-if="isPeopleTrajectory" class="people_trajectory">
+            <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-select>
+            <el-button class="search_btn" @click="addTrajectory">搜索</el-button>
+            <el-button class="reset_btn" @click="()=>{removeTrajectory();peopleTrajectoryValue = ''}">重置</el-button>
+          </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,
-      peopleTrajectoryValue:''
+      isPeopleTrajectory: false,
+      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].check){
+            if (this.bottomOptionsList[pindex].list[i].type === 'peopleTrajectory') {
+              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].check){
+            if (this.bottomOptionsList[pindex].list[i].type === 'peoplePosition') {
+              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)