地图/门口门禁

src/views/map/components/menjin.vue

@@ -4,38 +4,23 @@
       <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="img">
-          <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 v-if="item.label3" class="label">
-            {{ item.label3 }}：
-            <count-to :start-val="0" :end-val="+item.count3" :duration="3600"/>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- <div class="block2">
-      <layout-title title="口门区域"/>
-      <div class="options">
-        <div class="bg"/>
-        <div v-for="(item,index) in block2OptionsList" :key="index" class="option">
-          <div class="label">{{ item.title }}：</div>
           <div class="info">
-            <span class="count"><count-to :start-val="0" :end-val="+item.count" :duration="3600"/></span>
+            <div>{{ item.label1 }}：{{ item.count1 }}</div>
-            <span class="company">{{ item.company }}</span>
+            <div>{{ item.label2 }}：{{ item.count2 }}</div>
+            <div>{{ item.label3 }}：{{ item.count3 }}</div>
           </div>
         </div>
       </div>
-    </div> -->
+    </div>
+    <div class="block2">
+      <layout-title title="进入进出统计"/>
+      <div class="options">
+        <div id="main1"/>
+      </div>
+    </div>
     <div class="block3">
       <layout-title title="口门进出记录"/>
       <div class="content">
@@ -56,8 +41,6 @@
             <div class="td">时间</div>
             <div class="td">状态</div>
             <div class="td">闸机名称</div>
-            <!--<div v-if="block3OptionsIndex == 0" class="td">闸机名称</div>
-            <div v-if="block3OptionsIndex == 1" class="td">来港事由</div>-->
           </div>
           <div v-infinite-scroll="load" :infinite-scroll-disabled="disabled" class="scroll">
             <div v-for="(item,index) in block3List" :key="index" class="tr">
@@ -90,7 +73,9 @@
 import layoutTitle from './title.vue'
 import CountTo from 'vue-count-to'
 import { requestFN } from '@/utils/request'
+import * as echarts from 'echarts'
 
+let Echarts1
 export default {
   components: {
     layoutTitle,
@@ -114,62 +99,22 @@ export default {
     return {
       block1OptionsList: [
         {
-          title: '人员闸机',
+          img: require('../../../assets/map/menjin/img3.png'),
-          img: require('../../../assets/map/menjin/ico1.png'),
+          label1: '口门数',
-          label1: '今日进数',
           count1: 0,
-          label2: '今日出数',
+          label2: '车门数',
           count2: 0,
-          label3: '今日剩余人数',
+          label3: '人门数',
           count3: 0
         },
         {
-          title: '车辆闸机',
+          img: require('../../../assets/map/menjin/img4.png'),
-          img: require('../../../assets/map/menjin/ico2.png'),
+          label1: '口门数',
-          label1: '今日进数',
           count1: 0,
-          label2: '今日出数',
+          label2: '车门数',
           count2: 0,
-          label3: '今日剩余车数',
+          label3: '人门数',
           count3: 0
-        },
-        {
-          title: '摄像头数',
-          img: require('../../../assets/map/menjin/ico3.png'),
-          label1: '摄像头数',
-          count1: 0
-        }
-      ],
-      block2OptionsList: [
-        {
-          title: '临时人员',
-          count: '2365',
-          company: '条'
-        },
-        {
-          title: '超员警告',
-          count: '2365',
-          company: '条'
-        },
-        {
-          title: 'SOS求救',
-          count: '2365',
-          company: '条'
-        },
-        {
-          title: '离岗告警',
-          count: '2365',
-          company: '条'
-        },
-        {
-          title: '禁止超时',
-          count: '2365',
-          company: '条'
-        },
-        {
-          title: '车辆超速',
-          count: '2365',
-          company: '条'
         }
       ],
       block3OptionsList: ['人员闸机', '车辆闸机'],
@@ -195,31 +140,145 @@ export default {
     this.getMachineTodayInOutCount()
     // this.getDoorManagement()
   },
+
+  mounted() {
+    window.onresize = function() {
+      Echarts1 && Echarts1.resize()
+    }
+    this.initEcharts1()
+  },
+  beforeDestroy() {
+    Echarts1 = null
+  },
   methods: {
+    initEcharts1(data) {
+      const XaxisData = ['1号门', '2号门', '3号门', '4号门']
+      const seriesData1 = [10, 20, 30, 40]
+      const seriesData2 = [10, 20, 30, 40]
+      Echarts1 = echarts.init(document.querySelector('#main1'))
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '5%',
+          top: '10%',
+          containLabel: true
+        },
+        legend: {
+          top: '0%',
+          right: '0%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14
+          },
+          itemWidth: 12,
+          itemHeight: 10
+        },
+        xAxis: {
+          type: 'category',
+          data: XaxisData,
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 14
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          max: '150',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#8c9493'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 14
+            }
+          }
+        },
+        series: [
+          {
+            name: '人员',
+            type: 'bar',
+            barWidth: '10%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#00f0ff'
+                    },
+                    {
+                      offset: 1,
+                      color: '#0066ff'
+                    }
+                  ],
+                  false
+                )
+              }
+            },
+            data: seriesData1
+          },
+          {
+            name: '车辆',
+            type: 'bar',
+            barWidth: '10%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#003cff'
+                    },
+                    {
+                      offset: 1,
+                      color: '#00ff9c'
+                    }
+                  ],
+                  false
+                )
+              }
+            },
+            data: seriesData2
+          }
+        ]
+      }
+      Echarts1.setOption(option)
+    },
     load() {
       this.loading = true
       this.currentPage += 1
       this.loadRecord(this.block3OptionsIndex)
     },
-    getOnlineGateMachine() {
-      requestFN(
-        '/map/getOnlineGateEquipment', {
-          AREA: this.area,
-          CORP_INFO_ID: this.corpInfoId,
-          GANGKOU: this.gangkou
-        }
-      ).then((data) => {
-        this.block1OptionsList[0].count1 = data.pd.PERSON_IN
-        this.block1OptionsList[0].count2 = data.pd.PERSON_OUT
-        this.block1OptionsList[0].count3 = data.pd.PERSON_IN - data.pd.PERSON_OUT
-        this.block1OptionsList[1].count1 = data.pd.CAR_IN
-        this.block1OptionsList[1].count2 = data.pd.CAR_OUT
-        this.block1OptionsList[1].count3 = data.pd.CAR_IN - data.pd.CAR_OUT
-        this.block1OptionsList[2].count1 = data.pd.CAMERA
-      }).catch((e) => {
-        console.log(e)
-      })
-    },
     getMachineTodayInOutCount() {
       requestFN(
         '/map/getMachineTodayInOutCount', {
@@ -356,30 +415,22 @@ export default {
 
       .option {
         display: flex;
-        flex-direction: column;
         align-items: center;
-
+        .img{
-        .circular {
+          width: 81px;
-          margin-top: 5px;
+          height: 93px;
-          background-image: url("../../../assets/map/menjin/img1.png");
+          img{
-          background-size: 100% 100%;
+            width: 100%;
-          background-repeat: no-repeat;
+            height: 100%;
-          width: 50px;
-          height: 50px;
-          text-align: center;
-          padding-top: 13px;
-
-          img {
-            width: 30px;
-            height: 26px;
-            animation: scale 2s infinite;
           }
         }
-
+        .info{
-        .label {
+          margin-left: 10px;
-          margin-top: 5px;
+          font-size: 14px;
-          font-size: 12px;
           color: #fff;
+          div{
+            margin-top: 5px;
+          }
         }
       }
     }
@@ -395,49 +446,9 @@ export default {
       border: 1px solid;
       border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
       border-top: none;
-      display: flex;
+      #main1{
-      flex-wrap: wrap;
+        width: 100%;
-      justify-content: space-between;
+        height: 300px;
-      align-items: center;
-      position: relative;
-      height: 244px;
-
-      .bg {
-        background-image: url("../../../assets/map/menjin/img2.png");
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        width: 310px;
-        height: 264px;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      .option {
-        flex-basis: 35%;
-        text-align: center;
-
-        .label {
-          font-size: 14px;
-          color: #fff;
-        }
-
-        .info {
-          .count {
-            font-size: 24px;
-            background: linear-gradient(to top, #48bbf0, #ffffff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-weight: bold;
-            font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
-          }
-
-          .company {
-            font-size: 14px;
-            color: #fff;
-          }
-        }
       }
     }
   }

src/views/map/components/menjin_old.vue

@@ -0,0 +1,546 @@
+<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 v-if="item.label3" class="label">
+            {{ item.label3 }}：
+            <count-to :start-val="0" :end-val="+item.count3" :duration="3600"/>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="block2">
+      <layout-title title="口门区域"/>
+      <div class="options">
+        <div class="bg"/>
+        <div v-for="(item,index) in block2OptionsList" :key="index" class="option">
+          <div class="label">{{ item.title }}：</div>
+          <div class="info">
+            <span class="count"><count-to :start-val="0" :end-val="+item.count" :duration="3600"/></span>
+            <span class="company">{{ item.company }}</span>
+          </div>
+        </div>
+      </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 v-if="block3OptionsIndex == 0" class="td">人员</div>
+            <div v-if="block3OptionsIndex == 1" class="td">车牌</div>
+            <div class="td">时间</div>
+            <div class="td">状态</div>
+            <div class="td">闸机名称</div>
+            <!--<div v-if="block3OptionsIndex == 0" class="td">闸机名称</div>
+            <div v-if="block3OptionsIndex == 1" class="td">来港事由</div>-->
+          </div>
+          <div v-infinite-scroll="load" :infinite-scroll-disabled="disabled" class="scroll">
+            <div v-for="(item,index) in block3List" :key="index" class="tr">
+              <div v-if="block3OptionsIndex == 0" class="td line1">{{ item.USERNAME }}</div>
+              <div v-if="block3OptionsIndex == 1" class="td">{{ item.LICENSE_PLATE }}</div>
+              <div class="td">{{ item.TIME }}</div>
+              <div v-if="block3OptionsIndex == 0" :class="['td',{green:item.STATE == '0'}]">
+                {{ item.STATE == '0' ? '进入' : '出港' }}
+              </div>
+              <div v-if="block3OptionsIndex == 0" :class="['td',{yellow:item.STATE == '0'}]">{{
+                item.EQUIPMENTNAME
+              }}
+              </div>
+              <div v-if="block3OptionsIndex == 1" :class="['td',{green:item.STATE == '4'}]">
+                {{ item.STATE == '0' ? '进场' : '出场' }}
+              </div>
+              <div v-if="block3OptionsIndex == 1" :class="['td',{yellow:item.STATE == '4'}]">{{
+                item.COMING_REASON
+              }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import layoutTitle from './title.vue'
+import CountTo from 'vue-count-to'
+import { requestFN } from '@/utils/request'
+
+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,
+          label3: '今日剩余人数',
+          count3: 0
+        },
+        {
+          title: '车辆闸机',
+          img: require('../../../assets/map/menjin/ico2.png'),
+          label1: '今日进数',
+          count1: 0,
+          label2: '今日出数',
+          count2: 0,
+          label3: '今日剩余车数',
+          count3: 0
+        },
+        {
+          title: '摄像头数',
+          img: require('../../../assets/map/menjin/ico3.png'),
+          label1: '摄像头数',
+          count1: 0
+        }
+      ],
+      block2OptionsList: [
+        {
+          title: '临时人员',
+          count: '2365',
+          company: '条'
+        },
+        {
+          title: '超员警告',
+          count: '2365',
+          company: '条'
+        },
+        {
+          title: 'SOS求救',
+          count: '2365',
+          company: '条'
+        },
+        {
+          title: '离岗告警',
+          count: '2365',
+          company: '条'
+        },
+        {
+          title: '禁止超时',
+          count: '2365',
+          company: '条'
+        },
+        {
+          title: '车辆超速',
+          count: '2365',
+          company: '条'
+        }
+      ],
+      block3OptionsList: ['人员闸机', '车辆闸机'],
+      block3OptionsIndex: 0,
+      loading: false,
+      currentPage: 1,
+      count: 0,
+      totalPage: 0,
+      block3List: []
+    }
+  },
+  computed: {
+    noMore() {
+      return this.currentPage >= this.totalPage
+    },
+    disabled() {
+      return this.loading || this.noMore
+    }
+  },
+  created() {
+    this.getDoorWayRecords(0)
+    this.getOnlineGateMachine()
+    this.getMachineTodayInOutCount()
+    // this.getDoorManagement()
+  },
+  methods: {
+    load() {
+      this.loading = true
+      this.currentPage += 1
+      this.loadRecord(this.block3OptionsIndex)
+    },
+    getOnlineGateMachine() {
+      requestFN(
+        '/map/getOnlineGateEquipment', {
+          AREA: this.area,
+          CORP_INFO_ID: this.corpInfoId,
+          GANGKOU: this.gangkou
+        }
+      ).then((data) => {
+        this.block1OptionsList[0].count1 = data.pd.PERSON_IN
+        this.block1OptionsList[0].count2 = data.pd.PERSON_OUT
+        this.block1OptionsList[0].count3 = data.pd.PERSON_IN - data.pd.PERSON_OUT
+        this.block1OptionsList[1].count1 = data.pd.CAR_IN
+        this.block1OptionsList[1].count2 = data.pd.CAR_OUT
+        this.block1OptionsList[1].count3 = data.pd.CAR_IN - data.pd.CAR_OUT
+        this.block1OptionsList[2].count1 = data.pd.CAMERA
+      }).catch((e) => {
+        console.log(e)
+      })
+    },
+    getMachineTodayInOutCount() {
+      requestFN(
+        '/map/getMachineTodayInOutCount', {
+          AREA: this.area,
+          CORPINFO_ID: this.corpInfoId,
+          GANGKOU: this.gangkou,
+          id: '7'
+        }
+      ).then((data) => {
+        if (this.gangkou === '00004') {
+
+        } else {
+          this.block2OptionsList = data.varList
+        }
+      })
+    },
+    getDoorManagement() {
+      requestFN(
+        '/map/getDoorManagement', {
+          AREA: this.area,
+          CORPINFO_ID: this.corpInfoId,
+          GANGKOU: this.gangkou,
+          id: '7'
+        }
+      ).then((data) => {
+        var carin = 0
+        var carout = 0
+        var peosonout = 0
+        var peosonin = 0
+        for (let i = 0; i < data.varList[1].list.length; i++) {
+          if (data.varList[1].list[i].TYPE == 'PERSON_OUT') {
+            // this.block2OptionsList[1].list[1].count = data.varList[1].list[i].count
+            peosonout = data.varList[1].list[i].count
+          }
+          if (data.varList[1].list[i].TYPE == 'PERSON_IN') {
+            // this.block2OptionsList[1].list[0].count = data.varList[1].list[i].count
+            peosonin = data.varList[1].list[i].count
+          }
+          if (data.varList[1].list[i].TYPE == 'CAR_OUT') {
+            // this.block2OptionsList[1].list[4].count = data.varList[1].list[i].count
+            carout = data.varList[1].list[i].count
+          }
+          if (data.varList[1].list[i].TYPE == 'CAR_IN') {
+            // this.block2OptionsList[1].list[3].count = data.varList[1].list[i].count
+            carin = data.varList[1].list[i].count
+          }
+        }
+        for (let i = 0; i < this.block2OptionsList.length; i++) {
+          this.block2OptionsList[i].list[0].count = peosonin
+          this.block2OptionsList[i].list[1].count = peosonout
+          this.block2OptionsList[i].list[2].count = peosonin - peosonout
+          this.block2OptionsList[i].list[3].count = carin
+          this.block2OptionsList[i].list[4].count = carout
+          this.block2OptionsList[i].list[5].count = carin - carout
+        }
+        this.$forceUpdate()
+      }).catch((e) => {
+        console.log(e)
+      })
+    },
+    loadRecord(index) {
+      this.getDoorWayRecords(index)
+    },
+    block3OptionsClick(index) {
+      this.block3List = []
+      this.block3OptionsIndex = index
+      this.getDoorWayRecords(index)
+    },
+
+    listPerpleCarGateMachine(type) {
+      requestFN(
+        '/map/getCfdDoorWayRecords',
+        {
+          id: '7',
+          TYPE: type
+        }
+      ).then((data) => {
+        this.block3List = data.data
+      }).catch((e) => {
+      })
+    },
+    getDoorWayRecords(index) {
+      requestFN(
+        '/map/getDoorWayRecords?showCount=20&currentPage=' + this.currentPage, {
+          AREA: this.area,
+          CORPINFO_ID: this.corpInfoId,
+          GANGKOU: this.gangkou,
+          INDEX: index
+        }
+      ).then((data) => {
+        this.block3List = this.block3List.concat(data.varList)
+        this.totalPage = data.page.totalPage
+        this.currentPage = data.page.currentPage
+        this.loading = false
+        this.$forceUpdate()
+      }).catch((e) => {
+        console.log(e)
+        this.loading = false
+      })
+    }
+  }
+}
+</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;
+        }
+      }
+    }
+  }
+
+  .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;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      height: 244px;
+
+      .bg {
+        background-image: url("../../../assets/map/menjin/img2.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 310px;
+        height: 264px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .option {
+        flex-basis: 35%;
+        text-align: center;
+
+        .label {
+          font-size: 14px;
+          color: #fff;
+        }
+
+        .info {
+          .count {
+            font-size: 24px;
+            background: linear-gradient(to top, #48bbf0, #ffffff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: bold;
+            font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
+          }
+
+          .company {
+            font-size: 14px;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .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

@@ -725,6 +725,16 @@ export default {
               checkImg: require('../../assets/map/gangkou_index/buttom/ico21_on.png'),
               containAuthorization: [],
               eliminateAuthorization: []
+            },
+            {
+              label: '人员轨迹',
+              dialog_width: '1200px',
+              check: false,
+              type: 'peopleTrajectory',
+              img: require('../../assets/map/gangkou_index/buttom/ico29.png'),
+              checkImg: require('../../assets/map/gangkou_index/buttom/ico29_on.png'),
+              containAuthorization: [],
+              eliminateAuthorization: []
             }
             // {
             //   label: '车辆定位',
@@ -1502,7 +1512,7 @@ export default {
           }
           const entity = new Cesium.Entity({
             id: 'trajectory',
-            polyline: { positions, width: 5.0, material: Cesium.Color.RED }
+            polyline: { positions, width: 5.0, material: Cesium.Color.RED, clampToGround: true }
           })
           const collection = new Cesium.CustomDataSource('trajectoryEntityCollection')
           collection.entities.add(entity)
@@ -1755,6 +1765,9 @@ export default {
                 cluster.billboard.show = true
                 cluster.billboard.id = cluster.label.id
                 cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
+                cluster.billboard.horizontalOrigin = Cesium.HorizontalOrigin.CENTER
+                cluster.billboard.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND
+                cluster.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY
                 if (clusteredEntities.length >= 100) {
                   cluster.billboard.image = pin100
                 } else if (clusteredEntities.length >= 50) {