海康口门门禁地图显示

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',

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/videoList.vue

@@ -431,7 +431,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.$parent.CORPINFO_ID
             }
           ).then((data) => {
             this.listLoading = false

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,7 +304,7 @@ export default {
         '/map/getOnlineGateMachine', {
           AREA: this.area,
           CORPINFO_ID: this.corpInfoId,
-          GANGKOU: this.gangkou,
+          GANGKOU: this.gangkou
         }
       ).then((data) => {
         data.varList.forEach(e => {
@@ -316,9 +319,7 @@ export default {
             this.block1OptionsList[1].count2 = e.CAR
             this.block1OptionsList[1].count3 = e.PEOPLE
           }
-
+        })
-        });
-
       })
     },
     getDoorManagement() {

src/views/map/components/menjin2.vue

@@ -0,0 +1,469 @@
+<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">{{ block3OptionsIndex===0 ? item.devName : item.ROADWAYNAME }}</div>
+            <div class="td">{{ block3OptionsIndex===0 ? item.personName : item.PLATENO }}</div>
+            <div class="td line1">{{ block3OptionsIndex===0 ? item.eventTime.substring(11) : item.CROSSTIME.substring(11,19) }}</div>
+            <div class="td">{{ item.inAndOutType === null ? (item.VEHICLEOUT === '0' ? '出' : '进') : (item.inAndOutType === '0' ? '出' : '进') }}</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',
+        {}
+      ).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/listGateMachine',
+        {
+          TYPE: type
+        }
+      ).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,7 +226,7 @@
           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-option v-for="item in onePerLocArr" :key="item.id" :value="item.id" :label="item.id"/>
             </el-select>
@@ -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'
@@ -2652,7 +2652,7 @@ export default {
                   personTypeName: item.personTypeName,
                   data_id: item.cardId + '',
                   point_type: 'peoplePositionCzks',
-                  label: item.realName,
+                  label: item.realName
 
                 }
                 czksPerLoc.push(perLoc)