站点排版

src/layout/components/AppMain.vue

@@ -1,6 +1,9 @@
 <template>
   <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
+    <!-- <transition name="fade-transform" mode="out-in">
+      <router-view :key="key" />
+    </transition> -->
+    <transition >
       <router-view :key="key" />
     </transition>
   </section>

src/layout/components/Sidebar/index.vue

@@ -33,6 +33,12 @@ export default {
     routes() {
       return this.$router.options.routes
     },
+
+    routerPath() {
+      return this.$router.meta.guidePath
+        ? this.$router.meta.jumpPath
+        : this.$route.path;
+    },
     activeMenu() {
       const route = this.$route
       const { meta, path } = route

src/router/index.js

@@ -58,73 +58,87 @@ export const constantRoutes = [{
             meta: { title: '告警管理', icon: 'alarmManage' }
         }]
     },
+
     {
         path: '/siteManage',
         component: Layout,
-        redirect: '/siteManage/basicInfo',
-        name: 'siteManage',
-        meta: { title: '站点管理', icon: 'siteManage' },
         children: [{
-                path: 'basicInfo',
-                name: 'basicInfo',
-                component: () =>
-                    import ('@/views/siteManage/basicInfo/index'),
-                meta: { title: '基本信息' }
-            },
-            {
-                path: 'watchDog',
-                name: 'watchDog',
-                component: () =>
-                    import ('@/views/siteManage/watchDog/index'),
-                meta: { title: '监控设备' }
-            },
-            {
-                path: 'variableList',
-                name: 'variableList',
-                component: () =>
-                    import ('@/views/siteManage/variableList/index'),
-                meta: { title: '变量列表' }
-            },
-            {
-                path: 'rateConfig',
-                name: 'rateConfig',
-                component: () =>
-                    import ('@/views/siteManage/rateConfig/index'),
-                meta: { title: '费率配置' }
-            },
-            {
-                path: 'camera',
-                name: 'camera',
-                component: () =>
-                    import ('@/views/siteManage/camera/index'),
-                meta: { title: '摄像头' }
-            },
-            {
-                path: 'powerScore',
-                name: 'powerScore',
-                component: () =>
-                    import ('@/views/siteManage/powerScore/index'),
-                meta: { title: '电能质量评分' }
-            }
-        ]
+            path: 'index',
+            name: 'siteManage',
+            component: () =>
+                import ('@/views/siteManage/basicInfo/index'),
+            meta: { title: '站点管理', icon: 'siteManage' }
+        }]
     },
 
+    // {
+    //     path: '/siteManage',
+    //     component: Layout,
+    //     redirect: '/siteManage/basicInfo',
+    //     name: 'siteManage',
+    //     meta: { title: '站点管理', icon: 'siteManage' },
+    //     children: [{
+    //             path: 'basicInfo',
+    //             name: 'basicInfo',
+    //             component: () =>
+    //                 import ('@/views/siteManage/basicInfo/index'),
+    //             meta: { title: '基本信息' }
+    //         },
+    //         {
+    //             path: 'watchDog',
+    //             name: 'watchDog',
+    //             component: () =>
+    //                 import ('@/views/siteManage/watchDog/index'),
+    //             meta: { title: '监控设备' }
+    //         },
+    //         {
+    //             path: 'variableList',
+    //             name: 'variableList',
+    //             component: () =>
+    //                 import ('@/views/siteManage/variableList/index'),
+    //             meta: { title: '变量列表' }
+    //         },
+    //         {
+    //             path: 'rateConfig',
+    //             name: 'rateConfig',
+    //             component: () =>
+    //                 import ('@/views/siteManage/rateConfig/index'),
+    //             meta: { title: '费率配置' }
+    //         },
+    //         {
+    //             path: 'camera',
+    //             name: 'camera',
+    //             component: () =>
+    //                 import ('@/views/siteManage/camera/index'),
+    //             meta: { title: '摄像头' }
+    //         },
+    //         {
+    //             path: 'powerScore',
+    //             name: 'powerScore',
+    //             component: () =>
+    //                 import ('@/views/siteManage/powerScore/index'),
+    //             meta: { title: '电能质量评分' }
+    //         }
+    //     ]
+    // },
+
     {
         path: '/stationManage',
         component: Layout,
+        redirect: '/stationManage/index',
         children: [{
                 path: 'index',
                 name: 'StationManage',
                 component: () =>
                     import ('@/views/stationManage/index'),
-                meta: { title: '台区管理', icon: 'stationManage' }
+                meta: { title: '台区管理', icon: 'stationManage', guidePath: true, jumpPath: '/stationManage/index' }
             },
             {
                 path: 'siteList',
                 name: 'StationManage',
                 component: () =>
                     import ('@/views/stationManage/siteList'),
-                meta: { title: '台区管理', icon: 'stationManage' },
+                meta: { title: '台区管理', icon: 'stationManage', guidePath: true, jumpPath: '/stationManage/siteList' },
                 hidden: true
             }
         ]
@@ -140,7 +154,7 @@ export const constantRoutes = [{
     //         name: 'StationManage',
     //         component: () =>
     //             import ('@/views/stationManage/siteList'),
-    //         meta: { title: '台区管理', icon: 'stationManage' }
+    //         meta: { title: '台区管理', icon: 'stationManage', guidePath: true, jumpPath: '/stationManage/siteList' }
     //     }],
     //     hidden: true
     // },

src/styles/index.scss

@@ -137,4 +137,10 @@ div:focus {
         left: 0;
         top: 0
     }
+}
+
+.status.el-avatar {
+    width: 14px;
+    height: 14px;
+    background: #04F21C
 }

src/styles/transition.scss

@@ -1,48 +1,53 @@
 // global transition css
 
 /* fade */
+
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.28s;
+    transition: opacity 0.28s;
 }
 
 .fade-enter,
 .fade-leave-active {
-  opacity: 0;
+    opacity: 0;
 }
 
+
 /* fade-transform */
+
 .fade-transform-leave-active,
 .fade-transform-enter-active {
-  transition: all .5s;
+    transition: all .5s;
 }
 
 .fade-transform-enter {
-  opacity: 0;
-  transform: translateX(-30px);
+    opacity: 0;
+    transform: translateX(-30px);
 }
 
 .fade-transform-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
+    opacity: 0;
+    transform: translateX(30px);
 }
 
+
 /* breadcrumb transition */
+
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all .5s;
+    transition: all .5s;
 }
 
 .breadcrumb-enter,
 .breadcrumb-leave-active {
-  opacity: 0;
-  transform: translateX(20px);
+    opacity: 0;
+    transform: translateX(20px);
 }
 
 .breadcrumb-move {
-  transition: all .5s;
+    transition: all .5s;
 }
 
 .breadcrumb-leave-active {
-  position: absolute;
-}
+    position: absolute;
+}

src/views/siteManage/basicInfo/index.vue

@@ -1,5 +1,171 @@
 <template>
-  <div style="padding:30px;">
-    基本信息
+  <div class="app-container page-nesting">
+    <!-- 树形组件start -->
+    <div class="grid-content treeDom">
+      <div style="text-align: center" class="mb-20">
+        <el-button type="primary">添加分组</el-button>
+        <el-button type="primary">添加站点</el-button>
+      </div>
+
+      <el-input
+        placeholder="输入关键字进行过滤"
+        v-model="filterText"
+        class="mb-20 searchInput"
+      >
+        <i
+          class="el-icon-search el-input__icon"
+          slot="suffix"
+          
+        >
+        </i>
+      </el-input>
+
+      <el-tree
+        class="filter-tree"
+        :data="data"
+        node-key="id"
+        :props="defaultProps"
+        :expand-on-click-node="false"
+        :render-content="renderContent"
+        default-expand-all
+        :filter-node-method="filterNode"
+        ref="tree"
+      >
+      </el-tree>
+    </div>
+    <!-- 树形组件end -->
+
+    <!-- 站点主题start -->
+    <div class="grid-content nestingDom" style="width: calc(100% -300px)">
+      nestingDom
+    </div>
+    <!-- 站点主题end -->
   </div>
 </template>
+
+<script>
+export default {
+  data() {
+    return {
+      filterText: "",
+      data: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+            },
+            {
+              label: "二级 1-2",
+            },
+            {
+              label: "二级 1-3",
+            },
+            {
+              label: "二级 1-4",
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+            },
+            {
+              label: "二级 2-2",
+            },
+            {
+              label: "二级 2-3",
+            },
+            {
+              label: "二级 2-4",
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+
+    handleNodeClick(data) {
+      console.log(data);
+    },
+    append(data) {
+      const newChild = { id: id++, label: "testtest", children: [] };
+      if (!data.children) {
+        this.$set(data, "children", []);
+      }
+      data.children.push(newChild);
+    },
+
+    remove(node, data) {
+      const parent = node.parent;
+      const children = parent.data.children || parent.data;
+      const index = children.findIndex((d) => d.id === data.id);
+      children.splice(index, 1);
+    },
+
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+          <span>
+            <el-button
+              size="mini"
+              type="text"
+              on-click={() => this.remove(node, data)}
+            >
+              Delete
+            </el-button>
+          </span>
+        </span>
+      );
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.app-container.page-nesting {
+  padding: 0;
+  background: rgba(0, 0, 0, 0);
+}
+.grid-content {
+  background: #fff;
+  min-height: calc(100vh - 140px);
+}
+ .el-input__inner{
+    border-radius:20px!important
+  }
+.treeDom {
+  width: 270px;
+  position: absolute;
+  left: 0;
+  margin-left: 20px;
+  padding: 20px;
+ 
+  .el-icon-search{
+    color:#409EFF
+  }
+  .el-button {
+    width: 100px;
+  }
+}
+.nestingDom {
+  margin-left: 290px;
+}
+</style>

src/views/stationManage/dialogComponent.vue

@@ -140,7 +140,7 @@ export default {
           },
         ],
         siteList: [
-          { required: true, message: '请选择站点列表', trigger: 'change' }
+          { required: true, message: '请选择站点列表', trigger: 'change'}
         
         ],
         done: [

src/views/stationManage/index.vue

@@ -36,6 +36,18 @@
       <el-table-column prop="stationAddress" label="台区地址" width="">
       </el-table-column>
       <el-table-column prop="pointNum" label="点位数量" width="">
+        <!-- <template slot-scope="scope">
+          <a href="scope.row.url" target="_blank">
+            {{ scope.row.pointNum }}
+          </a>
+        </template> -->
+
+         <template slot-scope="scope">
+            <router-link style="margin-right:15px;" :to="{ path:'siteList',query:{id:scope.row.stationName}}">
+              {{ scope.row.pointNum }}
+            </router-link>
+          </template>
+
       </el-table-column>
       <el-table-column prop="deviceNum" label="挂载设备数量" width="350">
       </el-table-column>
@@ -68,7 +80,6 @@
       @closeDialog="closeDialog"
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
-
   </div>
 </template>
 
@@ -96,6 +107,7 @@ export default {
           stationAddress: "青浦区徐泾镇",
           pointNum: "8",
           deviceNum: "10",
+          
         },
         {
           stationName: "台区1",
@@ -122,7 +134,6 @@ export default {
     };
   },
   methods: {
-
     // 表头样式设置
     headClass() {
       return "background:#FAFAFA;";
@@ -140,7 +151,7 @@ export default {
     // 添加操作
     addItem() {
       this.tableItem = {
-        id:"",
+        id: "",
         stationName: "",
         stationCode: "",
         stationAddress: "",
@@ -154,9 +165,9 @@ export default {
         this.$refs["dialogComponent"].showDialog = true;
       });
     },
-     // 编辑操作
+    // 编辑操作
     editRow(row) {
-      console.log(row)
+      console.log(row);
       this.tableItem = row;
       this.dialogTitle = "编辑";
       this.showDialog = true;
@@ -173,8 +184,6 @@ export default {
       this.showDialog = false;
     },
 
-    
-
     // handleEdit(index, row) {
     //   console.log(index, row);
     // },
@@ -182,7 +191,7 @@ export default {
     //删除操作
     handleDelete(index, row) {
       console.log(index, row);
-      alert(index)
+      alert(index);
     },
   },
 };

src/views/stationManage/siteList.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <!-- 返回start -->
     <div class="siteTitle">
-      <el-button class="goBack">返回</el-button>
+      <el-button class="goBack" @click="goBack">返回</el-button>
       台区1-站点列表
     </div>
     <!-- 返回end -->
@@ -18,12 +18,8 @@
       <el-table-column fixed prop="stationName" label="站点名称" width="">
       </el-table-column>
       <el-table-column prop="stationStatus" label="状态" width="">
-        <!-- <template slot-scope="scope">
-          <i class="el-icon-time"></i>
-          <span style="margin-left: 10px">{{ scope.row.date }}</span>
-        </template> -->
-         <template>
-          <i class="status" style="width:5px;height:5px;border-radius:50%;display:inline-block;color:red"></i>
+        <template slot-scope="scope">
+          <el-avatar class="status"></el-avatar>
         </template>
       </el-table-column>
       <el-table-column prop="deviceName" label="设备名称" width="">
@@ -33,50 +29,23 @@
       <el-table-column prop="eddl" label="额定电流" width=""> </el-table-column>
       <el-table-column prop="dlfzl" label="电流负载率门限" width="">
       </el-table-column>
-      <el-table-column fixed="right" label="操作" width="250">
+       <el-table-column fixed="right" label="操作" width="250">
         <template slot-scope="scope">
-          <el-button
-            type="text"
-            size="small"
-            @click.native.prevent="editRow(scope.row)"
-            >编辑</el-button
-          >
-          <el-button
-            @click="handleDelete(scope.$index, scope.row)"
-            type="text"
-            size="small"
-            class="delete-text"
-            >删除</el-button
-          >
+           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格end -->
-
-    <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      v-if="showDialog"
-      ref="dialogComponent"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
-      @closeDialog="closeDialog"
-    ></dialog-component>
-    <!--弹框组件开始-----------------------end-->
   </div>
 </template>
 
 <script>
-import DialogComponent from "./dialogComponent";
-// import { mapGetters } from "vuex";
-
 export default {
   // name: "Dashboard",
   // computed: {
   //   ...mapGetters(["name"]),
   // },
 
-  components: { DialogComponent },
-
   data() {
     return {
       showDialog: false,
@@ -123,6 +92,9 @@ export default {
     };
   },
   methods: {
+    goBack() {
+      this.$router.replace("/stationManage/index");
+    },
     // 表头样式设置
     headClass() {
       return "background:#FAFAFA;";
@@ -136,6 +108,11 @@ export default {
         return "";
       }
     },
+    //查看
+     handleClick(row) {
+         alert('查看对应站点（页面跳转）')
+        console.log(row);
+      },
 
     // 添加操作
     addItem() {
@@ -154,34 +131,6 @@ export default {
         this.$refs["dialogComponent"].showDialog = true;
       });
     },
-    // 编辑操作
-    editRow(row) {
-      console.log(row);
-      this.tableItem = row;
-      this.dialogTitle = "编辑";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
-    // 关闭操作
-    closeDialog(flag) {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData();
-      }
-      this.showDialog = false;
-    },
-
-    // handleEdit(index, row) {
-    //   console.log(index, row);
-    // },
-
-    //删除操作
-    handleDelete(index, row) {
-      console.log(index, row);
-      alert(index);
-    },
   },
 };
 </script>