页面及样式

package-lock.json

@@ -5989,8 +5989,8 @@
     },
     "echarts": {
       "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.1.tgz",
-      "integrity": "sha512-OJ79b22eqRfbSV8vYmDKmA+XWfNbr0Uk/OafWcFNIGDWti2Uw9A6eVCiJLmqPa9Sk+EWL+t5v26aak0z3gxiZw==",
+      "resolved": "https://registry.nlark.com/echarts/download/echarts-5.2.1.tgz?cache=0&sync_timestamp=1632191607532&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-5.2.1.tgz",
+      "integrity": "sha1-vVjsARzYLe9KcU5AOO9Lc7hBe8M=",
       "requires": {
         "tslib": "2.3.0",
         "zrender": "5.2.1"
@@ -5998,8 +5998,8 @@
       "dependencies": {
         "tslib": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
         }
       }
     },
@@ -15933,16 +15933,16 @@
     },
     "zrender": {
       "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
-      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz",
+      "integrity": "sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=",
       "requires": {
         "tslib": "2.3.0"
       },
       "dependencies": {
         "tslib": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
         }
       }
     }

src/App.vue

@@ -25,60 +25,6 @@ export default {
 
 <style lang="scss" >
 @import "~@/assets/style/public-class.scss";
-//分页整体样式
-.el-pagination {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
-//分页总共几页样式
-.el-pagination__total {
-  color: #fff !important;
-}
-//label样式
-.el-form-item__label {
-  color: #fff !important;
-}
-//树形节点选中后的颜色
-.el-tree-node:focus > .el-tree-node__content {
-  background-color: #0064b9 !important;
-  border-radius: 20px;
-}
-//树形节点鼠标移上去的颜色
-.el-tree-node__content:hover {
-  background-color: #91a8bc !important;
-}
-//table border
 
-.el-table td,
-.el-table th.is-leaf,
-.el-table-border,
-.el-table--group {
-  border-color: #67a7df !important;
-}
-.el-table th.el-table_cell.is-leaf {
-  border: #67a7df !important;
-}
-.el-table tr {
-  background: #00375e !important;
-}
 
-.el-table--border {
-  border-color: #67a7df !important;
-}
-.right_main {
-  border: 1px solid #67a7df;
-  background: #112f5d;
-
-  margin-top: 10px;
-  .right_title {
-    color: #fff;
-    border-bottom: 1px solid #67a7df;
-    padding: 10px;
-    font-size: 14px;
-  }
-  .right_table {
-    padding: 20px;
-  }
-}
 </style>

src/assets/style/public-class.scss

@@ -87,3 +87,69 @@ $sizes: (0, 5, 10, 15, 20);
   background: #0068a0 !important;
   color:#fff !important;
 }
+
+//主体内容样式
+.right_main {
+  border: 1px solid #67a7df;
+  background: #112f5d;
+
+  margin-top: 10px;
+  .right_title {
+    color: #fff;
+    border-bottom: 1px solid #67a7df;
+    padding: 10px;
+    font-size: 14px;
+  }
+  .right_table {
+    padding: 20px;
+  }
+}
+//分页整体样式
+.el-pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+//分页总共几页样式
+.el-pagination__total {
+  color: #fff !important;
+}
+//label样式
+.el-form-item__label {
+  color: #fff !important;
+}
+//树形节点选中后的颜色
+.el-tree-node:focus > .el-tree-node__content {
+  background-color: #0064b9 !important;
+  border-radius: 20px;
+}
+//树形节点鼠标移上去的颜色
+.el-tree-node__content:hover {
+  background-color: #91a8bc !important;
+}
+//table border
+
+.el-table td,
+.el-table th.is-leaf,
+.el-table-border,
+.el-table--group {
+  border-color: #67a7df !important;
+}
+.el-table th.el-table_cell.is-leaf {
+  border: #67a7df !important;
+}
+.el-table tr {
+  background: #00375e !important;
+}
+
+.el-table--border {
+  border-color: #67a7df !important;
+  
+}
+//鼠标移到每行时的背景色
+.el-table__body tr.hover-row.current-row>td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell,
+.el-table__body tr.hover-row>td.el-table__cell{
+  background:hsl(204, 66%, 23%) !important;
+}

src/layout/header-aside/layout.vue

@@ -198,4 +198,5 @@ export default {
   align-items: center;
   padding-left: 10px;
 }
+
 </style>

src/views/demo/dataQuery/index copy.vue

@@ -0,0 +1,305 @@
+<template>
+  <div>
+    <d2-container>
+      <!-- <template slot="header">首页/数据查询</template> -->
+      <div class="main">
+        <div class="left">
+          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+          </el-input>
+
+          <el-tree
+            class="filter-tree"
+            :data="leftList"
+            node-key="id"
+            :props="defaultProps"
+            default-expand-all
+            :filter-node-method="filterNode"
+            ref="tree"
+          >
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span v-if="node.level==1"> <i :class="node.icon"></i>{{ node.label }} </span>
+               <span v-if="node.level==2"> <i :class="node.icon"></i>{{ node.label }} </span>
+                <span v-if="node.level==3"> <i :class="node.icon"></i>{{ node.label }} </span>
+                 <span v-if="node.level==4"> <i></i>{{ node.label }} </span>
+            </span>
+          </el-tree>
+        </div>
+        <div class="right">
+          <!-- <template slot="header">首页/数据查询</template> -->
+          <div class="nav">当前所在位置:首页>数据查询</div>
+          <div class="right_main">
+            <div class="right_title"><i class="fa fa-bar-chart" aria-hidden="true" style="padding-right:5px"></i>数据查询</div>
+            <div class="right_table">
+          <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-form-item label="扫描时间">
+              <el-date-picker
+                v-model="formInline.scanTime"
+                type="daterange"
+                align="right"
+                unlink-panels
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :picker-options="pickerOptions"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" @click="search"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-refresh-left"
+                @click="reset"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+          <el-table :data="dataSearchList" border style="width: 100%" :header-cell-style="{background:'#0064b9',color:'#c9f5fa'}">
+            <el-table-column
+              prop="directLibrary"
+              label="所属直属库"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column prop="subTreasury" label="所属分库" align="center">
+            </el-table-column>
+            <el-table-column prop="cfName" label="仓房名称" align="center">
+            </el-table-column>
+            <el-table-column
+              prop="scanStart"
+              label="扫描开始时间"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column prop="scanEnd" label="扫描结束时间" align="center">
+            </el-table-column>
+
+            <el-table-column prop="isAlarm" label="是否报警" align="center">
+            </el-table-column>
+
+            <el-table-column prop="cfState" label="仓房状态" align="center">
+            </el-table-column>
+             <el-table-column prop="cfState" label="体积" align="center">
+            </el-table-column>  
+             <el-table-column prop="cfState" label="重量" align="center">
+            </el-table-column>     
+             <!-- <el-table-column
+      fixed="right"
+      label="操作"
+      width="100">
+      <template slot-scope="scope">
+        <el-button @click="detail(scope.row)" type="text" size="small">详情</el-button>
+    
+      </template>
+    </el-table-column>      -->
+          </el-table>
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="1"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size="pagination.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="pagination.total"
+          >
+          </el-pagination>
+          </div>
+        </div>
+        </div>
+      </div>
+    </d2-container>
+  </div>
+</template>
+<script>
+export default {
+  name: "dataQuery",
+  data() {
+    return {
+      filterText: "",
+      //默认展开的节点
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      //左侧树数据
+      leftList: [
+        {
+          id: 0,
+          label: "中储粮河南分公司",
+          icon: "el-icon-tickets",
+          children: [
+            {
+              id: 1,
+              label: "商丘直属库",
+              icon: "el-icon-paperclip",
+              children: [
+                {
+                  id: 4,
+                  label: "宁陵粮油储备公司",
+                  children: [
+                    {
+                      id: 9,
+                      label: "1号仓",
+                    },
+                    {
+                      id: 10,
+                      label: "2号仓",
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              id: 2,
+              label: "郑州直属库",
+              icon: "el-icon-paperclip",
+              children: [
+                {
+                  id: 5,
+                  label: "中牟粮油储备公司",
+                  children: [
+                    {
+                      id: 8,
+                      label: "1号仓",
+                    },
+                    {
+                      id: 9,
+                      label: "1号仓",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      // 日期插件
+      //
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      formInline: {
+        scanTime: "",
+      },
+      //表格字段
+      dataSearchList: [
+        {
+          directLibrary: "",
+          subTreasury: "",
+          cfName: "",
+          scanStart: "",
+          scanEnd: "",
+
+          cfState: "",
+        },
+      ],
+
+      pagination: {
+        //每页显示的条数
+        pageSize: 10,
+        //当前页
+        curPage: 1,
+        //总数
+        total: 20
+      },
+    };
+  },
+  watch: {
+    filterTest(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    search() {},
+    reset() {},
+    //每页条数改变
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    //当前页改变
+    handleCurrentChange(val) {
+      // this.pagination.curPage = val;
+      console.log(`当前页: ${val}`);
+    },
+    detail(){}
+  },
+};
+</script>
+<style lang="scss" scoped>
+.main {
+  height: 100%;
+  display: flex;
+  .left {
+    width: 250px;
+    height: 100%;
+   background: #163d79;
+  
+  }
+  .right {
+    margin-left: 20px;
+    width:calc(100% - 250px);
+    .nav {
+      padding: 10px 0 10px 10px;
+      color:#FFF;
+      font-size:14px;
+  
+      background: #004a93;
+    }
+    // .right_main{
+    //   border:1px solid #67a7df;
+    //   background:#112f5d;
+    
+    //   margin-top:10px;
+    //   .right_title{
+    //     color:#FFF;
+    //     border-bottom:1px solid #67a7df;
+    //     padding:10px;
+    //      font-size:14px;
+    // }
+    // .right_table{
+    //    padding:20px;
+    
+    // }
+    // }
+   
+  }
+}
+
+</style>

src/views/demo/dataQuery/index.vue

@@ -287,22 +287,7 @@ export default {
   
       background: #004a93;
     }
-    .right_main{
-      border:1px solid #67a7df;
-      background:#112f5d;
-    
-      margin-top:10px;
-      .right_title{
-        color:#FFF;
-        border-bottom:1px solid #67a7df;
-        padding:10px;
-         font-size:14px;
-    }
-    .right_table{
-       padding:20px;
-
-    }
-    }
+  
 
   }
 }

src/views/demo/parameManagement/alarmParame/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <d2-container>
-      <template slot="header">首页/报警参数</template>
+      <!-- <template slot="header">首页/报警参数</template> -->
       <div class="main">
         <div class="left">
           <el-input placeholder="输入关键字进行过滤" v-model="filterText">
@@ -17,11 +17,18 @@
             ref="tree"
           >
             <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span> <i :class="node.icon"></i>{{ node.label }} </span>
+              <span v-if="node.level==1"> <i :class="node.icon"></i>{{ node.label }} </span>
+               <span v-if="node.level==2"> <i :class="node.icon"></i>{{ node.label }} </span>
+                <span v-if="node.level==3"> <i :class="node.icon"></i>{{ node.label }} </span>
+                 <span v-if="node.level==4"> <i></i>{{ node.label }} </span>
             </span>
           </el-tree>
         </div>
         <div class="right">
+           <div class="nav">当前所在位置:首页>报警参数</div>
+          <div class="right_main">
+            <div class="right_title"><i class="fa fa-lightbulb-o" aria-hidden="true" style="padding-right:5px"></i>报警参数</div>
+            <div class="right_table">
           <div class="addBtn">
             <el-button type="primary" icon="el-icon-plus" @click="addTantou"
               >修改新增报警规则</el-button
@@ -63,6 +70,8 @@
               </el-col>
             </el-row>
           </el-form>
+          </div>
+          </div>
         </div>
       </div>
     </d2-container>
@@ -219,15 +228,26 @@ export default {
 .main {
   height: 100%;
   display: flex;
-  .left {
-    width: 200px;
+ .left {
+    width: 250px;
     height: 100%;
-    border-right: 1px solid #ccc;
-    padding-right: 20px;
+   background: #163d79;
+
   }
-  .right {
+ .right {
     margin-left: 20px;
-    width:100%;
+    width:calc(100% - 250px);
+    .nav {
+      padding: 10px 0 10px 10px;
+      color:#FFF;
+
+      font-size:14px;
+  
+      background: #004a93;
+    }
+ 
+  
+
   }
   .addBtn {
     margin-bottom: 20px;
@@ -236,16 +256,18 @@ export default {
     font-size: 16px;
     font-weight: 700;
     line-height: 40px;
+    color:#fff;
   }
   p {
     color: #525357;
     font-size: 14px;
     line-height: 40px;
     position: relative;
+    color:#fff;
   }
-  span {
-    margin: 10px;
-    color: #000000;
-  }
+  // span {
+  //   margin: 10px;
+  //   color: #000000;
+  // }
 }
 </style>

src/views/demo/parameManagement/hardwareParame/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <d2-container>
-      <template slot="header">首页/硬件参数</template>
+      <!-- <template slot="header">首页/硬件参数</template> -->
       <div class="main">
-        <div class="left">
+       <div class="left">
           <el-input placeholder="输入关键字进行过滤" v-model="filterText">
           </el-input>
 
@@ -17,11 +17,18 @@
             ref="tree"
           >
             <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span> <i :class="node.icon"></i>{{ node.label }} </span>
+              <span v-if="node.level==1"> <i :class="node.icon"></i>{{ node.label }} </span>
+               <span v-if="node.level==2"> <i :class="node.icon"></i>{{ node.label }} </span>
+                <span v-if="node.level==3"> <i :class="node.icon"></i>{{ node.label }} </span>
+                 <span v-if="node.level==4"> <i></i>{{ node.label }} </span>
             </span>
           </el-tree>
         </div>
         <div class="right">
+          <div class="nav">当前所在位置:首页>硬件参数</div>
+          <div class="right_main">
+            <div class="right_title"><i class="fa fa-cog" aria-hidden="true" style="padding-right:5px"></i>硬件参数</div>
+            <div class="right_table">
           <el-form :inline="true" :model="formInline" class="demo-form-inline">
             <el-form-item label="设备名称:">
               <el-input
@@ -49,7 +56,7 @@
               >新增激光探头</el-button
             >
           </div>
-          <el-table :data="hardwareList" border style="width: 100%">
+          <el-table :data="hardwareList" border style="width: 100%" :header-cell-style="{background:'#0064b9',color:'#c9f5fa'}">
             <el-table-column
               align="center"
               label="序号"
@@ -80,6 +87,8 @@
               </template>
             </el-table-column>
           </el-table>
+          </div>
+          </div>
         </div>
       </div>
     </d2-container>
@@ -231,13 +240,24 @@ export default {
   height: 100%;
   display: flex;
   .left {
-    width: 200px;
+    width: 250px;
     height: 100%;
-    border-right: 1px solid #ccc;
-    padding-right: 20px;
+   background: #163d79;
+
   }
-  .right {
+ .right {
     margin-left: 20px;
+    width:calc(100% - 250px);
+    .nav {
+      padding: 10px 0 10px 10px;
+      color:#FFF;
+
+      font-size:14px;
+  
+      background: #004a93;
+    }
+ 
+
   }
   .addBtn {
     margin-bottom: 20px;

src/views/demo/parameManagement/scanParame/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <d2-container>
-      <template slot="header">首页/扫描参数</template>
+      <!-- <template slot="header">首页/扫描参数</template> -->
       <div class="main">
-        <div class="left">
+     <div class="left">
           <el-input placeholder="输入关键字进行过滤" v-model="filterText">
           </el-input>
 
@@ -17,11 +17,18 @@
             ref="tree"
           >
             <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span> <i :class="node.icon"></i>{{ node.label }} </span>
+              <span v-if="node.level==1"> <i :class="node.icon"></i>{{ node.label }} </span>
+               <span v-if="node.level==2"> <i :class="node.icon"></i>{{ node.label }} </span>
+                <span v-if="node.level==3"> <i :class="node.icon"></i>{{ node.label }} </span>
+                 <span v-if="node.level==4"> <i></i>{{ node.label }} </span>
             </span>
           </el-tree>
         </div>
         <div class="right">
+           <div class="nav">当前所在位置:首页>扫描参数</div>
+          <div class="right_main">
+            <div class="right_title"><i class="fa fa-search-minus" aria-hidden="true" style="padding-right:5px"></i>扫描参数</div>
+            <div class="right_table">
           <el-form :inline="true" :model="formInline" class="demo-form-inline">
             <el-form-item label="设备名称:">
               <el-input
@@ -45,7 +52,7 @@
             </el-form-item>
           </el-form>
 
-          <el-table :data="hardwareList" border style="width: 100%">
+          <el-table :data="hardwareList" border style="width: 100%" :header-cell-style="{background:'#0064b9',color:'#c9f5fa'}">
             <el-table-column
               align="center"
               label="序号"
@@ -76,6 +83,8 @@
               </template>
             </el-table-column>
           </el-table>
+          </div>
+          </div>
         </div>
       </div>
     </d2-container>
@@ -435,14 +444,24 @@ export default {
 .main {
   height: 100%;
   display: flex;
-  .left {
-    width: 200px;
+   .left {
+    width: 250px;
     height: 100%;
-    border-right: 1px solid #ccc;
-    padding-right: 20px;
+   background: #163d79;
+
   }
   .right {
-    margin-left: 20px;
+  margin-left: 20px;
+    width:calc(100% - 250px);
+    .nav {
+      padding: 10px 0 10px 10px;
+      color:#FFF;
+
+      font-size:14px;
+  
+      background: #004a93;
+    }
+ 
   }
   .addBtn {
     margin-bottom: 20px;

src/views/demo/warehouseShow/warehouseInfo/index.vue

@@ -1,95 +1,130 @@
 <template>
   <div>
     <d2-container>
-      <template slot="header"><div class="nav">当前所在位置:首页>仓房信息</div></template>
-        <div>
-          <div class="right_main">
-            <div class="right_title"><i class="fa fa-university" aria-hidden="true" style="padding-right:5px"></i>仓房信息</div>
-            <div class="right_table">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <el-form-item label="仓房名称:">
-          <el-input v-model="formInline.cfName" placeholder="请选择"></el-input>
-         
-        </el-form-item>
-        <el-form-item label="扫描时间">
-          <el-date-picker
-            v-model="formInline.scanTime"
-            type="daterange"
-            align="right"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :picker-options="pickerOptions"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="search"
-            >查询</el-button
-          >
-        </el-form-item>
+      <template slot="header"
+        ><div class="nav">当前所在位置:首页>仓房信息</div></template
+      >
+      <div>
+        <div class="right_main">
+          <div class="right_title">
+            <i
+              class="fa fa-university"
+              aria-hidden="true"
+              style="padding-right: 5px"
+            ></i
+            >仓房信息
+          </div>
+          <div class="right_table">
+            <el-form
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+            >
+              <el-form-item label="仓房名称:">
+                <el-cascader :options="options"></el-cascader>
+              </el-form-item>
+              <el-form-item label="扫描时间">
+                <el-date-picker
+                  v-model="formInline.scanTime"
+                  type="daterange"
+                  align="right"
+                  unlink-panels
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :picker-options="pickerOptions"
+                >
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="search"
+                  >查询</el-button
+                >
+              </el-form-item>
 
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-refresh-left" @click="reset"
-            >重置</el-button
-          >
-        </el-form-item>
-      </el-form>
+              <el-form-item>
+                <el-button
+                  type="primary"
+                  icon="el-icon-refresh-left"
+                  @click="reset"
+                  >重置</el-button
+                >
+              </el-form-item>
+            </el-form>
 
-      <el-table :data="cfInfoList" border style="width: 100%" :header-cell-style="{background:'#0064b9',color:'#c9f5fa'}">
-        <el-table-column prop="branchOffice" label="所属分公司" align="center">
-        </el-table-column>
-        <el-table-column prop="directLibrary" label="所属直属库" align="center">
-        </el-table-column>
-        <el-table-column prop="subTreasury" label="所属分库" align="center">
-        </el-table-column>
-        <el-table-column prop="cfName" label="仓房名称" align="center">
-        </el-table-column>
-        <el-table-column prop="keeper" label="保管员" align="center">
-        </el-table-column>
-        <el-table-column prop="lxfs" label="联系方式" align="center">
-        </el-table-column>
+            <el-table
+              :data="cfInfoList"
+              border
+              style="width: 100%"
+              :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }"
+            >
+              <el-table-column
+                prop="branchOffice"
+                label="所属分公司"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="directLibrary"
+                label="所属直属库"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="subTreasury"
+                label="所属分库"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="cfName" label="仓房名称" align="center">
+              </el-table-column>
+              <el-table-column prop="keeper" label="保管员" align="center">
+              </el-table-column>
+              <el-table-column prop="lxfs" label="联系方式" align="center">
+              </el-table-column>
 
-        <el-table-column
-          prop="lastScan"
-          label="最近一次扫描时间"
-          align="center"
-        >
-        </el-table-column>
+              <el-table-column
+                prop="lastScan"
+                label="最近一次扫描时间"
+                align="center"
+              >
+              </el-table-column>
 
-        <el-table-column prop="cfState" label="当前仓房状态" align="center">
-        </el-table-column>
-        <el-table-column align="center" label="操作"  width="180">
-          <template slot-scope="scope">
-            <el-button
-              @click="handleCheck(scope.row)"
-              type="text"
-              size="small"
-              icon="el-icon-circle-check"
-              >查看</el-button
-            >
-            <el-button type="text" size="small" icon="el-icon-edit"
-              >编辑</el-button
-            >
-            <el-button type="text" size="small" icon="el-icon-delete"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-       <!-- <pagination
+              <el-table-column
+                prop="cfState"
+                label="当前仓房状态"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column align="center" label="操作" width="180">
+                <template slot-scope="scope">
+                  <el-button
+                    @click="handleCheck(scope.row)"
+                    type="text"
+                    size="small"
+                    icon="el-icon-circle-check"
+                    >查看</el-button
+                  >
+                  <el-button type="text" size="small" icon="el-icon-edit"
+                    >编辑</el-button
+                  >
+                  <el-button type="text" size="small" icon="el-icon-delete"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <!-- <pagination
         
           :total="total"
           :page.sync="listQuery.page"
           :limit.sync="listQuery.limit"
           @pagination="getList"
         /> -->
+          </div>
         </div>
-        </div>
-    </div>
+      </div>
     </d2-container>
- 
   </div>
 </template>
 <script>
@@ -101,6 +136,36 @@ export default {
   components: { Pagination },
   data() {
     return {
+      //options
+      options: [
+        {
+          value: 'zhinan',
+          label: '指南',
+         
+          children: 
+          [{
+            value: 'shejiyuanze',
+            label: '设计原则',
+            children: [
+              {
+              value: 'yizhi',
+              label: '一致'
+            }, 
+            {
+              value: 'fankui',
+              label: '反馈'
+            },
+             {
+              value: 'xiaolv',
+              label: '效率'
+            },
+             {
+              value: 'kekong',
+              label: '可控'
+            }
+            ],
+          }]
+          }],
       
       //头部查询条件
       formInline: {
@@ -242,12 +307,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-     .nav {
-    
-      color:#FFF;
-      font-size:14px;
-  
-      background: #004a93;
-    }
-  
+.nav {
+  color: #fff;
+  font-size: 14px;
+
+  background: #004a93;
+}
 </style>