.

package-lock.json

@@ -5987,6 +5987,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.2.1",
+      "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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+        }
+      }
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -15914,6 +15930,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.2.1",
+      "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.nlark.com/tslib/download/tslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+        }
+      }
     }
   }
 }

package.json

@@ -16,6 +16,7 @@
     "better-scroll": "^1.15.2",
     "core-js": "^3.4.3",
     "dayjs": "^1.8.17",
+    "echarts": "^5.2.1",
     "element-ui": "^2.15.6",
     "faker": "^4.1.0",
     "flex.css": "^1.1.7",

src/App.vue

@@ -1,26 +1,26 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <script>
-import util from '@/libs/util'
+import util from "@/libs/util";
 export default {
-  name: 'app',
+  name: "app",
   watch: {
-    '$i18n.locale': 'i18nHandle'
+    "$i18n.locale": "i18nHandle",
   },
-  created () {
-    this.i18nHandle(this.$i18n.locale)
+  created() {
+    this.i18nHandle(this.$i18n.locale);
   },
   methods: {
-    i18nHandle (val, oldVal) {
-      util.cookies.set('lang', val)
-      document.querySelector('html').setAttribute('lang', val)
-    }
-  }
-}
+    i18nHandle(val, oldVal) {
+      util.cookies.set("lang", val);
+      document.querySelector("html").setAttribute("lang", val);
+    },
+  },
+};
 </script>
 
 <style lang="scss">
@@ -48,34 +48,5 @@ justify-content: flex-end;
 .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

@@ -74,11 +74,8 @@ $sizes: (0, 5, 10, 15, 20);
 }
 
 //鼠标移到每行时的背景色
-.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:#00375b;
+.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+  background:hsl(204, 66%, 23%) !important;
 }
 //头部导航一级菜单选中后的样式
 .theme-d2 .d2-theme-header .el-menu .el-menu-item.is-active{
@@ -89,4 +86,70 @@ $sizes: (0, 5, 10, 15, 20);
 .theme-d2 .d2-theme-header .el-menu .el-submenu.is-active .el-submenu__title{
   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样式
+#formLabel .el-form-item__label {
+  color: #fff;
+}
+//树形节点选中后的颜色
+.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/libs/util.js

@@ -14,7 +14,9 @@ const util = {
  */
 util.title = function (titleText) {
   const processTitle = process.env.VUE_APP_TITLE || 'D2Admin'
-  window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}`
+  // window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}`
+  //浏览器标题
+  window.document.title = `${processTitle}`
 }
 
 /**

src/main.js

@@ -12,15 +12,20 @@ import router from './router'
 import { menuHeader, menuAside } from '@/menu'
 import { frameInRoutes } from '@/router/routes'
 
+//echarts
+import * as echarts from "echarts"
+Vue.prototype.$echarts = echarts
+
 // 核心插件
 Vue.use(d2Admin)
 
+
 new Vue({
   router,
   store,
   i18n,
   render: h => h(App),
-  created () {
+  created() {
     // 处理路由 得到每一级的路由设置
     this.$store.commit('d2admin/page/init', frameInRoutes)
     // 设置顶栏菜单
@@ -30,7 +35,7 @@ new Vue({
     // 初始化菜单搜索功能
     this.$store.commit('d2admin/search/init', menuHeader)
   },
-  mounted () {
+  mounted() {
     // 展示系统信息
     this.$store.commit('d2admin/releases/versionShow')
     // 用户登录后从数据库加载一系列的设置

src/store/modules/d2admin/modules/account.js

@@ -51,14 +51,14 @@ export default {
       // 判断是否需要确认
       if (confirm) {
         commit('d2admin/gray/set', true, { root: true })
-        MessageBox.confirm('确定要注销当前用户吗', '注销用户', { type: 'warning' })
+        MessageBox.confirm('确定要退出当前用户吗', '退出用户', { type: 'warning' })
           .then(() => {
             commit('d2admin/gray/set', false, { root: true })
             logout()
           })
           .catch(() => {
             commit('d2admin/gray/set', false, { root: true })
-            Message({ message: '取消注销操作' })
+            Message({ message: '取消退出操作' })
           })
       } else {
         logout()

src/views/demo/alarmRecord/index.vue

@@ -3,7 +3,7 @@
     <d2-container>
       <template slot="header">首页/报警记录</template>
       <div>
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline" id="formLabel">
           <el-form-item label="报警时间">
             <el-date-picker
               v-model="formInline.scanTime"
@@ -56,7 +56,7 @@
           </el-form-item>
         </el-form>
 
-        <el-table :data="cfInfoList" border style="width: 100%">
+        <el-table :data="cfInfoList" border style="width: 100%" :header-cell-style="{background:'#0064b9',color:'#c9f5fa'}">
           <el-table-column
             prop="branchOffice"
             label="所属分公司"

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

@@ -30,7 +30,7 @@
           <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 :inline="true" :model="formInline" class="demo-form-inline" id="formLabel">
             <el-form-item label="扫描时间">
               <el-date-picker
                 v-model="formInline.scanTime"
@@ -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,17 +17,24 @@
             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
             >
           </div>
-          <el-form :model="formData" ref="formData">
+          <el-form :model="formData" ref="formData" id="formLabel">
             <el-row style="margin-top: 10px">
               <el-col :span="24" :offset="2">
                 <el-form-item label="报警启用状态:">
@@ -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,12 +17,19 @@
             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">
-          <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <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" id="formLabel">
             <el-form-item label="设备名称:">
               <el-input
                 v-model="formInline.sbName"
@@ -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,12 +17,19 @@
             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">
-          <el-form :inline="true" :model="formInline" class="demo-form-inline">
+           <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" id="formLabel">
             <el-form-item label="设备名称:">
               <el-input
                 v-model="formInline.sbName"
@@ -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,131 @@
 <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"
+              id="formLabel"
+            >
+              <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 +137,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 +308,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>

src/views/demo/warehouseShow/warehouseInfo/warehouseInfo-check.vue

@@ -20,7 +20,7 @@
           <div>保管员信息</div>
         </div>
 
-        <el-form :inline="true" :model="form" class="demo-form-inline">
+        <el-form :inline="true" :model="form" class="demo-form-inline" label-width="130px">
           <div class="middle">
             <el-form-item label="姓名:">
               <el-select v-model="form.name" placeholder="请选择">

src/views/system/index/page.vue

@@ -49,6 +49,7 @@
     <el-row class="content contentX">
       <div class="page-content left-content">
         <span class="content-title">出入库数量趋势</span>
+        <div id="myChart" :style="{ width: '400px', height: '250px' }"></div>
       </div>
       <div class="page-content right-content">
         <span class="content-title">库区报警排名</span>
@@ -74,8 +75,58 @@ export default {
         return "two-row";
       }
     },
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("myChart"));
+      // 绘制图表
+      myChart.setOption({
+        // title: { text: "在Vue中使用echarts" },
+        tooltip: {},
+        legend: {
+          data: ["出库", "入库"],
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+        },
+        yAxis: { type: "value" },
+        series: [
+          {
+            name: "出库",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
+          },
+          {
+            name: "入库",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90],
+          },
+        ],
+      });
+    },
   },
   created() {},
+  mounted() {
+    this.drawLine();
+  },
 };
 </script>
 
@@ -166,6 +217,9 @@ export default {
   .tzggListLi {
     float: right;
   }
+  #myChart {
+    margin: 0 auto;
+  }
   // .btn-group {
   //   color: $color-text-placehoder;
   //   font-size: 12px;