diff --git a/warehousing-system/project_web/src/assets/images/notAvailable.jpg b/warehousing-system/project_web/src/assets/images/notAvailable.jpg
new file mode 100644
index 00000000..83807742
Binary files /dev/null and b/warehousing-system/project_web/src/assets/images/notAvailable.jpg differ
diff --git a/warehousing-system/project_web/src/components/Home.vue b/warehousing-system/project_web/src/components/Home.vue
index f36ff684..d8879312 100644
--- a/warehousing-system/project_web/src/components/Home.vue
+++ b/warehousing-system/project_web/src/components/Home.vue
@@ -209,7 +209,7 @@ export default {
 }
 
 .el-main {
-  background-color: #eeeeee;
+  background-color: #fff;
   display: block;
   flex: 1;
   flex-basis: auto;
diff --git a/warehousing-system/project_web/src/components/initial_value/storehouse.vue b/warehousing-system/project_web/src/components/initial_value/storehouse.vue
index 1087f37b..7c810914 100644
--- a/warehousing-system/project_web/src/components/initial_value/storehouse.vue
+++ b/warehousing-system/project_web/src/components/initial_value/storehouse.vue
@@ -271,7 +271,7 @@
         </el-row>
         <el-row>
           <el-col :span="4" class="trightbs">
-            <el-form-item class="trightbs_item"><span slot="label">库房面积：</span></el-form-item>
+            <el-form-item class="trightbs_item"><span slot="label">库房面积(m<sup>2</sup>)：</span></el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item class="trightbs_item"
diff --git a/warehousing-system/project_web/src/components/pictureList/pictureList.vue b/warehousing-system/project_web/src/components/pictureList/pictureList.vue
index ac9a6a9c..9cc3fa1f 100644
--- a/warehousing-system/project_web/src/components/pictureList/pictureList.vue
+++ b/warehousing-system/project_web/src/components/pictureList/pictureList.vue
@@ -1,1092 +1,207 @@
 <template>
-    <div>
-      <el-card class="box-card">
-        <el-row :gutter="20">
-          <el-col :span="9">
-            <el-input
-              clearable
-              v-model="queryInfo.query"
-              placeholder="请输入仓库名"
-              prefix-icon="el-icon-search"
-            >
-              <el-button
-                slot="append"
-                icon="el-icon-search"
-                @click="getStorehouseList"
-              ></el-button>
-            </el-input>
-          </el-col>
-          <el-col :span="4">
-            <el-button type="primary" @click="addStorehouseDialog"
-              >新增</el-button
-            >
-          </el-col>
-        </el-row>
-        <div class="main-content">
-        <el-table :data="storehouseList" style="width: 100%" border >
-          <el-table-column
-            label="序号"
-            type="index"
-            width="60"
-            :index="indexMethod"
-            align="center"
-          />
-          <el-table-column prop="custerName" label="客户名称"   width="240" align="center">
-          </el-table-column>
-          <el-table-column prop="name" label="仓库名称" align="center">
-          </el-table-column>
-          <el-table-column
-            prop="simpleName"
-            label="仓库简称"
-            width="100"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column prop="code" label="仓库编码" align="center">
-          </el-table-column>
-          <el-table-column
-            label="所属地(省 - 市 - 县)"
-            width="200"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <span>{{ scope.row.provinceName }}</span>
-              <span>-{{ scope.row.cityName }}-</span>
-              <span>{{ scope.row.countyName }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            fixed="right"
-            prop="operate"
-            label="操作"
-            align="center"
-            width="300"
-          >
-            <template slot-scope="scope">
-              <el-button
-                type="primary"
-                icon="el-icon-zoom-in"
-                size="small"
-                @click="LookStorehousedialog(scope.row)"
-                >查看详情</el-button
-              >
-              <el-button
-                type="primary"
-                icon="el-icon-edit"
-                size="small"
-                @click="updataStorehousedialog(scope.row)"
-                >修改</el-button
-              >
-              <el-button
-                type="danger"
-                icon="el-icon-delete"
-                size="small"
-                @click="deleteStorehouse(scope.row)"
-                >删除</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="pages">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="queryInfo.current"
-          :page-sizes="[10, 20, 30, 40]"
-          :page-size="queryInfo.size"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
+  <div class="warehouse">
+    <div v-show="viewState == 1">
+      <div class="warehouseSurface">
+        <p style="margin-left: 8px">仓库信息表</p>
       </div>
-      </el-card>
-  
-      <el-dialog
-        :title="title"
-        :visible.sync="storehouseDialogVisible"
-        width="75%"
-      >
-        <el-form
-          :model="form"
-          :rules="rules"
-          ref="dataForm"
-          label-position="top" label-width="190px"
-          class="formadd"
+      <div class="main-content">
+        <div
+          class="pictureList"
+          v-for="(item, i) of storehouseList"
+          :key="i"
+          @click="LookStorehousedialog(item.sid)"
         >
-        <div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px">
-              <div style="margin-left: 15px;">主体信息</div>
+          <div class="images">
+            <img v-if="item.picUrl" :src="item.picUrl" alt="" />
+            <img v-else src="../../assets/images/notAvailable.jpg" alt="" />
           </div>
-          <el-row>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item">
-                  <span slot="label">客户名称：</span>
-                </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item">
-                <el-select
-                  v-model="form.custerName"
-                  placeholder="请选择"
-                >
-                  <el-option
-                    v-for="(custName,i) in custList"
-                    :key="i"
-                    :label="custName.enterpriseName"
-                    :value="custName.enterpriseName"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-  
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">仓库名称：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item">
-                <el-input
-                  v-model="form.name"
-                  placeholder="仓库名称"
-                  class="addinputw"
-                  clearable
-              />
-              </el-form-item>
-            </el-col>
-            </el-row>
-            
-            <el-row>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">仓库简称：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item"
-                ><el-input
-                  v-model="form.simpleName"
-                  placeholder="仓库简称"
-                  class="addinputw"
-                  clearable
-              /></el-form-item>
-            </el-col>
-  
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">仓库编码：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item"
-                ><el-input
-                  v-model="form.code"
-                  placeholder="仓库编码"
-                  class="addinputw"
-                  clearable
-              /></el-form-item>
-            </el-col>
-          </el-row>
-  
-          <el-row>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">仓库经纬度：</span></el-form-item>
-            </el-col>
-            <el-col :span="20">
-              <el-form-item class="trightbs_item"  
-                ><el-input
-                  id="lngAndLat"
-                  @blur="isLngAndLat"
-                  v-model="jingweidu"
-                  placeholder="经纬度坐标"
-                  class="addinputw"
-                  clearable
-              /></el-form-item>
-            </el-col>
-          </el-row>
-  
-          <el-row>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">所属地：</span></el-form-item>
-            </el-col>
-          <el-col :span="20">
-            <el-form-item class="trightbs_item">
-              <el-select
-                class="arriveClass"
-                v-model="form.provinceName"
-                placeholder="请选择省"
-                @change="provinceChange($event)"
-              >
-                <el-option
-                  v-for="(item, index) in provinceList"
-                  :key="index"
-                  :label="item.name"
-                  :value="item.name"
-                >
-                </el-option>
-              </el-select>
-  
-              <el-select
-                class="arriveClass"
-                v-model="form.cityName"
-                placeholder="请选择市"
-                :disabled="changeCity"
-                @change="cityChange($event)"
-              >
-                <el-option
-                  v-for="(item, index) in cityList"
-                  :key="index"
-                  :label="item.name"
-                  :value="item.name"
-                >
-                </el-option>
-              </el-select>
-  
-              <el-select
-                class="arriveClass"
-                v-model="form.countyName"
-                :disabled="changeCounty"
-                placeholder="请选择区县"
-              >
-                <el-option
-                  v-for="(item, index) in countyList"
-                  :key="index"
-                  :label="item.name"
-                  :value="item.name"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          </el-row>
-  
-          <el-row>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">详细地址：</span></el-form-item>
-            </el-col>
-            <el-col :span="20">
-              <el-form-item class="trightbs_item"
-                ><el-input
-                  v-model="form.address"
-                  placeholder="详细地址"
-                  class="addinputw"
-                  clearable
-              /></el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">库房面积：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item"
-                ><el-input
-                  v-model="form.acreage"
-                  placeholder="库房面积"
-                  class="addinputw"
-                  clearable
-              /></el-form-item>
-            </el-col>
-  
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">库房高度：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item"
-                ><el-input
-                  v-model="form.storeyHeight"
-                  placeholder="库房高度"
-                  class="addinputw"
-                  clearable
-              /></el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">月租金：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item"
-                ><el-input
-                  v-model="form.monthlyPrice"
-                  placeholder="月租金"
-                  class="addinputw"
-                  clearable
-              /></el-form-item>
-            </el-col>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">库房性质名称：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item">
-                <el-input
-                  v-model="form.attributeNames"
-                  placeholder="库房性质名称"
-                  class="addinputw"
-                  clearable
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-  
-          <el-row>
-  
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">房源信息：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item"
-                ><el-input
-                  v-model="form.housingResource"
-                  placeholder="房源"
-                  class="addinputw"
-                  clearable
-              /></el-form-item>
-            </el-col>
-  
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">联系人姓名：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item"
-                ><el-input
-                  v-model="form.linkerName"
-                  placeholder="联系人姓名"
-                  class="addinputw"
-                  clearable
-              /></el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">联系人电话：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item"  
-                ><el-input
-                  v-model="form.linkerPhone"
-                  placeholder="联系人电话"
-                  class="addinputw"
-                  clearable
-                  style="position:relative; top:50px;"
-              /></el-form-item>
-            </el-col>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">仓库图片：</span></el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item class="trightbs_item">
-                <uploadTwo class="item_input" ref="uploadImg" @passfunction = "meetfunction" :imgUrl="imagesg" v-model="imgPrl" @change="backData" bucket="map"
-              :upload-data="{ type: '0001' }"
-              ></uploadTwo>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="4" class="trightbs">
-              <el-form-item class="trightbs_item"><span slot="label">仓库详细图片：</span></el-form-item>
-            </el-col>
-            <el-col :span="20">
-              <el-form-item class="trightbs_item">
-                <upload class="item_input" ref="uploadImg" :minet-list="msg" v-model="imgList" @change="backDatas" bucket="map"
-              :upload-data="{ type: '0001' }"></upload>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-  
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="storehouseDialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="operationStorehouse">确 定</el-button>
+          <div class="warehouseName">
+            <h2>{{ item.name }}</h2>
+            <p>
+              {{ item.simpleName }}<span>|</span> {{ item.provinceName
+              }}<span>-</span>{{ item.cityName }}{{ item.countyName }}
+              <span>|</span> {{ item.acreage }}m<sup>2</sup>
+            </p>
+            <div class="attributeNames">{{ item.attributeNames }}</div>
+            <div class="iconName">
+              <i class="el-icon-user"></i>{{ item.linkerName }}
+            </div>
+          </div>
+          <div class="housingResource">{{ item.housingResource }}</div>
+          <div class="monthlyPrice">{{ item.monthlyPrice }}万/月</div>
         </div>
-      </el-dialog>
-      <el-dialog
-        title="仓库详细信息"
-        :visible.sync="addPurchaseDialogVisible"
-        width="75%"
-      >
-        <div class="listconadd">
-          <el-form
-            ref="dataForm"
-            :model="temp"
-            label-position="top"
-            label-width="190px"
-            class="formadd"
+        <div class="pages">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="queryInfo.current"
+            :page-sizes="[10, 15]"
+            :page-size="queryInfo.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
           >
-            <div
-              class="title"
-              style="
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                height: 40px;
-              "
-            >
-              <div style="margin-left: 15px">基本信息</div>
-            </div>
-            <el-row>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">客户名称</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.custerName }}</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">仓库名称</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.name }}</span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">仓库简称</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.simpleName }}</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">仓库编码</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.code }}</span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">联系人</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.linkerName }}</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">联系电话</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.linkerPhone }}</span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">省-市-县</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span
-                    >{{ temp.provinceName }} - {{ temp.cityName }} -
-                    {{ temp.countyName }}</span
-                  >
-                </el-form-item>
-              </el-col>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">区域名称</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.regionName }}</span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">详细地址</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="20">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.address }}</span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-  
-            <el-row>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">仓库经纬度</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.lon }},{{ temp.lat }}</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">房源</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.housingResource }}</span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-  
-            <el-row>
-  
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">库房面积</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.acreage }}</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">库房高度</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.storeyHeight }}</span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-  
-            <el-row>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">月租金</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.monthlyPrice }}</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="4" class="trightbs">
-                <el-form-item class="trightbs_item">
-                  <span slot="label">库房性质名称</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="trightbs_item">
-                  <span>{{ temp.attributeNames }}</span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
+          </el-pagination>
         </div>
-      </el-dialog>
+      </div>
     </div>
-  </template>
+    <Particulars
+      v-show="viewState == 2"
+      ref="divShow"
+      @doback="resetState"
+      @reloadlist="getStorehouseList"
+    />
+  </div>
+</template>
   
   <script>
-  import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue'
-  import uploadTwo from '@/components/uploadFile/uploadTwo.vue'
-  export default {
-    components: {
-        upload,
-        uploadTwo
-      },
-    data() {
-      return {
-        queryInfo: {
-          total: 0,
-          size: 10,
-          current: 1,
-          params: {},
-        },
+import Particulars from "./pictureParticulars";
+export default {
+  components: {
+    Particulars,
+  },
+  data() {
+    return {
+      viewState: 1,
+      queryInfo: {
         total: 0,
-        changeCity: true,
-        changeCounty: true,
-        storehouseList: [],
-        storehouseListss: [],
-        storeList: [],
-        provinceList: [],
-        cityList: [],
-        countyList: [],
-        updateAction:
-          "http://jianguan.yyundong.com/warehouseapi/v1/shstorehouse/upload",
-        storehouseDialogVisible: false,
-        addPurchaseDialogVisible: false,
-        // myHeaders: { Access-Control-Allow-Origin},
-        title: "新增仓库",
-        storehouseForm: {
-          name: "",
-          simpleName: "",
-          addr: "",
-          remarks: "",
-        },
-        rules: {
-          name: [{ required: true, message: "请输入仓库名称", trigger: "blur" }],
-          simpleName: [
-            { required: true, message: "请输入仓库简称", trigger: "blur" },
-          ],
-          address: [{ required: true, message: "请输入仓库地址", trigger: "blur" }],
-        },
-        tableData: [],
-        fileList: [],
-        totalPrice: 0,
-        form: {
-          name: "",
-          custerName: "",
-          provinceName: "",
-          cityName: "",
-          simpleName: "",
-          code: "",
-          countyName: "",
-          address: "",
-          acreage: "",
-          storeyHeight: "",
-          monthlyPrice: "",
-          attributeNames: "",
-          attributeCodes: "",
-          housingResource: "",
-          linkerName: "",
-          linkerPhone: "",
-          picUrl: '',
-          lon: "",
-          lat: "",
-          pics:[]
-        },
-        CITY: [],
-        XIAN: [],
-        imgList: [],
-        imgPrl: [],
-        temp: {},
-        custList: [],
-        mapApiKey: "map",
-        shouhuoArrive: {},
-        fullscreenloading: null,
-        msg: [],
-        imagesg:[],
-        meetfunctions:[],
-        jingweidu:''
-      };
+        size: 10,
+        current: 1,
+        params: {},
+      },
+      total: 0,
+      title: "新增仓库",
+      storehouseList: [],
+    };
+  },
+  mounted() {
+    this.getStorehouseList();
+  },
+  methods: {
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.queryInfo.current - 1) * this.queryInfo.size;
+      var pageindex = index + 1 + pagestart;
+      return pageindex;
     },
-     watch: {
-        imgList:{
-          deep: true,
-          immediate: true,
-          handler(newVal, oldVal) {
-            const aa=[]
-            for (var i = 0; i < newVal.length; i++) {
-              aa.push(newVal[i].sid)
-            }
-             this.form.pics = aa
-          }
-       },
-       },
-    methods: {
-      // 序号
-      indexMethod(index) {
-        var pagestart = (this.queryInfo.current - 1) * this.queryInfo.size;
-        var pageindex = index + 1 + pagestart;
-        return pageindex;
-      },
-      handleSizeChange(val) {
-        this.queryInfo.size = val;
-        this.getStorehouseList();
-      },
-      handleCurrentChange(val) {
-        this.queryInfo.current = val;
-        this.getStorehouseList();
-      },
-      clearList() {
-        this.form = {
-          name: "",
-          custerName: "",
-          provinceName: "",
-          cityName: "",
-          simpleName: "",
-          code: "",
-          countyName: "",
-          address: "",
-          acreage: "",
-          storeyHeight: "",
-          monthlyPrice: "",
-          attributeNames: "",
-          attributeCodes: "",
-          housingResource: "",
-          linkerName: "",
-          linkerPhone: "",
-          picUrl: '',
-          lon: "",
-          lat: "",
-          pics:[]
-        };
-      },
-      async getStorehouseList() {
-        const { data: result } = await this.$http.post(
-          "/v1/shstorehouse/listPage",
-          { params: this.queryInfo }
-        );
-        if (result.code == 200) this.total = result.data.total;
-        this.storehouseList = result.data.records;
-      },
-      addStorehouseDialog() {
-        this.claerArrList()
-        this.title = "新增仓库";
-        this.storehouseDialogVisible = true;
-      },
-      async getcustListList () {
-        const { data: result } = await this.$http.get('/v1/shstorehouse/fetchEntList')
-        if (result.code == 200){
-          this.custList = result.data
-        }
-      },
-      async updataStorehousedialog(storehouse) {
-        this.claerArrList()
-        this.title = "修改仓库";
-        this.storehouseDialogVisible = true;
-        const { data: result } = await this.$http.get(
-          `/v1/shstorehouse/fetchDetailsBySid/${storehouse.sid}`
-        );
-        this.jingweidu=result.data.lon+','+result.data.lat
-        if (result.code == 200) {
-          this.form = result.data;
-          let value=result.data.pics
-          const picImg=result.data.picUrl
-          this.imagesg.push({
-            url:picImg
-          })
-          for(let i=0;i<value.length;i++){
-            this.msg.push(value[i])
-          }
+    handleSizeChange(val) {
+      this.queryInfo.size = val;
+      this.getStorehouseList();
+    },
+    handleCurrentChange(val) {
+      this.queryInfo.current = val;
+      this.getStorehouseList();
+    },
+
+    async getStorehouseList() {
+      const { data: result } = await this.$http.post(
+        "/v1/shstorehouse/listPage",
+        { params: this.queryInfo }
+      );
+      if (result.code == 200) this.total = result.data.total;
+      this.storehouseList = result.data.records;
+    },
+    async LookStorehousedialog(sid) {
+      const _this = this;
+      const { data: result } = await this.$http.get(
+        `/v1/shstorehouse/fetchDetailsBySid/${sid}`
+      );
+      if (result.code == 200) {
+        this.$refs['divShow'].showPicture(result.data)
       }
+      this.viewState = 2;
     },
-    claerArrList(){
-       this.clearList()
-        this.imgList=[]
-        this.msg=[]
-        this.imgPrl=[]
-        this.imagesg=[]
+    resetState() {
+      this.viewState = 1;
     },
-      async addStorehouse() {
-        const { data: result } = await this.$http.post(
-          "/v1/shstorehouse/save",
-          this.form
-        );
-        if (result.code == 200) this.$message.success("成功添加仓库");
-        this.getStorehouseList();
-        this.storehouseDialogVisible = false;
-        this.claerArrList()
-      },
-      async updataStorehouse() {
-        const { data: result } = await this.$http.post(
-          "/v1/shstorehouse/save",
-          this.form
-        );
-        if (result.code == 200) this.$message.success("更新成功");
-        this.getStorehouseList();
-        this.storehouseDialogVisible = false;
-        this.claerArrList()
-      },
-      operationStorehouse() {
-        if (this.title === "新增仓库") return this.addStorehouse();
-        if (this.title === "修改仓库") {
-          this.updataStorehouse();
-        }
-      },
-      async deleteStorehouse(storehouse) {
-        const sids = [];
-        sids.push(storehouse.sid);
-        const result = await this.$confirm(
-          "此操作将永久删除" + storehouse.name + ", 是否继续?",
-          "提示",
-          {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-          }
-        ).catch((error) => error);
-        if (result !== "confirm") return this.$message.info("用户取消操作");
-        const { data: resultDB } = await this.$http.post(
-          "/v1/shstorehouse/delBySids",
-          sids
-        );
-        if (resultDB.code == 200) this.getStorehouseList();
-        this.$message.success("仓库删除成功");
-      },
-      getMap() {
-        this.$http({
-          method: "get",
-          url: "https://restapi.amap.com/v3/config/district?parameters", // apii请求地址
-          params: {
-            // 携带的参数
-            key: "3a708a4ef5e3af28694b1c861985a5ce", // 在高德开放平台申请的个人key密钥
-            keyWords: "中国",
-            subdistrict: 3, // 要获取的行政区划的级别：省、市、县三级
-          },
-        }).then((res) => {
-          this.provinceList = res.data.districts[0].districts; /* 省*/
-          console.log(res);
-          /* 进行遍历赋值*/
-          /* 市区和县区*/
-          let newProvince = this.provinceList;
-          for (let i = 0; i < newProvince.length; i++) {
-            /* 省级*/
-            for (let j = 0; j < newProvince[i].districts.length; j++) {
-              /* 市级*/
-              let city = newProvince[i].districts[j].name;
-              this.CITY.push({ id: j + 1, name: city, code: i + 1 });
-              for (
-                let k = 0;
-                k < newProvince[i].districts[j].districts.length;
-                k++
-              ) {
-                /* 县级*/
-                let xian = newProvince[i].districts[j].districts[k].name;
-                this.XIAN.push({
-                  id: k + 1,
-                  name: xian,
-                  code: j + 1,
-                  cityCountyName: city,
-                });
-              }
-            }
-          }
-          for (let m = 0; m < newProvince.length; m++) {
-            newProvince[m] = { ...newProvince[m], ...{ code: m + 1 } };
-          }
-          this.provinceList = newProvince;
-        });
-      },
-      provinceChange(that) {
-        // 根据选中省，匹配市
-        this.form.cityName = "";
-        this.form.countyName = "";
-        if (this.form.cityName === "" || this.form.countyName === "") {
-          this.changeCounty = true;
+  },
+};
+</script>
+  
+<style scoped lang="less">
+.warehouse {
+  margin-top: 30px;
+  background-color: #fff;
+  .warehouseSurface {
+    width: 100%;
+    height: 40px;
+    background-color: #edf1f7;
+    margin: 0 auto;
+    line-height: 40px;
+  }
+  .main-content {
+    margin-top: 10px;
+    .pictureList {
+      width: 95%;
+      height: 160px;
+      margin: 0 auto;
+      position: relative;
+      padding: 10px 0;
+      .images {
+        height: 140px;
+        width: 160px;
+        position: absolute;
+        top: 20px;
+        left: 0;
+        img {
+          height: 100%;
+          width: 100%;
         }
-        let cityCode = 0;
-        let newCityArry = [];
-        this.provinceList.forEach((item, index) => {
-          if (item.name == that) {
-            cityCode = item.code;
-          }
-        });
-        // console.log(cityCode)
-        if (cityCode) {
-          this.cityList = [];
-          this.CITY.forEach((item, index) => {
-            if (item.code == cityCode) {
-              this.cityList.push(item);
-              this.changeCity = false;
-            }
-          }); /* 市匹配成功*/
+      }
+      .warehouseName {
+        position: absolute;
+        top: 20px;
+        left: 180px;
+        position: relative;
+        h2 {
+          position: absolute;
+          top: -30px;
         }
-      },
-      cityChange(that) {
-        this.form.countyName = "";
-        let countyCode = 0;
-        let cityname = "";
-        let newCountyArry = [];
-        this.cityList.forEach((item, index) => {
-          if (item.name == that) {
-            countyCode = item.id;
-            cityname = item.name;
+        p {
+          position: absolute;
+          top: 16px;
+          span {
+            margin: 0 5px;
           }
-        });
-        if (countyCode) {
-          this.countyList = [];
-          this.XIAN.forEach((item, index) => {
-            if (item.code == countyCode && item.cityCountyName == cityname) {
-              this.countyList.push(item);
-              this.changeCounty = false;
-            }
-          });
         }
-      },
-      async LookStorehousedialog(purchase) {
-        this.addPurchaseDialogVisible = true;
-        const _this = this;
-        const { data: result } = await this.$http.get(
-          `/v1/shstorehouse/fetchDetailsBySid/${purchase.sid}`
-        );
-        if (result.code == 200) {
-          _this.temp = result.data;
+        .attributeNames {
+          position: absolute;
+          min-width: 80px;
+          height: 25px;
+          background-color: #eeeeee;
+          top: 75px;
+          text-align: center;
+          line-height: 25px;
+          border-radius: 90px;
+          border: 1px solid #d8dcde;
         }
-      },
-      backDatas(value) {
-          const aa = []
-          if (value.length > 0 && value != null && value != undefined) {
-            for (var i = 0; i < value.length; i++) {
-              aa.push(value[i].sid)
-            }
+        .iconName {
+          position: absolute;
+          top: 110px;
+          i {
+            color: #d8dcde;
+            margin-right: 5px;
           }
-          this.form.pics = aa
-  
-        },
-      backData(value) {
-          this.form.picUrl = value[0].response.data
-      },
-      meetfunction(val){
-        if(val.length==0){
-          this.form.picUrl=''
-          // this.imgPrl=[]
         }
-      },
-       isLngAndLat() {
-          var index = document.getElementById("lngAndLat").value;
-          var array = index.split(",");
-          if (array[0] == undefined || array[1] == undefined){
-            this.$confirm(
-            "请输入经度和纬度，经纬度用','隔开!",
-            "提示",
-            {
-            showCancelButton:false,
-             confirmButtonText: "确定",
-             type: "warning",
-            }
-           ).catch((error) => error);
-              return false;
-          }
-          var longreg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
-          if(!longreg.test(array[0])){
-            this.$confirm(
-            "经度整数部分为0-180,小数部分为0到6位!",
-            "提示",
-            {
-            showCancelButton:false,
-             confirmButtonText: "确定",
-             type: "warning",
-            }
-           ).catch((error) => error);
-              return false;
-          }
-          //纬度,整数部分为0-90小数部分为0到6位
-          var latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
-          if(!latreg.test(array[1])) {
-            this.$confirm(
-            "纬度整数部分为0-90,小数部分为0到6位!",
-            "提示",
-            {
-            showCancelButton:false,
-             confirmButtonText: "确定",
-             type: "warning",
-            }
-           ).catch((error) => error);
-          }
-          if(array!=undefined){
-            this.form.lon=array[0]
-            this.form.lat=array[1]
-          }
       }
-    },
-    mounted() {
-      this.getStorehouseList();
-      this.getcustListList();
-      // this.getStoreList()
-      this.getMap();
-    },
-  };
-  </script>
-  
-  <style scoped>
-  /deep/ .el-collapse-item__header {
-    height: 40px;
-    font-weight: bold;
-    font-size: 16px;
-    text-align: left;
-    color: #ffffff;
-    background-color: #0294d7;
-  }
-  
-  /deep/ .el-collapse-item__content {
-    padding-bottom: 0;
-  }
-  .tleftb {
-    text-align: right;
-    font-size: 14px;
-    color: #606266;
-    line-height: 40px !important;
-  }
-  .trightb {
-    /* text-align: right; */
-    font-weight: bold;
-    color: #606266;
-  }
-  .tleft {
-    text-align: left;
-  }
-  .arriveClass {
-    margin-right: 30px;
-  }
-  .icon {
-    color: rgba(255, 0, 0, 0.553);
-    margin-right: 3px;
-  }
-  .trightbs {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
-  }
-  
-  .trightbs_item {
-    padding-top: 5px;
-  }
-  
-  .span {
-    margin-left: 50px;
-    font-size: 15px;
-    font-weight: 400;
-  }
-  .formadd {
-    padding: 10px 40px 0 40px;
-    font-size: 16px;
-  }
-  .formadd .title {
-    font-weight: bold;
-    font-size: 16px;
-    background-color: #0294d7;
-    text-align: left;
-    color: #ffffff;
-  }
-  .first_row {
-    border-top: 1px solid #e0e3eb;
-  }
-  .formadd .el-row {
-    display: flex;
-    flex-wrap: wrap;
-    border-left: 1px solid #e0e3eb;
-  }
-  .formadd .el-row .el-col {
-    border-right: 1px solid #e0e3eb;
-    border-bottom: 1px solid #e0e3eb;
-    padding: 0 15px;
-    min-height: 42px;
-    line-height: 1;
-  }
-  .formadd .el-row .el-col .el-form-item {
-    margin-bottom: 0;
-    line-height: 42px;
-  }
-  .addinputw {
-    width: 80%;
-    line-height: 42px;
-  }
-  .el-input__inner {
-    height: 36px;
+      .housingResource {
+        position: absolute;
+        top: 80px;
+        left: 75%;
+        font-size: 22px;
+        color: #7e9ebf;
+      }
+      .monthlyPrice {
+        position: absolute;
+        top: 80px;
+        left: 85%;
+        font-size: 22px;
+        color: #ed6c00;
+      }
+    }
+    .pictureList:hover {
+      background-color: #edf1f7;
+    }
   }
-  </style>
+}
+</style>
   
\ No newline at end of file
diff --git a/warehousing-system/project_web/src/components/pictureList/pictureParticulars.vue b/warehousing-system/project_web/src/components/pictureList/pictureParticulars.vue
new file mode 100644
index 00000000..0c2ec06a
--- /dev/null
+++ b/warehousing-system/project_web/src/components/pictureList/pictureParticulars.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <el-button type="info" size="small" icon="el-icon-close" @click="handleReturn()">关闭</el-button>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+      data() {
+        return {
+            formobj:{
+                sid:''
+            }
+        }
+      },
+      created() {
+
+      },
+      methods: {
+        showPicture(data) {
+           console.log(data);
+           this.formobj=data
+        },
+        handleReturn() {
+        this.$emit('reloadlist')
+        this.$emit('doback')
+        this.formobj = {}
+
+      },
+      },
+
+    }
+  </script>
+  <style scoped>
+
+  </style>
+  
\ No newline at end of file
diff --git a/warehousing-system/project_web/src/router/index.js b/warehousing-system/project_web/src/router/index.js
index f5e393ed..9e698cc6 100644
--- a/warehousing-system/project_web/src/router/index.js
+++ b/warehousing-system/project_web/src/router/index.js
@@ -23,6 +23,7 @@ import OutOrder from '../components/outStorehouseManagement/outStorehouseOrder.v
 import OutList from '../components/outStorehouseManagement/outList.vue'
 import Picking from '../components/outStorehouseManagement/picking.vue'
 import PickingManagement from '../components/outStorehouseManagement/pickingManagement.vue'
+import PictureList from '../components/pictureList/pictureList.vue'
 
 Vue.use(VueRouter)
 
@@ -55,7 +56,8 @@ const routes = [
       { path: '/outOrder', component: OutOrder },
       { path: '/outList', component: OutList },
       { path: '/pick', component: Picking },
-      { path: '/pickManagement', component: PickingManagement }
+      { path: '/pickManagement', component: PickingManagement },
+      { path: '/PictureList', component: PictureList }
     ]
   }
 ]