From fc927da8e9130c57d3d2c30b78d4e5ceffb1359f Mon Sep 17 00:00:00 2001
From: TiaStars <L18864257234@163.com>
Date: Fri, 27 Sep 2024 19:46:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E7=82=B9=E4=BA=BA=E5=91=98=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain.vue             |   6 +-
 .../zhongdianxiangqing/components/index.js    |   4 +
 .../components/tabFour/index.vue              |  96 ++++++++
 .../components/tabOne/index.vue               |  94 ++++++++
 .../components/tabThree/index.vue             | 214 ++++++++++++++++++
 .../components/tabTwo/index.vue               |  89 ++++++++
 .../Xinxiguanli/zhongdianxiangqing/index.vue  | 172 +++++++++++++-
 7 files changed, 666 insertions(+), 9 deletions(-)
 create mode 100644 src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/index.js
 create mode 100644 src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabFour/index.vue
 create mode 100644 src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabOne/index.vue
 create mode 100644 src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue
 create mode 100644 src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabTwo/index.vue

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 4082261..bcfc1ab 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,6 +1,6 @@
 <template>
   <div >
-    <section class="app-main" v-if="isShow"  >
+    <section class="app-main" :class="$route.meta.title == '重点人员详情' ? 'app-main-two':''" v-if="isShow"  >
       <transition name="fade-transform" mode="out-in">
         <keep-alive :include="cachedViews">
           <router-view v-if="!$route.meta.link" :key="key" />
@@ -71,6 +71,10 @@ export default {
   background: #ffffff;
   padding: 10px;
 }
+.app-main-two {
+  padding: 0px;
+  background-color: transparent;
+}
 
 .fixed-header+.app-main {
   padding-top: 50px;
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/index.js b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/index.js
new file mode 100644
index 0000000..a1eb343
--- /dev/null
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/index.js
@@ -0,0 +1,4 @@
+export { default as tabOne } from './tabOne'
+export { default as tabTwo } from './tabTwo'
+export { default as tabThree } from './tabThree'
+export { default as tabFour } from './tabFour'
\ No newline at end of file
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabFour/index.vue b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabFour/index.vue
new file mode 100644
index 0000000..80976e0
--- /dev/null
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabFour/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="money-schedule">
+    <div class="schedule-timeline">
+      <el-timeline v-loading="loading">
+        <el-timeline-item
+          v-for="(activity, index) in activities"
+          :key="index"
+          color="#192A92"
+        >
+        {{ activity.content }}
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name:"tabThree",
+  props:{
+    id:{
+      type:Number,
+      default:null,
+    }
+  },
+  data() {
+    return {
+      /**
+       * {
+        size: 'large',
+        icon: 'icon iconfont icon-jc-kong-yuan',
+        status: 2,
+      }, {
+        icon: 'icon iconfont icon-jc-kong-yuan',
+        size: 'large',
+        status: 1,
+      }, {
+        size: 'large',
+        icon: 'icon iconfont icon-jc-kong-yuan',
+        status: 0,
+      }
+       * 
+       */
+      activities: [
+        {
+          content:"2024-09-21 08:50:08     XXXXX超出边界"
+        },{
+          content:"2024-08-21 08:50:08     XXXXX超出边界"
+        },{
+          content:"2024-07-21 08:50:08     XXXXX超出边界"
+        },
+      ],
+      loading:false,
+    }
+  },
+  mounted(){
+  },
+  methods:{
+    // 获取备忘录列表
+    getList() {
+      this.loading = true;
+      jProjectFund(this.id).then(res=>{
+        let arr = [];
+        res.data.forEach(element => {
+          let obj = {};
+          obj.size = 'large';
+          obj.icon = 'icon iconfont icon-jc-kong-yuan';
+          obj.fundAmount = element.fundAmount;
+          obj.appropriationTime = element.appropriationTime;
+          arr.push(obj);
+        });
+        this.activities = arr;
+        this.loading = false;
+      }).catch((err)=>{
+        // console.log(err);
+        this.activities = [];
+        this.loading = false;
+      })
+    },
+    formatDate(dateString,id) {
+      const year = dateString.slice(0, 4);
+      const month = dateString.slice(4, 6);
+      const day = dateString.slice(6, 8);
+      if(id == 1) {
+        return `${year}年${month}月${day}日`;
+      } else {
+        return `${year}-${month}-${day}`;
+      }
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.money-schedule {
+  padding: 20px 0px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabOne/index.vue b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabOne/index.vue
new file mode 100644
index 0000000..9b422ba
--- /dev/null
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabOne/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="project-info-box">
+    <div class="enterprise-header">
+      <span class="dataCloudMap-birght"></span>
+      <div class="enterprise-header-title">详细信息</div>
+    </div>
+    <el-descriptions :column="3" size="medium" border>
+      <el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="人员姓名">
+        张三
+      </el-descriptions-item>
+      <el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="性别">
+        男
+      </el-descriptions-item>
+      <el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="出生年月">
+        1975年7月
+      </el-descriptions-item>
+      <el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="身份证号">
+        320815154649782452
+      </el-descriptions-item>
+      <el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="联系方式">
+        13856699875
+      </el-descriptions-item>
+      <el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="工作单位">
+        XXXXXXXX
+      </el-descriptions-item>
+      <el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="家庭住址">
+        XXXXXXXXXXXXXXXXXXXX
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+<script>
+export default {
+  name:"tabOne",
+  props:{
+    detailedInfo:{
+      type:Object,
+      default:()=>{
+        return {};
+      }
+    },
+    fileJson:{
+      type:Object,
+      default:()=>{
+        return {};
+      }
+    },
+    enterInfo:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      info:[],
+      fileInfo:[],
+      loading:false,
+      VUE_APP_BASE_API:process.env.VUE_APP_BASE_API,
+    }
+  },
+  mounted() {
+    // console.log(this.info,"tabOne");
+    // this.loading = true;
+  },
+  methods:{
+  },
+}
+</script>
+<style scoped lang='scss'>
+.project-info-box {
+  padding: 10px;
+  .enterprise-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    .dataCloudMap-birght {
+      width:  6px;
+      height: 18px;
+      background: #0086FF;
+      box-shadow: 3px 0 3px 0px #0086FF;
+      border-radius: 5px 5px 5px 5px;
+    }
+    .enterprise-header-title {
+      font-family: AlibabaPuHuiTiB;
+      margin: 0 10px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #333333;
+    }
+  }
+}
+</style>
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue
new file mode 100644
index 0000000..e7d622b
--- /dev/null
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="three-box">
+    <el-row class="row-one">
+      <div class="search">
+        <div class="content">
+          时间范围：
+          <div class="time-query">
+            <div class="interval-select">
+              <div class="star-time">
+                <el-time-picker
+                  v-model="queryTime.fromTime"
+                  align="right"
+                  :clearable="false"
+                  format="HH:mm:ss"
+                  value-format="HH:mm:ss"
+                  placeholder="开始时间"
+                >
+                </el-time-picker>
+              </div>
+              <div class="symbol">~</div>
+              <div class="end-time">
+                <el-time-picker
+                  v-model="queryTime.toTime"
+                  align="right"
+                  :clearable="false"
+                  format="HH:mm:ss"
+                  value-format="HH:mm:ss"
+                  placeholder="结束时间"
+                >
+                </el-time-picker>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="searchBtn">
+        <el-button
+          type="primary"
+          size="mini"
+          icon="el-icon-search"
+          @click="searchList"
+          >查询</el-button
+        >
+        <el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo"
+          >重置</el-button
+        >
+      </div>
+    </el-row>
+    <el-row style="margin-top: 20px;">
+      <div style="display: flex;">
+        <div>轨迹地图：</div>
+        <div id="gjMap"></div>
+      </div>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  name:"tabThree",
+  props:{
+    id:{
+      type:Number,
+      default:null,
+    }
+  },
+  data() {
+    return {
+      activities: [],
+      loading:false,
+      queryTime:{
+        fromTime:"",
+        toTime:""
+      },
+    }
+  },
+  mounted(){
+  },
+  methods:{
+    searchList() {
+    },
+    // 重置
+    resetTwo() {
+    },
+    // 获取备忘录列表
+    getList() {
+      this.loading = true;
+      jProjectFund(this.id).then(res=>{
+        let arr = [];
+        res.data.forEach(element => {
+          let obj = {};
+          obj.size = 'large';
+          obj.icon = 'icon iconfont icon-jc-kong-yuan';
+          obj.fundAmount = element.fundAmount;
+          obj.appropriationTime = element.appropriationTime;
+          arr.push(obj);
+        });
+        this.activities = arr;
+        this.loading = false;
+      }).catch((err)=>{
+        // console.log(err);
+        this.activities = [];
+        this.loading = false;
+      })
+    },
+    formatDate(dateString,id) {
+      const year = dateString.slice(0, 4);
+      const month = dateString.slice(4, 6);
+      const day = dateString.slice(6, 8);
+      if(id == 1) {
+        return `${year}年${month}月${day}日`;
+      } else {
+        return `${year}-${month}-${day}`;
+      }
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.three-box {
+  padding: 10px 20px;
+  .row-one {
+    display: flex;
+    align-items: center;
+  }
+  .content {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    // line-height: 20px;
+    margin-right: 40px;
+    .time-query {
+      height: 30px;
+      background-size: 100% 100%;
+      .interval-select {
+        display: flex;
+        align-items: center;
+        ::v-deep .el-input__prefix {
+          display: none;
+        }
+        .star-time,
+        .end-time {
+          position: relative;
+          .data_icon {
+            position: absolute;
+            right: 5px;
+            top: 8px;
+            width: 20px;
+          }
+          ::v-deep .el-date-editor {
+            // background-color: transparent;
+            width: 150px;
+            .el-input__inner {
+              // background-color: transparent;
+              // border: none;
+              width: 100%;
+              height: 30px;
+              font-size: 14px;
+              font-weight: 500;
+              text-align: center;
+            }
+            // .el-input__inner::placeholder {
+            //   /* 在这里添加你想要修改的 placeholder 样式 */
+            //   font-size: 14px;
+            //   font-family: "Source Han Sans CN-Regular";
+            //   font-weight: 400;
+            //   color: #d3eef2;
+            //   -webkit-background-clip: text;
+            //   -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
+            // }
+          }
+        }
+        .symbol {
+          width: 14px;
+          // height: 6px;
+          line-height: 15px;
+          margin: 0 5px;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .btns {
+      width: 92px;
+      height: 35px;
+      background-image: url("../../../../../../assets/images/inquirebg.png");
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      img {
+        width: 24px;
+        margin-right: 5px;
+      }
+      span {
+        font-size: 14px;
+        font-family: "Source Han Sans CN-Regular";
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+      }
+    }
+    .reset {
+      background-image: url("../../../../../../assets/images/resetbg.png");
+      margin: 0 20px;
+    }
+  }
+}
+#gjMap {
+  width: 700px;
+  height: 400px;
+  background-color: red;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabTwo/index.vue b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabTwo/index.vue
new file mode 100644
index 0000000..9dca777
--- /dev/null
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabTwo/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="L-unitInfo">
+    <el-row>
+      <el-col :span="12" class="left-img-box">
+        <div class="img-top-box">
+          <div class="enterprise-header">
+            <span class="dataCloudMap-birght"></span>
+            <div class="enterprise-header-title">正面照</div>
+          </div>
+        </div>
+        <div class="img-bottom-box">
+          <div class="enterprise-header">
+            <span class="dataCloudMap-birght"></span>
+            <div class="enterprise-header-title">其他照片</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12" class="right-img-box">
+        <div class="enterprise-header">
+          <span class="dataCloudMap-birght"></span>
+          <div class="enterprise-header-title">身份证照片</div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  name:"tabTwo",
+  data() {
+    return {
+      // 判断登陆用户是何身份⌈ 01 ： 企业  02 ： 政务 ⌋
+      userType: this.$store.state.user.userType,
+    }
+  },
+  props:{
+    info:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    }
+  },
+  methods:{
+    goEnterprice(creditCode){
+      // console.log(creditCode);
+      if(this.userType == '01') {
+        this.$router.push({
+          name: 'EenterInfo',
+          query: { userId: this.info.id, creditCode: creditCode }
+        })
+      } else {
+        this.$router.push({
+          name: 'enterpriselibraryInfo',
+          query: { userId: this.info.id, creditCode: creditCode }
+        })
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.L-unitInfo {
+  padding: 10px;
+  .enterprise-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    .dataCloudMap-birght {
+      width:  6px;
+      height: 18px;
+      background: #0086FF;
+      box-shadow: 3px 0 3px 0px #0086FF;
+      border-radius: 5px 5px 5px 5px;
+    }
+    .enterprise-header-title {
+      font-family: AlibabaPuHuiTiB;
+      margin: 0 10px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #333333;
+    }
+  }
+  .left-img-box {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue
index 7ccd425..a4a9b67 100644
--- a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue
@@ -1,24 +1,180 @@
-
 <template>
-<div>
-    详情
-</div>
+  <div class="renyuan-box">
+    <div class="box-top">
+      <div class="enterprise-header">
+        <span class="dataCloudMap-birght"></span>
+        <div class="enterprise-header-title">基本信息</div>
+      </div>
+      <el-row class="base-info-box">
+        <el-col :span="5" style="margin-right: 40px;">
+          <div class="img-box">
+            <span>人员照片：</span>
+            <img src="@/assets/images/yyzz.png" alt="">
+          </div>
+        </el-col>
+        <el-col :span="19">
+          <el-col :span="12">
+            <div class="info-items">
+              <div class="item">
+                <div>人员姓名：</div>
+                <span>张三</span>
+              </div>
+              <div class="item">
+                <div>身份证号：</div>
+                <span>364xxxxxxxxxxxxxxx</span>
+              </div>
+            </div>
+            <div class="info-cause">
+              <div>监控原因：</div>
+              <div class="specific-cause">重点监控对象，曾有违法行为</div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="info-items">
+              <div class="item">
+                <div>性别：</div>
+                <span>男</span>
+              </div>
+              <div class="item">
+                <div>联系方式</div>
+                <span>139xxxx5657</span>
+              </div>
+            </div>
+          </el-col>
+        </el-col>
+      </el-row>
+    </div>
+    <el-row class="base-info-bootm-box">
+      <el-tabs
+        v-model="activeName"
+        @tab-click="handleClick"
+        style="color: #edeef0"
+      >
+        <el-tab-pane label="详细信息" name="first" />
+        <el-tab-pane label="人脸库" name="second" />
+        <el-tab-pane label="轨迹回放" name="third" />
+        <el-tab-pane label="边界预警" name="four" />
+      </el-tabs>
+      <div class="bottom-box-component">
+        <tab-one v-if="activeName =='first'"></tab-one>
+        <tab-two v-if="activeName =='second'"></tab-two>
+        <tab-three v-if="activeName =='third'"></tab-three>
+        <tab-four v-if="activeName =='four'"></tab-four>
+      </div>
+    </el-row>
+  </div>
 </template>
 
 <script>
+import { tabOne, tabTwo, tabThree, tabFour, tabFive, } from "./components"
 export default {
   name: '',
-  components: {},
+  components:{
+    tabOne,
+    tabTwo,
+    tabThree,
+    tabFour,
+    tabFive,
+  },
   data () {
     return {
+      activeName: "first",
     }
   },
-  created () { },
   mounted () { },
-  methods: { },
-  computed: {}
+  methods: { 
+    handleClick(e) {
+      if (this.activeName == "first") {
+      } else if (this.activeName == "second") {
+      } else if (this.activeName == "third") {
+      } else if(this.activeName == "four") {
+      }
+    },
+  },
 }
 </script>
 <style scoped lang='scss'>
+.renyuan-box {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .box-top {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 20px;
+  }
+  .enterprise-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    .dataCloudMap-birght {
+      width:  6px;
+      height: 18px;
+      background: #0086FF;
+      box-shadow: 3px 0 3px 0px #0086FF;
+      border-radius: 5px 5px 5px 5px;
+    }
+    .enterprise-header-title {
+      font-family: AlibabaPuHuiTiB;
+      margin: 0 10px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #333333;
+    }
+  }
+  .base-info-box {
+    margin: 20px 0;
+    padding: 0px 10px;
+    display: flex;
+    .img-box {
+      display: flex;
+      span {
 
+      }
+      img {
+        flex: 1;
+        height: 150px;
+      }
+    }
+    .info-items {
+      display: grid;
+      grid-template-columns: 1fr;
+      row-gap: 30px;
+      .item {
+        display: flex;
+        align-items: center;
+        span {
+          flex: 1;
+        }
+      }
+    }
+    .info-cause {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      div {
+
+      }
+      .specific-cause {
+        border-radius: 3px;
+        border: 1px solid #ccc;
+        padding: 5px 10px;
+      }
+    }
+  }
+  .base-info-bootm-box  {
+    flex: 1;
+    background-color: #fff;
+    padding: 10px 0;
+    border-radius: 5px;
+    ::v-deep .el-tabs {
+      .el-tabs__item {
+        width: 150px;
+        font-weight: bold;
+        text-align: center;
+      }
+    }
+  }
+}
 </style>