From 52d60210c7df3291b2a0e17d2038c48f3fd1e7df Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 11 Aug 2022 16:14:23 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=AB=E9=83=BD=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/dv/apps/AppPdDv.vue           |   2 +-
 project/dv/apps/components/PdGrid.vue | 203 +++++++++++++++++++++++---
 2 files changed, 182 insertions(+), 23 deletions(-)

diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index 61faa33c..5797c1bd 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -519,7 +519,7 @@
 
     methods: {
       onNodeClick (e) {
-        this.getGridInfo(e.id)
+        this.getGridInfo(e)
       },
 
       getInfo () {
diff --git a/project/dv/apps/components/PdGrid.vue b/project/dv/apps/components/PdGrid.vue
index 9025f983..6473e484 100644
--- a/project/dv/apps/components/PdGrid.vue
+++ b/project/dv/apps/components/PdGrid.vue
@@ -1,49 +1,104 @@
 <template>
   <div class="pdgrid">
     <div class="pdgrid-title">
-      <h2>幸福郫都微网实格架构</h2>
+      <h2>{{ currGird }}</h2>
     </div>
-    <div class="pdgrid-grid__title">
-      <h2>郫都某街道</h2>
+    <div class="pdgrid-grid__title" @click="isShowGrid2 = true">
+      <h2 :title="girdName2">{{ girdName2 }}</h2>
     </div>
     <div class="pdgrid-body">
-      <div class="pdgrid-body__item">
-        <h2>240</h2>
+      <div class="pdgrid-body__item" @click="isShowGrid3 = true">
+        <h2>{{ girdNum3 }}</h2>
         <div class="bottom">
           <i></i>
-          <p>第一网格</p>
+          <p>{{ girdName3 }}</p>
           <i class="right"></i>
         </div>
       </div>
-      <div class="pdgrid-body__item" @click.stop="isShowGrid1 = true">
-        <h2>240</h2>
+      <div class="pdgrid-body__item" @click.stop="isShowGrid4 = true">
+        <h2>{{ girdNum4 }}</h2>
         <div class="bottom">
           <i></i>
-          <p>第二网格</p>
+          <p>{{ girdName4 }}</p>
           <i class="right"></i>
         </div>
       </div>
-      <div class="pdgrid-body__item">
-        <h2>240</h2>
+      <div class="pdgrid-body__item" @click="isShowGrid5 = true">
+        <h2>{{ girdNum5 }}</h2>
         <div class="bottom">
           <i></i>
-          <p>微网格</p>
+          <p>{{ girdName5 }}</p>
           <i class="right"></i>
         </div>
       </div>
     </div>
     <transition name="fade">
-      <div class="grid-dialog" v-show="isShowGrid1">
-        <div class="mask" @click="isShowGrid1 = false"></div>
+      <div class="grid-dialog" v-show="isShowGrid2">
+        <div class="mask" @click="isShowGrid2 = false"></div>
         <div class="grid-container">
-          <h2>已选择的网格</h2>
+          <h2>{{ girdName2 }}</h2>
           <div class="grid-list">
             <div
-              :class="[currIndex1 === index ? 'grid-active' : '']"
-              v-for="(item, index) in 20"
+              :class="[currIndex2 === index ? 'grid-active' : '']"
+              v-for="(item, index) in girdInfoList2"
               :key="index"
-              @click.stop="currIndex1 = index">
-              幸福郫都微网实格架构
+              :title="item.girdName"
+              @click.stop="onGrid2Click(item, index)">
+              {{ item.girdName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <transition name="fade">
+      <div class="grid-dialog" v-show="isShowGrid3">
+        <div class="mask" @click="isShowGrid3 = false"></div>
+        <div class="grid-container">
+          <h2>{{ girdName3 }}</h2>
+          <div class="grid-list">
+            <div
+              :class="[currIndex3 === index ? 'grid-active' : '']"
+              v-for="(item, index) in girdInfoList3"
+              :key="index"
+              :title="item.girdName"
+              @click.stop="onGrid3Click(item, index)">
+              {{ item.girdName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <transition name="fade">
+      <div class="grid-dialog" v-show="isShowGrid4">
+        <div class="mask" @click="isShowGrid4 = false"></div>
+        <div class="grid-container">
+          <h2>{{ girdName4 }}</h2>
+          <div class="grid-list">
+            <div
+              :class="[currIndex4 === index ? 'grid-active' : '']"
+              v-for="(item, index) in girdInfoList4"
+              :key="index"
+              :title="item.girdName"
+              @click.stop="onGrid4Click(item, index)">
+              {{ item.girdName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <transition name="fade">
+      <div class="grid-dialog" v-show="isShowGrid5">
+        <div class="mask" @click="isShowGrid5 = false"></div>
+        <div class="grid-container">
+          <h2>{{ girdName4 }}</h2>
+          <div class="grid-list">
+            <div
+              :class="[currIndex5 === index ? 'grid-active' : '']"
+              v-for="(item, index) in girdInfoList5"
+              :key="index"
+              :title="item.girdName"
+              @click.stop="onGrid5Click(item, index)">
+              {{ item.girdName }}
             </div>
           </div>
         </div>
@@ -56,10 +111,30 @@
   export default {
     name: 'pdgrid',
 
+    props: ['instance'],
+
     data () {
       return {
-        isShowGrid1: false,
-        currIndex1: 0
+        isShowGrid2: false,
+        isShowGrid3: false,
+        isShowGrid4: false,
+        isShowGrid5: false,
+        currIndex2: 0,
+        currIndex3: 0,
+        currIndex4: 0,
+        currIndex5: 0,
+        girdInfoList2: [],
+        girdInfoList3: [],
+        girdInfoList4: [],
+        girdInfoList5: [],
+        girdName2: '',
+        girdName3: '',
+        girdName4: '',
+        girdName5: '',
+        girdNum3: 0,
+        girdNum4: 0,
+        girdNum5: 0,
+        currGird: ''
       }
     },
 
@@ -67,6 +142,8 @@
       this.$nextTick(() => {
         document.addEventListener('keydown', this.onKeyDown)
       })
+
+      this.getInfo()
     },
 
     destroyed () {
@@ -78,6 +155,79 @@
         if (e.keyCode == 27) {
           this.isShowGrid1 = false
         }
+      },
+
+      onGrid2Click (item, index) {
+        this.currIndex2 = index
+        this.girdName2 = item.girdName
+        this.currIndex3 = -1
+        this.currIndex4 = -1
+        this.currIndex5 = -1
+        this.isShowGrid2 = false
+        this.$emit('nodeClick', item.id)
+
+        this.currGird = item.girdName
+        this.getInfo(item.id)
+      },
+
+      onGrid3Click (item, index) {
+        this.currIndex3 = index
+        this.girdName3 = item.girdName
+        this.currIndex4 = -1
+        this.currIndex5 = -1
+        this.girdNum3 = 1
+        this.isShowGrid3 = false
+        this.$emit('nodeClick', item.id)
+
+        this.currGird = item.girdName
+        this.getInfo(item.id)
+      },
+
+      onGrid4Click (item, index) {
+        this.currIndex4 = index
+        this.girdName4 = item.girdName
+        this.currIndex5 = -1
+        this.girdNum4 = 1
+        this.isShowGrid4 = false
+        this.$emit('nodeClick', item.id)
+
+        this.currGird = item.girdName
+        this.getInfo(item.id)
+      },
+
+      onGrid5Click (item, index) {
+        this.currIndex5 = index
+        this.girdName5 = item.girdName
+        this.isShowGrid5 = false
+        this.girdNum5 = 1
+        this.$emit('nodeClick', item.id)
+
+        this.currGird = item.girdName
+        this.getInfo(item.id)
+      },
+
+      getInfo (id) {
+        this.instance.post(`/app/appgirdinfo/queryPdDetailByGirdId?id=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            res.data.girdInfoList2 && (this.girdInfoList2 = res.data.girdInfoList2)
+            res.data.girdInfoList3 && (this.girdInfoList3 = res.data.girdInfoList3)
+            res.data.girdInfoList4 && (this.girdInfoList4 = res.data.girdInfoList4)
+            res.data.girdInfoList5 && (this.girdInfoList5 = res.data.girdInfoList5)
+
+            res.data.girdName2 && (this.girdName2 = res.data.girdName2)
+            res.data.girdName3 && (this.girdName3 = res.data.girdName3)
+            res.data.girdName4 && (this.girdName4 = res.data.girdName4)
+            res.data.girdName5 && (this.girdName5 = res.data.girdName5)
+            res.data.girdNum3 && (this.girdNum3 = res.data.girdNum3)
+            res.data.girdNum4 && (this.girdNum4 = res.data.girdNum4)
+            res.data.girdNum5 && (this.girdNum5 = res.data.girdNum5)
+
+            if (!id) {
+              this.currGird = res.data.girdName2
+              this.currIndex2 = res.data.girdInfoList2.findIndex(v => res.data.girdName2 === v.girdName)
+            }
+          }
+        })
       }
     }
   }
@@ -123,6 +273,11 @@
       }
 
       h2 {
+        width: 182px;
+        margin: 0 auto;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         color: #FFFFFF;
         font-size: 21px;
         text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
@@ -251,7 +406,7 @@
         z-index: 1;
         width: 100%;
         height: 100%;
-        background: rgba(0, 0, 0, 0.4);
+        background: rgba(0, 0, 0, 0.5);
       }
 
       .grid-container {
@@ -286,10 +441,14 @@
           & > div {
             height: 67px;
             line-height: 67px;
+            padding: 0 20px;
             text-align: center;
             color: #FFFFFF;
             font-size: 27px;
             cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
             transition: all ease 0.5s;
 
             &.grid-active {