首页无数据

src/views/yingji/home.vue

@@ -48,6 +48,7 @@
           </el-form-item>
         </el-form>
       </div>
+      <!-- 列表/图表切换 -->
       <div class="rightBigNav">
         <div class="right-nav">
           <div
@@ -84,7 +85,7 @@
         </div>
       </div>
     </div>
-
+    <!-- 列表 -->
     <div class="bgContent" v-if="activeIndex == 0">
       <div class="tables">
         <el-table
@@ -96,34 +97,73 @@
           :row-class-name="tableRowClassName"
         >
           <el-table-column
-            prop="institutionName"
+            prop="district"
             label="行政区划"
             header-align="center"
             show-overflow-tooltip
           >
           </el-table-column>
-          <el-table-column
-            prop="plannedEnterpriseCount"
-            label="执法计划"
-            header-align="center"
-          >
+          <el-table-column prop="" label="执法计划" header-align="center">
+            <template slot-scope="scope">
+              <span class="numb-hover" @click="openDialog(scope.row)"
+                >{{ 150 }}家</span
+              >
+            </template>
+          </el-table-column>
+          <el-table-column label="完成执法" prop="" header-align="center">
+            <template slot-scope="scope"> {{ 150 }}家 </template>
           </el-table-column>
+          <el-table-column label="完成率" prop="" header-align="center">
+            <!-- <template slot-scope="scope">
+              {{
+                scope.row.pt == "NaN" ? "0" : (scope.row.pt * 100).toFixed(2)
+              }}%
+            </template> -->
+            <template slot-scope="scope"> {{ 50 }}% </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!-- 列表对话框 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="isDialogShow"
+      width="60%"
+      append-to-body
+      class="tables-dialog"
+    >
+      <div class="tables">
+        <el-table
+          :data="tableInfoData"
+          style="width: 100%"
+          :height="530"
+          :border="false"
+          :row-class-name="tableRowClassName"
+        >
           <el-table-column
-            label="完成执法"
-            prop="checkEnterpriseCount"
+            prop="county"
+            label="行政区划"
             header-align="center"
+            show-overflow-tooltip
           >
           </el-table-column>
-          <el-table-column label="完成率" prop="pt" header-align="center">
-            <template slot-scope="scope">
+          <el-table-column prop="" label="执法计划" header-align="center">
+            <template slot-scope="scope"> {{ 150 }}家 </template>
+          </el-table-column>
+          <el-table-column label="完成执法" prop="" header-align="center">
+            <template slot-scope="scope"> {{ 150 }}家 </template>
+          </el-table-column>
+          <el-table-column label="完成率" prop="" header-align="center">
+            <!-- <template slot-scope="scope">
               {{
                 scope.row.pt == "NaN" ? "0" : (scope.row.pt * 100).toFixed(2)
               }}%
-            </template>
+            </template> -->
+            <template slot-scope="scope"> {{ 50 }}% </template>
           </el-table-column>
         </el-table>
       </div>
-    </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -210,6 +250,9 @@ export default {
       //传递的等待效果
       loadS: false,
       newTable: [],
+      title: "",
+      isDialogShow: false,
+      tableInfoData: [],
     };
   },
   components: {
@@ -229,8 +272,28 @@ export default {
     handleQuery() {},
     resetQuery() {},
     // 获取列表数据
-    getList(){
-
+    getList() {
+      // 获取行政区划
+      let treeData = JSON.parse(localStorage.getItem("TREE_DATA"));
+      console.log(treeData);
+      // 列表数据(包含苏州市和其他县区，合计让后台弄)
+      this.tableData = treeData;
+    },
+    // 打开县区下的列表数据
+    openDialog(row) {
+      console.log(row);
+      this.isDialogShow = true;
+      this.tableInfoData = row.children;
+      this.title = row.district + "执法计划";
+    },
+    active(e) {
+      this.activeIndex = e;
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 !== 0) {
+        return "success-row";
+      }
+      return "";
     },
     // searchList() {
     //   this.beforeParams = { ...this.beforeParams, ...this.ruleForm };
@@ -253,15 +316,6 @@ export default {
     //   this.loadS = false;
     // });
     // },
-    active(e) {
-      this.activeIndex = e;
-    },
-    tableRowClassName({ row, rowIndex }) {
-      if (rowIndex % 2 !== 0) {
-        return "success-row";
-      }
-      return "";
-    },
   },
 };
 </script>
@@ -305,7 +359,7 @@ export default {
       visibility: hidden;
     }
 
-    span{
+    span {
       margin-left: 10px;
     }
   }
@@ -314,11 +368,20 @@ export default {
   }
 }
 
+.numb-hover {
+  color: #045ffd;
+  cursor: pointer;
+  &:hover {
+    color: #518afb;
+    text-decoration: underline;
+  }
+}
 .inputs {
   display: flex;
 }
 //===
-.bgContent {
+.bgContent,
+.tables-dialog {
   height: calc(100% - 48px);
   width: 100%;
   .tables {