From fe9303df2c81630cf4eeb801c7bfab98d039ffaf Mon Sep 17 00:00:00 2001
From: songwenxuan <1924103812@qq.com>
Date: Mon, 29 Jan 2024 12:08:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=9B=B9=E7=85=A4=E7=82=AD?=
 =?UTF-8?q?=E6=B8=AF=E5=9C=B0=E5=9B=BE=E4=BA=BA=E5=91=98=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E9=A1=B5=E4=B8=A2=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/map/components/renyuanCmt.vue | 418 ++++++++++++++++++++++++
 src/views/map/index.vue                 |   9 +-
 2 files changed, 426 insertions(+), 1 deletion(-)
 create mode 100644 src/views/map/components/renyuanCmt.vue

diff --git a/src/views/map/components/renyuanCmt.vue b/src/views/map/components/renyuanCmt.vue
new file mode 100644
index 0000000..138a6cf
--- /dev/null
+++ b/src/views/map/components/renyuanCmt.vue
@@ -0,0 +1,418 @@
+<template>
+  <div class="renyuan">
+    <div class="block1">
+      <layout-title title="定位基础信息"/>
+      <div class="options">
+        <div v-for="(item,index) in block1OptionsList" :key="index" class="option">
+          <div class="imger">
+            <img :src="item.img" alt="">
+          </div>
+          <div class="info">
+            <div class="label">{{ item.title }}</div>
+            <div class="text"><count-to :start-val="0" :end-val="item.count" :duration="3600"/></div>
+          </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.alarmTypeName }}：</div>
+          <div class="info">
+            <span class="count"><count-to :start-val="0" :end-val="item.alarmCount" :duration="3600"/></span>
+            <span class="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 class="td">卡号</div>
+            <div class="td">姓名</div>
+            <div 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 class="td">{{ item.devidno }}</div>
+              <div class="td">{{ item.fullName }}</div>
+              <div class="td">{{ item.onlineornot ? '在线':'离线' }}</div>
+              <!--            <div :class="['td',{error:item.STATE == '1'}]">{{ item.STATE == '1' ? '异常' : '正常' }}</div>-->
+            </div>
+            <div v-if="loading" class="tr">
+              <div class="td">加载中...</div>
+            </div>
+          </div>
+
+          <!--          <div v-for="(item,index) in block3List" :key="index" class="tr">-->
+          <!--            <div class="td">{{ item.cardNo }}</div>-->
+          <!--            <div class="td">{{ item.name }}</div>-->
+          <!--            <div class="td">{{ item.cardType }}</div>-->
+          <!--          </div>-->
+        </div>
+
+        <!--        <div v-show="block3OptionsIndex=== 1" class="table">-->
+        <!--          <div class="tr">-->
+        <!--            <div class="td">车牌号</div>-->
+        <!--            <div class="td">状态</div>-->
+        <!--          </div>-->
+        <!--          <div v-for="(item,index) in block4List" :key="index" class="tr">-->
+        <!--            <div class="td">{{ item.name }}</div>-->
+        <!--            <div class="td">在线</div>-->
+        <!--          </div>-->
+        <!--        </div>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import layoutTitle from './title.vue'
+import { requestFN } from '../../../utils/request'
+import CountTo from 'vue-count-to'
+export default {
+  components: {
+    layoutTitle,
+    CountTo
+  },
+  data() {
+    return {
+      block1OptionsList: [
+        {
+          title: '在线员工',
+          img: require('../../../assets/map/renyuan/img1ico1.png'),
+          count: 0
+        },
+        {
+          title: '外协人员',
+          img: require('../../../assets/map/renyuan/img1ico4.png'),
+          count: 0
+        },
+        {
+          title: '内部人员',
+          img: require('../../../assets/map/renyuan/img1ico3.png'),
+          count: 0
+        }
+        // ,
+        // {
+        //   title: '在线车辆',
+        //   img: require('../../../assets/map/renyuan/img1ico2.png'),
+        //   count: 0
+        // },
+        // {
+        //   title: '临时人员',
+        //   img: require('../../../assets/map/renyuan/img1ico5.png'),
+        //   count: 0
+        // }
+      ],
+      block2OptionsList: [
+        {
+          title: '电子围栏告警',
+          count: 0
+        },
+        {
+          title: '静超时告警',
+          count: 0
+        },
+        {
+          title: '超员/缺员告警',
+          count: 0
+        },
+        {
+          title: '离岗告警',
+          count: 0
+        },
+        {
+          title: '车辆超速告警',
+          count: 0
+        },
+        {
+          title: 'SOS求救',
+          count: 0
+        }
+      ],
+      block3OptionsList: ['相关方员工', '普通员工'],
+      block3OptionsIndex: 0,
+      currentPage: 1,
+      loading: false,
+      count: 0,
+      totalPage: 0,
+      block3List: [],
+      block4List: [],
+      timer: ''
+    }
+  },
+  computed: {
+    noMore() {
+      return this.currentPage >= this.totalPage
+    },
+    disabled() {
+      return this.loading || this.noMore
+    }
+  },
+  mounted() {
+    // this.obtainPersonnelData()
+    // this.personPositioningStatistics()
+    // this.startPersonnelDataTimer() // 定时获取
+    // this.obtainCarData()
+    // this.carPositioningStatistics()
+  },
+  destroyed() {
+    clearInterval(this.timer) // 关闭定时器
+  },
+  created() {
+    this.getCmtWorkCardLocationCount()
+  },
+  methods: {
+    getCmtWorkCardLocationCount() {
+      requestFN(
+        '/map/findWorkCardLocation',
+        {}
+      ).then((data) => {
+        this.block1OptionsList[0].count = data.onlineCount
+      }).catch((e) => {
+      })
+    },
+    getCmtWorkCardLocation() {
+      requestFN(
+        '/map/findWorkCardLocation',
+        {}
+      ).then((data) => {
+        this.block3List = this.block3List.concat(data.list)
+      }).catch((e) => {
+      })
+    },
+    block3OptionsClick(index) {
+      this.currentPage = 1
+      this.block3List = []
+      this.block3OptionsIndex = index
+      if (index === 1) {
+        this.getCmtWorkCardLocation()
+      }
+      // this.getCzksPersonStaffListPage()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.renyuan {
+  .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 {
+      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;
+
+      .option {
+        display: flex;
+        width: 50%;
+        align-items: center;
+        margin-top: 10px;
+
+        &:nth-child(-n+2) {
+          margin-top: 0;
+        }
+
+        .imger {
+          width: 50px;
+          height: 50px;
+          background-image: url("../../../assets/map/menjin/img1.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          text-align: center;
+          margin-left: 20px;
+
+          img {
+            width: 30px;
+            height: 30px;
+            animation: scale 2s infinite;
+            margin-top: 10px;
+          }
+        }
+
+        .info {
+          color: #FFFFFF;
+          margin-left: 10px;
+
+          .label {
+            font-size: 12px;
+            height: 25px;
+            line-height: 25px;
+          }
+
+          .text {
+            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;
+            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;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      height: 244px;
+
+      .bg {
+        background-image: url("../../../assets/map/renyuan/img2.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 287px;
+        height: 244px;
+        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: 400px;
+    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: 250px;
+          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 {
+          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;
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(0.9);
+  }
+}
+</style>
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index 09aff70..64ce599 100644
--- a/src/views/map/index.vue
+++ b/src/views/map/index.vue
@@ -84,7 +84,7 @@
           :area="area"
           :gangkou="gangkouActive"/>
         <renyuan
-          v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && bottomOptionsIndex === 4"
+          v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && gangkouActive !== '00005' && bottomOptionsIndex === 4"
           :corp-info-id="CORP_INFO_ID"
           :area="area"
           :gangkou="gangkouActive"/>
@@ -98,6 +98,11 @@
           :corp-info-id="CORP_INFO_ID"
           :area="area"
           :gangkou="gangkouActive"/>
+        <renyuanCmt
+          v-if="gangkouActive && gangkouActive === '00005' && bottomOptionsIndex === 4"
+          :corp-info-id="CORP_INFO_ID"
+          :area="area"
+          :gangkou="gangkouActive"/>
         <bianjieruqin
           v-if="gangkouActive && gangkouActive !== '00004' && gangkouActive !== '00002' && bottomOptionsIndex === 6"
           :corp-info-id="CORP_INFO_ID"
@@ -245,6 +250,7 @@ import caofeidianIndex from './components/caofeidian_index.vue'
 import czksIndex from './components/czks_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 menjinCfd from './components/menjinCfd.vue'
 import menjinCmt from './components/menjinCmt.vue'
@@ -292,6 +298,7 @@ export default {
     czksIndex,
     menjinCzks,
     renyuanCzks,
+    renyuanCmt,
     // navigation,
     gangkouIndex,
     fengongsiIndex,