解决冲突

.env

@@ -4,7 +4,8 @@
 VUE_APP_TITLE=D2Admin
 
 # 网络请求公用地址
-VUE_APP_API=http://101.36.160.140:21023/api/
+VUE_APP_API=/api/
+; VUE_APP_API=http://101.36.160.140:21023/
 
 # 仓库地址
 VUE_APP_REPO=https://github.com/d2-projects/d2-admin-start-kit

.env.development

@@ -3,6 +3,3 @@
 # 页面 title 前缀
 VUE_APP_TITLE=数量监测智能眼系统
 
-
-# 网络请求公用地址
-VUE_APP_API=http://101.36.160.140:21023/api/

src/App.vue

@@ -25,28 +25,7 @@ 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;
-} */
+
+
 
 </style>

src/api/index.js

@@ -5,6 +5,7 @@ import * as tools from './tools'
 
 const files = require.context('./modules', true, /\.api\.js$/)
 const generators = files.keys().map(key => files(key).default)
+console.log(files.keys(),"///")
 
 export default assign({}, ...map(generators, generator => generator({
   service,

src/api/modules/paramManage/hardParam.api.js

@@ -0,0 +1,29 @@
+
+  //硬件参数
+export default ({request}) => ({
+  //左侧树
+
+//列表
+ hardParam(data = {}) {
+
+
+  return request({
+    url: `hdParemeter/getPage`,
+    method: 'post',
+    data
+  })
+
+  },
+
+  //新增
+  addHardParam(data = {}) {
+
+
+    return request({
+      url: `hdParemeter/save`,
+      method: 'post',
+      data
+    })
+  
+    }
+})

src/api/service.js

@@ -33,7 +33,7 @@ function createService () {
       } else {
         // 有 code 代表这是一个后端接口 可以进行进一步的判断
         switch (code) {
-          case 0:
+          case 200:
             // [ 示例 ] code === 0 代表没有错误
             return dataAxios.data
           case 'xxx':
@@ -83,7 +83,8 @@ function createRequestFunction (service) {
         'Content-Type': get(config, 'headers.Content-Type', 'application/json')
       },
       timeout: 5000,
-      baseURL: process.env.VUE_APP_API,
+      // baseURL: process.env.VUE_APP_API,
+      baseURL: '/api',
       data: {}
     }
     return service(Object.assign(configDefault, config))

src/assets/style/public-class.scss

@@ -153,3 +153,19 @@ $sizes: (0, 5, 10, 15, 20);
 .el-table__body tr.hover-row>td.el-table__cell{
   background:hsl(204, 66%, 23%) !important;
 }
+//弹框样式
+#dialogStyle .el-dialog{
+  background: #092a51;
+}
+#dialogStyle .el-dialog__header{
+  background:#3a8ee6;
+}
+#dialogStyle .el-dialog__title,#dialogStyle .el-form-item__label{
+  // color:#9bbbe3;
+  color:#fff;
+}
+// #dialogStyle .el-input__inner{
+//   background:#1d3b6b;
+//   border:1px solid #345684;
+//   opacity: 12.5;
+// }

src/main.js

@@ -16,6 +16,11 @@ import { frameInRoutes } from '@/router/routes'
 import * as echarts from "echarts"
 Vue.prototype.$echarts = echarts
 
+
+// axios
+import axios from 'axios'
+Vue.prototype.$axios = axios;
+
 // 核心插件
 Vue.use(d2Admin)
 

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

@@ -1,14 +1,333 @@
 <template>
-    <div>
-         <d2-container>
-    <template slot="header">参数设置/数据字典</template>
- 数据字典
-  </d2-container>
-      
-    </div>
+  <div>
+    <d2-container>
+      <template slot="header"
+        ><div class="nav">当前所在位置:首页>数据字典</div></template
+      >
+      <div>
+        <div class="right_main">
+          <div class="right_title">
+            <i
+              class="fa fa-book"
+              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"
+            >
+              <div class="searchRow">
+                <div>
+                  <el-form-item label="字典名称:">
+                    <el-cascader :options="options"></el-cascader>
+                  </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>
+                </div>
+                <div>
+                  <el-form-item>
+                    <el-button
+                      type="primary"
+                      icon="el-icon-plus"
+                      @click="addDic"
+                      >新建字典</el-button
+                    >
+                  </el-form-item>
+                </div>
+              </div>
+            </el-form>
+
+            <el-table
+              :data="dataDictionaryList"
+              border
+              style="width: 100%"
+              row-key="id"
+              lazy
+              :load="load"
+              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+              :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 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
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <!-- <pagination
+        
+          :total="total"
+          :page.sync="listQuery.page"
+          :limit.sync="listQuery.limit"
+          @pagination="getList"
+        /> -->
+          </div>
+        </div>
+      </div>
+    </d2-container>
+
+
+    <!-- //字典弹框 -->
+    <el-dialog title="新建字典" :visible.sync="dicDialog" id="dialogStyle">
+  <el-form :model="form" id="dialogForm" :rules="rules">
+    <el-form-item label="字典标识:" :label-width="formLabelWidth" prop="kkk">
+      <el-input v-model="form.kkk" autocomplete="off"></el-input>
+    </el-form-item>
+     <el-form-item label="字典名称:" :label-width="formLabelWidth" prop="name">
+      <el-input v-model="form.name" autocomplete="off"></el-input>
+    </el-form-item>
+     <el-form-item label="描述:" :label-width="formLabelWidth" prop="name">
+      <el-input v-model="form.name" autocomplete="off"></el-input>
+    </el-form-item>
+     <el-form-item label="字典状态:" :label-width="formLabelWidth" prop="name">
+      <el-input v-model="form.name" autocomplete="off"></el-input>
+    </el-form-item>
+   
+  </el-form>
+  <div slot="footer" class="dialog-footer">
+    <el-button @click="dicDialog = false">取 消</el-button>
+    <el-button type="primary" @click="defined()">确 定</el-button>
+  </div>
+</el-dialog>
+  </div>
 </template>
 <script>
+// 引入分页
+import Pagination from "@/components/pagination";
 export default {
-  name:"dataDictionary"
+  name: "dataDictionary",
+  components: { Pagination },
+  data() {
+    return {
+    
+      //初始化弹框状态时关闭的
+      dicDialog:false,
+      //label宽度
+      formLabelWidth:"120px",
+      //options
+      options: [
+        {
+          value: "zhinan",
+          label: "指南",
+
+          children: [
+            {
+              value: "shejiyuanze",
+              label: "设计原则",
+              children: [
+                {
+                  value: "yizhi",
+                  label: "一致",
+                },
+                {
+                  value: "fankui",
+                  label: "反馈",
+                },
+                {
+                  value: "xiaolv",
+                  label: "效率",
+                },
+                {
+                  value: "kekong",
+                  label: "可控",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+
+      //头部查询条件
+      formInline: {
+        cfName: "",
+        scanTime: "",
+      },
+      //表格字段
+      dataDictionaryList: [
+        {
+          id: 1,
+          branchOffice: "中储粮河南分公司",
+          directLibrary: "商丘直属库",
+          subTreasury: "宁陵粮油储备公司",
+          cfName: "1号仓",
+          keeper: "白端静",
+          lxfs: "13531314569",
+          lastScan: "2019-08-21 16:11:59",
+          cfState: "出库",
+          hasChildren: true,
+        },
+      ],
+
+      // 日期插件
+      //
+      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]);
+            },
+          },
+        ],
+      },
+      //分页
+      total: 30,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: "+id",
+      },
+      //弹框初始化数据
+      form:{
+        kkk:"",
+        name:"",
+      },
+      //验证规则
+      rules:{
+        kkk:[ {required:true,message:"请输入字典数据名称",trigger:"blur"}],
+        name:[ {required:true,message:"请输入字典数据名称",trigger:"blur"}]
+      }
+       
+     
+    };
+  },
+  methods: {
+    search() {},
+    reset() {},
+    getList() {},
+    //查看
+    handleCheck() {
+      this.$router.push({
+        path: "/warehouseInfo-check",
+      });
+    },
+    //表格数的子节点加载
+    load(tree, treeNode, resolve) {
+      setTimeout(() => {
+        resolve([
+          {
+            id: 11,
+            branchOffice: "中储粮河南分公司",
+            directLibrary: "商丘直属库",
+            subTreasury: "宁陵粮油储备公司",
+            cfName: "1号仓",
+            keeper: "白端静",
+            lxfs: "13531314569",
+            lastScan: "2019-08-21 16:11:59",
+            cfState: "出库",
+          },
+          {
+            id: 12,
+            branchOffice: "中储粮河南分公司",
+            directLibrary: "商丘直属库",
+            subTreasury: "宁陵粮油储备公司",
+            cfName: "1号仓",
+            keeper: "白端静",
+            lxfs: "13531314569",
+            lastScan: "2019-08-21 16:11:59",
+            cfState: "出库",
+          },
+        ]);
+      }, 1000);
+    },
+    //新建字典
+    addDic() {
+      this.dicDialog=true;
+    },
+    //点击弹框确定按钮
+    defined(){
+     this.dicDialog=false;
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.nav {
+  color: #fff;
+  font-size: 14px;
+
+  background: #004a93;
 }
-</script>
+.searchRow {
+  display: flex;
+  justify-content: space-between;
+}
+// #dialogForm .el-form-item .el-form-item_label{
+//   color:#000;
+// }
+
+</style>

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

@@ -3,7 +3,7 @@
     <d2-container>
       <!-- <template slot="header">首页/硬件参数</template> -->
       <div class="main">
-       <div class="left">
+        <div class="left">
           <el-input placeholder="输入关键字进行过滤" v-model="filterText">
           </el-input>
 
@@ -17,115 +17,156 @@
             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 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_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"
-                placeholder="请输入"
-              ></el-input>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="el-icon-search" @click="search"
-                >查询</el-button
+              <el-form
+                :inline="true"
+                :model="formInline"
+                class="demo-form-inline"
+                id="formLabel"
               >
-            </el-form-item>
+                <el-form-item label="设备名称:">
+                  <el-input
+                    v-model="formInline.deviceName"
+                    placeholder="请输入"
+                  ></el-input>
+                </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-button
+                    type="primary"
+                    icon="el-icon-refresh-left"
+                    @click="reset"
+                    >重置</el-button
+                  >
+                </el-form-item>
+              </el-form>
+              <div class="addBtn">
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  @click="addTantou()"
+                  >新增激光探头</el-button
+                >
+              </div>
+              <el-table
+                :data="hardwareList"
+                border
+                style="width: 100%"
+                :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }"
               >
-            </el-form-item>
-          </el-form>
-          <div class="addBtn">
-            <el-button type="primary" icon="el-icon-plus" @click="addTantou"
-              >新增激光探头</el-button
-            >
-          </div>
-          <el-table :data="hardwareList" border style="width: 100%" :header-cell-style="{background:'#0064b9',color:'#c9f5fa'}">
-            <el-table-column
-              align="center"
-              label="序号"
-              type="index"
-              width="100px"
-              :index="indexMethod"
-              show-overflow-tooltip
-            ></el-table-column>
+                <el-table-column
+                  align="center"
+                  label="序号"
+                  type="index"
+                  width="100px"
+                  :index="indexMethod"
+                  show-overflow-tooltip
+                ></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="设备IP" align="center">
-            </el-table-column>
-            <el-table-column align="center" label="操作" width="180">
-              <template slot-scope="scope">
-                <el-button type="text" size="small" icon="el-icon-edit"
-                  >编辑</el-button
-                >
-                <el-button type="text" size="small" icon="el-icon-delete"
-                  >删除</el-button
+                <el-table-column
+                  prop="deviceName"
+                  label="设备名称"
+                  align="center"
                 >
-              </template>
-            </el-table-column>
-          </el-table>
-          </div>
+                </el-table-column>
+                <el-table-column prop="Port" label="设备编号" align="center">
+                </el-table-column>
+                <el-table-column prop="ipAdress" label="设备IP" align="center">
+                </el-table-column>
+                <el-table-column align="center" label="操作" width="180">
+                  <template slot-scope="scope">
+                    <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>
+              <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :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>
 
-
-
-
     <!-- //弹框 -->
-    <el-dialog title="新增探头" :visible.sync="dialogTantou">
-  <el-form :model="dialog">
-    <el-form-item label="设备名称:" :label-width="formLabelWidth">
-      <el-input v-model="dialog.name" autocomplete="off"></el-input>
-    </el-form-item>
-    <el-form-item label="设备IP:" :label-width="formLabelWidth">
-      <el-input v-model="dialog.name" autocomplete="off"></el-input>
-    </el-form-item>
-     <el-form-item label="设备编码:" :label-width="formLabelWidth">
-      <el-input v-model="dialog.name" autocomplete="off"></el-input>
-    </el-form-item>
-  </el-form>
-  <div slot="footer" class="dialog-footer">
-    <el-button @click="dialogTantou = false">取 消</el-button>
-    <el-button type="primary" @click="determine()">确 定</el-button>
-  </div>
-</el-dialog>
-
+    <el-dialog :title="title" :visible.sync="dialogTantou" id="dialogStyle">
+      <el-form :model="dialog">
+        <el-form-item label="设备名称:" :label-width="formLabelWidth">
+          <el-input v-model="dialog.deviceName" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="设备IP:" :label-width="formLabelWidth">
+          <el-input v-model="dialog.ipAdress" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="设备编码:" :label-width="formLabelWidth">
+          <el-input v-model="dialog.Port" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogTantou = false">取 消</el-button>
+        <el-button type="primary" @click="determine()">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
+import api from "@/api";
 export default {
   name: "hardwareParame",
   data() {
     return {
+      //初始化弹框标题
+      title: "",
+      //仓房id
+      houseId: "",
+      //设备名称
+      deviceName: "",
       // label宽度
-      formLabelWidth: '120px',
+      formLabelWidth: "120px",
       // 弹框默认关闭
-      dialogTantou:false,
+      dialogTantou: false,
       filterText: "",
       //默认展开的节点
       defaultProps: {
@@ -188,24 +229,32 @@ export default {
       //
 
       formInline: {
-        sbNames: "",
+        deviceNames: "",
       },
       //表格字段
       hardwareList: [
         {
-          directLibrary: "",
-          subTreasury: "",
-          cfName: "",
-          scanStart: "",
-          scanEnd: "",
-
-          cfState: "",
+          deviceName: "",
+          port: "",
+          ipAdress: "",
         },
       ],
       //弹框字段
-      dialog:{
-        name:""
-      }
+      dialog: {
+        deviceName: "",
+          port: "",
+          ipAdress: "",
+      },
+      //分页
+
+      pagination: {
+        //当前页数
+        curPage: 1,
+        //每页显示的条数
+        pageSize: 10,
+        //总条数
+        total: 0,
+      },
     };
   },
   watch: {
@@ -214,6 +263,34 @@ export default {
     },
   },
   methods: {
+    //获取列表数据
+    getList() {
+      var condition = {
+        houseId: 1,
+        deviceName: "",
+      };
+      condition = JSON.stringify(condition);
+      var data = {
+        pageIndex: this.pagination.curPage,
+        pageSize: this.pagination.pageSize,
+        condition: condition,
+      };
+      api
+        .hardParam(data)
+        .then((res) => {
+          if (res.code == 200) {
+            this.hardwareList = res.data.records;
+            this.pagination.pageSize = res.data.size;
+            this.pagination.total = res.data.total;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    //新增
+    addList(){},
+
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
@@ -222,16 +299,31 @@ export default {
     reset() {},
     //新增
     addTantou() {
-      this.dialogTantou=true;
+      this.title = "新增硬件参数";
+      this.dialogTantou = true;
     },
     //表格序号
     indexMethod(index) {
-      // return (
-      //   (this.pagination.curPage - 1) * this.pagination.pageSize + index + 1
-      // );
+      return (
+        (this.pagination.curPage - 1) * this.pagination.pageSize + index + 1
+      );
+    },
+    //当前页改变时
+    handleCurrentChange(val) {
+      this.pagination.curPage = val;
+      this.getList();
+    },
+    //每页显示的页数改变时
+    handleSizeChange(val) {
+      this.pagination.pageSize = val;
+      this.getList();
     },
     //弹框确定按钮
-    determine(){}
+    determine() {},
+  },
+  mounted() {
+    console.log("aaaa");
+    this.getList();
   },
 };
 </script>
@@ -242,22 +334,19 @@ export default {
   .left {
     width: 250px;
     height: 100%;
-   background: #163d79;
-
+    background: #163d79;
   }
- .right {
+  .right {
     margin-left: 20px;
-    width:calc(100% - 250px);
+    width: calc(100% - 250px);
     .nav {
       padding: 10px 0 10px 10px;
-      color:#FFF;
+      color: #fff;
+
+      font-size: 14px;
 
-      font-size:14px;
-  
       background: #004a93;
     }
- 
-
   }
   .addBtn {
     margin-bottom: 20px;

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

@@ -1,197 +1,204 @@
 <template>
   <div>
     <d2-container>
-      <template slot="header">
-        <div class="title">
-          <div class="titleLeft">首页/仓房详情</div>
-          <div>
-            <el-button
-              type="primary"
-              icon="el-icon-arrow-left"
-              @click="goBack()"
-              >返回</el-button
-            >
-          </div>
-        </div>
-      </template>
+      <!-- <template slot="header"
+        ><div class="nav">当前所在位置:首页>仓房信息</div></template
+      > -->
       <div class="main">
-        <div class="head">
-          <div class="backImg"></div>
-          <div>保管员信息</div>
-        </div>
-
-        <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="请选择">
-                <el-option
-                  v-for="item in nameList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="联系方式">
-              <el-input v-model="form.lxfs"></el-input>
-            </el-form-item>
-          </div>
-          <div class="head">
-            <div class="backImg"></div>
-            <div>仓房信息</div>
-          </div>
-          <div class="middle">
-            <el-form-item label="仓房状态">
-              <el-radio-group v-model="form.cfState">
-                <el-radio :label="0">入库</el-radio>
-                <el-radio :label="1">出库</el-radio>
-                <el-radio :label="2">库存</el-radio>
-                <el-radio :label="3">空仓</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="所属仓库:">
-                  <el-select v-model="form.warehouse" placeholder="请选择">
-                    <el-option label="区域一" value="shanghai"></el-option>
-                    <el-option label="区域二" value="beijing"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="仓房名称:">
-                  <el-input v-model="form.cfName"></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="仓房类型:">
-                  <el-select v-model="form.cfType" placeholder="请选择">
-                    <el-option label="区域一" value="shanghai"></el-option>
-                    <el-option label="区域二" value="beijing"></el-option>
+        <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">
+            <div class="head">
+              <div class="backImg"></div>
+              <div>保管员信息</div>
+            </div>
+            <el-form :inline="true" :model="form" class="demo-form-inline">
+              <div class="middle">
+                <el-form-item label="姓名:">
+                  <el-select v-model="form.name" placeholder="请选择">
+                    <el-option
+                      v-for="item in nameList"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
+                    </el-option>
                   </el-select>
                 </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="创建时间:">
-                  <el-input v-model="form.creatTime"></el-input>
+                <el-form-item label="联系方式:">
+                  <el-input v-model="form.lxfs"></el-input>
                 </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="装粮线高度:">
-                  <el-input v-model="form.sjcr">
-                    <template slot="append">米</template>
-                  </el-input>
+              </div>
+              <div class="head">
+                <div class="backImg"></div>
+                <div>仓房信息</div>
+              </div>
+              <div class="middle">
+                <el-form-item label="仓房状态">
+                  <el-radio-group v-model="form.cfState">
+                    <el-radio :label="0">入库</el-radio>
+                    <el-radio :label="1">出库</el-radio>
+                    <el-radio :label="2">库存</el-radio>
+                    <el-radio :label="3">空仓</el-radio>
+                  </el-radio-group>
                 </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="设计仓容:">
-                  <el-input v-model="form.sjcr">
-                    <template slot="append">吨</template>
-                  </el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="长:">
-                  <el-input v-model="form.sjcr">
-                    <template slot="append">米</template>
-                  </el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="宽:">
-                  <el-input v-model="form.sjcr">
-                    <template slot="append">米</template>
-                  </el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="所属仓库:">
+                      <el-select v-model="form.warehouse" placeholder="请选择">
+                        <el-option label="区域一" value="shanghai"></el-option>
+                        <el-option label="区域二" value="beijing"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="仓房名称:">
+                      <el-input v-model="form.cfName"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="仓房类型:">
+                      <el-select v-model="form.cfType" placeholder="请选择">
+                        <el-option label="区域一" value="shanghai"></el-option>
+                        <el-option label="区域二" value="beijing"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="创建时间:">
+                      <el-input v-model="form.creatTime"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="装粮线高度:">
+                      <el-input v-model="form.sjcr">
+                        <template slot="append">米</template>
+                      </el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="设计仓容:">
+                      <el-input v-model="form.sjcr">
+                        <template slot="append">吨</template>
+                      </el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="长:">
+                      <el-input v-model="form.sjcr">
+                        <template slot="append">米</template>
+                      </el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="宽:">
+                      <el-input v-model="form.sjcr">
+                        <template slot="append">米</template>
+                      </el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
 
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="仓内体积:">
-                  <el-input v-model="form.sjcr">
-                    <template slot="append">立方米</template>
-                  </el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="最近一次修改时间:">
-                  <el-input v-model="form.sjcr"> </el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </div>
-        </el-form>
-        <div class="bottom">
-          <div class="bottomHead">
-            <div class="backImg"></div>
-            <div>粮食信息</div>
-          </div>
-          <div>
-            <el-button type="primary" icon="el-icon-plus" @click="add()">添加</el-button>
-          </div>
-        </div>
-        <el-table :data="lsxxList" border style="width: 100%; margin-top: 10px">
-          <el-table-column prop="varieties" label="品种" align="center">
-            <template slot-scope="scope">
-              <el-select
-                v-model="scope.row.varieties"
-                placeholder="请选择"
-              >
-                <el-option label="小麦" value="xiaomai"></el-option>
-                <el-option label="大豆" value="dadou"></el-option>
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="仓内体积:">
+                      <el-input v-model="form.sjcr">
+                        <template slot="append">立方米</template>
+                      </el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="最近一次修改时间:">
+                      <el-input v-model="form.sjcr"> </el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-form>
+            <div class="bottom">
+              <div class="bottomHead">
+                <div class="backImg"></div>
+                <div>粮食信息</div>
+              </div>
+              <div>
+                <el-button type="primary" icon="el-icon-plus" @click="add()"
+                  >添加</el-button
+                >
+              </div>
+            </div>
+            <el-table
+            id="table"
+              :data="lsxxList"
+              border
+              style="width: 100%; margin-top: 10px"
+              :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }"
+            >
+              <el-table-column prop="varieties" label="品种" align="center">
+                <template slot-scope="scope">
+                  <el-select v-model="scope.row.varieties" placeholder="请选择" class="tableInput">
+                    <el-option label="小麦" value="xiaomai"></el-option>
+                    <el-option label="大豆" value="dadou"></el-option>
 
-                <el-option label="粳稻" value="jingdao"></el-option>
-                <el-option label="籼稻" value="xiandao"></el-option>
-                <el-option label="玉米" value="yumi"></el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="cnlsrz"
-            label="仓内粮食容重（公斤/立方米)"
-            align="center"
-          >
-          <template slot-scope="scope">
-              <el-input v-model="scope.row.cnlsrz" placeholder="请输入"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column prop="grade" label="等级" align="center">
-                 <template slot-scope="scope">
-              <el-select
-                v-model="scope.row.grade"
-                placeholder="请选择"
+                    <el-option label="粳稻" value="jingdao"></el-option>
+                    <el-option label="籼稻" value="xiandao"></el-option>
+                    <el-option label="玉米" value="yumi"></el-option>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="cnlsrz"
+                label="仓内粮食容重（公斤/立方米)"
+                align="center"
               >
-                <el-option label="一等" value="first"></el-option>
-                <el-option label="二等" value="second"></el-option>
+                <template slot-scope="scope">
+                  <el-input
+                    v-model="scope.row.cnlsrz"
+                    placeholder="请输入"
+                    class="tableInput"
+                  ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="grade" label="等级" align="center">
+                <template slot-scope="scope">
+                  <el-select v-model="scope.row.grade" placeholder="请选择" class="tableInput">
+                    <el-option label="一等" value="first"></el-option>
+                    <el-option label="二等" value="second"></el-option>
 
-                <el-option label="三等" value="third"></el-option>
-                <el-option label="四等" value="fourth"></el-option>
-                <el-option label="五等" value="fifth"></el-option>
-                <el-option label="等外" value="other"></el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column prop="rksj" label="首次入库时间" align="center">
-          </el-table-column>
-          <el-table-column align="center" label="操作">
-            <template slot-scope="scope">
-              <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>
+                    <el-option label="三等" value="third"></el-option>
+                    <el-option label="四等" value="fourth"></el-option>
+                    <el-option label="五等" value="fifth"></el-option>
+                    <el-option label="等外" value="other"></el-option>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column prop="rksj" label="首次入库时间" align="center">
+              </el-table-column>
+              <el-table-column align="center" label="操作">
+                <template slot-scope="scope">
+                  <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>
+          </div>
+        </div>
       </div>
     </d2-container>
   </div>
@@ -217,32 +224,25 @@ export default {
         lxfs: "",
       },
       //粮食信息表格列表
-      lsxxList:[
-          {
-              varieties:"",
-              cnlsrz:"",
-              grade:"",
-              rksj:""
-
-          }
-      ]
-
+      lsxxList: [
+        {
+          varieties: "",
+          cnlsrz: "",
+          grade: "",
+          rksj: "",
+        },
+      ],
     };
   },
   methods: {
-      //返回按钮
+    //返回按钮
     goBack() {
       window.history.go(-1);
     },
     //粮食信息添加
-    add(){
-        this.lsxxList.push(
-            {varieties:"",
-              cnlsrz:"",
-              grade:"",
-              rksj:""}
-              )
-    }
+    add() {
+      this.lsxxList.push({ varieties: "", cnlsrz: "", grade: "", rksj: "" });
+    },
   },
 };
 </script>
@@ -255,7 +255,7 @@ export default {
   }
 }
 .main {
-  color: #fff;
+color: #9bbbe3;
   .head,
   .bottomHead {
     height: 25px;
@@ -264,9 +264,10 @@ export default {
     display: flex;
 
     .backImg {
-      width: 10px;
-      height: 20px;
-      background: blue;
+      width: 5px;
+      height: 15px;
+      background: rgb(59, 103, 213);
+      border-radius:3px;
       margin-right: 10px;
     }
   }
@@ -280,14 +281,29 @@ export default {
     display: flex;
     justify-content: space-between;
   }
-  ::v-deep .el-form--inline .el-form-item__label{
-      width:130px;
-      }
- 
+  ::v-deep .el-form--inline .el-form-item__label {
+    width: 130px;
+    color: #9bbbe3;
+  }
+  .el-select,
+  .el-input {
+    width:300px;
+  }
+  ::v-deep .el-input__inner{
+    background:#1d3b6b;
+    border:1px solid #345684;
+    opacity: 12.5;
+  }
+   ::v-deep .el-input-group__append{
+     background:#1d3b6b;
+    border:1px solid #345684;
+    opacity: 12.5;
+  }
+ #table .tableInput{
+    width: 100%;
+   
+  }
+
+
 }
-</style>
-<style >
-/* .el-form--inline .el-form-item__label{
-       width:130px; 
-  } */
-</style>
+</style>

vue.config.js

@@ -38,7 +38,17 @@ module.exports = {
   lintOnSave: true,
   devServer: {
     publicPath, // 和 publicPath 保持一致
-    disableHostCheck: process.env.NODE_ENV === 'development' // 关闭 host check，方便使用 ngrok 之类的内网转发工具
+    disableHostCheck: process.env.NODE_ENV === 'development', // 关闭 host check，方便使用 ngrok 之类的内网转发工具
+    proxy: {
+      '/api': {
+        target: ' http://101.36.160.140:21023',
+        ws: true,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    }
   },
   css: {
     loaderOptions: {