diff --git a/src/views/dataManage/deviceData/listWaterData.vue b/src/views/dataManage/deviceData/listWaterData.vue
index dbbd41e..f60a31a 100644
--- a/src/views/dataManage/deviceData/listWaterData.vue
+++ b/src/views/dataManage/deviceData/listWaterData.vue
@@ -1,13 +1,29 @@
 <template>
   <div class="app-container">
     <!--筛选条件-->
-    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" >
+    <search-area
+      :need-clear="false"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="search"
+    >
       <!--一般查询条件-->
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable/>
+        <el-input
+          v-model.trim="listQuery.keywords"
+          placeholder="设备编号"
+          clearable
+        />
       </search-item>
       <search-item>
-        <area-select-tree v-model="listQuery.areaId" :need-top="false" :dept-show="true" placeholder="区域"/>
+        <area-select-tree
+          v-model="listQuery.areaId"
+          :need-top="false"
+          :dept-show="true"
+          placeholder="区域"
+        />
       </search-item>
       <!--<search-item>-->
       <!--<el-date-picker-->
@@ -21,26 +37,53 @@
       <!--</search-item>-->
     </search-area>
     <!--查询结果Table显示-->
-    <div style="padding:0px 10px">
+    <div style="padding: 0px 10px">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-menu" />数据列表
+          </div></el-col
+        >
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/liquiddata/export')" class="edit_btn" size="small" @click="batchExport">导出记录</el-button>
+          <el-button
+            v-if="hasPerm('/liquiddata/export')"
+            class="edit_btn"
+            size="small"
+            @click="batchExport"
+            >导出记录</el-button
+          >
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="listLoading"
+        :data="list"
+        class="table"
+        border
+        @selection-change="handleSelectionChange"
+      >
         <!--<el-table-column align="center" type="selection" width="55"/>-->
-        <el-table-column :index="indexMethod" align="center" type="index"/>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+        <el-table-column :index="indexMethod" align="center" type="index" />
+        <el-table-column
+          v-for="column in columns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
-            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{ scope.row[column.value] }}</span>
-            <span v-else-if="column.text==='设备位置'">{{ scope.row['areaFullName'] + scope.row[column.value] }}</span>
+            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{
+              scope.row[column.value]
+            }}</span>
+            <span v-else-if="column.text === '设备位置'">{{
+              scope.row["areaFullName"] + scope.row[column.value]
+            }}</span>
             <span v-else>{{ scope.row[column.value] }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="80">
+        <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="line(scope.row)">历史数据</el-button>
+            <el-button type="text" @click="line(scope.row)">历史数据</el-button> 
           </template>
         </el-table-column>
       </el-table>
@@ -48,105 +91,106 @@
     <!--分页-->
     <div class="pagination-container">
       <el-pagination
-        v-show="total>listQuery.limit"
+        v-show="total > listQuery.limit"
         :current-page="listQuery.offset"
-        :page-sizes="[10,20,30]"
+        :page-sizes="[10, 20, 30]"
         :page-size="listQuery.limit"
         :total="total"
         align="center"
         layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
+        @current-change="handleCurrentChange"
+      />
     </div>
-    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday"/>
+    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday" />
   </div>
 </template>
 
 <script>
-import selectTree from '@/components/SelectTree/singleSelect'
-import { getWatchData, batchExportLiquidData } from '@/api/data'
-import DeptSelect from '../../../components/DeptSelect/index'
-import { parseUrl } from '@/utils/parseutils'
-import WatchSevenDay from './watchSevenDay'
-import AreaSelectTree from '@/components/AreaSelect/areaSelectTree'
+import selectTree from "@/components/SelectTree/singleSelect";
+import { getWatchData, batchExportLiquidData } from "@/api/data";
+import DeptSelect from "../../../components/DeptSelect/index";
+import { parseUrl } from "@/utils/parseutils";
+import WatchSevenDay from "./watchSevenDay";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
 
 export default {
-  name: 'ListWaterData',
+  name: "ListWaterData",
   components: { AreaSelectTree, WatchSevenDay, DeptSelect, selectTree },
   data() {
     return {
       listQuery: {
-        areaId: '', // 关键字
-        keywords: '', // 关键字
+        areaId: "", // 关键字
+        keywords: "", // 关键字
         // deptid: '', // 部门id
         // beginTime: '', // 开始时间
         // endTime: '', // 结束时间
         offset: 1,
         limit: 10,
-        sort: '',
-        order: ''
+        sort: "",
+        order: "",
       }, // 筛选条件
       timeRange: [], // 时间范围
       columns: [
         {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center',
-          width: 120
+          text: "设备编号",
+          value: "devcode",
+          align: "center",
+          width: 120,
         },
         {
-          text: '井编号',
-          value: 'wellCode',
-          align: 'center',
-          width: 100
+          text: "井编号",
+          value: "wellCode",
+          align: "center",
+          width: 100,
         },
         {
-          text: '设备类型',
-          value: 'deviceTypeName',
-          align: 'center',
-          width: 80
+          text: "设备类型",
+          value: "deviceTypeName",
+          align: "center",
+          width: 80,
         },
         {
-          text: '设备位置',
-          value: 'position',
-          align: 'center'
+          text: "设备位置",
+          value: "position",
+          align: "center",
         },
         {
-          text: '抄表读数',
-          value: 'watchNum',
-          align: 'center',
-          width: 80
+          text: "抄表读数",
+          value: "watchNum",
+          align: "center",
+          width: 80,
         },
         {
-          text: '采集时间',
-          value: 'uptime',
+          text: "采集时间",
+          value: "uptime",
           width: 170,
-          align: 'center'
+          align: "center",
         },
         {
-          text: '今日用水量',
-          value: 'dayCount',
-          align: 'center',
-          width: 100
+          text: "今日用水量",
+          value: "dayCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '本月用水量',
-          value: 'monthCount',
-          align: 'center',
-          width: 100
+          text: "本月用水量",
+          value: "monthCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '总用水量',
-          value: 'totalCount',
-          align: 'center',
-          width: 80
+          text: "总用水量",
+          value: "totalCount",
+          align: "center",
+          width: 80,
         },
         {
-          text: '状态描述',
-          value: 'statusName',
-          align: 'center',
-          width: 80
-        }
+          text: "状态描述",
+          value: "statusName",
+          align: "center",
+          width: 80,
+        },
         // {
         //   text: '分区',
         //   value: 'deptName',
@@ -158,10 +202,10 @@
       total: 0, // 数据总数
       deviceTypeList: [], // 液位配置类型列表
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       }, // 分区树形下拉菜单
       deptTreeList: null, // 组织树列表数据
       showDeptTree: 0, // 是否显示分区下拉
@@ -171,151 +215,156 @@
       dialogFormVisible: false,
       editShow: false, // 是否显示编辑框
       detailShow: false, // 是否显示编辑框
-      deptShowTop: false
-    }
+      deptShowTop: false,
+    };
   },
   watch: {
     timeRange(val) {
       if (val && val.length > 0) {
-        this.listQuery.beginTime = val[0]
-        this.listQuery.endTime = val[1]
+        this.listQuery.beginTime = val[0];
+        this.listQuery.endTime = val[1];
       } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
+        this.listQuery.beginTime = "";
+        this.listQuery.endTime = "";
       }
-    }
+    },
   },
   created() {
     // 如果路径里带参数，解析devcode参数
     if (window.location.href) {
-      const params = parseUrl(window.location.href)
-      if (params && params.deviceType === '2' && params.devcode) {
-        this.listQuery.keywords = params.devcode
+      const params = parseUrl(window.location.href);
+      if (params && params.deviceType === "2" && params.devcode) {
+        this.listQuery.keywords = params.devcode;
       }
-      this.fetchData()
+      this.fetchData();
     }
   },
   activated() {
     // 要是路由里有参数
     if (this.$route.query && this.$route.query.devcode) {
-      this.listQuery.keywords = this.$route.query.devcode
-      this.fetchData(false)// 获取数据
+      this.listQuery.keywords = this.$route.query.devcode;
+      this.fetchData(false); // 获取数据
     } else {
-      this.fetchData()
+      this.fetchData();
     }
   },
   methods: {
     // 批量导出
     batchExport() {
-      console.log('批量导出液位配置')
+      console.log("批量导出液位配置");
       // 全屏加载动画
       const loading = this.$loading({
         lock: true,
-        text: '数据处理中,请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      batchExportLiquidData(this.listQuery).then(res => {
-        loading.close() // 关闭加载动画
-        console.log('download===', res)
-        const blob = new Blob([res.data])
-        const downloadElement = document.createElement('a')
-        const href = window.URL.createObjectURL(blob) // 创建下载的链接
-        downloadElement.href = href
-        downloadElement.download = `远传水表数据.xlsx` // 下载后文件名
-        document.body.appendChild(downloadElement)
-        downloadElement.click() // 点击下载
-        document.body.removeChild(downloadElement) // 下载完成移除元素
-        window.URL.revokeObjectURL(href) // 释放blob对象
-      }).catch((res) => {
-        loading.close()
-      })
+        text: "数据处理中,请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      batchExportLiquidData(this.listQuery)
+        .then((res) => {
+          loading.close(); // 关闭加载动画
+          console.log("download===", res);
+          const blob = new Blob([res.data]);
+          const downloadElement = document.createElement("a");
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          downloadElement.href = href;
+          downloadElement.download = `远传水表数据.xlsx`; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href); // 释放blob对象
+        })
+        .catch((res) => {
+          loading.close();
+        });
     },
     selectnode(node) {
-      this.listQuery.areaId = node.id
-      this.search()
+      this.listQuery.areaId = node.id;
+      this.search();
     },
     // 查询数据
     search() {
-      this.fetchData(false)
+      this.fetchData(false);
     },
     line(row) {
-      this.dialogFormVisible = true
-      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row)
+      this.dialogFormVisible = true;
+      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row);
     },
     // 获取液位配置数据
     fetchData(isNowPage = true) {
-      this.listLoading = true
-      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-        this.listQuery.offset = 1
+      this.listLoading = true;
+      if (!isNowPage) {
+        // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1;
       }
-      getWatchData(this.listQuery).then(response => {
-        this.list = response.data.rows.map(function(item) {
-          item.areaFullName = item.areaFullName.replace('\/', '').replace('顶层', '')
-          return item
-        })
-        this.total = parseInt(response.data.total)
-        this.listLoading = false
-      })
+      getWatchData(this.listQuery).then((response) => {
+        this.list = response.data.rows.map(function (item) {
+          item.areaFullName = item.areaFullName
+            .replace("/", "")
+            .replace("顶层", "");
+          return item;
+        });
+        this.total = parseInt(response.data.total);
+        this.listLoading = false;
+      });
     },
     checkCell(value) {
-      var cell = parseFloat(value)
+      var cell = parseFloat(value);
       if (cell < 10) {
-        return 'warning-state'
+        return "warning-state";
       }
     },
     indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1;
     },
     // 改变页容量
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
+      this.listQuery.limit = val;
+      this.fetchData();
     },
     // 改变当前页
     handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
+      this.listQuery.offset = val;
+      this.fetchData();
     },
     // 多选触发方法
     handleSelectionChange(val) {
-      this.multipleSelection = val
-    }
-  }
-}
+      this.multipleSelection = val;
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .app-container{
-    padding: 0px 0px;
-  }
-  $tableTitleHeight:46px;
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+.app-container {
+  padding: 0px 0px;
+}
+$tableTitleHeight: 46px;
+.table {
+  margin-bottom: 20px;
+}
+.pagination-container {
+  margin-bottom: 50px;
+}
+.table-title {
+  background-color: rgba(243, 243, 243, 1);
+  height: $tableTitleHeight;
+  .title-header {
+    line-height: $tableTitleHeight;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
+}
+.edit_btns {
+  .edit_btn {
+    float: right;
+    margin: 7px 3px; //为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
   }
-  .warning-state{
-    color:red
-  }
+}
+.warning-state {
+  color: red;
+}
 </style>

diff --git a/src/views/dataManage/deviceData/listWaterData.vue b/src/views/dataManage/deviceData/listWaterData.vue
index dbbd41e..f60a31a 100644
--- a/src/views/dataManage/deviceData/listWaterData.vue
+++ b/src/views/dataManage/deviceData/listWaterData.vue
@@ -1,13 +1,29 @@
 <template>
   <div class="app-container">
     <!--筛选条件-->
-    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" >
+    <search-area
+      :need-clear="false"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="search"
+    >
       <!--一般查询条件-->
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable/>
+        <el-input
+          v-model.trim="listQuery.keywords"
+          placeholder="设备编号"
+          clearable
+        />
       </search-item>
       <search-item>
-        <area-select-tree v-model="listQuery.areaId" :need-top="false" :dept-show="true" placeholder="区域"/>
+        <area-select-tree
+          v-model="listQuery.areaId"
+          :need-top="false"
+          :dept-show="true"
+          placeholder="区域"
+        />
       </search-item>
       <!--<search-item>-->
       <!--<el-date-picker-->
@@ -21,26 +37,53 @@
       <!--</search-item>-->
     </search-area>
     <!--查询结果Table显示-->
-    <div style="padding:0px 10px">
+    <div style="padding: 0px 10px">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-menu" />数据列表
+          </div></el-col
+        >
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/liquiddata/export')" class="edit_btn" size="small" @click="batchExport">导出记录</el-button>
+          <el-button
+            v-if="hasPerm('/liquiddata/export')"
+            class="edit_btn"
+            size="small"
+            @click="batchExport"
+            >导出记录</el-button
+          >
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="listLoading"
+        :data="list"
+        class="table"
+        border
+        @selection-change="handleSelectionChange"
+      >
         <!--<el-table-column align="center" type="selection" width="55"/>-->
-        <el-table-column :index="indexMethod" align="center" type="index"/>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+        <el-table-column :index="indexMethod" align="center" type="index" />
+        <el-table-column
+          v-for="column in columns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
-            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{ scope.row[column.value] }}</span>
-            <span v-else-if="column.text==='设备位置'">{{ scope.row['areaFullName'] + scope.row[column.value] }}</span>
+            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{
+              scope.row[column.value]
+            }}</span>
+            <span v-else-if="column.text === '设备位置'">{{
+              scope.row["areaFullName"] + scope.row[column.value]
+            }}</span>
             <span v-else>{{ scope.row[column.value] }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="80">
+        <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="line(scope.row)">历史数据</el-button>
+            <el-button type="text" @click="line(scope.row)">历史数据</el-button> 
           </template>
         </el-table-column>
       </el-table>
@@ -48,105 +91,106 @@
     <!--分页-->
     <div class="pagination-container">
       <el-pagination
-        v-show="total>listQuery.limit"
+        v-show="total > listQuery.limit"
         :current-page="listQuery.offset"
-        :page-sizes="[10,20,30]"
+        :page-sizes="[10, 20, 30]"
         :page-size="listQuery.limit"
         :total="total"
         align="center"
         layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
+        @current-change="handleCurrentChange"
+      />
     </div>
-    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday"/>
+    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday" />
   </div>
 </template>
 
 <script>
-import selectTree from '@/components/SelectTree/singleSelect'
-import { getWatchData, batchExportLiquidData } from '@/api/data'
-import DeptSelect from '../../../components/DeptSelect/index'
-import { parseUrl } from '@/utils/parseutils'
-import WatchSevenDay from './watchSevenDay'
-import AreaSelectTree from '@/components/AreaSelect/areaSelectTree'
+import selectTree from "@/components/SelectTree/singleSelect";
+import { getWatchData, batchExportLiquidData } from "@/api/data";
+import DeptSelect from "../../../components/DeptSelect/index";
+import { parseUrl } from "@/utils/parseutils";
+import WatchSevenDay from "./watchSevenDay";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
 
 export default {
-  name: 'ListWaterData',
+  name: "ListWaterData",
   components: { AreaSelectTree, WatchSevenDay, DeptSelect, selectTree },
   data() {
     return {
       listQuery: {
-        areaId: '', // 关键字
-        keywords: '', // 关键字
+        areaId: "", // 关键字
+        keywords: "", // 关键字
         // deptid: '', // 部门id
         // beginTime: '', // 开始时间
         // endTime: '', // 结束时间
         offset: 1,
         limit: 10,
-        sort: '',
-        order: ''
+        sort: "",
+        order: "",
       }, // 筛选条件
       timeRange: [], // 时间范围
       columns: [
         {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center',
-          width: 120
+          text: "设备编号",
+          value: "devcode",
+          align: "center",
+          width: 120,
         },
         {
-          text: '井编号',
-          value: 'wellCode',
-          align: 'center',
-          width: 100
+          text: "井编号",
+          value: "wellCode",
+          align: "center",
+          width: 100,
         },
         {
-          text: '设备类型',
-          value: 'deviceTypeName',
-          align: 'center',
-          width: 80
+          text: "设备类型",
+          value: "deviceTypeName",
+          align: "center",
+          width: 80,
         },
         {
-          text: '设备位置',
-          value: 'position',
-          align: 'center'
+          text: "设备位置",
+          value: "position",
+          align: "center",
         },
         {
-          text: '抄表读数',
-          value: 'watchNum',
-          align: 'center',
-          width: 80
+          text: "抄表读数",
+          value: "watchNum",
+          align: "center",
+          width: 80,
         },
         {
-          text: '采集时间',
-          value: 'uptime',
+          text: "采集时间",
+          value: "uptime",
           width: 170,
-          align: 'center'
+          align: "center",
         },
         {
-          text: '今日用水量',
-          value: 'dayCount',
-          align: 'center',
-          width: 100
+          text: "今日用水量",
+          value: "dayCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '本月用水量',
-          value: 'monthCount',
-          align: 'center',
-          width: 100
+          text: "本月用水量",
+          value: "monthCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '总用水量',
-          value: 'totalCount',
-          align: 'center',
-          width: 80
+          text: "总用水量",
+          value: "totalCount",
+          align: "center",
+          width: 80,
         },
         {
-          text: '状态描述',
-          value: 'statusName',
-          align: 'center',
-          width: 80
-        }
+          text: "状态描述",
+          value: "statusName",
+          align: "center",
+          width: 80,
+        },
         // {
         //   text: '分区',
         //   value: 'deptName',
@@ -158,10 +202,10 @@
       total: 0, // 数据总数
       deviceTypeList: [], // 液位配置类型列表
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       }, // 分区树形下拉菜单
       deptTreeList: null, // 组织树列表数据
       showDeptTree: 0, // 是否显示分区下拉
@@ -171,151 +215,156 @@
       dialogFormVisible: false,
       editShow: false, // 是否显示编辑框
       detailShow: false, // 是否显示编辑框
-      deptShowTop: false
-    }
+      deptShowTop: false,
+    };
   },
   watch: {
     timeRange(val) {
       if (val && val.length > 0) {
-        this.listQuery.beginTime = val[0]
-        this.listQuery.endTime = val[1]
+        this.listQuery.beginTime = val[0];
+        this.listQuery.endTime = val[1];
       } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
+        this.listQuery.beginTime = "";
+        this.listQuery.endTime = "";
       }
-    }
+    },
   },
   created() {
     // 如果路径里带参数，解析devcode参数
     if (window.location.href) {
-      const params = parseUrl(window.location.href)
-      if (params && params.deviceType === '2' && params.devcode) {
-        this.listQuery.keywords = params.devcode
+      const params = parseUrl(window.location.href);
+      if (params && params.deviceType === "2" && params.devcode) {
+        this.listQuery.keywords = params.devcode;
       }
-      this.fetchData()
+      this.fetchData();
     }
   },
   activated() {
     // 要是路由里有参数
     if (this.$route.query && this.$route.query.devcode) {
-      this.listQuery.keywords = this.$route.query.devcode
-      this.fetchData(false)// 获取数据
+      this.listQuery.keywords = this.$route.query.devcode;
+      this.fetchData(false); // 获取数据
     } else {
-      this.fetchData()
+      this.fetchData();
     }
   },
   methods: {
     // 批量导出
     batchExport() {
-      console.log('批量导出液位配置')
+      console.log("批量导出液位配置");
       // 全屏加载动画
       const loading = this.$loading({
         lock: true,
-        text: '数据处理中,请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      batchExportLiquidData(this.listQuery).then(res => {
-        loading.close() // 关闭加载动画
-        console.log('download===', res)
-        const blob = new Blob([res.data])
-        const downloadElement = document.createElement('a')
-        const href = window.URL.createObjectURL(blob) // 创建下载的链接
-        downloadElement.href = href
-        downloadElement.download = `远传水表数据.xlsx` // 下载后文件名
-        document.body.appendChild(downloadElement)
-        downloadElement.click() // 点击下载
-        document.body.removeChild(downloadElement) // 下载完成移除元素
-        window.URL.revokeObjectURL(href) // 释放blob对象
-      }).catch((res) => {
-        loading.close()
-      })
+        text: "数据处理中,请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      batchExportLiquidData(this.listQuery)
+        .then((res) => {
+          loading.close(); // 关闭加载动画
+          console.log("download===", res);
+          const blob = new Blob([res.data]);
+          const downloadElement = document.createElement("a");
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          downloadElement.href = href;
+          downloadElement.download = `远传水表数据.xlsx`; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href); // 释放blob对象
+        })
+        .catch((res) => {
+          loading.close();
+        });
     },
     selectnode(node) {
-      this.listQuery.areaId = node.id
-      this.search()
+      this.listQuery.areaId = node.id;
+      this.search();
     },
     // 查询数据
     search() {
-      this.fetchData(false)
+      this.fetchData(false);
     },
     line(row) {
-      this.dialogFormVisible = true
-      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row)
+      this.dialogFormVisible = true;
+      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row);
     },
     // 获取液位配置数据
     fetchData(isNowPage = true) {
-      this.listLoading = true
-      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-        this.listQuery.offset = 1
+      this.listLoading = true;
+      if (!isNowPage) {
+        // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1;
       }
-      getWatchData(this.listQuery).then(response => {
-        this.list = response.data.rows.map(function(item) {
-          item.areaFullName = item.areaFullName.replace('\/', '').replace('顶层', '')
-          return item
-        })
-        this.total = parseInt(response.data.total)
-        this.listLoading = false
-      })
+      getWatchData(this.listQuery).then((response) => {
+        this.list = response.data.rows.map(function (item) {
+          item.areaFullName = item.areaFullName
+            .replace("/", "")
+            .replace("顶层", "");
+          return item;
+        });
+        this.total = parseInt(response.data.total);
+        this.listLoading = false;
+      });
     },
     checkCell(value) {
-      var cell = parseFloat(value)
+      var cell = parseFloat(value);
       if (cell < 10) {
-        return 'warning-state'
+        return "warning-state";
       }
     },
     indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1;
     },
     // 改变页容量
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
+      this.listQuery.limit = val;
+      this.fetchData();
     },
     // 改变当前页
     handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
+      this.listQuery.offset = val;
+      this.fetchData();
     },
     // 多选触发方法
     handleSelectionChange(val) {
-      this.multipleSelection = val
-    }
-  }
-}
+      this.multipleSelection = val;
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .app-container{
-    padding: 0px 0px;
-  }
-  $tableTitleHeight:46px;
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+.app-container {
+  padding: 0px 0px;
+}
+$tableTitleHeight: 46px;
+.table {
+  margin-bottom: 20px;
+}
+.pagination-container {
+  margin-bottom: 50px;
+}
+.table-title {
+  background-color: rgba(243, 243, 243, 1);
+  height: $tableTitleHeight;
+  .title-header {
+    line-height: $tableTitleHeight;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
+}
+.edit_btns {
+  .edit_btn {
+    float: right;
+    margin: 7px 3px; //为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
   }
-  .warning-state{
-    color:red
-  }
+}
+.warning-state {
+  color: red;
+}
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 552545d..a906820 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -159,6 +159,7 @@
       redirect: "/", // 重定向路径
       showKaptcha: false, // 是否显示验证码
       // bgUrl: require('../../assets/login_images/theme0/bg.png'), // 背景图片
+      bgUrl: "",
       leftUrl: require("../../assets/login_images/theme0/left.jpg"), // 左边图片
     };
   },

diff --git a/src/views/dataManage/deviceData/listWaterData.vue b/src/views/dataManage/deviceData/listWaterData.vue
index dbbd41e..f60a31a 100644
--- a/src/views/dataManage/deviceData/listWaterData.vue
+++ b/src/views/dataManage/deviceData/listWaterData.vue
@@ -1,13 +1,29 @@
 <template>
   <div class="app-container">
     <!--筛选条件-->
-    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" >
+    <search-area
+      :need-clear="false"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="search"
+    >
       <!--一般查询条件-->
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable/>
+        <el-input
+          v-model.trim="listQuery.keywords"
+          placeholder="设备编号"
+          clearable
+        />
       </search-item>
       <search-item>
-        <area-select-tree v-model="listQuery.areaId" :need-top="false" :dept-show="true" placeholder="区域"/>
+        <area-select-tree
+          v-model="listQuery.areaId"
+          :need-top="false"
+          :dept-show="true"
+          placeholder="区域"
+        />
       </search-item>
       <!--<search-item>-->
       <!--<el-date-picker-->
@@ -21,26 +37,53 @@
       <!--</search-item>-->
     </search-area>
     <!--查询结果Table显示-->
-    <div style="padding:0px 10px">
+    <div style="padding: 0px 10px">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-menu" />数据列表
+          </div></el-col
+        >
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/liquiddata/export')" class="edit_btn" size="small" @click="batchExport">导出记录</el-button>
+          <el-button
+            v-if="hasPerm('/liquiddata/export')"
+            class="edit_btn"
+            size="small"
+            @click="batchExport"
+            >导出记录</el-button
+          >
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="listLoading"
+        :data="list"
+        class="table"
+        border
+        @selection-change="handleSelectionChange"
+      >
         <!--<el-table-column align="center" type="selection" width="55"/>-->
-        <el-table-column :index="indexMethod" align="center" type="index"/>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+        <el-table-column :index="indexMethod" align="center" type="index" />
+        <el-table-column
+          v-for="column in columns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
-            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{ scope.row[column.value] }}</span>
-            <span v-else-if="column.text==='设备位置'">{{ scope.row['areaFullName'] + scope.row[column.value] }}</span>
+            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{
+              scope.row[column.value]
+            }}</span>
+            <span v-else-if="column.text === '设备位置'">{{
+              scope.row["areaFullName"] + scope.row[column.value]
+            }}</span>
             <span v-else>{{ scope.row[column.value] }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="80">
+        <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="line(scope.row)">历史数据</el-button>
+            <el-button type="text" @click="line(scope.row)">历史数据</el-button> 
           </template>
         </el-table-column>
       </el-table>
@@ -48,105 +91,106 @@
     <!--分页-->
     <div class="pagination-container">
       <el-pagination
-        v-show="total>listQuery.limit"
+        v-show="total > listQuery.limit"
         :current-page="listQuery.offset"
-        :page-sizes="[10,20,30]"
+        :page-sizes="[10, 20, 30]"
         :page-size="listQuery.limit"
         :total="total"
         align="center"
         layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
+        @current-change="handleCurrentChange"
+      />
     </div>
-    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday"/>
+    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday" />
   </div>
 </template>
 
 <script>
-import selectTree from '@/components/SelectTree/singleSelect'
-import { getWatchData, batchExportLiquidData } from '@/api/data'
-import DeptSelect from '../../../components/DeptSelect/index'
-import { parseUrl } from '@/utils/parseutils'
-import WatchSevenDay from './watchSevenDay'
-import AreaSelectTree from '@/components/AreaSelect/areaSelectTree'
+import selectTree from "@/components/SelectTree/singleSelect";
+import { getWatchData, batchExportLiquidData } from "@/api/data";
+import DeptSelect from "../../../components/DeptSelect/index";
+import { parseUrl } from "@/utils/parseutils";
+import WatchSevenDay from "./watchSevenDay";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
 
 export default {
-  name: 'ListWaterData',
+  name: "ListWaterData",
   components: { AreaSelectTree, WatchSevenDay, DeptSelect, selectTree },
   data() {
     return {
       listQuery: {
-        areaId: '', // 关键字
-        keywords: '', // 关键字
+        areaId: "", // 关键字
+        keywords: "", // 关键字
         // deptid: '', // 部门id
         // beginTime: '', // 开始时间
         // endTime: '', // 结束时间
         offset: 1,
         limit: 10,
-        sort: '',
-        order: ''
+        sort: "",
+        order: "",
       }, // 筛选条件
       timeRange: [], // 时间范围
       columns: [
         {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center',
-          width: 120
+          text: "设备编号",
+          value: "devcode",
+          align: "center",
+          width: 120,
         },
         {
-          text: '井编号',
-          value: 'wellCode',
-          align: 'center',
-          width: 100
+          text: "井编号",
+          value: "wellCode",
+          align: "center",
+          width: 100,
         },
         {
-          text: '设备类型',
-          value: 'deviceTypeName',
-          align: 'center',
-          width: 80
+          text: "设备类型",
+          value: "deviceTypeName",
+          align: "center",
+          width: 80,
         },
         {
-          text: '设备位置',
-          value: 'position',
-          align: 'center'
+          text: "设备位置",
+          value: "position",
+          align: "center",
         },
         {
-          text: '抄表读数',
-          value: 'watchNum',
-          align: 'center',
-          width: 80
+          text: "抄表读数",
+          value: "watchNum",
+          align: "center",
+          width: 80,
         },
         {
-          text: '采集时间',
-          value: 'uptime',
+          text: "采集时间",
+          value: "uptime",
           width: 170,
-          align: 'center'
+          align: "center",
         },
         {
-          text: '今日用水量',
-          value: 'dayCount',
-          align: 'center',
-          width: 100
+          text: "今日用水量",
+          value: "dayCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '本月用水量',
-          value: 'monthCount',
-          align: 'center',
-          width: 100
+          text: "本月用水量",
+          value: "monthCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '总用水量',
-          value: 'totalCount',
-          align: 'center',
-          width: 80
+          text: "总用水量",
+          value: "totalCount",
+          align: "center",
+          width: 80,
         },
         {
-          text: '状态描述',
-          value: 'statusName',
-          align: 'center',
-          width: 80
-        }
+          text: "状态描述",
+          value: "statusName",
+          align: "center",
+          width: 80,
+        },
         // {
         //   text: '分区',
         //   value: 'deptName',
@@ -158,10 +202,10 @@
       total: 0, // 数据总数
       deviceTypeList: [], // 液位配置类型列表
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       }, // 分区树形下拉菜单
       deptTreeList: null, // 组织树列表数据
       showDeptTree: 0, // 是否显示分区下拉
@@ -171,151 +215,156 @@
       dialogFormVisible: false,
       editShow: false, // 是否显示编辑框
       detailShow: false, // 是否显示编辑框
-      deptShowTop: false
-    }
+      deptShowTop: false,
+    };
   },
   watch: {
     timeRange(val) {
       if (val && val.length > 0) {
-        this.listQuery.beginTime = val[0]
-        this.listQuery.endTime = val[1]
+        this.listQuery.beginTime = val[0];
+        this.listQuery.endTime = val[1];
       } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
+        this.listQuery.beginTime = "";
+        this.listQuery.endTime = "";
       }
-    }
+    },
   },
   created() {
     // 如果路径里带参数，解析devcode参数
     if (window.location.href) {
-      const params = parseUrl(window.location.href)
-      if (params && params.deviceType === '2' && params.devcode) {
-        this.listQuery.keywords = params.devcode
+      const params = parseUrl(window.location.href);
+      if (params && params.deviceType === "2" && params.devcode) {
+        this.listQuery.keywords = params.devcode;
       }
-      this.fetchData()
+      this.fetchData();
     }
   },
   activated() {
     // 要是路由里有参数
     if (this.$route.query && this.$route.query.devcode) {
-      this.listQuery.keywords = this.$route.query.devcode
-      this.fetchData(false)// 获取数据
+      this.listQuery.keywords = this.$route.query.devcode;
+      this.fetchData(false); // 获取数据
     } else {
-      this.fetchData()
+      this.fetchData();
     }
   },
   methods: {
     // 批量导出
     batchExport() {
-      console.log('批量导出液位配置')
+      console.log("批量导出液位配置");
       // 全屏加载动画
       const loading = this.$loading({
         lock: true,
-        text: '数据处理中,请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      batchExportLiquidData(this.listQuery).then(res => {
-        loading.close() // 关闭加载动画
-        console.log('download===', res)
-        const blob = new Blob([res.data])
-        const downloadElement = document.createElement('a')
-        const href = window.URL.createObjectURL(blob) // 创建下载的链接
-        downloadElement.href = href
-        downloadElement.download = `远传水表数据.xlsx` // 下载后文件名
-        document.body.appendChild(downloadElement)
-        downloadElement.click() // 点击下载
-        document.body.removeChild(downloadElement) // 下载完成移除元素
-        window.URL.revokeObjectURL(href) // 释放blob对象
-      }).catch((res) => {
-        loading.close()
-      })
+        text: "数据处理中,请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      batchExportLiquidData(this.listQuery)
+        .then((res) => {
+          loading.close(); // 关闭加载动画
+          console.log("download===", res);
+          const blob = new Blob([res.data]);
+          const downloadElement = document.createElement("a");
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          downloadElement.href = href;
+          downloadElement.download = `远传水表数据.xlsx`; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href); // 释放blob对象
+        })
+        .catch((res) => {
+          loading.close();
+        });
     },
     selectnode(node) {
-      this.listQuery.areaId = node.id
-      this.search()
+      this.listQuery.areaId = node.id;
+      this.search();
     },
     // 查询数据
     search() {
-      this.fetchData(false)
+      this.fetchData(false);
     },
     line(row) {
-      this.dialogFormVisible = true
-      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row)
+      this.dialogFormVisible = true;
+      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row);
     },
     // 获取液位配置数据
     fetchData(isNowPage = true) {
-      this.listLoading = true
-      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-        this.listQuery.offset = 1
+      this.listLoading = true;
+      if (!isNowPage) {
+        // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1;
       }
-      getWatchData(this.listQuery).then(response => {
-        this.list = response.data.rows.map(function(item) {
-          item.areaFullName = item.areaFullName.replace('\/', '').replace('顶层', '')
-          return item
-        })
-        this.total = parseInt(response.data.total)
-        this.listLoading = false
-      })
+      getWatchData(this.listQuery).then((response) => {
+        this.list = response.data.rows.map(function (item) {
+          item.areaFullName = item.areaFullName
+            .replace("/", "")
+            .replace("顶层", "");
+          return item;
+        });
+        this.total = parseInt(response.data.total);
+        this.listLoading = false;
+      });
     },
     checkCell(value) {
-      var cell = parseFloat(value)
+      var cell = parseFloat(value);
       if (cell < 10) {
-        return 'warning-state'
+        return "warning-state";
       }
     },
     indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1;
     },
     // 改变页容量
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
+      this.listQuery.limit = val;
+      this.fetchData();
     },
     // 改变当前页
     handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
+      this.listQuery.offset = val;
+      this.fetchData();
     },
     // 多选触发方法
     handleSelectionChange(val) {
-      this.multipleSelection = val
-    }
-  }
-}
+      this.multipleSelection = val;
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .app-container{
-    padding: 0px 0px;
-  }
-  $tableTitleHeight:46px;
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+.app-container {
+  padding: 0px 0px;
+}
+$tableTitleHeight: 46px;
+.table {
+  margin-bottom: 20px;
+}
+.pagination-container {
+  margin-bottom: 50px;
+}
+.table-title {
+  background-color: rgba(243, 243, 243, 1);
+  height: $tableTitleHeight;
+  .title-header {
+    line-height: $tableTitleHeight;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
+}
+.edit_btns {
+  .edit_btn {
+    float: right;
+    margin: 7px 3px; //为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
   }
-  .warning-state{
-    color:red
-  }
+}
+.warning-state {
+  color: red;
+}
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 552545d..a906820 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -159,6 +159,7 @@
       redirect: "/", // 重定向路径
       showKaptcha: false, // 是否显示验证码
       // bgUrl: require('../../assets/login_images/theme0/bg.png'), // 背景图片
+      bgUrl: "",
       leftUrl: require("../../assets/login_images/theme0/left.jpg"), // 左边图片
     };
   },
diff --git a/src/views/wellManage/addWell.vue b/src/views/wellManage/addWell.vue
index 29aa784..b13aa7a 100644
--- a/src/views/wellManage/addWell.vue
+++ b/src/views/wellManage/addWell.vue
@@ -1,52 +1,89 @@
 <template>
   <div class="main-form">
-    <el-form ref="dataForm" :label-position="labelPosition" :rules="rules" :model="wellForm" label-width="120px">
+    <el-form
+      ref="dataForm"
+      :label-position="labelPosition"
+      :rules="rules"
+      :model="wellForm"
+      label-width="120px"
+    >
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井名称" prop="wellName">
-            <el-input v-model.trim="wellForm.wellName" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.wellName"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="3">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model.trim="wellForm.wellCode" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.wellCode"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井类型" prop="wellType">
-            <el-select v-model="wellForm.wellType" placeholder="选择井类型" clearable>
+            <el-select
+              v-model="wellForm.wellType"
+              placeholder="选择井类型"
+              clearable
+            >
               <el-option
                 v-for="item in wellTypeList"
                 :key="item.value"
                 :label="item.name"
-                :value="item.value"/>
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="3">
           <el-form-item label="权属单位" prop="deptid">
-            <dept-select v-model="wellForm.deptid" :need-top="deptShowTop" :dept-show="deptShow" dept-type="03" placeholder="选择权属单位"/>
+            <dept-select
+              v-model="wellForm.deptid"
+              :need-top="deptShowTop"
+              :dept-show="deptShow"
+              dept-type="03"
+              placeholder="选择权属单位"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井深(m)" prop="deep">
-            <el-input v-model.trim="wellForm.deep" type="text" placeholder="需要装液位监测仪的井必填"/>
+            <el-input
+              v-model.trim="wellForm.deep"
+              type="text"
+              placeholder="需要装液位监测仪的井必填"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="经度" prop="coordinateX">
-            <el-input v-model.trim="wellForm.coordinateX" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.coordinateX"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="3">
           <el-form-item label="纬度" prop="coordinateY">
-            <el-input v-model.trim="wellForm.coordinateY" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.coordinateY"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -62,17 +99,27 @@
               :on-change="handleChange"
               :on-success="handleSuccess"
               :limit="4"
-              :class="{hide:hideUpload}"
+              :class="{ hide: hideUpload }"
               :http-request="uploadFile"
               action="string"
               multiple
               accept=".jpg,.jpeg,.png "
-              list-type="picture-card">
-              <i class="el-icon-plus"/>
+              list-type="picture-card"
+            >
+              <i class="el-icon-plus" />
             </el-upload>
-            <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+            <el-dialog
+              :visible.sync="dialogVisible"
+              title="图片预览"
+              append-to-body
+            >
               <div class="imgBox">
-                <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+                <img
+                  :src="dialogImageUrl"
+                  max-height="400px;"
+                  alt=""
+                  style="margin: 0 auto"
+                />
               </div>
             </el-dialog>
           </el-form-item>
@@ -112,10 +159,19 @@
           <el-form-item label="详细地址" prop="position">
             <el-col :span="12" style="padding-left: 0px">
               <!--<area-select-input :node="node" :need-full="true" placeholder="区域"/>-->
-              <area-select-tree v-model="wellForm.area" :need-top="false" :dept-show="true" placeholder="区域"/>
+              <area-select-tree
+                v-model="wellForm.area"
+                :need-top="false"
+                :dept-show="true"
+                placeholder="区域"
+              />
             </el-col>
             <el-col :span="12">
-              <el-input v-model.trim="wellForm.position" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.position"
+                type="text"
+                placeholder="必填"
+              />
             </el-col>
           </el-form-item>
         </el-col>
@@ -123,20 +179,33 @@
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井维护机构" prop="responsibleDept">
-            <el-select v-model="wellForm.responsibleDept" :disabled="showResponseDept" placeholder="选择维护组织，不选默认为权属单位" clearable>
+            <el-select
+              v-model="wellForm.responsibleDept"
+              :disabled="showResponseDept"
+              placeholder="选择维护组织，不选默认为权属单位"
+              clearable
+            >
               <el-option
                 v-for="item in secondDeptTreeList"
                 :key="item.id"
                 :label="item.name"
-                :value="item.id"/>
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
-        <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px;">
+        <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px">
           <el-button size="medium" @click="resetForm"> 重置 </el-button>
-          <el-button type="primary" size="medium" style="margin-left: 10px;" @click="saveData"> 保存 </el-button>
+          <el-button
+            type="primary"
+            size="medium"
+            style="margin-left: 10px"
+            @click="saveData"
+          >
+            保存
+          </el-button>
         </el-col>
       </el-row>
     </el-form>
@@ -144,77 +213,81 @@
 </template>
 
 <script>
-import { toTreeList } from '@/utils/structure'
-import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/system/dept'
-import { getAreaList, getAreaByDept } from '@/api/system/area'
-import { getWellType, addWell } from '@/api/well'
-import { Uploadimg } from '@/api/common'
-import DeptSelect from '@/components/DeptSelect'
-import AreaSelectTree from '@/components/AreaSelect/areaSelectTree'
+import { toTreeList } from "@/utils/structure";
+import SelectTree from "@/components/SelectTree/singleSelect";
+import { getDeptTreeList } from "@/api/system/dept";
+import { getAreaList, getAreaByDept } from "@/api/system/area";
+import { getWellType, addWell } from "@/api/well";
+import { Uploadimg } from "@/api/common";
+import DeptSelect from "@/components/DeptSelect";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
 
 export default {
-  name: 'AddWell',
+  name: "AddWell",
   components: { SelectTree, DeptSelect, AreaSelectTree },
   data() {
     const validateDeep = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          const deep = parseFloat(value)
-          if (deep > 10 || deep < 0) { callback(new Error('请填写0到10数值')) } else { callback() }
+          const deep = parseFloat(value);
+          if (deep > 10 || deep < 0) {
+            callback(new Error("请填写0到10数值"));
+          } else {
+            callback();
+          }
         }
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validateLng = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('经度不能为空'))
+        callback(new Error("经度不能为空"));
       }
-    }
+    };
     const validateLat = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('纬度不能为空'))
+        callback(new Error("纬度不能为空"));
       }
-    }
+    };
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: "", // 对话框类型：create,update
       node: null,
       wellForm: {
-        wellCode: '', // 井编号
-        wellName: '', // 井名称
-        wellType: '', // 井类型
-        deptid: '', // 权属单位
-        deep: '', // 井深，
-        position: '', // 位置描述
-        coordinateX: '', // 经度
-        coordinateY: '', // 纬度
-        photos: '', // 照片路径
-        notes: '', // 备注,
-        qu: '',
-        area: '', // 街道
-        responsibleDept: '' // 维护人员部门
+        wellCode: "", // 井编号
+        wellName: "", // 井名称
+        wellType: "", // 井类型
+        deptid: "1148031048115494913", // 权属单位
+        deep: "", // 井深，
+        position: "", // 位置描述
+        coordinateX: "", // 经度
+        coordinateY: "", // 纬度
+        photos: "", // 照片路径
+        notes: "", // 备注,
+        qu: "",
+        area: "", // 街道
+        responsibleDept: "", // 维护人员部门
       }, // 表单
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       },
       hideUpload: false,
       fileList: [],
@@ -225,289 +298,345 @@
       quList: null,
       jiedaoList: null,
       textMap: {
-        update: '编辑',
-        create: '新增'
+        update: "编辑",
+        create: "新增",
       }, // 表头显示标题
       rules: {
-        wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
-        wellName: [{ required: true, message: '井名称不能为空', trigger: ['blur', 'change'] }],
-        position: [{ required: true, message: '井详细地址不能为空', trigger: ['blur', 'change'] }],
-        deep: [{ required: false, trigger: ['blur', 'change'], validator: validateDeep }],
-        coordinateX: [{ required: true, trigger: ['blur', 'change'], validator: validateLat }],
-        coordinateY: [{ required: true, trigger: ['blur', 'change'], validator: validateLng }],
-        deptid: [{ required: true, message: '组织机构必选', trigger: 'change' }],
-        wellType: [{ required: true, message: '井类型必选', trigger: 'change' }],
-        qu: [{ required: true, message: '所在区/县必选', trigger: 'change' }],
-        area: [{ required: true, message: '所在街道/镇必选', trigger: 'change' }]
+        wellCode: [
+          {
+            required: true,
+            message: "井编号不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        wellName: [
+          {
+            required: true,
+            message: "井名称不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        position: [
+          {
+            required: true,
+            message: "井详细地址不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        deep: [
+          {
+            required: false,
+            trigger: ["blur", "change"],
+            validator: validateDeep,
+          },
+        ],
+        coordinateX: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLat,
+          },
+        ],
+        coordinateY: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLng,
+          },
+        ],
+        deptid: [
+          { required: true, message: "组织机构必选", trigger: "change" },
+        ],
+        wellType: [
+          { required: true, message: "井类型必选", trigger: "change" },
+        ],
+        qu: [{ required: true, message: "所在区/县必选", trigger: "change" }],
+        area: [
+          { required: true, message: "所在街道/镇必选", trigger: "change" },
+        ],
       },
-      uploadPath: process.env.BASE_API + '/imageUpload', // 图片上传路径
-      dialogImageUrl: '',
+      uploadPath: process.env.BASE_API + "/imageUpload", // 图片上传路径
+      dialogImageUrl: "",
       dialogVisible: false,
-      labelPosition: 'right',
+      labelPosition: "right",
       responseAssignShow: false,
       deptShowTop: false, // 权属单位下拉是否显示顶级
-      deptShow: true
-    }
+      deptShow: true,
+    };
   },
   computed: {
     showResponseDept() {
-      if (this.wellForm.deptid === '') {
-        return true
+      if (this.wellForm.deptid === "") {
+        return true;
       } else {
         if (this.secondDeptTreeList && this.secondDeptTreeList.length >= 1) {
-          return false
+          return false;
         } else {
-          return true
+          return true;
         }
       }
     },
     showArea() {
-      if (this.wellForm.deptid === '') {
-        return true
+      if (this.wellForm.deptid === "") {
+        return true;
       } else {
-        return false
+        return false;
       }
     },
-    firstDept() { // 获取权属单位
-      return this.wellForm.deptid
+    firstDept() {
+      // 获取权属单位
+      return this.wellForm.deptid;
     },
-    qu() { // 获取区
-      return this.wellForm.qu
-    }
+    qu() {
+      // 获取区
+      return this.wellForm.qu;
+    },
   },
   watch: {
-    firstDept(val) { // 监控权属单位变化
-      if (val !== '') {
-        this.wellForm.qu = ''
-        this.wellForm.area = ''
-        this.wellForm.responsibleDept = ''
-        this.fetchSecondDeptTree()
-        this.fetchArea1()
+    firstDept(val) {
+      // 监控权属单位变化
+      if (val !== "") {
+        this.wellForm.qu = "";
+        this.wellForm.area = "";
+        this.wellForm.responsibleDept = "";
+        this.fetchSecondDeptTree();
+        this.fetchArea1();
       }
     },
-    qu(val) { // 监控区变化
-      if (val !== '') {
-        this.wellForm.area = ''
-        this.fetchArea2()
+    qu(val) {
+      // 监控区变化
+      if (val !== "") {
+        this.wellForm.area = "";
+        this.fetchArea2();
       }
-    }
+    },
   },
-  created: function() {
-    this.fetchWellType()
-    this.imageList = []
-    this.fileList = []
+  created: function () {
+    this.fetchWellType();
+    this.imageList = [];
+    this.fileList = [];
   },
   methods: {
     // 加载组织机构树形下拉菜单
-    fetchSecondDeptTree: function() {
+    fetchSecondDeptTree: function () {
       const listQuery = {
         pid: this.wellForm.deptid,
-        deptType: '04'
-      }
-      getDeptTreeList(listQuery).then(response => {
-        console.log(response.data)
+        deptType: "04",
+      };
+      getDeptTreeList(listQuery).then((response) => {
+        console.log(response.data);
         if (response.data.list) {
-          this.secondDeptTreeList = toTreeList(response.data.list, this.wellForm.deptid)
+          this.secondDeptTreeList = toTreeList(
+            response.data.list,
+            this.wellForm.deptid
+          );
         }
-      })
+      });
     },
     // 获取井类型
     fetchWellType() {
-      getWellType().then(response => {
-        this.wellTypeList = []
-        const wellTypes = this.$store.getters.wellTypes
+      getWellType().then((response) => {
+        this.wellTypeList = [];
+        const wellTypes = this.$store.getters.wellTypes;
         for (const wellType of response.data) {
           if (wellTypes.indexOf(wellType.value) !== -1) {
-            this.wellTypeList.push(wellType)
+            this.wellTypeList.push(wellType);
           }
         }
         if (this.wellTypeList.length <= 1) {
-          this.showWellType = false
+          this.showWellType = false;
         }
-      })
+      });
     },
     // 获取区域1
     fetchArea1() {
-      getAreaByDept(this.wellForm.deptid).then(response => {
+      getAreaByDept(this.wellForm.deptid).then((response) => {
         if (response.code === 200) {
-          const pid = response.data.area
-          getAreaList(pid).then(response => {
-            this.quList = response.data
-          })
+          const pid = response.data.area;
+          getAreaList(pid).then((response) => {
+            this.quList = response.data;
+          });
         }
-      })
+      });
     },
     // 获取区域2
     fetchArea2() {
-      getAreaList(this.qu).then(response => {
-        this.jiedaoList = response.data
-      })
+      getAreaList(this.qu).then((response) => {
+        this.jiedaoList = response.data;
+      });
     },
     // 取消
     cancel() {
-      this.dialogFormVisible = false
-      this.fileList = []
+      this.dialogFormVisible = false;
+      this.fileList = [];
       // 清除验证
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     // 重置表单
     resetForm() {
       this.wellForm = {
-        wellCode: '', // 井编号
-        wellName: '', // 井名称
-        wellType: '', // 井类型
-        deptid: '', // 权属单位
-        deep: '', // 井深，
-        position: '', // 位置描述
-        coordinateX: '', // 经度
-        coordinateY: '', // 纬度
-        photos: '', // 照片路径
-        notes: '', // 备注,
-        qu: '',
-        area: '', // 街道
-        responsibleDept: '' // 维护人员部门
-      }
+        wellCode: "", // 井编号
+        wellName: "", // 井名称
+        wellType: "", // 井类型
+        deptid: "", // 权属单位
+        deep: "", // 井深，
+        position: "", // 位置描述
+        coordinateX: "", // 经度
+        coordinateY: "", // 纬度
+        photos: "", // 照片路径
+        notes: "", // 备注,
+        qu: "",
+        area: "", // 街道
+        responsibleDept: "", // 维护人员部门
+      };
       // 清空上传图片
-      this.$refs.upload.clearFiles()
-      this.fileList = []
-      this.imageList = []
-      this.hideUpload = this.fileList.length >= 4
+      this.$refs.upload.clearFiles();
+      this.fileList = [];
+      this.imageList = [];
+      this.hideUpload = this.fileList.length >= 4;
       // 清除验证
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     // 保存数据
-    saveData: function() {
-      this.wellForm.photos = ''
-      const count = this.fileList.length < 4 ? this.fileList.length : 4
+    saveData: function () {
+      this.wellForm.photos = "";
+      const count = this.fileList.length < 4 ? this.fileList.length : 4;
       for (let i = 0; i < count; i++) {
-        const image = this.fileList[i]
-        this.wellForm.photos += image.url + ';'
+        const image = this.fileList[i];
+        this.wellForm.photos += image.url + ";";
       }
       // 如果责任部门不选，则用权属作为责任部门
-      if (this.wellForm.responsibleDept === '') {
+      if (this.wellForm.responsibleDept === "") {
         if (this.secondDeptTreeList && this.secondDeptTreeList.length > 0) {
-          this.$message.warning('必须选择维护机构')
-          return
+          this.$message.warning("必须选择维护机构");
+          return;
         } else {
-          this.wellForm.responsibleDept = this.wellForm.deptid
+          this.wellForm.responsibleDept = this.wellForm.deptid;
         }
       }
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          addWell(this.wellForm).then(response => {
-            console.log('新增井')
+          addWell(this.wellForm).then((response) => {
+            console.log("新增井");
             if (response.code === 200) {
-              this.$message.success('新增成功!')
-              this.resetForm()
+              this.$message.success("新增成功!");
+              this.resetForm();
             }
-          })
+          });
         }
-      })
+      });
     },
     // 图片上传
     uploadFile(file) {
-      console.log('uploadFile:' + file.file.name)
+      console.log("uploadFile:" + file.file.name);
       // const base_url = process.env.BASE_API + '/static/'
-      Uploadimg(file).then(res => {
+      Uploadimg(file).then((res) => {
         if (res.code === 200) {
-          this.fileList.push({ name: file.file.name, url: res.data })
+          this.fileList.push({ name: file.file.name, url: res.data });
         }
-      })
+      });
     },
     // 上传前判断文件格式及大小
     handleBeforeUpload(file) {
-      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
-      let res = true
-      const isLt2M = file.size / 1024 / 1024 < 5
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      let res = true;
+      const isLt2M = file.size / 1024 / 1024 < 5;
       if (!isJPG) {
-        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
-        res = false
+        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
+        res = false;
       }
       if (!isLt2M) {
-        this.$message.error('上传图片大小不能超过 5MB!')
-        res = false
+        this.$message.error("上传图片大小不能超过 5MB!");
+        res = false;
       }
       for (const i in this.fileList) {
         if (this.fileList[i].name === file.name) {
-          this.$message.error('该图片已上传过，请选择其他图片')
-          res = false
+          this.$message.error("该图片已上传过，请选择其他图片");
+          res = false;
         }
       }
-      return res
+      return res;
     },
     // 文件列表移除文件时的钩子
     handleRemove(file, fileList) {
-      console.log('handleRemove')
+      console.log("handleRemove");
       for (const i in this.fileList) {
         if (this.fileList[i].name === file.name) {
-          this.fileList.splice(i, 1)
-          this.hideUpload = this.fileList.length >= 4
-          return
+          this.fileList.splice(i, 1);
+          this.hideUpload = this.fileList.length >= 4;
+          return;
         }
       }
-      this.handleChange()
+      this.handleChange();
     },
     // 限制提示
     handleExceed(files, fileList) {
-      console.log('handleExceed')
-      this.$message.warning(`限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+      console.log("handleExceed");
+      this.$message.warning(
+        `限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${
+          files.length + fileList.length
+        } 张图片`
+      );
     },
     // 点击文件列表中已上传的文件时的钩子
     handlePictureCardPreview(file) {
-      console.log('handlePictureCardPreview')
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
+      console.log("handlePictureCardPreview");
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
     },
     handleChange(file, fileList) {
-      console.log('handleChange')
+      console.log("handleChange");
       if (fileList) {
-        this.hideUpload = fileList.length >= 4
+        this.hideUpload = fileList.length >= 4;
       } else {
-        this.hideUpload = false
+        this.hideUpload = false;
       }
     },
     handleSuccess(response, file, fileList) {
-      console.log('handleSuccess')
-      const base_url = process.env.BASE_API + '/static/'
+      console.log("handleSuccess");
+      const base_url = process.env.BASE_API + "/static/";
       if (response.code === 200) {
-        this.fileList.push({ name: file.file.name, url: base_url + response.data })
-        this.handleChange()
+        this.fileList.push({
+          name: file.file.name,
+          url: base_url + response.data,
+        });
+        this.handleChange();
       } else {
-        this.$message.warning(response.message)
+        this.$message.warning(response.message);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" >
-  .hide .el-upload--picture-card {
-    display: none;
-  }
-  .main-form{
-    background-color: white;
-    padding: 20px 30px;
-    /*padding: 10px;*/
-  }
-  .el-dialog{
-    width:700px
-  }
-  .el-select{
-    width: 100%;
-  }
-  .line{
-    width: 50px;
-    margin-left: 5px;
-  }
-  .hide .el-upload-–picture-card{
-    display: none;
-  }
-  .imgBox{
-    width: 100%;
-    text-align: center;
-  }
+.hide .el-upload--picture-card {
+  display: none;
+}
+.main-form {
+  background-color: white;
+  padding: 20px 30px;
+  /*padding: 10px;*/
+}
+.el-dialog {
+  width: 700px;
+}
+.el-select {
+  width: 100%;
+}
+.line {
+  width: 50px;
+  margin-left: 5px;
+}
+.hide .el-upload-–picture-card {
+  display: none;
+}
+.imgBox {
+  width: 100%;
+  text-align: center;
+}
 </style>

diff --git a/src/views/dataManage/deviceData/listWaterData.vue b/src/views/dataManage/deviceData/listWaterData.vue
index dbbd41e..f60a31a 100644
--- a/src/views/dataManage/deviceData/listWaterData.vue
+++ b/src/views/dataManage/deviceData/listWaterData.vue
@@ -1,13 +1,29 @@
 <template>
   <div class="app-container">
     <!--筛选条件-->
-    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" >
+    <search-area
+      :need-clear="false"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="search"
+    >
       <!--一般查询条件-->
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable/>
+        <el-input
+          v-model.trim="listQuery.keywords"
+          placeholder="设备编号"
+          clearable
+        />
       </search-item>
       <search-item>
-        <area-select-tree v-model="listQuery.areaId" :need-top="false" :dept-show="true" placeholder="区域"/>
+        <area-select-tree
+          v-model="listQuery.areaId"
+          :need-top="false"
+          :dept-show="true"
+          placeholder="区域"
+        />
       </search-item>
       <!--<search-item>-->
       <!--<el-date-picker-->
@@ -21,26 +37,53 @@
       <!--</search-item>-->
     </search-area>
     <!--查询结果Table显示-->
-    <div style="padding:0px 10px">
+    <div style="padding: 0px 10px">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-menu" />数据列表
+          </div></el-col
+        >
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/liquiddata/export')" class="edit_btn" size="small" @click="batchExport">导出记录</el-button>
+          <el-button
+            v-if="hasPerm('/liquiddata/export')"
+            class="edit_btn"
+            size="small"
+            @click="batchExport"
+            >导出记录</el-button
+          >
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="listLoading"
+        :data="list"
+        class="table"
+        border
+        @selection-change="handleSelectionChange"
+      >
         <!--<el-table-column align="center" type="selection" width="55"/>-->
-        <el-table-column :index="indexMethod" align="center" type="index"/>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+        <el-table-column :index="indexMethod" align="center" type="index" />
+        <el-table-column
+          v-for="column in columns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
-            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{ scope.row[column.value] }}</span>
-            <span v-else-if="column.text==='设备位置'">{{ scope.row['areaFullName'] + scope.row[column.value] }}</span>
+            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{
+              scope.row[column.value]
+            }}</span>
+            <span v-else-if="column.text === '设备位置'">{{
+              scope.row["areaFullName"] + scope.row[column.value]
+            }}</span>
             <span v-else>{{ scope.row[column.value] }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="80">
+        <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="line(scope.row)">历史数据</el-button>
+            <el-button type="text" @click="line(scope.row)">历史数据</el-button> 
           </template>
         </el-table-column>
       </el-table>
@@ -48,105 +91,106 @@
     <!--分页-->
     <div class="pagination-container">
       <el-pagination
-        v-show="total>listQuery.limit"
+        v-show="total > listQuery.limit"
         :current-page="listQuery.offset"
-        :page-sizes="[10,20,30]"
+        :page-sizes="[10, 20, 30]"
         :page-size="listQuery.limit"
         :total="total"
         align="center"
         layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
+        @current-change="handleCurrentChange"
+      />
     </div>
-    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday"/>
+    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday" />
   </div>
 </template>
 
 <script>
-import selectTree from '@/components/SelectTree/singleSelect'
-import { getWatchData, batchExportLiquidData } from '@/api/data'
-import DeptSelect from '../../../components/DeptSelect/index'
-import { parseUrl } from '@/utils/parseutils'
-import WatchSevenDay from './watchSevenDay'
-import AreaSelectTree from '@/components/AreaSelect/areaSelectTree'
+import selectTree from "@/components/SelectTree/singleSelect";
+import { getWatchData, batchExportLiquidData } from "@/api/data";
+import DeptSelect from "../../../components/DeptSelect/index";
+import { parseUrl } from "@/utils/parseutils";
+import WatchSevenDay from "./watchSevenDay";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
 
 export default {
-  name: 'ListWaterData',
+  name: "ListWaterData",
   components: { AreaSelectTree, WatchSevenDay, DeptSelect, selectTree },
   data() {
     return {
       listQuery: {
-        areaId: '', // 关键字
-        keywords: '', // 关键字
+        areaId: "", // 关键字
+        keywords: "", // 关键字
         // deptid: '', // 部门id
         // beginTime: '', // 开始时间
         // endTime: '', // 结束时间
         offset: 1,
         limit: 10,
-        sort: '',
-        order: ''
+        sort: "",
+        order: "",
       }, // 筛选条件
       timeRange: [], // 时间范围
       columns: [
         {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center',
-          width: 120
+          text: "设备编号",
+          value: "devcode",
+          align: "center",
+          width: 120,
         },
         {
-          text: '井编号',
-          value: 'wellCode',
-          align: 'center',
-          width: 100
+          text: "井编号",
+          value: "wellCode",
+          align: "center",
+          width: 100,
         },
         {
-          text: '设备类型',
-          value: 'deviceTypeName',
-          align: 'center',
-          width: 80
+          text: "设备类型",
+          value: "deviceTypeName",
+          align: "center",
+          width: 80,
         },
         {
-          text: '设备位置',
-          value: 'position',
-          align: 'center'
+          text: "设备位置",
+          value: "position",
+          align: "center",
         },
         {
-          text: '抄表读数',
-          value: 'watchNum',
-          align: 'center',
-          width: 80
+          text: "抄表读数",
+          value: "watchNum",
+          align: "center",
+          width: 80,
         },
         {
-          text: '采集时间',
-          value: 'uptime',
+          text: "采集时间",
+          value: "uptime",
           width: 170,
-          align: 'center'
+          align: "center",
         },
         {
-          text: '今日用水量',
-          value: 'dayCount',
-          align: 'center',
-          width: 100
+          text: "今日用水量",
+          value: "dayCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '本月用水量',
-          value: 'monthCount',
-          align: 'center',
-          width: 100
+          text: "本月用水量",
+          value: "monthCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '总用水量',
-          value: 'totalCount',
-          align: 'center',
-          width: 80
+          text: "总用水量",
+          value: "totalCount",
+          align: "center",
+          width: 80,
         },
         {
-          text: '状态描述',
-          value: 'statusName',
-          align: 'center',
-          width: 80
-        }
+          text: "状态描述",
+          value: "statusName",
+          align: "center",
+          width: 80,
+        },
         // {
         //   text: '分区',
         //   value: 'deptName',
@@ -158,10 +202,10 @@
       total: 0, // 数据总数
       deviceTypeList: [], // 液位配置类型列表
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       }, // 分区树形下拉菜单
       deptTreeList: null, // 组织树列表数据
       showDeptTree: 0, // 是否显示分区下拉
@@ -171,151 +215,156 @@
       dialogFormVisible: false,
       editShow: false, // 是否显示编辑框
       detailShow: false, // 是否显示编辑框
-      deptShowTop: false
-    }
+      deptShowTop: false,
+    };
   },
   watch: {
     timeRange(val) {
       if (val && val.length > 0) {
-        this.listQuery.beginTime = val[0]
-        this.listQuery.endTime = val[1]
+        this.listQuery.beginTime = val[0];
+        this.listQuery.endTime = val[1];
       } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
+        this.listQuery.beginTime = "";
+        this.listQuery.endTime = "";
       }
-    }
+    },
   },
   created() {
     // 如果路径里带参数，解析devcode参数
     if (window.location.href) {
-      const params = parseUrl(window.location.href)
-      if (params && params.deviceType === '2' && params.devcode) {
-        this.listQuery.keywords = params.devcode
+      const params = parseUrl(window.location.href);
+      if (params && params.deviceType === "2" && params.devcode) {
+        this.listQuery.keywords = params.devcode;
       }
-      this.fetchData()
+      this.fetchData();
     }
   },
   activated() {
     // 要是路由里有参数
     if (this.$route.query && this.$route.query.devcode) {
-      this.listQuery.keywords = this.$route.query.devcode
-      this.fetchData(false)// 获取数据
+      this.listQuery.keywords = this.$route.query.devcode;
+      this.fetchData(false); // 获取数据
     } else {
-      this.fetchData()
+      this.fetchData();
     }
   },
   methods: {
     // 批量导出
     batchExport() {
-      console.log('批量导出液位配置')
+      console.log("批量导出液位配置");
       // 全屏加载动画
       const loading = this.$loading({
         lock: true,
-        text: '数据处理中,请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      batchExportLiquidData(this.listQuery).then(res => {
-        loading.close() // 关闭加载动画
-        console.log('download===', res)
-        const blob = new Blob([res.data])
-        const downloadElement = document.createElement('a')
-        const href = window.URL.createObjectURL(blob) // 创建下载的链接
-        downloadElement.href = href
-        downloadElement.download = `远传水表数据.xlsx` // 下载后文件名
-        document.body.appendChild(downloadElement)
-        downloadElement.click() // 点击下载
-        document.body.removeChild(downloadElement) // 下载完成移除元素
-        window.URL.revokeObjectURL(href) // 释放blob对象
-      }).catch((res) => {
-        loading.close()
-      })
+        text: "数据处理中,请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      batchExportLiquidData(this.listQuery)
+        .then((res) => {
+          loading.close(); // 关闭加载动画
+          console.log("download===", res);
+          const blob = new Blob([res.data]);
+          const downloadElement = document.createElement("a");
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          downloadElement.href = href;
+          downloadElement.download = `远传水表数据.xlsx`; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href); // 释放blob对象
+        })
+        .catch((res) => {
+          loading.close();
+        });
     },
     selectnode(node) {
-      this.listQuery.areaId = node.id
-      this.search()
+      this.listQuery.areaId = node.id;
+      this.search();
     },
     // 查询数据
     search() {
-      this.fetchData(false)
+      this.fetchData(false);
     },
     line(row) {
-      this.dialogFormVisible = true
-      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row)
+      this.dialogFormVisible = true;
+      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row);
     },
     // 获取液位配置数据
     fetchData(isNowPage = true) {
-      this.listLoading = true
-      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-        this.listQuery.offset = 1
+      this.listLoading = true;
+      if (!isNowPage) {
+        // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1;
       }
-      getWatchData(this.listQuery).then(response => {
-        this.list = response.data.rows.map(function(item) {
-          item.areaFullName = item.areaFullName.replace('\/', '').replace('顶层', '')
-          return item
-        })
-        this.total = parseInt(response.data.total)
-        this.listLoading = false
-      })
+      getWatchData(this.listQuery).then((response) => {
+        this.list = response.data.rows.map(function (item) {
+          item.areaFullName = item.areaFullName
+            .replace("/", "")
+            .replace("顶层", "");
+          return item;
+        });
+        this.total = parseInt(response.data.total);
+        this.listLoading = false;
+      });
     },
     checkCell(value) {
-      var cell = parseFloat(value)
+      var cell = parseFloat(value);
       if (cell < 10) {
-        return 'warning-state'
+        return "warning-state";
       }
     },
     indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1;
     },
     // 改变页容量
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
+      this.listQuery.limit = val;
+      this.fetchData();
     },
     // 改变当前页
     handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
+      this.listQuery.offset = val;
+      this.fetchData();
     },
     // 多选触发方法
     handleSelectionChange(val) {
-      this.multipleSelection = val
-    }
-  }
-}
+      this.multipleSelection = val;
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .app-container{
-    padding: 0px 0px;
-  }
-  $tableTitleHeight:46px;
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+.app-container {
+  padding: 0px 0px;
+}
+$tableTitleHeight: 46px;
+.table {
+  margin-bottom: 20px;
+}
+.pagination-container {
+  margin-bottom: 50px;
+}
+.table-title {
+  background-color: rgba(243, 243, 243, 1);
+  height: $tableTitleHeight;
+  .title-header {
+    line-height: $tableTitleHeight;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
+}
+.edit_btns {
+  .edit_btn {
+    float: right;
+    margin: 7px 3px; //为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
   }
-  .warning-state{
-    color:red
-  }
+}
+.warning-state {
+  color: red;
+}
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 552545d..a906820 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -159,6 +159,7 @@
       redirect: "/", // 重定向路径
       showKaptcha: false, // 是否显示验证码
       // bgUrl: require('../../assets/login_images/theme0/bg.png'), // 背景图片
+      bgUrl: "",
       leftUrl: require("../../assets/login_images/theme0/left.jpg"), // 左边图片
     };
   },
diff --git a/src/views/wellManage/addWell.vue b/src/views/wellManage/addWell.vue
index 29aa784..b13aa7a 100644
--- a/src/views/wellManage/addWell.vue
+++ b/src/views/wellManage/addWell.vue
@@ -1,52 +1,89 @@
 <template>
   <div class="main-form">
-    <el-form ref="dataForm" :label-position="labelPosition" :rules="rules" :model="wellForm" label-width="120px">
+    <el-form
+      ref="dataForm"
+      :label-position="labelPosition"
+      :rules="rules"
+      :model="wellForm"
+      label-width="120px"
+    >
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井名称" prop="wellName">
-            <el-input v-model.trim="wellForm.wellName" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.wellName"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="3">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model.trim="wellForm.wellCode" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.wellCode"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井类型" prop="wellType">
-            <el-select v-model="wellForm.wellType" placeholder="选择井类型" clearable>
+            <el-select
+              v-model="wellForm.wellType"
+              placeholder="选择井类型"
+              clearable
+            >
               <el-option
                 v-for="item in wellTypeList"
                 :key="item.value"
                 :label="item.name"
-                :value="item.value"/>
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="3">
           <el-form-item label="权属单位" prop="deptid">
-            <dept-select v-model="wellForm.deptid" :need-top="deptShowTop" :dept-show="deptShow" dept-type="03" placeholder="选择权属单位"/>
+            <dept-select
+              v-model="wellForm.deptid"
+              :need-top="deptShowTop"
+              :dept-show="deptShow"
+              dept-type="03"
+              placeholder="选择权属单位"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井深(m)" prop="deep">
-            <el-input v-model.trim="wellForm.deep" type="text" placeholder="需要装液位监测仪的井必填"/>
+            <el-input
+              v-model.trim="wellForm.deep"
+              type="text"
+              placeholder="需要装液位监测仪的井必填"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="经度" prop="coordinateX">
-            <el-input v-model.trim="wellForm.coordinateX" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.coordinateX"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="3">
           <el-form-item label="纬度" prop="coordinateY">
-            <el-input v-model.trim="wellForm.coordinateY" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.coordinateY"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -62,17 +99,27 @@
               :on-change="handleChange"
               :on-success="handleSuccess"
               :limit="4"
-              :class="{hide:hideUpload}"
+              :class="{ hide: hideUpload }"
               :http-request="uploadFile"
               action="string"
               multiple
               accept=".jpg,.jpeg,.png "
-              list-type="picture-card">
-              <i class="el-icon-plus"/>
+              list-type="picture-card"
+            >
+              <i class="el-icon-plus" />
             </el-upload>
-            <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+            <el-dialog
+              :visible.sync="dialogVisible"
+              title="图片预览"
+              append-to-body
+            >
               <div class="imgBox">
-                <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+                <img
+                  :src="dialogImageUrl"
+                  max-height="400px;"
+                  alt=""
+                  style="margin: 0 auto"
+                />
               </div>
             </el-dialog>
           </el-form-item>
@@ -112,10 +159,19 @@
           <el-form-item label="详细地址" prop="position">
             <el-col :span="12" style="padding-left: 0px">
               <!--<area-select-input :node="node" :need-full="true" placeholder="区域"/>-->
-              <area-select-tree v-model="wellForm.area" :need-top="false" :dept-show="true" placeholder="区域"/>
+              <area-select-tree
+                v-model="wellForm.area"
+                :need-top="false"
+                :dept-show="true"
+                placeholder="区域"
+              />
             </el-col>
             <el-col :span="12">
-              <el-input v-model.trim="wellForm.position" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.position"
+                type="text"
+                placeholder="必填"
+              />
             </el-col>
           </el-form-item>
         </el-col>
@@ -123,20 +179,33 @@
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井维护机构" prop="responsibleDept">
-            <el-select v-model="wellForm.responsibleDept" :disabled="showResponseDept" placeholder="选择维护组织，不选默认为权属单位" clearable>
+            <el-select
+              v-model="wellForm.responsibleDept"
+              :disabled="showResponseDept"
+              placeholder="选择维护组织，不选默认为权属单位"
+              clearable
+            >
               <el-option
                 v-for="item in secondDeptTreeList"
                 :key="item.id"
                 :label="item.name"
-                :value="item.id"/>
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
-        <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px;">
+        <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px">
           <el-button size="medium" @click="resetForm"> 重置 </el-button>
-          <el-button type="primary" size="medium" style="margin-left: 10px;" @click="saveData"> 保存 </el-button>
+          <el-button
+            type="primary"
+            size="medium"
+            style="margin-left: 10px"
+            @click="saveData"
+          >
+            保存
+          </el-button>
         </el-col>
       </el-row>
     </el-form>
@@ -144,77 +213,81 @@
 </template>
 
 <script>
-import { toTreeList } from '@/utils/structure'
-import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/system/dept'
-import { getAreaList, getAreaByDept } from '@/api/system/area'
-import { getWellType, addWell } from '@/api/well'
-import { Uploadimg } from '@/api/common'
-import DeptSelect from '@/components/DeptSelect'
-import AreaSelectTree from '@/components/AreaSelect/areaSelectTree'
+import { toTreeList } from "@/utils/structure";
+import SelectTree from "@/components/SelectTree/singleSelect";
+import { getDeptTreeList } from "@/api/system/dept";
+import { getAreaList, getAreaByDept } from "@/api/system/area";
+import { getWellType, addWell } from "@/api/well";
+import { Uploadimg } from "@/api/common";
+import DeptSelect from "@/components/DeptSelect";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
 
 export default {
-  name: 'AddWell',
+  name: "AddWell",
   components: { SelectTree, DeptSelect, AreaSelectTree },
   data() {
     const validateDeep = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          const deep = parseFloat(value)
-          if (deep > 10 || deep < 0) { callback(new Error('请填写0到10数值')) } else { callback() }
+          const deep = parseFloat(value);
+          if (deep > 10 || deep < 0) {
+            callback(new Error("请填写0到10数值"));
+          } else {
+            callback();
+          }
         }
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validateLng = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('经度不能为空'))
+        callback(new Error("经度不能为空"));
       }
-    }
+    };
     const validateLat = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('纬度不能为空'))
+        callback(new Error("纬度不能为空"));
       }
-    }
+    };
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: "", // 对话框类型：create,update
       node: null,
       wellForm: {
-        wellCode: '', // 井编号
-        wellName: '', // 井名称
-        wellType: '', // 井类型
-        deptid: '', // 权属单位
-        deep: '', // 井深，
-        position: '', // 位置描述
-        coordinateX: '', // 经度
-        coordinateY: '', // 纬度
-        photos: '', // 照片路径
-        notes: '', // 备注,
-        qu: '',
-        area: '', // 街道
-        responsibleDept: '' // 维护人员部门
+        wellCode: "", // 井编号
+        wellName: "", // 井名称
+        wellType: "", // 井类型
+        deptid: "1148031048115494913", // 权属单位
+        deep: "", // 井深，
+        position: "", // 位置描述
+        coordinateX: "", // 经度
+        coordinateY: "", // 纬度
+        photos: "", // 照片路径
+        notes: "", // 备注,
+        qu: "",
+        area: "", // 街道
+        responsibleDept: "", // 维护人员部门
       }, // 表单
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       },
       hideUpload: false,
       fileList: [],
@@ -225,289 +298,345 @@
       quList: null,
       jiedaoList: null,
       textMap: {
-        update: '编辑',
-        create: '新增'
+        update: "编辑",
+        create: "新增",
       }, // 表头显示标题
       rules: {
-        wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
-        wellName: [{ required: true, message: '井名称不能为空', trigger: ['blur', 'change'] }],
-        position: [{ required: true, message: '井详细地址不能为空', trigger: ['blur', 'change'] }],
-        deep: [{ required: false, trigger: ['blur', 'change'], validator: validateDeep }],
-        coordinateX: [{ required: true, trigger: ['blur', 'change'], validator: validateLat }],
-        coordinateY: [{ required: true, trigger: ['blur', 'change'], validator: validateLng }],
-        deptid: [{ required: true, message: '组织机构必选', trigger: 'change' }],
-        wellType: [{ required: true, message: '井类型必选', trigger: 'change' }],
-        qu: [{ required: true, message: '所在区/县必选', trigger: 'change' }],
-        area: [{ required: true, message: '所在街道/镇必选', trigger: 'change' }]
+        wellCode: [
+          {
+            required: true,
+            message: "井编号不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        wellName: [
+          {
+            required: true,
+            message: "井名称不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        position: [
+          {
+            required: true,
+            message: "井详细地址不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        deep: [
+          {
+            required: false,
+            trigger: ["blur", "change"],
+            validator: validateDeep,
+          },
+        ],
+        coordinateX: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLat,
+          },
+        ],
+        coordinateY: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLng,
+          },
+        ],
+        deptid: [
+          { required: true, message: "组织机构必选", trigger: "change" },
+        ],
+        wellType: [
+          { required: true, message: "井类型必选", trigger: "change" },
+        ],
+        qu: [{ required: true, message: "所在区/县必选", trigger: "change" }],
+        area: [
+          { required: true, message: "所在街道/镇必选", trigger: "change" },
+        ],
       },
-      uploadPath: process.env.BASE_API + '/imageUpload', // 图片上传路径
-      dialogImageUrl: '',
+      uploadPath: process.env.BASE_API + "/imageUpload", // 图片上传路径
+      dialogImageUrl: "",
       dialogVisible: false,
-      labelPosition: 'right',
+      labelPosition: "right",
       responseAssignShow: false,
       deptShowTop: false, // 权属单位下拉是否显示顶级
-      deptShow: true
-    }
+      deptShow: true,
+    };
   },
   computed: {
     showResponseDept() {
-      if (this.wellForm.deptid === '') {
-        return true
+      if (this.wellForm.deptid === "") {
+        return true;
       } else {
         if (this.secondDeptTreeList && this.secondDeptTreeList.length >= 1) {
-          return false
+          return false;
         } else {
-          return true
+          return true;
         }
       }
     },
     showArea() {
-      if (this.wellForm.deptid === '') {
-        return true
+      if (this.wellForm.deptid === "") {
+        return true;
       } else {
-        return false
+        return false;
       }
     },
-    firstDept() { // 获取权属单位
-      return this.wellForm.deptid
+    firstDept() {
+      // 获取权属单位
+      return this.wellForm.deptid;
     },
-    qu() { // 获取区
-      return this.wellForm.qu
-    }
+    qu() {
+      // 获取区
+      return this.wellForm.qu;
+    },
   },
   watch: {
-    firstDept(val) { // 监控权属单位变化
-      if (val !== '') {
-        this.wellForm.qu = ''
-        this.wellForm.area = ''
-        this.wellForm.responsibleDept = ''
-        this.fetchSecondDeptTree()
-        this.fetchArea1()
+    firstDept(val) {
+      // 监控权属单位变化
+      if (val !== "") {
+        this.wellForm.qu = "";
+        this.wellForm.area = "";
+        this.wellForm.responsibleDept = "";
+        this.fetchSecondDeptTree();
+        this.fetchArea1();
       }
     },
-    qu(val) { // 监控区变化
-      if (val !== '') {
-        this.wellForm.area = ''
-        this.fetchArea2()
+    qu(val) {
+      // 监控区变化
+      if (val !== "") {
+        this.wellForm.area = "";
+        this.fetchArea2();
       }
-    }
+    },
   },
-  created: function() {
-    this.fetchWellType()
-    this.imageList = []
-    this.fileList = []
+  created: function () {
+    this.fetchWellType();
+    this.imageList = [];
+    this.fileList = [];
   },
   methods: {
     // 加载组织机构树形下拉菜单
-    fetchSecondDeptTree: function() {
+    fetchSecondDeptTree: function () {
       const listQuery = {
         pid: this.wellForm.deptid,
-        deptType: '04'
-      }
-      getDeptTreeList(listQuery).then(response => {
-        console.log(response.data)
+        deptType: "04",
+      };
+      getDeptTreeList(listQuery).then((response) => {
+        console.log(response.data);
         if (response.data.list) {
-          this.secondDeptTreeList = toTreeList(response.data.list, this.wellForm.deptid)
+          this.secondDeptTreeList = toTreeList(
+            response.data.list,
+            this.wellForm.deptid
+          );
         }
-      })
+      });
     },
     // 获取井类型
     fetchWellType() {
-      getWellType().then(response => {
-        this.wellTypeList = []
-        const wellTypes = this.$store.getters.wellTypes
+      getWellType().then((response) => {
+        this.wellTypeList = [];
+        const wellTypes = this.$store.getters.wellTypes;
         for (const wellType of response.data) {
           if (wellTypes.indexOf(wellType.value) !== -1) {
-            this.wellTypeList.push(wellType)
+            this.wellTypeList.push(wellType);
           }
         }
         if (this.wellTypeList.length <= 1) {
-          this.showWellType = false
+          this.showWellType = false;
         }
-      })
+      });
     },
     // 获取区域1
     fetchArea1() {
-      getAreaByDept(this.wellForm.deptid).then(response => {
+      getAreaByDept(this.wellForm.deptid).then((response) => {
         if (response.code === 200) {
-          const pid = response.data.area
-          getAreaList(pid).then(response => {
-            this.quList = response.data
-          })
+          const pid = response.data.area;
+          getAreaList(pid).then((response) => {
+            this.quList = response.data;
+          });
         }
-      })
+      });
     },
     // 获取区域2
     fetchArea2() {
-      getAreaList(this.qu).then(response => {
-        this.jiedaoList = response.data
-      })
+      getAreaList(this.qu).then((response) => {
+        this.jiedaoList = response.data;
+      });
     },
     // 取消
     cancel() {
-      this.dialogFormVisible = false
-      this.fileList = []
+      this.dialogFormVisible = false;
+      this.fileList = [];
       // 清除验证
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     // 重置表单
     resetForm() {
       this.wellForm = {
-        wellCode: '', // 井编号
-        wellName: '', // 井名称
-        wellType: '', // 井类型
-        deptid: '', // 权属单位
-        deep: '', // 井深，
-        position: '', // 位置描述
-        coordinateX: '', // 经度
-        coordinateY: '', // 纬度
-        photos: '', // 照片路径
-        notes: '', // 备注,
-        qu: '',
-        area: '', // 街道
-        responsibleDept: '' // 维护人员部门
-      }
+        wellCode: "", // 井编号
+        wellName: "", // 井名称
+        wellType: "", // 井类型
+        deptid: "", // 权属单位
+        deep: "", // 井深，
+        position: "", // 位置描述
+        coordinateX: "", // 经度
+        coordinateY: "", // 纬度
+        photos: "", // 照片路径
+        notes: "", // 备注,
+        qu: "",
+        area: "", // 街道
+        responsibleDept: "", // 维护人员部门
+      };
       // 清空上传图片
-      this.$refs.upload.clearFiles()
-      this.fileList = []
-      this.imageList = []
-      this.hideUpload = this.fileList.length >= 4
+      this.$refs.upload.clearFiles();
+      this.fileList = [];
+      this.imageList = [];
+      this.hideUpload = this.fileList.length >= 4;
       // 清除验证
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     // 保存数据
-    saveData: function() {
-      this.wellForm.photos = ''
-      const count = this.fileList.length < 4 ? this.fileList.length : 4
+    saveData: function () {
+      this.wellForm.photos = "";
+      const count = this.fileList.length < 4 ? this.fileList.length : 4;
       for (let i = 0; i < count; i++) {
-        const image = this.fileList[i]
-        this.wellForm.photos += image.url + ';'
+        const image = this.fileList[i];
+        this.wellForm.photos += image.url + ";";
       }
       // 如果责任部门不选，则用权属作为责任部门
-      if (this.wellForm.responsibleDept === '') {
+      if (this.wellForm.responsibleDept === "") {
         if (this.secondDeptTreeList && this.secondDeptTreeList.length > 0) {
-          this.$message.warning('必须选择维护机构')
-          return
+          this.$message.warning("必须选择维护机构");
+          return;
         } else {
-          this.wellForm.responsibleDept = this.wellForm.deptid
+          this.wellForm.responsibleDept = this.wellForm.deptid;
         }
       }
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          addWell(this.wellForm).then(response => {
-            console.log('新增井')
+          addWell(this.wellForm).then((response) => {
+            console.log("新增井");
             if (response.code === 200) {
-              this.$message.success('新增成功!')
-              this.resetForm()
+              this.$message.success("新增成功!");
+              this.resetForm();
             }
-          })
+          });
         }
-      })
+      });
     },
     // 图片上传
     uploadFile(file) {
-      console.log('uploadFile:' + file.file.name)
+      console.log("uploadFile:" + file.file.name);
       // const base_url = process.env.BASE_API + '/static/'
-      Uploadimg(file).then(res => {
+      Uploadimg(file).then((res) => {
         if (res.code === 200) {
-          this.fileList.push({ name: file.file.name, url: res.data })
+          this.fileList.push({ name: file.file.name, url: res.data });
         }
-      })
+      });
     },
     // 上传前判断文件格式及大小
     handleBeforeUpload(file) {
-      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
-      let res = true
-      const isLt2M = file.size / 1024 / 1024 < 5
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      let res = true;
+      const isLt2M = file.size / 1024 / 1024 < 5;
       if (!isJPG) {
-        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
-        res = false
+        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
+        res = false;
       }
       if (!isLt2M) {
-        this.$message.error('上传图片大小不能超过 5MB!')
-        res = false
+        this.$message.error("上传图片大小不能超过 5MB!");
+        res = false;
       }
       for (const i in this.fileList) {
         if (this.fileList[i].name === file.name) {
-          this.$message.error('该图片已上传过，请选择其他图片')
-          res = false
+          this.$message.error("该图片已上传过，请选择其他图片");
+          res = false;
         }
       }
-      return res
+      return res;
     },
     // 文件列表移除文件时的钩子
     handleRemove(file, fileList) {
-      console.log('handleRemove')
+      console.log("handleRemove");
       for (const i in this.fileList) {
         if (this.fileList[i].name === file.name) {
-          this.fileList.splice(i, 1)
-          this.hideUpload = this.fileList.length >= 4
-          return
+          this.fileList.splice(i, 1);
+          this.hideUpload = this.fileList.length >= 4;
+          return;
         }
       }
-      this.handleChange()
+      this.handleChange();
     },
     // 限制提示
     handleExceed(files, fileList) {
-      console.log('handleExceed')
-      this.$message.warning(`限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+      console.log("handleExceed");
+      this.$message.warning(
+        `限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${
+          files.length + fileList.length
+        } 张图片`
+      );
     },
     // 点击文件列表中已上传的文件时的钩子
     handlePictureCardPreview(file) {
-      console.log('handlePictureCardPreview')
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
+      console.log("handlePictureCardPreview");
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
     },
     handleChange(file, fileList) {
-      console.log('handleChange')
+      console.log("handleChange");
       if (fileList) {
-        this.hideUpload = fileList.length >= 4
+        this.hideUpload = fileList.length >= 4;
       } else {
-        this.hideUpload = false
+        this.hideUpload = false;
       }
     },
     handleSuccess(response, file, fileList) {
-      console.log('handleSuccess')
-      const base_url = process.env.BASE_API + '/static/'
+      console.log("handleSuccess");
+      const base_url = process.env.BASE_API + "/static/";
       if (response.code === 200) {
-        this.fileList.push({ name: file.file.name, url: base_url + response.data })
-        this.handleChange()
+        this.fileList.push({
+          name: file.file.name,
+          url: base_url + response.data,
+        });
+        this.handleChange();
       } else {
-        this.$message.warning(response.message)
+        this.$message.warning(response.message);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" >
-  .hide .el-upload--picture-card {
-    display: none;
-  }
-  .main-form{
-    background-color: white;
-    padding: 20px 30px;
-    /*padding: 10px;*/
-  }
-  .el-dialog{
-    width:700px
-  }
-  .el-select{
-    width: 100%;
-  }
-  .line{
-    width: 50px;
-    margin-left: 5px;
-  }
-  .hide .el-upload-–picture-card{
-    display: none;
-  }
-  .imgBox{
-    width: 100%;
-    text-align: center;
-  }
+.hide .el-upload--picture-card {
+  display: none;
+}
+.main-form {
+  background-color: white;
+  padding: 20px 30px;
+  /*padding: 10px;*/
+}
+.el-dialog {
+  width: 700px;
+}
+.el-select {
+  width: 100%;
+}
+.line {
+  width: 50px;
+  margin-left: 5px;
+}
+.hide .el-upload-–picture-card {
+  display: none;
+}
+.imgBox {
+  width: 100%;
+  text-align: center;
+}
 </style>
diff --git a/src/views/wellManage/editWell.vue b/src/views/wellManage/editWell.vue
index d73bdb0..f4e6065 100644
--- a/src/views/wellManage/editWell.vue
+++ b/src/views/wellManage/editWell.vue
@@ -1,53 +1,98 @@
 <template>
-  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="编辑井" append-to-body @close="cancel">
+  <el-dialog
+    :visible.sync="dialogFormVisible"
+    class="editDialog"
+    title="编辑井"
+    append-to-body
+    @close="cancel"
+  >
     <el-scrollbar :native="false">
-      <el-form ref="dataForm" :label-position="labelPosition" :rules="rules" :model="wellForm" label-width="120px">
+      <el-form
+        ref="dataForm"
+        :label-position="labelPosition"
+        :rules="rules"
+        :model="wellForm"
+        label-width="120px"
+      >
         <el-row>
           <el-col :span="10">
             <el-form-item label="井名称" prop="wellName">
-              <el-input v-model.trim="wellForm.wellName" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.wellName"
+                type="text"
+                placeholder="必填"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="10" :offset="1">
             <el-form-item label="井编号" prop="wellCode">
-              <el-input v-model.trim="wellForm.wellCode" :disabled="isEditMode" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.wellCode"
+                :disabled="isEditMode"
+                type="text"
+                placeholder="必填"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="10">
             <el-form-item label="井类型" prop="wellType">
-              <el-select v-model="wellForm.wellType" placeholder="点击选择井类型" clearable>
+              <el-select
+                v-model="wellForm.wellType"
+                placeholder="点击选择井类型"
+                clearable
+              >
                 <el-option
                   v-for="item in wellTypeList"
                   :key="item.value"
                   :label="item.name"
-                  :value="item.value"/>
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="10" :offset="1">
             <el-form-item label="权属单位" prop="deptid">
-              <dept-select v-model="wellForm.deptid" :need-top="deptShowTop" :dept-show="deptShow" dept-type="03" placeholder="选择权属单位" @change="deptChanged"/>
+              <dept-select
+                v-model="wellForm.deptid"
+                :need-top="deptShowTop"
+                :dept-show="deptShow"
+                dept-type="03"
+                placeholder="选择权属单位"
+                @change="deptChanged"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="10">
             <el-form-item label="井深(m)" prop="deep">
-              <el-input v-model.trim="wellForm.deep" type="text" placeholder="需要装液位监测仪的井必填"/>
+              <el-input
+                v-model.trim="wellForm.deep"
+                type="text"
+                placeholder="需要装液位监测仪的井必填"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="10">
             <el-form-item label="经度" prop="coordinateX">
-              <el-input v-model.trim="wellForm.coordinateX" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.coordinateX"
+                type="text"
+                placeholder="必填"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="10" :offset="1">
             <el-form-item label="纬度" prop="coordinateY">
-              <el-input v-model.trim="wellForm.coordinateY" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.coordinateY"
+                type="text"
+                placeholder="必填"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -64,22 +109,32 @@
                 :http-request="uploadFile"
                 :file-list="imageList"
                 :limit="4"
-                :class="{hide:hideUpload}"
+                :class="{ hide: hideUpload }"
                 multiple
                 action="string"
                 accept=".jpg,.jpeg,.png "
-                list-type="picture-card">
-                <i class="el-icon-plus"/>
+                list-type="picture-card"
+              >
+                <i class="el-icon-plus" />
               </el-upload>
-              <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+              <el-dialog
+                :visible.sync="dialogVisible"
+                title="图片预览"
+                append-to-body
+              >
                 <div class="imgBox">
-                  <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+                  <img
+                    :src="dialogImageUrl"
+                    max-height="400px;"
+                    alt=""
+                    style="margin: 0 auto"
+                  />
                 </div>
               </el-dialog>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="1">
+        <!-- <el-row :gutter="1">
           <el-form-item label="所在区域" required>
             <el-col :span="5">
               <el-form-item prop="qu">
@@ -114,25 +169,70 @@
               <el-input v-model.trim="wellForm.position" type="text" placeholder="必填"/>
             </el-form-item>
           </el-col>
+        </el-row> -->
+
+        <el-row :gutter="1">
+          <el-col :span="8">
+            <el-form-item label="所在区域" prop="areaId">
+              <area-select-tree
+                v-model.trim="wellForm.areaId"
+                :need-top="false"
+                :dept-show="true"
+                placeholder="区域"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="10">
+            <el-form-item label="" prop="position">
+              <el-input
+                style="margin-left: 30px"
+                v-model.trim="wellForm.position"
+                type="text"
+                placeholder="具体位置必填"
+              />
+            </el-form-item>
+          </el-col>
         </el-row>
-        <el-row v-show="secondDeptTreeList.length>=1" :gutter="20">
+
+        <el-row v-show="secondDeptTreeList.length >= 1" :gutter="20">
           <el-col :span="13">
             <el-form-item label="井维护机构" prop="responsibleDept">
-              <el-select v-if="secondDeptTreeList.length>=1" v-model="wellForm.responsibleDept" :disabled="showResponseDept" placeholder="选择维护组织，不选默认为权属单位" clearable>
+              <el-select
+                v-if="secondDeptTreeList.length >= 1"
+                v-model="wellForm.responsibleDept"
+                :disabled="showResponseDept"
+                placeholder="选择维护组织，不选默认为权属单位"
+                clearable
+              >
                 <el-option
                   v-for="item in secondDeptTreeList"
                   :key="item.id"
                   :label="item.name"
-                  :value="item.id"/>
+                  :value="item.id"
+                />
               </el-select>
-              <el-input v-else v-model="wellForm.responsibleDeptName" type="text" placeholder="未知" disabled/>
+              <el-input
+                v-else
+                v-model="wellForm.responsibleDeptName"
+                type="text"
+                placeholder="未知"
+                disabled
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
-          <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px;">
+          <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px">
             <el-button size="medium" @click="cancel"> 取消</el-button>
-            <el-button type="primary" size="medium" style="margin-left: 10px;" @click="saveData"> 保存</el-button>
+            <el-button
+              type="primary"
+              size="medium"
+              style="margin-left: 10px"
+              @click="saveData"
+            >
+              保存</el-button
+            >
           </el-col>
         </el-row>
       </el-form>
@@ -141,80 +241,82 @@
 </template>
 
 <script>
-import { toTreeList } from '@/utils/structure'
-import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/system/dept'
-import { getAreaList, getAreaByDept } from '@/api/system/area'
-import { getWellType, updateWell } from '@/api/well'
-import { Uploadimg } from '@/api/common'
-import DeptSelect from '@/components/DeptSelect'
+import { toTreeList } from "@/utils/structure";
+import SelectTree from "@/components/SelectTree/singleSelect";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
+import { getDeptTreeList } from "@/api/system/dept";
+import { getAreaList, getAreaByDept } from "@/api/system/area";
+import { getWellType, updateWell } from "@/api/well";
+import { Uploadimg } from "@/api/common";
+import DeptSelect from "@/components/DeptSelect";
 
 export default {
-  name: 'EditWell',
-  components: { SelectTree, DeptSelect },
+  name: "EditWell",
+  components: { SelectTree, DeptSelect, AreaSelectTree },
   data() {
     const validateDeep = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          const deep = parseFloat(value)
+          const deep = parseFloat(value);
           if (deep > 10 || deep < 0) {
-            callback(new Error('请填写0到10数值'))
+            callback(new Error("请填写0到10数值"));
           } else {
-            callback()
+            callback();
           }
         }
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validateLng = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('经度不能为空'))
+        callback(new Error("经度不能为空"));
       }
-    }
+    };
     const validateLat = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('纬度不能为空'))
+        callback(new Error("纬度不能为空"));
       }
-    }
+    };
     return {
       dialogFormVisible: false, // 对话框是否显示
       wellForm: {
+        areaId: "",
         id: null, // 井id
-        wellCode: '', // 井编号
-        wellName: '', // 井名称
-        wellType: '', // 井类型
-        deptid: '', // 权属单位
-        deep: '', // 井深，
-        position: '', // 位置描述
-        coordinateX: '', // 经度
-        coordinateY: '', // 纬度
-        photos: '', // 照片路径
-        notes: '', // 备注,
-        qu: '',
-        area: '', // 街道
-        responsibleDept: '', // 维护人员部门
-        responsibleDeptName: '' // 维护人员部门
+        wellCode: "", // 井编号
+        wellName: "", // 井名称
+        wellType: "", // 井类型
+        deptid: "", // 权属单位
+        deep: "", // 井深，
+        position: "", // 位置描述
+        coordinateX: "", // 经度
+        coordinateY: "", // 纬度
+        photos: "", // 照片路径
+        notes: "", // 备注,
+        qu: "",
+        area: "", // 街道
+        responsibleDept: "", // 维护人员部门
+        responsibleDeptName: "", // 维护人员部门
       }, // 表单
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       },
       hideUpload: false,
       imageList: [],
@@ -223,77 +325,135 @@
       quList: [],
       jiedaoList: [],
       textMap: {
-        update: '编辑',
-        create: '新增'
+        update: "编辑",
+        create: "新增",
       }, // 表头显示标题
       rules: {
-        wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
-        wellName: [{ required: true, message: '井名称不能为空', trigger: ['blur', 'change'] }],
-        position: [{ required: true, message: '井详细地址不能为空', trigger: ['blur', 'change'] }],
-        deep: [{ required: false, trigger: ['blur', 'change'], validator: validateDeep }],
-        coordinateX: [{ required: true, trigger: ['blur', 'change'], validator: validateLat }],
-        coordinateY: [{ required: true, trigger: ['blur', 'change'], validator: validateLng }],
-        deptid: [{ required: true, message: '权属单位必选', trigger: 'change' }],
-        wellType: [{ required: true, message: '井类型必选', trigger: 'change' }],
-        qu: [{ required: true, message: '所在区/县必选', trigger: 'change' }],
-        area: [{ required: true, message: '所在街道/镇必选', trigger: 'change' }]
+        areaId: [
+          {
+            required: true,
+            message: "井编号不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        wellCode: [
+          {
+            required: true,
+            message: "区域位置不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        wellName: [
+          {
+            required: true,
+            message: "井名称不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        position: [
+          {
+            required: true,
+            message: "井详细地址不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        deep: [
+          {
+            required: false,
+            trigger: ["blur", "change"],
+            validator: validateDeep,
+          },
+        ],
+        coordinateX: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLat,
+          },
+        ],
+        coordinateY: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLng,
+          },
+        ],
+        deptid: [
+          { required: true, message: "权属单位必选", trigger: "change" },
+        ],
+        wellType: [
+          { required: true, message: "井类型必选", trigger: "change" },
+        ],
+        qu: [{ required: true, message: "所在区/县必选", trigger: "change" }],
+        area: [
+          { required: true, message: "所在街道/镇必选", trigger: "change" },
+        ],
       },
       deptShowTop: false, // 权属单位下拉是否显示顶级
-      dialogImageUrl: '',
+      dialogImageUrl: "",
       dialogVisible: false,
-      labelPosition: 'right',
+      labelPosition: "right",
       responseAssignShow: false,
       isEditMode: true,
-      deptShow: true
-    }
+      deptShow: true,
+    };
   },
   computed: {
     showResponseDept() {
-      if (this.wellForm.deptid === '') {
-        return true
+      if (this.wellForm.deptid === "") {
+        return true;
       } else {
-        return false
+        return false;
       }
     },
-    qu() { // 获取区
-      return this.wellForm.qu
-    }
+    qu() {
+      // 获取区
+      return this.wellForm.qu;
+    },
   },
   watch: {
-    'wellForm.deptid'(val, oldVal) { // 监控权属单位变化
-      if (oldVal !== '' && val !== '') {
-        this.wellForm.responsibleDept = ''
-        this.wellForm.responsibleDeptName = ''
-        this.wellForm.area = ''
-        this.wellForm.qu = ''
-        this.fetchSecondDeptTree()
-        this.fetchArea1()
+    "wellForm.deptid"(val, oldVal) {
+      // 监控权属单位变化
+      if (oldVal !== "" && val !== "") {
+        this.wellForm.responsibleDept = "";
+        this.wellForm.responsibleDeptName = "";
+        this.wellForm.area = "";
+        this.wellForm.qu = "";
+        this.fetchSecondDeptTree();
+        this.fetchArea1();
       } else {
-        if (val !== '') {
-          this.fetchSecondDeptTree()
-          this.fetchArea1()
+        if (val !== "") {
+          this.fetchSecondDeptTree();
+          this.fetchArea1();
         }
       }
     },
-    qu(val) { // 监控区变化
-      if (val !== '') {
-        this.fetchArea2()
+    qu(val) {
+      // 监控区变化
+      if (val !== "") {
+        this.fetchArea2();
       }
-    }
+    },
   },
-  mounted: function() {
-    this.fetchWellType()
-    this.imageList = []
+  mounted: function () {
+    this.fetchWellType();
+    this.imageList = [];
   },
   methods: {
+    selectnode(node) {
+      this.wellForm.areaId = node.id;
+    },
     // 初始化对话框
-    initDialog: function(dialogFormVisible, row = null) {
-      this.imageList = []
-      if (row.photos.length === 0 && this.$refs.upload) this.$refs.upload.clearFiles()
-      this.dialogFormVisible = dialogFormVisible
-      this.fetchWellType()
+    initDialog: function (dialogFormVisible, row = null) {
+      this.imageList = [];
+      if (row.photos.length === 0 && this.$refs.upload)
+        this.$refs.upload.clearFiles();
+      this.dialogFormVisible = dialogFormVisible;
+      this.fetchWellType();
+      console.log(row, "===---098");
       this.wellForm = {
         id: row.id, // 井id
+        areaId: row.areaId,
         wellCode: row.wellCode, // 井编号
         wellName: row.wellName, // 井名称
         wellType: row.wellType, // 井类型
@@ -307,229 +467,239 @@
         qu: row.qu,
         area: row.area, // 街道
         responsibleDept: row.responsibleDept, // 维护人员部门
-        responsibleDeptName: row.responsibleDeptName // 维护人员部门
-      }
-      if (row.deptid && row.deptid !== '') {
-        this.fetchArea1(row.deptid)
-        this.fetchArea2()
-        this.fetchSecondDeptTree()
-        this.loading = false
+        responsibleDeptName: row.responsibleDeptName, // 维护人员部门
+      };
+      if (row.deptid && row.deptid !== "") {
+        this.fetchArea1(row.deptid);
+        this.fetchArea2();
+        this.fetchSecondDeptTree();
+        this.loading = false;
       }
       // 处理图片
-      const base_url = process.env.BASE_API + '/static/'
-      const urls = row.photos.split(';')
+      const base_url = process.env.BASE_API + "/static/";
+      const urls = row.photos.split(";");
       for (const url of urls) {
         if (url) {
-          this.imageList.push({ name: url, url: base_url + url })
+          this.imageList.push({ name: url, url: base_url + url });
         }
       }
-      this.handleChange(null, this.imageList)
+      this.handleChange(null, this.imageList);
     },
     // 加载组织机构树形下拉菜单
-    fetchSecondDeptTree: function() {
+    fetchSecondDeptTree: function () {
       const listQuery = {
         pid: this.wellForm.deptid,
-        deptType: '04'
-      }
-      getDeptTreeList(listQuery).then(response => {
-        console.log(response.data)
+        deptType: "04",
+      };
+      getDeptTreeList(listQuery).then((response) => {
+        console.log(response.data);
         if (response.data.list) {
-          this.secondDeptTreeList = toTreeList(response.data.list, this.wellForm.deptid)
+          this.secondDeptTreeList = toTreeList(
+            response.data.list,
+            this.wellForm.deptid
+          );
         }
-      })
+      });
     },
     // 获取井类型
     fetchWellType() {
-      getWellType().then(response => {
-        this.wellTypeList = []
-        const wellTypes = this.$store.getters.wellTypes
+      getWellType().then((response) => {
+        this.wellTypeList = [];
+        const wellTypes = this.$store.getters.wellTypes;
         for (const wellType of response.data) {
           if (wellTypes.indexOf(wellType.value) !== -1) {
-            this.wellTypeList.push(wellType)
+            this.wellTypeList.push(wellType);
           }
         }
         if (this.wellTypeList.length <= 1) {
-          this.showWellType = false
+          this.showWellType = false;
         }
-      })
+      });
     },
     // 获取区域1
     fetchArea1(deptid) {
-      getAreaByDept(this.wellForm.deptid).then(response => {
+      getAreaByDept(this.wellForm.deptid).then((response) => {
         if (response.code === 200) {
-          const pid = response.data.area
-          getAreaList(pid).then(response => {
-            this.quList = response.data
-          })
+          const pid = response.data.area;
+          getAreaList(pid).then((response) => {
+            this.quList = response.data;
+          });
         }
-      })
+      });
     },
     // 改变权属单位选项时
     deptChanged() {
-      console.log('deptChanged')
-      this.wellForm.responsibleDept = ''
-      this.wellForm.area = ''
-      this.wellForm.qu = ''
+      console.log("deptChanged");
+      this.wellForm.responsibleDept = "";
+      this.wellForm.area = "";
+      this.wellForm.qu = "";
     },
     // 改变区选项时的操作
     quChanged() {
-      this.wellForm.area = ''
+      this.wellForm.area = "";
     },
     // 获取区域2
     fetchArea2() {
-      getAreaList(this.wellForm.qu).then(response => {
-        this.jiedaoList = response.data
-      })
+      getAreaList(this.wellForm.qu).then((response) => {
+        this.jiedaoList = response.data;
+      });
     },
     // 取消
     cancel() {
-      this.dialogFormVisible = false
-      this.imageList = []
-      this.wellForm.deptid = ''
-      this.$emit('watchChild')
+      this.dialogFormVisible = false;
+      this.imageList = [];
+      this.wellForm.deptid = "";
+      this.$emit("watchChild");
       // 清除验证
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     // 保存数据
-    saveData: function() {
-      this.wellForm.photos = ''
-      if (this.wellForm.responsibleDept === '') {
+    saveData: function () {
+      this.wellForm.photos = "";
+      if (this.wellForm.responsibleDept === "") {
         if (this.secondDeptTreeList.length > 0) {
-          this.$message.warning('必须选择维护机构')
-          return
+          this.$message.warning("必须选择维护机构");
+          return;
         } else {
-          this.wellForm.responsibleDept = this.wellForm.deptid
+          this.wellForm.responsibleDept = this.wellForm.deptid;
         }
       }
       for (const image of this.imageList) {
-        let index = image.url.indexOf('/static/')
+        let index = image.url.indexOf("/static/");
         if (index !== -1) {
-          index += 8
+          index += 8;
         }
-        this.wellForm.photos += image.url.substring(index) + ';'
+        this.wellForm.photos += image.url.substring(index) + ";";
       }
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          updateWell(this.wellForm).then(response => {
-            console.log('修改井')
+          updateWell(this.wellForm).then((response) => {
+            console.log("修改井");
             if (response.code === 200) {
-              this.$message.success('修改成功!')
-              this.$emit('watchChild')
-              this.dialogFormVisible = false
-              this.imageList = []
+              this.$message.success("修改成功!");
+              this.$emit("watchChild");
+              this.dialogFormVisible = false;
+              this.imageList = [];
             }
             // 清除验证
             this.$nextTick(() => {
-              this.$refs['dataForm'].clearValidate()
-            })
-          })
+              this.$refs["dataForm"].clearValidate();
+            });
+          });
         }
-      })
+      });
     },
     uploadFile(file) {
-      console.log('uploadFile:' + file.file.name)
-      const base_url = process.env.BASE_API + '/static/'
-      Uploadimg(file).then(res => {
+      console.log("uploadFile:" + file.file.name);
+      const base_url = process.env.BASE_API + "/static/";
+      Uploadimg(file).then((res) => {
         if (res.code === 200) {
-          this.imageList.push({ name: file.file.name, url: base_url + res.data })
+          this.imageList.push({
+            name: file.file.name,
+            url: base_url + res.data,
+          });
         }
-      })
+      });
     },
     handleBeforeUpload(file) {
-      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
-      let res = true
-      const isLt2M = file.size / 1024 / 1024 < 5
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      let res = true;
+      const isLt2M = file.size / 1024 / 1024 < 5;
       if (!isJPG) {
-        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
-        res = false
+        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
+        res = false;
       }
       if (!isLt2M) {
-        this.$message.error('上传图片大小不能超过 5MB!')
-        res = false
+        this.$message.error("上传图片大小不能超过 5MB!");
+        res = false;
       }
       for (const i in this.fileList) {
         if (this.fileList[i].name === file.name) {
-          this.$message.error('该图片已上传过，请选择其他图片')
-          res = false
+          this.$message.error("该图片已上传过，请选择其他图片");
+          res = false;
         }
       }
-      return res
+      return res;
     },
     // 文件列表移除文件时的钩子
     handleRemove(file, fileList) {
-      console.log('handleRemove')
+      console.log("handleRemove");
       for (const i in this.imageList) {
         if (this.imageList[i].name === file.name) {
-          this.imageList.splice(i, 1)
-          this.hideUpload = this.imageList.length >= 4
-          return
+          this.imageList.splice(i, 1);
+          this.hideUpload = this.imageList.length >= 4;
+          return;
         }
       }
     },
     handleExceed(files, fileList) {
-      this.$message.warning(`限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+      this.$message.warning(
+        `限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${
+          files.length + fileList.length
+        } 张图片`
+      );
     },
     // 点击文件列表中已上传的文件时的钩子
     handlePictureCardPreview(file) {
-      console.log('handlePictureCardPreview')
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
+      console.log("handlePictureCardPreview");
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
     },
     handleChange(file, fileList) {
-      console.log('handleChange')
+      console.log("handleChange");
       if (fileList) {
-        this.hideUpload = fileList.length >= 4
+        this.hideUpload = fileList.length >= 4;
       } else {
-        this.hideUpload = false
+        this.hideUpload = false;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .hide .el-upload--picture-card {
-    display: none;
-  }
+.hide .el-upload--picture-card {
+  display: none;
+}
 
-  .editDialog {
-    .el-dialog {
-      width: 900px;
-      margin-top: 10vh !important;
-      .el-dialog__body {
-      }
-      .el-scrollbar {
-        height: 410px;
-        width: 100%;
-      }
-      .el-scrollbar__wrap {
-        /*overflow: scroll;*/
-        overflow-x: auto;
-        overflow-y: auto;
-      }
-      .el-scrollbar__view {
-        width: 98%;
-      }
+.editDialog {
+  .el-dialog {
+    width: 900px;
+    margin-top: 10vh !important;
+    .el-dialog__body {
+    }
+    .el-scrollbar {
+      height: 410px;
+      width: 100%;
+    }
+    .el-scrollbar__wrap {
+      /*overflow: scroll;*/
+      overflow-x: auto;
+      overflow-y: auto;
+    }
+    .el-scrollbar__view {
+      width: 98%;
     }
   }
+}
 
-  .el-select {
-    width: 100%;
-  }
+.el-select {
+  width: 100%;
+}
 
-  .line {
-    width: 50px;
-    margin-left: 5px;
-  }
+.line {
+  width: 50px;
+  margin-left: 5px;
+}
 
-  .hide .el-upload-–picture-card {
-    display: none;
-  }
+.hide .el-upload-–picture-card {
+  display: none;
+}
 
-  .imgBox {
-    width: 100%;
-    text-align: center;
-  }
+.imgBox {
+  width: 100%;
+  text-align: center;
+}
 </style>

diff --git a/src/views/dataManage/deviceData/listWaterData.vue b/src/views/dataManage/deviceData/listWaterData.vue
index dbbd41e..f60a31a 100644
--- a/src/views/dataManage/deviceData/listWaterData.vue
+++ b/src/views/dataManage/deviceData/listWaterData.vue
@@ -1,13 +1,29 @@
 <template>
   <div class="app-container">
     <!--筛选条件-->
-    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" >
+    <search-area
+      :need-clear="false"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="search"
+    >
       <!--一般查询条件-->
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable/>
+        <el-input
+          v-model.trim="listQuery.keywords"
+          placeholder="设备编号"
+          clearable
+        />
       </search-item>
       <search-item>
-        <area-select-tree v-model="listQuery.areaId" :need-top="false" :dept-show="true" placeholder="区域"/>
+        <area-select-tree
+          v-model="listQuery.areaId"
+          :need-top="false"
+          :dept-show="true"
+          placeholder="区域"
+        />
       </search-item>
       <!--<search-item>-->
       <!--<el-date-picker-->
@@ -21,26 +37,53 @@
       <!--</search-item>-->
     </search-area>
     <!--查询结果Table显示-->
-    <div style="padding:0px 10px">
+    <div style="padding: 0px 10px">
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-menu" />数据列表
+          </div></el-col
+        >
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/liquiddata/export')" class="edit_btn" size="small" @click="batchExport">导出记录</el-button>
+          <el-button
+            v-if="hasPerm('/liquiddata/export')"
+            class="edit_btn"
+            size="small"
+            @click="batchExport"
+            >导出记录</el-button
+          >
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="listLoading"
+        :data="list"
+        class="table"
+        border
+        @selection-change="handleSelectionChange"
+      >
         <!--<el-table-column align="center" type="selection" width="55"/>-->
-        <el-table-column :index="indexMethod" align="center" type="index"/>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+        <el-table-column :index="indexMethod" align="center" type="index" />
+        <el-table-column
+          v-for="column in columns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
-            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{ scope.row[column.value] }}</span>
-            <span v-else-if="column.text==='设备位置'">{{ scope.row['areaFullName'] + scope.row[column.value] }}</span>
+            <span v-if="column.checkCell" :class="checkCell(scope.row.cell)">{{
+              scope.row[column.value]
+            }}</span>
+            <span v-else-if="column.text === '设备位置'">{{
+              scope.row["areaFullName"] + scope.row[column.value]
+            }}</span>
             <span v-else>{{ scope.row[column.value] }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="80">
+        <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="line(scope.row)">历史数据</el-button>
+            <el-button type="text" @click="line(scope.row)">历史数据</el-button> 
           </template>
         </el-table-column>
       </el-table>
@@ -48,105 +91,106 @@
     <!--分页-->
     <div class="pagination-container">
       <el-pagination
-        v-show="total>listQuery.limit"
+        v-show="total > listQuery.limit"
         :current-page="listQuery.offset"
-        :page-sizes="[10,20,30]"
+        :page-sizes="[10, 20, 30]"
         :page-size="listQuery.limit"
         :total="total"
         align="center"
         layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
+        @current-change="handleCurrentChange"
+      />
     </div>
-    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday"/>
+    <watch-seven-day v-show="dialogFormVisible" ref="watchsevenday" />
   </div>
 </template>
 
 <script>
-import selectTree from '@/components/SelectTree/singleSelect'
-import { getWatchData, batchExportLiquidData } from '@/api/data'
-import DeptSelect from '../../../components/DeptSelect/index'
-import { parseUrl } from '@/utils/parseutils'
-import WatchSevenDay from './watchSevenDay'
-import AreaSelectTree from '@/components/AreaSelect/areaSelectTree'
+import selectTree from "@/components/SelectTree/singleSelect";
+import { getWatchData, batchExportLiquidData } from "@/api/data";
+import DeptSelect from "../../../components/DeptSelect/index";
+import { parseUrl } from "@/utils/parseutils";
+import WatchSevenDay from "./watchSevenDay";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
 
 export default {
-  name: 'ListWaterData',
+  name: "ListWaterData",
   components: { AreaSelectTree, WatchSevenDay, DeptSelect, selectTree },
   data() {
     return {
       listQuery: {
-        areaId: '', // 关键字
-        keywords: '', // 关键字
+        areaId: "", // 关键字
+        keywords: "", // 关键字
         // deptid: '', // 部门id
         // beginTime: '', // 开始时间
         // endTime: '', // 结束时间
         offset: 1,
         limit: 10,
-        sort: '',
-        order: ''
+        sort: "",
+        order: "",
       }, // 筛选条件
       timeRange: [], // 时间范围
       columns: [
         {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center',
-          width: 120
+          text: "设备编号",
+          value: "devcode",
+          align: "center",
+          width: 120,
         },
         {
-          text: '井编号',
-          value: 'wellCode',
-          align: 'center',
-          width: 100
+          text: "井编号",
+          value: "wellCode",
+          align: "center",
+          width: 100,
         },
         {
-          text: '设备类型',
-          value: 'deviceTypeName',
-          align: 'center',
-          width: 80
+          text: "设备类型",
+          value: "deviceTypeName",
+          align: "center",
+          width: 80,
         },
         {
-          text: '设备位置',
-          value: 'position',
-          align: 'center'
+          text: "设备位置",
+          value: "position",
+          align: "center",
         },
         {
-          text: '抄表读数',
-          value: 'watchNum',
-          align: 'center',
-          width: 80
+          text: "抄表读数",
+          value: "watchNum",
+          align: "center",
+          width: 80,
         },
         {
-          text: '采集时间',
-          value: 'uptime',
+          text: "采集时间",
+          value: "uptime",
           width: 170,
-          align: 'center'
+          align: "center",
         },
         {
-          text: '今日用水量',
-          value: 'dayCount',
-          align: 'center',
-          width: 100
+          text: "今日用水量",
+          value: "dayCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '本月用水量',
-          value: 'monthCount',
-          align: 'center',
-          width: 100
+          text: "本月用水量",
+          value: "monthCount",
+          align: "center",
+          width: 100,
         },
         {
-          text: '总用水量',
-          value: 'totalCount',
-          align: 'center',
-          width: 80
+          text: "总用水量",
+          value: "totalCount",
+          align: "center",
+          width: 80,
         },
         {
-          text: '状态描述',
-          value: 'statusName',
-          align: 'center',
-          width: 80
-        }
+          text: "状态描述",
+          value: "statusName",
+          align: "center",
+          width: 80,
+        },
         // {
         //   text: '分区',
         //   value: 'deptName',
@@ -158,10 +202,10 @@
       total: 0, // 数据总数
       deviceTypeList: [], // 液位配置类型列表
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       }, // 分区树形下拉菜单
       deptTreeList: null, // 组织树列表数据
       showDeptTree: 0, // 是否显示分区下拉
@@ -171,151 +215,156 @@
       dialogFormVisible: false,
       editShow: false, // 是否显示编辑框
       detailShow: false, // 是否显示编辑框
-      deptShowTop: false
-    }
+      deptShowTop: false,
+    };
   },
   watch: {
     timeRange(val) {
       if (val && val.length > 0) {
-        this.listQuery.beginTime = val[0]
-        this.listQuery.endTime = val[1]
+        this.listQuery.beginTime = val[0];
+        this.listQuery.endTime = val[1];
       } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
+        this.listQuery.beginTime = "";
+        this.listQuery.endTime = "";
       }
-    }
+    },
   },
   created() {
     // 如果路径里带参数，解析devcode参数
     if (window.location.href) {
-      const params = parseUrl(window.location.href)
-      if (params && params.deviceType === '2' && params.devcode) {
-        this.listQuery.keywords = params.devcode
+      const params = parseUrl(window.location.href);
+      if (params && params.deviceType === "2" && params.devcode) {
+        this.listQuery.keywords = params.devcode;
       }
-      this.fetchData()
+      this.fetchData();
     }
   },
   activated() {
     // 要是路由里有参数
     if (this.$route.query && this.$route.query.devcode) {
-      this.listQuery.keywords = this.$route.query.devcode
-      this.fetchData(false)// 获取数据
+      this.listQuery.keywords = this.$route.query.devcode;
+      this.fetchData(false); // 获取数据
     } else {
-      this.fetchData()
+      this.fetchData();
     }
   },
   methods: {
     // 批量导出
     batchExport() {
-      console.log('批量导出液位配置')
+      console.log("批量导出液位配置");
       // 全屏加载动画
       const loading = this.$loading({
         lock: true,
-        text: '数据处理中,请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      batchExportLiquidData(this.listQuery).then(res => {
-        loading.close() // 关闭加载动画
-        console.log('download===', res)
-        const blob = new Blob([res.data])
-        const downloadElement = document.createElement('a')
-        const href = window.URL.createObjectURL(blob) // 创建下载的链接
-        downloadElement.href = href
-        downloadElement.download = `远传水表数据.xlsx` // 下载后文件名
-        document.body.appendChild(downloadElement)
-        downloadElement.click() // 点击下载
-        document.body.removeChild(downloadElement) // 下载完成移除元素
-        window.URL.revokeObjectURL(href) // 释放blob对象
-      }).catch((res) => {
-        loading.close()
-      })
+        text: "数据处理中,请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      batchExportLiquidData(this.listQuery)
+        .then((res) => {
+          loading.close(); // 关闭加载动画
+          console.log("download===", res);
+          const blob = new Blob([res.data]);
+          const downloadElement = document.createElement("a");
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          downloadElement.href = href;
+          downloadElement.download = `远传水表数据.xlsx`; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href); // 释放blob对象
+        })
+        .catch((res) => {
+          loading.close();
+        });
     },
     selectnode(node) {
-      this.listQuery.areaId = node.id
-      this.search()
+      this.listQuery.areaId = node.id;
+      this.search();
     },
     // 查询数据
     search() {
-      this.fetchData(false)
+      this.fetchData(false);
     },
     line(row) {
-      this.dialogFormVisible = true
-      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row)
+      this.dialogFormVisible = true;
+      this.$refs.watchsevenday.initDialog(this.dialogFormVisible, row);
     },
     // 获取液位配置数据
     fetchData(isNowPage = true) {
-      this.listLoading = true
-      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-        this.listQuery.offset = 1
+      this.listLoading = true;
+      if (!isNowPage) {
+        // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1;
       }
-      getWatchData(this.listQuery).then(response => {
-        this.list = response.data.rows.map(function(item) {
-          item.areaFullName = item.areaFullName.replace('\/', '').replace('顶层', '')
-          return item
-        })
-        this.total = parseInt(response.data.total)
-        this.listLoading = false
-      })
+      getWatchData(this.listQuery).then((response) => {
+        this.list = response.data.rows.map(function (item) {
+          item.areaFullName = item.areaFullName
+            .replace("/", "")
+            .replace("顶层", "");
+          return item;
+        });
+        this.total = parseInt(response.data.total);
+        this.listLoading = false;
+      });
     },
     checkCell(value) {
-      var cell = parseFloat(value)
+      var cell = parseFloat(value);
       if (cell < 10) {
-        return 'warning-state'
+        return "warning-state";
       }
     },
     indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1;
     },
     // 改变页容量
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
+      this.listQuery.limit = val;
+      this.fetchData();
     },
     // 改变当前页
     handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
+      this.listQuery.offset = val;
+      this.fetchData();
     },
     // 多选触发方法
     handleSelectionChange(val) {
-      this.multipleSelection = val
-    }
-  }
-}
+      this.multipleSelection = val;
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .app-container{
-    padding: 0px 0px;
-  }
-  $tableTitleHeight:46px;
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    background-color:rgba(243, 243, 243, 1);
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+.app-container {
+  padding: 0px 0px;
+}
+$tableTitleHeight: 46px;
+.table {
+  margin-bottom: 20px;
+}
+.pagination-container {
+  margin-bottom: 50px;
+}
+.table-title {
+  background-color: rgba(243, 243, 243, 1);
+  height: $tableTitleHeight;
+  .title-header {
+    line-height: $tableTitleHeight;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
+}
+.edit_btns {
+  .edit_btn {
+    float: right;
+    margin: 7px 3px; //为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
   }
-  .warning-state{
-    color:red
-  }
+}
+.warning-state {
+  color: red;
+}
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 552545d..a906820 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -159,6 +159,7 @@
       redirect: "/", // 重定向路径
       showKaptcha: false, // 是否显示验证码
       // bgUrl: require('../../assets/login_images/theme0/bg.png'), // 背景图片
+      bgUrl: "",
       leftUrl: require("../../assets/login_images/theme0/left.jpg"), // 左边图片
     };
   },
diff --git a/src/views/wellManage/addWell.vue b/src/views/wellManage/addWell.vue
index 29aa784..b13aa7a 100644
--- a/src/views/wellManage/addWell.vue
+++ b/src/views/wellManage/addWell.vue
@@ -1,52 +1,89 @@
 <template>
   <div class="main-form">
-    <el-form ref="dataForm" :label-position="labelPosition" :rules="rules" :model="wellForm" label-width="120px">
+    <el-form
+      ref="dataForm"
+      :label-position="labelPosition"
+      :rules="rules"
+      :model="wellForm"
+      label-width="120px"
+    >
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井名称" prop="wellName">
-            <el-input v-model.trim="wellForm.wellName" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.wellName"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="3">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model.trim="wellForm.wellCode" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.wellCode"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井类型" prop="wellType">
-            <el-select v-model="wellForm.wellType" placeholder="选择井类型" clearable>
+            <el-select
+              v-model="wellForm.wellType"
+              placeholder="选择井类型"
+              clearable
+            >
               <el-option
                 v-for="item in wellTypeList"
                 :key="item.value"
                 :label="item.name"
-                :value="item.value"/>
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="3">
           <el-form-item label="权属单位" prop="deptid">
-            <dept-select v-model="wellForm.deptid" :need-top="deptShowTop" :dept-show="deptShow" dept-type="03" placeholder="选择权属单位"/>
+            <dept-select
+              v-model="wellForm.deptid"
+              :need-top="deptShowTop"
+              :dept-show="deptShow"
+              dept-type="03"
+              placeholder="选择权属单位"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井深(m)" prop="deep">
-            <el-input v-model.trim="wellForm.deep" type="text" placeholder="需要装液位监测仪的井必填"/>
+            <el-input
+              v-model.trim="wellForm.deep"
+              type="text"
+              placeholder="需要装液位监测仪的井必填"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="经度" prop="coordinateX">
-            <el-input v-model.trim="wellForm.coordinateX" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.coordinateX"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="9" :offset="3">
           <el-form-item label="纬度" prop="coordinateY">
-            <el-input v-model.trim="wellForm.coordinateY" type="text" placeholder="必填"/>
+            <el-input
+              v-model.trim="wellForm.coordinateY"
+              type="text"
+              placeholder="必填"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -62,17 +99,27 @@
               :on-change="handleChange"
               :on-success="handleSuccess"
               :limit="4"
-              :class="{hide:hideUpload}"
+              :class="{ hide: hideUpload }"
               :http-request="uploadFile"
               action="string"
               multiple
               accept=".jpg,.jpeg,.png "
-              list-type="picture-card">
-              <i class="el-icon-plus"/>
+              list-type="picture-card"
+            >
+              <i class="el-icon-plus" />
             </el-upload>
-            <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+            <el-dialog
+              :visible.sync="dialogVisible"
+              title="图片预览"
+              append-to-body
+            >
               <div class="imgBox">
-                <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+                <img
+                  :src="dialogImageUrl"
+                  max-height="400px;"
+                  alt=""
+                  style="margin: 0 auto"
+                />
               </div>
             </el-dialog>
           </el-form-item>
@@ -112,10 +159,19 @@
           <el-form-item label="详细地址" prop="position">
             <el-col :span="12" style="padding-left: 0px">
               <!--<area-select-input :node="node" :need-full="true" placeholder="区域"/>-->
-              <area-select-tree v-model="wellForm.area" :need-top="false" :dept-show="true" placeholder="区域"/>
+              <area-select-tree
+                v-model="wellForm.area"
+                :need-top="false"
+                :dept-show="true"
+                placeholder="区域"
+              />
             </el-col>
             <el-col :span="12">
-              <el-input v-model.trim="wellForm.position" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.position"
+                type="text"
+                placeholder="必填"
+              />
             </el-col>
           </el-form-item>
         </el-col>
@@ -123,20 +179,33 @@
       <el-row :gutter="20">
         <el-col :span="9">
           <el-form-item label="井维护机构" prop="responsibleDept">
-            <el-select v-model="wellForm.responsibleDept" :disabled="showResponseDept" placeholder="选择维护组织，不选默认为权属单位" clearable>
+            <el-select
+              v-model="wellForm.responsibleDept"
+              :disabled="showResponseDept"
+              placeholder="选择维护组织，不选默认为权属单位"
+              clearable
+            >
               <el-option
                 v-for="item in secondDeptTreeList"
                 :key="item.id"
                 :label="item.name"
-                :value="item.id"/>
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
-        <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px;">
+        <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px">
           <el-button size="medium" @click="resetForm"> 重置 </el-button>
-          <el-button type="primary" size="medium" style="margin-left: 10px;" @click="saveData"> 保存 </el-button>
+          <el-button
+            type="primary"
+            size="medium"
+            style="margin-left: 10px"
+            @click="saveData"
+          >
+            保存
+          </el-button>
         </el-col>
       </el-row>
     </el-form>
@@ -144,77 +213,81 @@
 </template>
 
 <script>
-import { toTreeList } from '@/utils/structure'
-import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/system/dept'
-import { getAreaList, getAreaByDept } from '@/api/system/area'
-import { getWellType, addWell } from '@/api/well'
-import { Uploadimg } from '@/api/common'
-import DeptSelect from '@/components/DeptSelect'
-import AreaSelectTree from '@/components/AreaSelect/areaSelectTree'
+import { toTreeList } from "@/utils/structure";
+import SelectTree from "@/components/SelectTree/singleSelect";
+import { getDeptTreeList } from "@/api/system/dept";
+import { getAreaList, getAreaByDept } from "@/api/system/area";
+import { getWellType, addWell } from "@/api/well";
+import { Uploadimg } from "@/api/common";
+import DeptSelect from "@/components/DeptSelect";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
 
 export default {
-  name: 'AddWell',
+  name: "AddWell",
   components: { SelectTree, DeptSelect, AreaSelectTree },
   data() {
     const validateDeep = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          const deep = parseFloat(value)
-          if (deep > 10 || deep < 0) { callback(new Error('请填写0到10数值')) } else { callback() }
+          const deep = parseFloat(value);
+          if (deep > 10 || deep < 0) {
+            callback(new Error("请填写0到10数值"));
+          } else {
+            callback();
+          }
         }
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validateLng = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('经度不能为空'))
+        callback(new Error("经度不能为空"));
       }
-    }
+    };
     const validateLat = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('纬度不能为空'))
+        callback(new Error("纬度不能为空"));
       }
-    }
+    };
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: "", // 对话框类型：create,update
       node: null,
       wellForm: {
-        wellCode: '', // 井编号
-        wellName: '', // 井名称
-        wellType: '', // 井类型
-        deptid: '', // 权属单位
-        deep: '', // 井深，
-        position: '', // 位置描述
-        coordinateX: '', // 经度
-        coordinateY: '', // 纬度
-        photos: '', // 照片路径
-        notes: '', // 备注,
-        qu: '',
-        area: '', // 街道
-        responsibleDept: '' // 维护人员部门
+        wellCode: "", // 井编号
+        wellName: "", // 井名称
+        wellType: "", // 井类型
+        deptid: "1148031048115494913", // 权属单位
+        deep: "", // 井深，
+        position: "", // 位置描述
+        coordinateX: "", // 经度
+        coordinateY: "", // 纬度
+        photos: "", // 照片路径
+        notes: "", // 备注,
+        qu: "",
+        area: "", // 街道
+        responsibleDept: "", // 维护人员部门
       }, // 表单
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       },
       hideUpload: false,
       fileList: [],
@@ -225,289 +298,345 @@
       quList: null,
       jiedaoList: null,
       textMap: {
-        update: '编辑',
-        create: '新增'
+        update: "编辑",
+        create: "新增",
       }, // 表头显示标题
       rules: {
-        wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
-        wellName: [{ required: true, message: '井名称不能为空', trigger: ['blur', 'change'] }],
-        position: [{ required: true, message: '井详细地址不能为空', trigger: ['blur', 'change'] }],
-        deep: [{ required: false, trigger: ['blur', 'change'], validator: validateDeep }],
-        coordinateX: [{ required: true, trigger: ['blur', 'change'], validator: validateLat }],
-        coordinateY: [{ required: true, trigger: ['blur', 'change'], validator: validateLng }],
-        deptid: [{ required: true, message: '组织机构必选', trigger: 'change' }],
-        wellType: [{ required: true, message: '井类型必选', trigger: 'change' }],
-        qu: [{ required: true, message: '所在区/县必选', trigger: 'change' }],
-        area: [{ required: true, message: '所在街道/镇必选', trigger: 'change' }]
+        wellCode: [
+          {
+            required: true,
+            message: "井编号不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        wellName: [
+          {
+            required: true,
+            message: "井名称不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        position: [
+          {
+            required: true,
+            message: "井详细地址不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        deep: [
+          {
+            required: false,
+            trigger: ["blur", "change"],
+            validator: validateDeep,
+          },
+        ],
+        coordinateX: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLat,
+          },
+        ],
+        coordinateY: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLng,
+          },
+        ],
+        deptid: [
+          { required: true, message: "组织机构必选", trigger: "change" },
+        ],
+        wellType: [
+          { required: true, message: "井类型必选", trigger: "change" },
+        ],
+        qu: [{ required: true, message: "所在区/县必选", trigger: "change" }],
+        area: [
+          { required: true, message: "所在街道/镇必选", trigger: "change" },
+        ],
       },
-      uploadPath: process.env.BASE_API + '/imageUpload', // 图片上传路径
-      dialogImageUrl: '',
+      uploadPath: process.env.BASE_API + "/imageUpload", // 图片上传路径
+      dialogImageUrl: "",
       dialogVisible: false,
-      labelPosition: 'right',
+      labelPosition: "right",
       responseAssignShow: false,
       deptShowTop: false, // 权属单位下拉是否显示顶级
-      deptShow: true
-    }
+      deptShow: true,
+    };
   },
   computed: {
     showResponseDept() {
-      if (this.wellForm.deptid === '') {
-        return true
+      if (this.wellForm.deptid === "") {
+        return true;
       } else {
         if (this.secondDeptTreeList && this.secondDeptTreeList.length >= 1) {
-          return false
+          return false;
         } else {
-          return true
+          return true;
         }
       }
     },
     showArea() {
-      if (this.wellForm.deptid === '') {
-        return true
+      if (this.wellForm.deptid === "") {
+        return true;
       } else {
-        return false
+        return false;
       }
     },
-    firstDept() { // 获取权属单位
-      return this.wellForm.deptid
+    firstDept() {
+      // 获取权属单位
+      return this.wellForm.deptid;
     },
-    qu() { // 获取区
-      return this.wellForm.qu
-    }
+    qu() {
+      // 获取区
+      return this.wellForm.qu;
+    },
   },
   watch: {
-    firstDept(val) { // 监控权属单位变化
-      if (val !== '') {
-        this.wellForm.qu = ''
-        this.wellForm.area = ''
-        this.wellForm.responsibleDept = ''
-        this.fetchSecondDeptTree()
-        this.fetchArea1()
+    firstDept(val) {
+      // 监控权属单位变化
+      if (val !== "") {
+        this.wellForm.qu = "";
+        this.wellForm.area = "";
+        this.wellForm.responsibleDept = "";
+        this.fetchSecondDeptTree();
+        this.fetchArea1();
       }
     },
-    qu(val) { // 监控区变化
-      if (val !== '') {
-        this.wellForm.area = ''
-        this.fetchArea2()
+    qu(val) {
+      // 监控区变化
+      if (val !== "") {
+        this.wellForm.area = "";
+        this.fetchArea2();
       }
-    }
+    },
   },
-  created: function() {
-    this.fetchWellType()
-    this.imageList = []
-    this.fileList = []
+  created: function () {
+    this.fetchWellType();
+    this.imageList = [];
+    this.fileList = [];
   },
   methods: {
     // 加载组织机构树形下拉菜单
-    fetchSecondDeptTree: function() {
+    fetchSecondDeptTree: function () {
       const listQuery = {
         pid: this.wellForm.deptid,
-        deptType: '04'
-      }
-      getDeptTreeList(listQuery).then(response => {
-        console.log(response.data)
+        deptType: "04",
+      };
+      getDeptTreeList(listQuery).then((response) => {
+        console.log(response.data);
         if (response.data.list) {
-          this.secondDeptTreeList = toTreeList(response.data.list, this.wellForm.deptid)
+          this.secondDeptTreeList = toTreeList(
+            response.data.list,
+            this.wellForm.deptid
+          );
         }
-      })
+      });
     },
     // 获取井类型
     fetchWellType() {
-      getWellType().then(response => {
-        this.wellTypeList = []
-        const wellTypes = this.$store.getters.wellTypes
+      getWellType().then((response) => {
+        this.wellTypeList = [];
+        const wellTypes = this.$store.getters.wellTypes;
         for (const wellType of response.data) {
           if (wellTypes.indexOf(wellType.value) !== -1) {
-            this.wellTypeList.push(wellType)
+            this.wellTypeList.push(wellType);
           }
         }
         if (this.wellTypeList.length <= 1) {
-          this.showWellType = false
+          this.showWellType = false;
         }
-      })
+      });
     },
     // 获取区域1
     fetchArea1() {
-      getAreaByDept(this.wellForm.deptid).then(response => {
+      getAreaByDept(this.wellForm.deptid).then((response) => {
         if (response.code === 200) {
-          const pid = response.data.area
-          getAreaList(pid).then(response => {
-            this.quList = response.data
-          })
+          const pid = response.data.area;
+          getAreaList(pid).then((response) => {
+            this.quList = response.data;
+          });
         }
-      })
+      });
     },
     // 获取区域2
     fetchArea2() {
-      getAreaList(this.qu).then(response => {
-        this.jiedaoList = response.data
-      })
+      getAreaList(this.qu).then((response) => {
+        this.jiedaoList = response.data;
+      });
     },
     // 取消
     cancel() {
-      this.dialogFormVisible = false
-      this.fileList = []
+      this.dialogFormVisible = false;
+      this.fileList = [];
       // 清除验证
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     // 重置表单
     resetForm() {
       this.wellForm = {
-        wellCode: '', // 井编号
-        wellName: '', // 井名称
-        wellType: '', // 井类型
-        deptid: '', // 权属单位
-        deep: '', // 井深，
-        position: '', // 位置描述
-        coordinateX: '', // 经度
-        coordinateY: '', // 纬度
-        photos: '', // 照片路径
-        notes: '', // 备注,
-        qu: '',
-        area: '', // 街道
-        responsibleDept: '' // 维护人员部门
-      }
+        wellCode: "", // 井编号
+        wellName: "", // 井名称
+        wellType: "", // 井类型
+        deptid: "", // 权属单位
+        deep: "", // 井深，
+        position: "", // 位置描述
+        coordinateX: "", // 经度
+        coordinateY: "", // 纬度
+        photos: "", // 照片路径
+        notes: "", // 备注,
+        qu: "",
+        area: "", // 街道
+        responsibleDept: "", // 维护人员部门
+      };
       // 清空上传图片
-      this.$refs.upload.clearFiles()
-      this.fileList = []
-      this.imageList = []
-      this.hideUpload = this.fileList.length >= 4
+      this.$refs.upload.clearFiles();
+      this.fileList = [];
+      this.imageList = [];
+      this.hideUpload = this.fileList.length >= 4;
       // 清除验证
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     // 保存数据
-    saveData: function() {
-      this.wellForm.photos = ''
-      const count = this.fileList.length < 4 ? this.fileList.length : 4
+    saveData: function () {
+      this.wellForm.photos = "";
+      const count = this.fileList.length < 4 ? this.fileList.length : 4;
       for (let i = 0; i < count; i++) {
-        const image = this.fileList[i]
-        this.wellForm.photos += image.url + ';'
+        const image = this.fileList[i];
+        this.wellForm.photos += image.url + ";";
       }
       // 如果责任部门不选，则用权属作为责任部门
-      if (this.wellForm.responsibleDept === '') {
+      if (this.wellForm.responsibleDept === "") {
         if (this.secondDeptTreeList && this.secondDeptTreeList.length > 0) {
-          this.$message.warning('必须选择维护机构')
-          return
+          this.$message.warning("必须选择维护机构");
+          return;
         } else {
-          this.wellForm.responsibleDept = this.wellForm.deptid
+          this.wellForm.responsibleDept = this.wellForm.deptid;
         }
       }
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          addWell(this.wellForm).then(response => {
-            console.log('新增井')
+          addWell(this.wellForm).then((response) => {
+            console.log("新增井");
             if (response.code === 200) {
-              this.$message.success('新增成功!')
-              this.resetForm()
+              this.$message.success("新增成功!");
+              this.resetForm();
             }
-          })
+          });
         }
-      })
+      });
     },
     // 图片上传
     uploadFile(file) {
-      console.log('uploadFile:' + file.file.name)
+      console.log("uploadFile:" + file.file.name);
       // const base_url = process.env.BASE_API + '/static/'
-      Uploadimg(file).then(res => {
+      Uploadimg(file).then((res) => {
         if (res.code === 200) {
-          this.fileList.push({ name: file.file.name, url: res.data })
+          this.fileList.push({ name: file.file.name, url: res.data });
         }
-      })
+      });
     },
     // 上传前判断文件格式及大小
     handleBeforeUpload(file) {
-      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
-      let res = true
-      const isLt2M = file.size / 1024 / 1024 < 5
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      let res = true;
+      const isLt2M = file.size / 1024 / 1024 < 5;
       if (!isJPG) {
-        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
-        res = false
+        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
+        res = false;
       }
       if (!isLt2M) {
-        this.$message.error('上传图片大小不能超过 5MB!')
-        res = false
+        this.$message.error("上传图片大小不能超过 5MB!");
+        res = false;
       }
       for (const i in this.fileList) {
         if (this.fileList[i].name === file.name) {
-          this.$message.error('该图片已上传过，请选择其他图片')
-          res = false
+          this.$message.error("该图片已上传过，请选择其他图片");
+          res = false;
         }
       }
-      return res
+      return res;
     },
     // 文件列表移除文件时的钩子
     handleRemove(file, fileList) {
-      console.log('handleRemove')
+      console.log("handleRemove");
       for (const i in this.fileList) {
         if (this.fileList[i].name === file.name) {
-          this.fileList.splice(i, 1)
-          this.hideUpload = this.fileList.length >= 4
-          return
+          this.fileList.splice(i, 1);
+          this.hideUpload = this.fileList.length >= 4;
+          return;
         }
       }
-      this.handleChange()
+      this.handleChange();
     },
     // 限制提示
     handleExceed(files, fileList) {
-      console.log('handleExceed')
-      this.$message.warning(`限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+      console.log("handleExceed");
+      this.$message.warning(
+        `限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${
+          files.length + fileList.length
+        } 张图片`
+      );
     },
     // 点击文件列表中已上传的文件时的钩子
     handlePictureCardPreview(file) {
-      console.log('handlePictureCardPreview')
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
+      console.log("handlePictureCardPreview");
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
     },
     handleChange(file, fileList) {
-      console.log('handleChange')
+      console.log("handleChange");
       if (fileList) {
-        this.hideUpload = fileList.length >= 4
+        this.hideUpload = fileList.length >= 4;
       } else {
-        this.hideUpload = false
+        this.hideUpload = false;
       }
     },
     handleSuccess(response, file, fileList) {
-      console.log('handleSuccess')
-      const base_url = process.env.BASE_API + '/static/'
+      console.log("handleSuccess");
+      const base_url = process.env.BASE_API + "/static/";
       if (response.code === 200) {
-        this.fileList.push({ name: file.file.name, url: base_url + response.data })
-        this.handleChange()
+        this.fileList.push({
+          name: file.file.name,
+          url: base_url + response.data,
+        });
+        this.handleChange();
       } else {
-        this.$message.warning(response.message)
+        this.$message.warning(response.message);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" >
-  .hide .el-upload--picture-card {
-    display: none;
-  }
-  .main-form{
-    background-color: white;
-    padding: 20px 30px;
-    /*padding: 10px;*/
-  }
-  .el-dialog{
-    width:700px
-  }
-  .el-select{
-    width: 100%;
-  }
-  .line{
-    width: 50px;
-    margin-left: 5px;
-  }
-  .hide .el-upload-–picture-card{
-    display: none;
-  }
-  .imgBox{
-    width: 100%;
-    text-align: center;
-  }
+.hide .el-upload--picture-card {
+  display: none;
+}
+.main-form {
+  background-color: white;
+  padding: 20px 30px;
+  /*padding: 10px;*/
+}
+.el-dialog {
+  width: 700px;
+}
+.el-select {
+  width: 100%;
+}
+.line {
+  width: 50px;
+  margin-left: 5px;
+}
+.hide .el-upload-–picture-card {
+  display: none;
+}
+.imgBox {
+  width: 100%;
+  text-align: center;
+}
 </style>
diff --git a/src/views/wellManage/editWell.vue b/src/views/wellManage/editWell.vue
index d73bdb0..f4e6065 100644
--- a/src/views/wellManage/editWell.vue
+++ b/src/views/wellManage/editWell.vue
@@ -1,53 +1,98 @@
 <template>
-  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="编辑井" append-to-body @close="cancel">
+  <el-dialog
+    :visible.sync="dialogFormVisible"
+    class="editDialog"
+    title="编辑井"
+    append-to-body
+    @close="cancel"
+  >
     <el-scrollbar :native="false">
-      <el-form ref="dataForm" :label-position="labelPosition" :rules="rules" :model="wellForm" label-width="120px">
+      <el-form
+        ref="dataForm"
+        :label-position="labelPosition"
+        :rules="rules"
+        :model="wellForm"
+        label-width="120px"
+      >
         <el-row>
           <el-col :span="10">
             <el-form-item label="井名称" prop="wellName">
-              <el-input v-model.trim="wellForm.wellName" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.wellName"
+                type="text"
+                placeholder="必填"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="10" :offset="1">
             <el-form-item label="井编号" prop="wellCode">
-              <el-input v-model.trim="wellForm.wellCode" :disabled="isEditMode" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.wellCode"
+                :disabled="isEditMode"
+                type="text"
+                placeholder="必填"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="10">
             <el-form-item label="井类型" prop="wellType">
-              <el-select v-model="wellForm.wellType" placeholder="点击选择井类型" clearable>
+              <el-select
+                v-model="wellForm.wellType"
+                placeholder="点击选择井类型"
+                clearable
+              >
                 <el-option
                   v-for="item in wellTypeList"
                   :key="item.value"
                   :label="item.name"
-                  :value="item.value"/>
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="10" :offset="1">
             <el-form-item label="权属单位" prop="deptid">
-              <dept-select v-model="wellForm.deptid" :need-top="deptShowTop" :dept-show="deptShow" dept-type="03" placeholder="选择权属单位" @change="deptChanged"/>
+              <dept-select
+                v-model="wellForm.deptid"
+                :need-top="deptShowTop"
+                :dept-show="deptShow"
+                dept-type="03"
+                placeholder="选择权属单位"
+                @change="deptChanged"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="10">
             <el-form-item label="井深(m)" prop="deep">
-              <el-input v-model.trim="wellForm.deep" type="text" placeholder="需要装液位监测仪的井必填"/>
+              <el-input
+                v-model.trim="wellForm.deep"
+                type="text"
+                placeholder="需要装液位监测仪的井必填"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="10">
             <el-form-item label="经度" prop="coordinateX">
-              <el-input v-model.trim="wellForm.coordinateX" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.coordinateX"
+                type="text"
+                placeholder="必填"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="10" :offset="1">
             <el-form-item label="纬度" prop="coordinateY">
-              <el-input v-model.trim="wellForm.coordinateY" type="text" placeholder="必填"/>
+              <el-input
+                v-model.trim="wellForm.coordinateY"
+                type="text"
+                placeholder="必填"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -64,22 +109,32 @@
                 :http-request="uploadFile"
                 :file-list="imageList"
                 :limit="4"
-                :class="{hide:hideUpload}"
+                :class="{ hide: hideUpload }"
                 multiple
                 action="string"
                 accept=".jpg,.jpeg,.png "
-                list-type="picture-card">
-                <i class="el-icon-plus"/>
+                list-type="picture-card"
+              >
+                <i class="el-icon-plus" />
               </el-upload>
-              <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
+              <el-dialog
+                :visible.sync="dialogVisible"
+                title="图片预览"
+                append-to-body
+              >
                 <div class="imgBox">
-                  <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
+                  <img
+                    :src="dialogImageUrl"
+                    max-height="400px;"
+                    alt=""
+                    style="margin: 0 auto"
+                  />
                 </div>
               </el-dialog>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="1">
+        <!-- <el-row :gutter="1">
           <el-form-item label="所在区域" required>
             <el-col :span="5">
               <el-form-item prop="qu">
@@ -114,25 +169,70 @@
               <el-input v-model.trim="wellForm.position" type="text" placeholder="必填"/>
             </el-form-item>
           </el-col>
+        </el-row> -->
+
+        <el-row :gutter="1">
+          <el-col :span="8">
+            <el-form-item label="所在区域" prop="areaId">
+              <area-select-tree
+                v-model.trim="wellForm.areaId"
+                :need-top="false"
+                :dept-show="true"
+                placeholder="区域"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="10">
+            <el-form-item label="" prop="position">
+              <el-input
+                style="margin-left: 30px"
+                v-model.trim="wellForm.position"
+                type="text"
+                placeholder="具体位置必填"
+              />
+            </el-form-item>
+          </el-col>
         </el-row>
-        <el-row v-show="secondDeptTreeList.length>=1" :gutter="20">
+
+        <el-row v-show="secondDeptTreeList.length >= 1" :gutter="20">
           <el-col :span="13">
             <el-form-item label="井维护机构" prop="responsibleDept">
-              <el-select v-if="secondDeptTreeList.length>=1" v-model="wellForm.responsibleDept" :disabled="showResponseDept" placeholder="选择维护组织，不选默认为权属单位" clearable>
+              <el-select
+                v-if="secondDeptTreeList.length >= 1"
+                v-model="wellForm.responsibleDept"
+                :disabled="showResponseDept"
+                placeholder="选择维护组织，不选默认为权属单位"
+                clearable
+              >
                 <el-option
                   v-for="item in secondDeptTreeList"
                   :key="item.id"
                   :label="item.name"
-                  :value="item.id"/>
+                  :value="item.id"
+                />
               </el-select>
-              <el-input v-else v-model="wellForm.responsibleDeptName" type="text" placeholder="未知" disabled/>
+              <el-input
+                v-else
+                v-model="wellForm.responsibleDeptName"
+                type="text"
+                placeholder="未知"
+                disabled
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
-          <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px;">
+          <el-col :span="15" style="margin-left: 120px; margin-bottom: 40px">
             <el-button size="medium" @click="cancel"> 取消</el-button>
-            <el-button type="primary" size="medium" style="margin-left: 10px;" @click="saveData"> 保存</el-button>
+            <el-button
+              type="primary"
+              size="medium"
+              style="margin-left: 10px"
+              @click="saveData"
+            >
+              保存</el-button
+            >
           </el-col>
         </el-row>
       </el-form>
@@ -141,80 +241,82 @@
 </template>
 
 <script>
-import { toTreeList } from '@/utils/structure'
-import SelectTree from '@/components/SelectTree/singleSelect'
-import { getDeptTreeList } from '@/api/system/dept'
-import { getAreaList, getAreaByDept } from '@/api/system/area'
-import { getWellType, updateWell } from '@/api/well'
-import { Uploadimg } from '@/api/common'
-import DeptSelect from '@/components/DeptSelect'
+import { toTreeList } from "@/utils/structure";
+import SelectTree from "@/components/SelectTree/singleSelect";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
+import { getDeptTreeList } from "@/api/system/dept";
+import { getAreaList, getAreaByDept } from "@/api/system/area";
+import { getWellType, updateWell } from "@/api/well";
+import { Uploadimg } from "@/api/common";
+import DeptSelect from "@/components/DeptSelect";
 
 export default {
-  name: 'EditWell',
-  components: { SelectTree, DeptSelect },
+  name: "EditWell",
+  components: { SelectTree, DeptSelect, AreaSelectTree },
   data() {
     const validateDeep = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          const deep = parseFloat(value)
+          const deep = parseFloat(value);
           if (deep > 10 || deep < 0) {
-            callback(new Error('请填写0到10数值'))
+            callback(new Error("请填写0到10数值"));
           } else {
-            callback()
+            callback();
           }
         }
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validateLng = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('经度不能为空'))
+        callback(new Error("经度不能为空"));
       }
-    }
+    };
     const validateLat = (rule, value, callback) => {
-      if (value !== '') {
-        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
-          callback(new Error('请填写大于0的数字'))
+      if (value !== "") {
+        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) === false) {
+          callback(new Error("请填写大于0的数字"));
         } else {
-          callback()
+          callback();
         }
       } else {
-        callback(new Error('纬度不能为空'))
+        callback(new Error("纬度不能为空"));
       }
-    }
+    };
     return {
       dialogFormVisible: false, // 对话框是否显示
       wellForm: {
+        areaId: "",
         id: null, // 井id
-        wellCode: '', // 井编号
-        wellName: '', // 井名称
-        wellType: '', // 井类型
-        deptid: '', // 权属单位
-        deep: '', // 井深，
-        position: '', // 位置描述
-        coordinateX: '', // 经度
-        coordinateY: '', // 纬度
-        photos: '', // 照片路径
-        notes: '', // 备注,
-        qu: '',
-        area: '', // 街道
-        responsibleDept: '', // 维护人员部门
-        responsibleDeptName: '' // 维护人员部门
+        wellCode: "", // 井编号
+        wellName: "", // 井名称
+        wellType: "", // 井类型
+        deptid: "", // 权属单位
+        deep: "", // 井深，
+        position: "", // 位置描述
+        coordinateX: "", // 经度
+        coordinateY: "", // 纬度
+        photos: "", // 照片路径
+        notes: "", // 备注,
+        qu: "",
+        area: "", // 街道
+        responsibleDept: "", // 维护人员部门
+        responsibleDeptName: "", // 维护人员部门
       }, // 表单
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       },
       hideUpload: false,
       imageList: [],
@@ -223,77 +325,135 @@
       quList: [],
       jiedaoList: [],
       textMap: {
-        update: '编辑',
-        create: '新增'
+        update: "编辑",
+        create: "新增",
       }, // 表头显示标题
       rules: {
-        wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
-        wellName: [{ required: true, message: '井名称不能为空', trigger: ['blur', 'change'] }],
-        position: [{ required: true, message: '井详细地址不能为空', trigger: ['blur', 'change'] }],
-        deep: [{ required: false, trigger: ['blur', 'change'], validator: validateDeep }],
-        coordinateX: [{ required: true, trigger: ['blur', 'change'], validator: validateLat }],
-        coordinateY: [{ required: true, trigger: ['blur', 'change'], validator: validateLng }],
-        deptid: [{ required: true, message: '权属单位必选', trigger: 'change' }],
-        wellType: [{ required: true, message: '井类型必选', trigger: 'change' }],
-        qu: [{ required: true, message: '所在区/县必选', trigger: 'change' }],
-        area: [{ required: true, message: '所在街道/镇必选', trigger: 'change' }]
+        areaId: [
+          {
+            required: true,
+            message: "井编号不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        wellCode: [
+          {
+            required: true,
+            message: "区域位置不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        wellName: [
+          {
+            required: true,
+            message: "井名称不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        position: [
+          {
+            required: true,
+            message: "井详细地址不能为空",
+            trigger: ["blur", "change"],
+          },
+        ],
+        deep: [
+          {
+            required: false,
+            trigger: ["blur", "change"],
+            validator: validateDeep,
+          },
+        ],
+        coordinateX: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLat,
+          },
+        ],
+        coordinateY: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateLng,
+          },
+        ],
+        deptid: [
+          { required: true, message: "权属单位必选", trigger: "change" },
+        ],
+        wellType: [
+          { required: true, message: "井类型必选", trigger: "change" },
+        ],
+        qu: [{ required: true, message: "所在区/县必选", trigger: "change" }],
+        area: [
+          { required: true, message: "所在街道/镇必选", trigger: "change" },
+        ],
       },
       deptShowTop: false, // 权属单位下拉是否显示顶级
-      dialogImageUrl: '',
+      dialogImageUrl: "",
       dialogVisible: false,
-      labelPosition: 'right',
+      labelPosition: "right",
       responseAssignShow: false,
       isEditMode: true,
-      deptShow: true
-    }
+      deptShow: true,
+    };
   },
   computed: {
     showResponseDept() {
-      if (this.wellForm.deptid === '') {
-        return true
+      if (this.wellForm.deptid === "") {
+        return true;
       } else {
-        return false
+        return false;
       }
     },
-    qu() { // 获取区
-      return this.wellForm.qu
-    }
+    qu() {
+      // 获取区
+      return this.wellForm.qu;
+    },
   },
   watch: {
-    'wellForm.deptid'(val, oldVal) { // 监控权属单位变化
-      if (oldVal !== '' && val !== '') {
-        this.wellForm.responsibleDept = ''
-        this.wellForm.responsibleDeptName = ''
-        this.wellForm.area = ''
-        this.wellForm.qu = ''
-        this.fetchSecondDeptTree()
-        this.fetchArea1()
+    "wellForm.deptid"(val, oldVal) {
+      // 监控权属单位变化
+      if (oldVal !== "" && val !== "") {
+        this.wellForm.responsibleDept = "";
+        this.wellForm.responsibleDeptName = "";
+        this.wellForm.area = "";
+        this.wellForm.qu = "";
+        this.fetchSecondDeptTree();
+        this.fetchArea1();
       } else {
-        if (val !== '') {
-          this.fetchSecondDeptTree()
-          this.fetchArea1()
+        if (val !== "") {
+          this.fetchSecondDeptTree();
+          this.fetchArea1();
         }
       }
     },
-    qu(val) { // 监控区变化
-      if (val !== '') {
-        this.fetchArea2()
+    qu(val) {
+      // 监控区变化
+      if (val !== "") {
+        this.fetchArea2();
       }
-    }
+    },
   },
-  mounted: function() {
-    this.fetchWellType()
-    this.imageList = []
+  mounted: function () {
+    this.fetchWellType();
+    this.imageList = [];
   },
   methods: {
+    selectnode(node) {
+      this.wellForm.areaId = node.id;
+    },
     // 初始化对话框
-    initDialog: function(dialogFormVisible, row = null) {
-      this.imageList = []
-      if (row.photos.length === 0 && this.$refs.upload) this.$refs.upload.clearFiles()
-      this.dialogFormVisible = dialogFormVisible
-      this.fetchWellType()
+    initDialog: function (dialogFormVisible, row = null) {
+      this.imageList = [];
+      if (row.photos.length === 0 && this.$refs.upload)
+        this.$refs.upload.clearFiles();
+      this.dialogFormVisible = dialogFormVisible;
+      this.fetchWellType();
+      console.log(row, "===---098");
       this.wellForm = {
         id: row.id, // 井id
+        areaId: row.areaId,
         wellCode: row.wellCode, // 井编号
         wellName: row.wellName, // 井名称
         wellType: row.wellType, // 井类型
@@ -307,229 +467,239 @@
         qu: row.qu,
         area: row.area, // 街道
         responsibleDept: row.responsibleDept, // 维护人员部门
-        responsibleDeptName: row.responsibleDeptName // 维护人员部门
-      }
-      if (row.deptid && row.deptid !== '') {
-        this.fetchArea1(row.deptid)
-        this.fetchArea2()
-        this.fetchSecondDeptTree()
-        this.loading = false
+        responsibleDeptName: row.responsibleDeptName, // 维护人员部门
+      };
+      if (row.deptid && row.deptid !== "") {
+        this.fetchArea1(row.deptid);
+        this.fetchArea2();
+        this.fetchSecondDeptTree();
+        this.loading = false;
       }
       // 处理图片
-      const base_url = process.env.BASE_API + '/static/'
-      const urls = row.photos.split(';')
+      const base_url = process.env.BASE_API + "/static/";
+      const urls = row.photos.split(";");
       for (const url of urls) {
         if (url) {
-          this.imageList.push({ name: url, url: base_url + url })
+          this.imageList.push({ name: url, url: base_url + url });
         }
       }
-      this.handleChange(null, this.imageList)
+      this.handleChange(null, this.imageList);
     },
     // 加载组织机构树形下拉菜单
-    fetchSecondDeptTree: function() {
+    fetchSecondDeptTree: function () {
       const listQuery = {
         pid: this.wellForm.deptid,
-        deptType: '04'
-      }
-      getDeptTreeList(listQuery).then(response => {
-        console.log(response.data)
+        deptType: "04",
+      };
+      getDeptTreeList(listQuery).then((response) => {
+        console.log(response.data);
         if (response.data.list) {
-          this.secondDeptTreeList = toTreeList(response.data.list, this.wellForm.deptid)
+          this.secondDeptTreeList = toTreeList(
+            response.data.list,
+            this.wellForm.deptid
+          );
         }
-      })
+      });
     },
     // 获取井类型
     fetchWellType() {
-      getWellType().then(response => {
-        this.wellTypeList = []
-        const wellTypes = this.$store.getters.wellTypes
+      getWellType().then((response) => {
+        this.wellTypeList = [];
+        const wellTypes = this.$store.getters.wellTypes;
         for (const wellType of response.data) {
           if (wellTypes.indexOf(wellType.value) !== -1) {
-            this.wellTypeList.push(wellType)
+            this.wellTypeList.push(wellType);
           }
         }
         if (this.wellTypeList.length <= 1) {
-          this.showWellType = false
+          this.showWellType = false;
         }
-      })
+      });
     },
     // 获取区域1
     fetchArea1(deptid) {
-      getAreaByDept(this.wellForm.deptid).then(response => {
+      getAreaByDept(this.wellForm.deptid).then((response) => {
         if (response.code === 200) {
-          const pid = response.data.area
-          getAreaList(pid).then(response => {
-            this.quList = response.data
-          })
+          const pid = response.data.area;
+          getAreaList(pid).then((response) => {
+            this.quList = response.data;
+          });
         }
-      })
+      });
     },
     // 改变权属单位选项时
     deptChanged() {
-      console.log('deptChanged')
-      this.wellForm.responsibleDept = ''
-      this.wellForm.area = ''
-      this.wellForm.qu = ''
+      console.log("deptChanged");
+      this.wellForm.responsibleDept = "";
+      this.wellForm.area = "";
+      this.wellForm.qu = "";
     },
     // 改变区选项时的操作
     quChanged() {
-      this.wellForm.area = ''
+      this.wellForm.area = "";
     },
     // 获取区域2
     fetchArea2() {
-      getAreaList(this.wellForm.qu).then(response => {
-        this.jiedaoList = response.data
-      })
+      getAreaList(this.wellForm.qu).then((response) => {
+        this.jiedaoList = response.data;
+      });
     },
     // 取消
     cancel() {
-      this.dialogFormVisible = false
-      this.imageList = []
-      this.wellForm.deptid = ''
-      this.$emit('watchChild')
+      this.dialogFormVisible = false;
+      this.imageList = [];
+      this.wellForm.deptid = "";
+      this.$emit("watchChild");
       // 清除验证
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     // 保存数据
-    saveData: function() {
-      this.wellForm.photos = ''
-      if (this.wellForm.responsibleDept === '') {
+    saveData: function () {
+      this.wellForm.photos = "";
+      if (this.wellForm.responsibleDept === "") {
         if (this.secondDeptTreeList.length > 0) {
-          this.$message.warning('必须选择维护机构')
-          return
+          this.$message.warning("必须选择维护机构");
+          return;
         } else {
-          this.wellForm.responsibleDept = this.wellForm.deptid
+          this.wellForm.responsibleDept = this.wellForm.deptid;
         }
       }
       for (const image of this.imageList) {
-        let index = image.url.indexOf('/static/')
+        let index = image.url.indexOf("/static/");
         if (index !== -1) {
-          index += 8
+          index += 8;
         }
-        this.wellForm.photos += image.url.substring(index) + ';'
+        this.wellForm.photos += image.url.substring(index) + ";";
       }
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          updateWell(this.wellForm).then(response => {
-            console.log('修改井')
+          updateWell(this.wellForm).then((response) => {
+            console.log("修改井");
             if (response.code === 200) {
-              this.$message.success('修改成功!')
-              this.$emit('watchChild')
-              this.dialogFormVisible = false
-              this.imageList = []
+              this.$message.success("修改成功!");
+              this.$emit("watchChild");
+              this.dialogFormVisible = false;
+              this.imageList = [];
             }
             // 清除验证
             this.$nextTick(() => {
-              this.$refs['dataForm'].clearValidate()
-            })
-          })
+              this.$refs["dataForm"].clearValidate();
+            });
+          });
         }
-      })
+      });
     },
     uploadFile(file) {
-      console.log('uploadFile:' + file.file.name)
-      const base_url = process.env.BASE_API + '/static/'
-      Uploadimg(file).then(res => {
+      console.log("uploadFile:" + file.file.name);
+      const base_url = process.env.BASE_API + "/static/";
+      Uploadimg(file).then((res) => {
         if (res.code === 200) {
-          this.imageList.push({ name: file.file.name, url: base_url + res.data })
+          this.imageList.push({
+            name: file.file.name,
+            url: base_url + res.data,
+          });
         }
-      })
+      });
     },
     handleBeforeUpload(file) {
-      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
-      let res = true
-      const isLt2M = file.size / 1024 / 1024 < 5
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      let res = true;
+      const isLt2M = file.size / 1024 / 1024 < 5;
       if (!isJPG) {
-        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
-        res = false
+        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
+        res = false;
       }
       if (!isLt2M) {
-        this.$message.error('上传图片大小不能超过 5MB!')
-        res = false
+        this.$message.error("上传图片大小不能超过 5MB!");
+        res = false;
       }
       for (const i in this.fileList) {
         if (this.fileList[i].name === file.name) {
-          this.$message.error('该图片已上传过，请选择其他图片')
-          res = false
+          this.$message.error("该图片已上传过，请选择其他图片");
+          res = false;
         }
       }
-      return res
+      return res;
     },
     // 文件列表移除文件时的钩子
     handleRemove(file, fileList) {
-      console.log('handleRemove')
+      console.log("handleRemove");
       for (const i in this.imageList) {
         if (this.imageList[i].name === file.name) {
-          this.imageList.splice(i, 1)
-          this.hideUpload = this.imageList.length >= 4
-          return
+          this.imageList.splice(i, 1);
+          this.hideUpload = this.imageList.length >= 4;
+          return;
         }
       }
     },
     handleExceed(files, fileList) {
-      this.$message.warning(`限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`)
+      this.$message.warning(
+        `限制选择 4 张图片，本次选择了 ${files.length} 张图片，共选择了 ${
+          files.length + fileList.length
+        } 张图片`
+      );
     },
     // 点击文件列表中已上传的文件时的钩子
     handlePictureCardPreview(file) {
-      console.log('handlePictureCardPreview')
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
+      console.log("handlePictureCardPreview");
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
     },
     handleChange(file, fileList) {
-      console.log('handleChange')
+      console.log("handleChange");
       if (fileList) {
-        this.hideUpload = fileList.length >= 4
+        this.hideUpload = fileList.length >= 4;
       } else {
-        this.hideUpload = false
+        this.hideUpload = false;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .hide .el-upload--picture-card {
-    display: none;
-  }
+.hide .el-upload--picture-card {
+  display: none;
+}
 
-  .editDialog {
-    .el-dialog {
-      width: 900px;
-      margin-top: 10vh !important;
-      .el-dialog__body {
-      }
-      .el-scrollbar {
-        height: 410px;
-        width: 100%;
-      }
-      .el-scrollbar__wrap {
-        /*overflow: scroll;*/
-        overflow-x: auto;
-        overflow-y: auto;
-      }
-      .el-scrollbar__view {
-        width: 98%;
-      }
+.editDialog {
+  .el-dialog {
+    width: 900px;
+    margin-top: 10vh !important;
+    .el-dialog__body {
+    }
+    .el-scrollbar {
+      height: 410px;
+      width: 100%;
+    }
+    .el-scrollbar__wrap {
+      /*overflow: scroll;*/
+      overflow-x: auto;
+      overflow-y: auto;
+    }
+    .el-scrollbar__view {
+      width: 98%;
     }
   }
+}
 
-  .el-select {
-    width: 100%;
-  }
+.el-select {
+  width: 100%;
+}
 
-  .line {
-    width: 50px;
-    margin-left: 5px;
-  }
+.line {
+  width: 50px;
+  margin-left: 5px;
+}
 
-  .hide .el-upload-–picture-card {
-    display: none;
-  }
+.hide .el-upload-–picture-card {
+  display: none;
+}
 
-  .imgBox {
-    width: 100%;
-    text-align: center;
-  }
+.imgBox {
+  width: 100%;
+  text-align: center;
+}
 </style>
diff --git a/src/views/wellManage/listWell.vue b/src/views/wellManage/listWell.vue
index 208091e..ba92197 100644
--- a/src/views/wellManage/listWell.vue
+++ b/src/views/wellManage/listWell.vue
@@ -2,34 +2,82 @@
   <app-container>
     <!--筛选条件-->
     <div class="search-div">
-      <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="search" >
+      <search-area
+        :need-clear="false"
+        :need-search-more="false"
+        type="seperate"
+        size="small"
+        search-more-type="default"
+        @search="search"
+      >
         <!--一般查询条件-->
         <search-item>
-          <el-input v-model.trim="listQuery.keywords" placeholder="井编号" size="small" clearable/>
+          <el-input
+            v-model.trim="listQuery.keywords"
+            placeholder="井编号"
+            size="small"
+            clearable
+          />
         </search-item>
-        <search-item v-if="showWellType" >
-          <el-select v-model="listQuery.wellType" placeholder="选择井类型" size="small" clearable>
+        <search-item v-if="showWellType">
+          <el-select
+            v-model="listQuery.wellType"
+            placeholder="选择井类型"
+            size="small"
+            clearable
+          >
             <el-option
               v-for="item in wellTypeList"
               :key="item.value"
               :label="item.name"
-              :value="item.value"/>
+              :value="item.value"
+            />
           </el-select>
         </search-item>
+        <!-- <search-item>
+          <dept-select
+            v-model="listQuery.deptid"
+            :need-top="deptShowTop"
+            dept-type="03"
+            size="small"
+            placeholder="选择权属单位"
+          />
+        </search-item> -->
+
         <search-item>
-          <dept-select v-model="listQuery.deptid" :need-top="deptShowTop" dept-type="03" size="small" placeholder="选择权属单位"/>
+          <area-select-tree
+            v-model="listQuery.areaId"
+            :need-top="false"
+            :dept-show="true"
+            placeholder="区域"
+            size="small"
+          />
         </search-item>
       </search-area>
     </div>
     <!--查询结果Table显示-->
     <div>
-      <el-row style="height: 12px;background-color: #ebebeb"/>
+      <el-row style="height: 12px; background-color: #ebebeb" />
       <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
+        <el-col :span="6"
+          ><div class="title-header">
+            <i class="el-icon-menu" />数据列表
+          </div></el-col
+        >
         <el-col :span="18" class="edit_btns">
-          <el-button v-if="hasPerm('/well/batchExport')" :disabled="total===0" class="edit_btn" size="small" @click="batchExport">导出记录</el-button>
+          <el-button
+            v-if="hasPerm('/well/batchExport')"
+            :disabled="total === 0"
+            class="edit_btn"
+            size="small"
+            @click="batchExport"
+            >导出记录</el-button
+          >
           <!--<el-button v-if="hasPerm('/template/download')" class="edit_btn" size="small" @click="downloadTemplate">批量导入模板下载</el-button>-->
-          <download-template v-if="hasPerm('/well/batchImport')" :filename="filename"/>
+          <download-template
+            v-if="hasPerm('/well/batchImport')"
+            :filename="filename"
+          />
           <el-upload
             v-if="hasPerm('/well/batchImport')"
             :limit="1"
@@ -38,24 +86,58 @@
             :file-list="fileList"
             action="string"
             accept=".xls,.xlsx"
-            class="edit_btn">
+            class="edit_btn"
+          >
             <el-button slot="trigger" size="small">批量导入</el-button>
           </el-upload>
           <!--<el-button v-if="hasPerm('/well/batchBfcf')" class="edit_btn" size="small" @click="batchBf">一键布防</el-button>-->
           <!--<el-button v-if="hasPerm('/well/batchBfcf')" class="edit_btn" size="small" @click="batchCf">一键撤防</el-button>-->
-          <el-button v-if="hasPerm('/well/delete')" class="edit_btn" size="small" @click="del">删除</el-button>
-          <el-button v-if="hasPerm('/well/add')" class="edit_btn" size="small" @click="add">新增</el-button>
-
+          <el-button
+            v-if="hasPerm('/well/delete')"
+            class="edit_btn"
+            size="small"
+            @click="del"
+            >删除</el-button
+          >
+          <el-button
+            v-if="hasPerm('/well/add')"
+            class="edit_btn"
+            size="small"
+            @click="add"
+            >新增</el-button
+          >
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" align="center" type="index"/>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+      <el-table
+        v-loading="listLoading"
+        :data="list"
+        class="table"
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column align="center" type="selection" width="55" />
+        <el-table-column :index="indexMethod" align="center" type="index" />
+        <el-table-column
+          v-for="column in columns"
+          :key="column.value"
+          :label="column.text"
+          :width="column.width"
+          :align="column.align"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
-            <el-button v-if="column.type=='Button' && scope.row.deviceCount>0" type="text" @click="goDeviceList(scope.row)">{{ scope.row[column.value] }}</el-button>
-            <span v-else-if="column.text==='详细地址'">{{ scope.row['areaFullName'] + scope.row[column.value] }}</span>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button
+              v-if="column.type == 'Button' && scope.row.deviceCount > 0"
+              type="text"
+              @click="goDeviceList(scope.row)"
+              >{{ scope.row[column.value] }}</el-button
+            >
+            <span v-else-if="column.text === '详细地址'">{{
+              scope.row["areaFullName"] + scope.row[column.value]
+            }}</span>
+            <span v-else :class="column.class">{{
+              scope.row[column.value]
+            }}</span>
           </template>
         </el-table-column>
         <!--<el-table-column v-if="hasPerm('/well/bfcf')" label="布撤防" align="center" width="80">-->
@@ -66,8 +148,15 @@
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/well/update')" type="text" @click="edit(scope.row)">编辑</el-button>
-            <el-button type="text" @click="goAlarmRecords(scope.row)">告警记录</el-button>
+            <el-button
+              v-if="hasPerm('/well/update')"
+              type="text"
+              @click="edit(scope.row)"
+              >编辑</el-button
+            >
+            <el-button type="text" @click="goAlarmRecords(scope.row)"
+              >告警记录</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -75,67 +164,86 @@
     <!--分页-->
     <div class="pagination-container">
       <el-pagination
-        v-show="total>listQuery.limit"
+        v-show="total > listQuery.limit"
         :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
+        :page-sizes="[20, 30, 50]"
         :page-size="listQuery.limit"
         :total="total"
         align="center"
         layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
+        @current-change="handleCurrentChange"
+      />
     </div>
 
-    <edit-well ref="editwell" @watchChild="fetchData"/>
-    <detail-well ref="detailwell"/>
+    <edit-well ref="editwell" @watchChild="fetchData" />
+    <detail-well ref="detailwell" />
   </app-container>
 </template>
 
 <script>
-import addWell from '@/views/wellManage/addWell'
-import editWell from '@/views/wellManage/editWell'
-import detailWell from '@/views/wellManage/detailWell'
-import SelectTree from '@/components/SelectTree/singleSelect'
-import { getWellList, getWellType, delWell, batchImportWell, batchExportWell, batchBfcf, bfcf } from '@/api/well'
-import DeptSelect from '@/components/DeptSelect'
-import DownloadTemplate from '@/components/DownloadTemplate/index'
+import addWell from "@/views/wellManage/addWell";
+import editWell from "@/views/wellManage/editWell";
+import detailWell from "@/views/wellManage/detailWell";
+import SelectTree from "@/components/SelectTree/singleSelect";
+import AreaSelectTree from "@/components/AreaSelect/areaSelectTree";
+import {
+  getWellList,
+  getWellType,
+  delWell,
+  batchImportWell,
+  batchExportWell,
+  batchBfcf,
+  bfcf,
+} from "@/api/well";
+import DeptSelect from "@/components/DeptSelect";
+import DownloadTemplate from "@/components/DownloadTemplate/index";
 
 export default {
-  name: 'ListWell',
-  components: { DownloadTemplate, SelectTree, addWell, editWell, detailWell, DeptSelect },
+  name: "ListWell",
+  components: {
+    DownloadTemplate,
+    SelectTree,
+    addWell,
+    editWell,
+    detailWell,
+    DeptSelect,
+    AreaSelectTree,
+  },
   data() {
     return {
       listQuery: {
-        keywords: '',
-        wellType: '',
-        deptid: '',
+        areaId: "", // 关键字
+        keywords: "",
+        wellType: "1",
+        deptid: "",
         offset: 1,
         limit: 20,
-        sort: 'wellCode',
-        order: 'asc'
+        sort: "wellCode",
+        order: "asc",
       }, // 筛选条件
       columns: [
         {
-          text: '井编号',
-          value: 'wellCode',
-          align: 'center'
+          text: "井编号",
+          value: "wellCode",
+          align: "center",
         },
         {
-          text: '井名称',
-          value: 'wellName',
+          text: "井名称",
+          value: "wellName",
           width: 130,
-          align: 'center'
+          align: "center",
         },
         {
-          text: '井深(m)',
-          value: 'deep',
+          text: "井深(m)",
+          value: "deep",
           width: 80,
-          align: 'center'
+          align: "center",
         },
         {
-          text: '详细地址',
-          value: 'position',
-          align: 'center'
+          text: "详细地址",
+          value: "position",
+          align: "center",
         },
         // {
         //   text: '井类型',
@@ -144,17 +252,17 @@
         //   align: 'center'
         // },
         {
-          text: '权属单位',
-          value: 'deptName',
-          align: 'center'
+          text: "权属单位",
+          value: "deptName",
+          align: "center",
         },
         {
-          text: '设备数量',
-          value: 'deviceCount',
+          text: "设备数量",
+          value: "deviceCount",
           width: 100,
-          align: 'center',
-          type: 'Button'
-        }
+          align: "center",
+          type: "Button",
+        },
         // {
         //   text: '布防状态',
         //   value: 'bfztName',
@@ -168,10 +276,10 @@
       showWellType: true, // 是否显示井类型下拉
       wellTypeList: null, // 井类型列表
       deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
+        parent: "pid",
+        value: "id",
+        label: "name",
+        children: "children",
       }, // 权属单位树形下拉菜单
       deptTreeList: null, // 组织树列表数据
       deptShowTop: false, // 权属单位下拉是否显示顶级
@@ -179,184 +287,182 @@
       fullscreenLoading: false, // 全屏加载动画
       editShow: false, // 是否显示编辑框
       detailShow: false, // 是否显示详情框
-      filename: 'sluicewell_template.xlsx',
+      filename: "sluicewell_template.xlsx",
       fileList: [],
       btnNames: {
-        '布防': '撤防',
-        '撤防': '布防'
+        布防: "撤防",
+        撤防: "布防",
       },
       btnStatus: {
-        '撤防': 'success',
-        '布防': 'danger'
-      }
-    }
+        撤防: "success",
+        布防: "danger",
+      },
+    };
   },
   created() {
-    this.fetchWellType()// 获取井列表
-    this.fetchData()// 获取数据
+    this.fetchWellType(); // 获取井列表
+    this.fetchData(); // 获取数据
   },
   activated() {
-    console.log('activated')
-    this.fetchData()// 获取数据
+    console.log("activated");
+    this.fetchData(); // 获取数据
   },
   methods: {
+    selectnode(node) {
+      this.listQuery.areaId = node.id;
+    },
+
     // 打开详情对话框
     detail(row) {
-      this.detailShow = true
-      this.$refs.detailwell.initDialog(true, row)
+      this.detailShow = true;
+      this.$refs.detailwell.initDialog(true, row);
     },
     checkSelection() {
       if (this.multipleSelection.length === 0) {
-        return false
+        return false;
       } else {
-        return true
+        return true;
       }
     },
     // 新增井
     add() {
-      this.$router.push({ path: 'addWell', query: { type: 'add' }})
+      this.$router.push({ path: "addWell", query: { type: "add" } });
     },
     // 编辑井信息
     edit(row) {
-      this.dialogFormVisible = true
-      this.editShow = true
-      this.$refs.editwell.initDialog(this.dialogFormVisible, row)
+      this.dialogFormVisible = true;
+      this.editShow = true;
+      this.$refs.editwell.initDialog(this.dialogFormVisible, row);
     },
     // 删除井
     del() {
       if (this.checkSelection()) {
-        const wellIds = []
-        this.multipleSelection.forEach(function(value, index) {
-          wellIds.push(value.id)
-        })
-        this.$confirm(
-          '确定要删除所选井吗？',
-          '确认操作',
-          {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          delWell(wellIds).then(response => {
+        const wellIds = [];
+        this.multipleSelection.forEach(function (value, index) {
+          wellIds.push(value.id);
+        });
+        this.$confirm("确定要删除所选井吗？", "确认操作", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          delWell(wellIds).then((response) => {
             if (response.code === 200) {
-              this.$message.success('删除成功')
-              this.fetchData()
+              this.$message.success("删除成功");
+              this.fetchData();
             }
-          })
-        })
+          });
+        });
       } else {
-        this.$message.error('至少选中一项')
+        this.$message.error("至少选中一项");
       }
     },
     // 批量导入井
     uploadFile(param) {
-      console.log('uploadFile')
+      console.log("uploadFile");
       // 判断文件大小是否符合要求
-      const _file = param.file
-      const isLt5M = _file.size / 1024 / 1024 < 5
+      const _file = param.file;
+      const isLt5M = _file.size / 1024 / 1024 < 5;
       if (!isLt5M) {
-        this.$message.error('请上传5M以下的excel文件')
-        return false
+        this.$message.error("请上传5M以下的excel文件");
+        return false;
       }
       // 全屏加载动画
       const loading = this.$loading({
         lock: true,
-        text: '导入中,请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
+        text: "导入中,请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
       // 发起导入请求
-      batchImportWell(_file).then(res => {
-        loading.close() // 关闭加载动画
-        if (res.code === 200) {
-          this.$message.success('导入成功')
-          this.fileList = []
-          this.fetchData()
-        } else {
-          this.$message.error(res.message)
-        }
-      }).catch(() => {
-        loading.close()
-      })
-      this.fileList = []
+      batchImportWell(_file)
+        .then((res) => {
+          loading.close(); // 关闭加载动画
+          if (res.code === 200) {
+            this.$message.success("导入成功");
+            this.fileList = [];
+            this.fetchData();
+          } else {
+            this.$message.error(res.message);
+          }
+        })
+        .catch(() => {
+          loading.close();
+        });
+      this.fileList = [];
     },
     // 批量导出
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
         lock: true,
-        text: '下载中,请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      const _this = this
+        text: "下载中,请稍后...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      const _this = this;
       const config = {
         // 获取下载进度
         onDownloadProgress(progressEvent) {
-          console.log(progressEvent)
-          var percent = parseInt(100 * (progressEvent.loaded / progressEvent.total))
-          console.log('percent:' + percent, 'total:' + progressEvent.total)
+          console.log(progressEvent);
+          var percent = parseInt(
+            100 * (progressEvent.loaded / progressEvent.total)
+          );
+          console.log("percent:" + percent, "total:" + progressEvent.total);
           // 渲染dom
           _this.$nextTick(() => {
-            _this.percent = percent
-          })
-        }
-      }
-      batchExportWell(this.listQuery, config).then(res => {
-        loading.close() // 关闭加载动画
-        console.log('download===', res)
-        const blob = new Blob([res.data])
-        const downloadElement = document.createElement('a')
-        const href = window.URL.createObjectURL(blob) // 创建下载的链接
-        downloadElement.href = href
-        downloadElement.download = `井列表.xlsx` // 下载后文件名
-        document.body.appendChild(downloadElement)
-        downloadElement.click() // 点击下载
-        document.body.removeChild(downloadElement) // 下载完成移除元素
-        window.URL.revokeObjectURL(href) // 释放blob对象
-      }).catch((res) => {
-        loading.close()
-      })
+            _this.percent = percent;
+          });
+        },
+      };
+      batchExportWell(this.listQuery, config)
+        .then((res) => {
+          loading.close(); // 关闭加载动画
+          console.log("download===", res);
+          const blob = new Blob([res.data]);
+          const downloadElement = document.createElement("a");
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          downloadElement.href = href;
+          downloadElement.download = `井列表.xlsx`; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href); // 释放blob对象
+        })
+        .catch((res) => {
+          loading.close();
+        });
     },
     // 布防撤防
     bfcf(row) {
-      if (row.bfzt === '1') {
+      if (row.bfzt === "1") {
         // 需要撤防
-        this.$confirm(
-          '确定要对该井进行撤防吗？',
-          '确认操作',
-          {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          bfcf(row.id, '0').then(response => {
+        this.$confirm("确定要对该井进行撤防吗？", "确认操作", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          bfcf(row.id, "0").then((response) => {
             if (response.code === 200) {
-              this.$message.success('撤防成功')
-              this.fetchData()
+              this.$message.success("撤防成功");
+              this.fetchData();
             }
-          })
-        })
+          });
+        });
       } else {
         // 需要布防
-        this.$confirm(
-          '确定要对该井进行布防吗？',
-          '确认操作',
-          {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          bfcf(row.id, '1').then(response => {
+        this.$confirm("确定要对该井进行布防吗？", "确认操作", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          bfcf(row.id, "1").then((response) => {
             if (response.code === 200) {
-              this.$message.success('布防成功')
-              this.fetchData()
+              this.$message.success("布防成功");
+              this.fetchData();
             }
-          })
-        })
+          });
+        });
       }
     },
     // 批量布防
@@ -368,24 +474,20 @@
         wellType: this.listQuery.wellType,
         deptid: this.listQuery.deptid,
         notes: this.listQuery.notes,
-        bfzt: '1'
-      }
-      this.$confirm(
-        '确定要对列表中的全部井进行布防吗？',
-        '确认操作',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }
-      ).then(() => {
-        batchBfcf(listQuery).then(response => {
+        bfzt: "1",
+      };
+      this.$confirm("确定要对列表中的全部井进行布防吗？", "确认操作", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        batchBfcf(listQuery).then((response) => {
           if (response.code === 200) {
-            this.$message.success('布防成功')
-            this.fetchData()
+            this.$message.success("布防成功");
+            this.fetchData();
           }
-        })
-      })
+        });
+      });
     },
     // 批量撤防
     batchCf() {
@@ -396,117 +498,123 @@
         wellType: this.listQuery.wellType,
         deptid: this.listQuery.deptid,
         notes: this.listQuery.notes,
-        bfzt: '0'
-      }
-      this.$confirm(
-        '确定要对列表中的全部井进行撤防吗？',
-        '确认操作',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }
-      ).then(() => {
-        batchBfcf(listQuery).then(response => {
+        bfzt: "0",
+      };
+      this.$confirm("确定要对列表中的全部井进行撤防吗？", "确认操作", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        batchBfcf(listQuery).then((response) => {
           if (response.code === 200) {
-            this.$message.success('撤防成功')
-            this.fetchData()
+            this.$message.success("撤防成功");
+            this.fetchData();
           }
-        })
-      })
+        });
+      });
     },
     // 查询数据
     search() {
-      this.fetchData(false)
+      this.fetchData(false);
     },
     // 获取井数据
     fetchData(isNowPage = true) {
-      this.listLoading = true
-      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-        this.listQuery.offset = 1
+      this.listLoading = true;
+      if (!isNowPage) {
+        // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1;
       }
-      getWellList(this.listQuery).then(response => {
-        this.list = response.data.rows.map(function(item) {
-          item.areaFullName = item.areaFullName.replace('\/', '').replace('顶层', '')
-          return item
-        })
-        this.total = parseInt(response.data.total)
-        this.listLoading = false
-      })
+      getWellList(this.listQuery).then((response) => {
+        this.list = response.data.rows.map(function (item) {
+          item.areaFullName = item.areaFullName
+            .replace("/", "")
+            .replace("顶层", "");
+          return item;
+        });
+        this.total = parseInt(response.data.total);
+        this.listLoading = false;
+      });
     },
     // 获取井类型
     fetchWellType() {
-      getWellType().then(response => {
-        debugger
-        this.wellTypeList = []
-        const wellTypes = this.$store.getters.wellTypes
+      getWellType().then((response) => {
+        debugger;
+        this.wellTypeList = [];
+        const wellTypes = this.$store.getters.wellTypes;
         for (const wellType of response.data) {
           if (wellTypes.indexOf(wellType.value) !== -1) {
-            this.wellTypeList.push(wellType)
+            this.wellTypeList.push(wellType);
           }
         }
         if (this.wellTypeList.length <= 1) {
-          this.showWellType = false
+          this.showWellType = false;
         }
-      })
+      });
     },
     // 去设备列表页
     goDeviceList(row) {
-      this.$router.push({ name: 'DeviceList', query: { wellCode: row.wellCode }})
+      this.$router.push({
+        name: "DeviceList",
+        query: { wellCode: row.wellCode },
+      });
     },
     goAlarmRecords(row) {
-      this.$router.push({ name: 'AlarmRecords', query: { wellCode: row.wellCode }})
+      this.$router.push({
+        name: "AlarmRecords",
+        query: { wellCode: row.wellCode },
+      });
     },
     handleSuccess() {
-      console.log('handleSuccess')
+      console.log("handleSuccess");
     },
     indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1;
     },
     // 改变页容量
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
+      this.listQuery.limit = val;
+      this.fetchData();
     },
     // 改变当前页
     handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
+      this.listQuery.offset = val;
+      this.fetchData();
     },
     // 多选触发方法
     handleSelectionChange(val) {
-      this.multipleSelection = val
-    }
-  }
-}
+      this.multipleSelection = val;
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    margin-bottom: 50px;
-  }
-  .table-title{
-    margin: 0px 6px;
-    background-color: white;
-    height: $tableTitleHeight;
-    .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
-      font-size: 15px;
-      i{
-        margin-left: 5px;
-        margin-right: 5px;
-      }
+$tableTitleHeight: 46px;
+.table {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 50px;
+}
+.table-title {
+  margin: 0px 6px;
+  background-color: white;
+  height: $tableTitleHeight;
+  .title-header {
+    line-height: $tableTitleHeight;
+    color: #606266;
+    font-size: 15px;
+    i {
+      margin-left: 5px;
+      margin-right: 5px;
     }
   }
-  .edit_btns{
-    .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-    }
+}
+.edit_btns {
+  .edit_btn {
+    float: right;
+    margin: 7px 3px; //为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
   }
+}
 </style>