fix: 农业管理，水卡管理，部分水权设置接口对接

src/api/card/index.js

@@ -0,0 +1,64 @@
+import request from '@/utils/request'
+
+// 列表
+export const getCardList = query => {
+  return request({
+    url: '/wpr/card/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 新增
+export const addCard = data => {
+  return request({
+    url: '/wpr/card/add',
+    method: 'post',
+    data
+  }) 
+}
+
+// 修改
+export const editCard = data => {
+  return request({
+    url: '/wpr/card/edit',
+    method: 'put',
+    data
+  }) 
+}
+
+// 删除
+export const deleteCard = farmerIds => {
+  return request({
+    url: '/wpr/card/delete/',
+    method: 'delete',
+    params: farmerIds
+  }) 
+}
+
+// 详情
+export const getCardDetail = query => {
+  return request({
+    url: '/wpr/card/info',
+    method: 'get',
+    params: query
+  }) 
+}
+
+// 充值
+export const rechargeCard = data => {
+  return request({
+    url: '/wpr/card/recharge',
+    method: 'post',
+    data
+  }) 
+}
+
+// 充值记录
+export const getRechargercdList = query => {
+  return request({
+    url: '/wpr/rechargercd/list',
+    method: 'get',
+    params: query
+  }) 
+}

src/api/farmer/list.js

@@ -0,0 +1,51 @@
+import request from '@/utils/request'
+
+// 农户列表
+export const getFarmerList = query => {
+  return request({
+    url: '/wpr/farmer/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 新增
+
+export const addFarmer = data => {
+  return request({
+    url: '/wpr/farmer/add',
+    method: 'post',
+    data
+  }) 
+}
+
+
+// 修改
+
+export const editFarmer = data => {
+  return request({
+    url: '/wpr/farmer/edit',
+    method: 'put',
+    data
+  }) 
+}
+
+// 删除
+
+export const deleteFarmer = farmerIds => {
+  return request({
+    url: '/wpr/farmer/delete/',
+    method: 'delete',
+    params: farmerIds
+  }) 
+}
+
+// 详情
+
+export const getFarmerDetail = query => {
+  return request({
+    url: '/wpr/farmer/info',
+    method: 'get',
+    params: query
+  }) 
+}

src/api/tree.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export const getTree = query => {
+  return request({
+    url: '/wpr/area/tree/list',
+    method: 'get',
+    params: query
+  });
+}

src/api/waterright/index.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 列表
+export const getWaterrightList = query => {
+  return request({
+    url: '/wpr/waterright/tree/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 新增
+export const addWaterright = data => {
+  return request({
+    url: '/wpr/waterright/add',
+    method: 'post',
+    data
+  }) 
+}
+
+// 修改
+export const editWaterright = data => {
+  return request({
+    url: '/wpr/waterright/edit',
+    method: 'put',
+    data
+  }) 
+}
+
+// 获取上级区域水权信息
+export const getWaterrightUpareaInfo = query => {
+  return request({
+    url: '/wpr/waterright/uparea/info',
+    method: 'get',
+    params: query
+  }) 
+}

src/assets/styles/global.scss

@@ -123,3 +123,25 @@
     }
   }
 }
+.app-main {
+  background-color: #f3f5f9;
+  height: 100%;
+  position: relative;
+  #products-app {
+    height: 100%;
+    box-sizing: border-box;
+    .elrow-main {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+      &__col-bottom {
+        margin-top: 20px;
+        flex: 1;
+        background-color: #fff;
+        border-radius: 5px;
+        padding: 20px 10px;
+      }
+    }
+  }
+}

src/assets/styles/sidebar.scss

@@ -4,6 +4,7 @@
     transition: margin-left 0.28s;
     margin-left: $base-sidebar-width;
     position: relative;
+    background: #e8f1f4;
   }
 
   .sidebarHide {

src/assets/styles/variables.scss

@@ -38,7 +38,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 224px;
 
 // 首页主题色
 $home-crop-tab-button-background-color: #47af8eff;

src/components/DataReportLeft/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <el-tree
+     :data="treeData"
+     node-key="id"
+     :default-expanded-keys="[1]"
+     :props="defaultProps"
+     @node-click="handleNodeClick"
+     ></el-tree>
+  </div>
+</template>
+<script>
+export default {
+  name: 'dataReportLeft',
+  props: {
+    treeData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      defaultProps:{
+        children: 'children',
+        label: 'cusareaName'
+      },
+    };
+  },
+  methods: {
+    handleNodeClick(data) {
+      this.$emit("setCurrentData",data?.cusareaId)
+    }
+  }
+};
+</script>
+<style lang="sass" scoped>
+
+</style>

src/components/SelectTree/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <el-select class="form-input" v-model="node.cusareaName" filterable style="width: 100%;padding:0">
+      <el-option style="height: auto; padding:0;font-weight:normal" :value="node.cusareaName">
+        <el-tree
+          :data="treeData"
+          :expand-on-click-node="false"
+          ref="treeForm"
+          node-key="code"
+          @check="handleNodeCheck"
+          @check-change="handleClick"
+          @node-click="handleNodeClick"
+          :props="defaultProps">
+        </el-tree>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+<script>
+export default {
+  name: 'selectTree',
+  props: {
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    checkVal: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      defaultProps:{
+        children: 'children',
+        label: 'cusareaName',
+        value: 'code'
+      },
+      node: {
+        cusareaName: this.checkVal
+      }
+    }
+  },
+  watch: {
+    checkVal: {
+      handler(val) {
+        this.node.cusareaName = val
+      }
+    }
+  },
+  methods: {
+    //点击节点
+handleNodeClick(data) {
+    this.node = data;
+    this.$emit('handlerClick', data)
+},
+//节点选中状态变化
+handleClick(data, checked, node){
+     if(checked){
+            this.node = data;
+            this.record.parentCode = data.code;
+            this.$refs.treeForm.setCheckedKeys([data.code]);
+     } else {
+            this.node = {};
+            this.record.parentCode = '';
+            this.$refs.treeForm.setCheckedKeys([]);
+     }
+},
+//点击复选框
+handleNodeCheck(data, checked) {
+    if (checked.checkedKeys.length > 0) {
+            this.node = data;
+            this.record.parentCode = data.code;
+            this.$refs.treeForm.setCheckedKeys([data.code]);
+    }else {
+            this.node = {};
+            this.record.parentCode = '';
+            this.$refs.treeForm.setCheckedKeys([]);
+    }
+}
+  }
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-select-dropdown__item {
+  padding: 0 !important
+}
+.tree-container {
+
+}
+</style>

src/router/index.js

@@ -50,6 +50,11 @@ export const constantRoutes = [
     ]
   },
   {
+    path: '/waterCardManageDataDetail',
+    component: () => import('@/views/waterCardManage/dataDetail'),
+    hidden: true
+  },
+  {
     path: '/login',
     component: () => import('@/views/login'),
     hidden: true

src/views/dataReport/components/addedFarmers.vue

@@ -159,6 +159,7 @@
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"

src/views/dataReport/components/dataReportLeft.vue

@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <el-tree
-     :data="data"
-     node-key="id"
-     :default-expanded-keys="[1]"
-     :props="defaultProps"
-     @node-click="handleNodeClick"
-     ></el-tree>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'dataReportLeft',
-    data() {
-      return {
-        data: [{
-          id:1,
-          label: '一级 1',
-          children: [{
-            id:2,
-            label: '二级 1-1',
-            children: [{
-              id:3,
-              label: '三级 1-1-1',
-              children:[{
-                id:4,
-                label: '四级 1-1-1',
-                children:[{
-                  id:5,
-                  label: '五级 1-1-1',
-                }]
-              }]
-            }]
-          }]
-        }, {
-          id:2,
-          label: '一级 2',
-          children: [{
-            id:6,
-            label: '二级 2-1',
-            children: [{
-            id:7,
-              label: '三级 2-1-1'
-            }]
-          }, {
-            id:8,
-            label: '二级 2-2',
-            children: [{
-              id:9,
-              label: '三级 2-2-1'
-            }]
-          }]
-        }, {
-          id:3,
-          label: '一级 3',
-          children: [{
-            id:10,
-            label: '二级 3-1',
-            children: [{
-              id:11,
-              label: '三级 3-1-1'
-            }]
-          }, {
-            id:12,
-            label: '二级 3-2',
-            children: [{
-              id:13,
-              label: '三级 3-2-1'
-            }]
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
-        }
-      };
-    },
-    methods: {
-      handleNodeClick(data) {
-        console.log(data);
-      }
-    }
-  };
-</script>
-<style lang="sass" scoped>
-
-</style>

src/views/dataReport/components/report.vue

@@ -1,95 +1,71 @@
 <template>
   <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="24"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <!-- <el-input
-                v-model="form.tarcecodeapplyno"
-                style="width: 250px;margin:0 15px;"
-                placeholder="请输入溯源码编号"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-button
-                type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
-              > -->
-              <slot name="headerLeft" />
-            </div>
-            <div class="top-left">
-              <slot name="headerRight" />
-              <!-- <el-button
-                type="primary"
-                size="small"
-                @click="addAssociation"
-                >新增协会</el-button> -->
-              </div>
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
+    <el-card style="height: 100%; overflow-y: auto">
+      <el-col :span="24" class="elrow-main__col-top">
+        <div>
+          <slot name="headerLeft" />
+        </div>
+        <div class="top-left">
+          <slot name="headerRight" />
+          </div>
+      </el-col>
+      <el-col :span="24" class="elrow-main__col-bottom">
+        <img v-if="imgUrl" :src="imgUrl" />
+        <b-table
+          ref="tableRef"
+          :args="{ 'highlight-current-row': true }"
+          :data="loadData"
+          :columns="columns"
+          isShowIndex
+          :showPagination="loadData.length"
+        >
+          <template #styleImg="scope">
+            <el-image
+              :src="scope.row.imgPreview"
+              :preview-src-list="[scope.row.imgPreview]"
+              slot="error"
+              class="image-slot"
+              style="width: 100px; height: 50px"
+            >
+              <div slot="error" class="image-slot"></div>
+            </el-image>
+          </template>
+          <template #codeNo="scope">
+            <el-link
+              type="primary"
+              :underline="false"
+              @click="goDetail(scope.row)"
+              >{{ scope.row.traceCodeApplyConcat }}</el-link
             >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link
-                >
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
+          </template>
+          <template #useNumber="scope">
+            {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+          </template>
+          <template #finishGoodName="scope">
+            {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+          </template>
 
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                  >下载</el-link
-                >
-                <el-link
-                size="small"
-                :underline="false"
-                type="danger"
-                style="margin-right: 10px"
-                @click="download(scope.row)"
-                >删除</el-link
-              >
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
+          <template #operate="scope">
+            <el-link
+              size="small"
+              :underline="false"
+              type="primary"
+              style="margin-right: 10px"
+              @click="download(scope.row)"
+              >下载</el-link
+            >
+            <el-link
+            size="small"
+            :underline="false"
+            type="danger"
+            style="margin-right: 10px"
+            @click="download(scope.row)"
+            >删除</el-link
+          >
+          </template>
+        </b-table>
       </el-col>
-    </el-row>
+    </el-card>
   </div>
 </template>
 
@@ -174,9 +150,6 @@ export default {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 15px;
-  // padding: 20px 10px;
-  // background-color: #fff;
-  // border-radius: 5px;
   .top-left {
     height: 100%;
     display: flex;
@@ -189,26 +162,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/dataReport/intakeWaterAnalysis.vue

@@ -1,52 +1,41 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="4"
-      >
-      <el-card style="margin:5%;height: 100%; overflow-y: auto">
-        <data-report-left></data-report-left>
-      </el-card>
-      </el-col>
-      <el-col
-        :span="20"
-        style="padding: 20px; height: 100%"
-      >
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="月报表" name="first">
-          <Report :columns="columns">
-            <template slot="headerLeft">
-              <el-input
-                v-model="form.tarcecodeapplyno"
-                style="width: 250px;margin:0 15px;"
-                placeholder="请输入溯源码编号"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-button
-                type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
-              > 
-            </template>
-          </Report>
-        </el-tab-pane>
-        <el-tab-pane label="季报表" name="second">
-          <Report :columns="columns"/>
-        </el-tab-pane>
-        <el-tab-pane label="年报表" name="third">
-          <Report :columns="columns"/>
-        </el-tab-pane>
-      </el-tabs>
-      </el-col>
-    </el-row>
-  </div>
+  <el-row class="el-row-container" v-loading="loading">
+    <el-col
+      :span="4"
+      style="height:100%;padding-bottom:32px;"
+    >
+    <el-card style="margin:16px;height: 100%; overflow-y: auto">
+      <data-report-left></data-report-left>
+    </el-card>
+    </el-col>
+    <el-col
+      :span="20"
+      style="padding: 16px 16px 16px 0; height: 100%;"
+    >
+    <Report :columns="columns" style="height:100%;">
+      <template slot="headerLeft">
+        <el-input
+          v-model="form.tarcecodeapplyno"
+          style="width: 250px;margin-right: 16px;"
+          placeholder="请输入溯源码编号"
+          @keyup.enter.native="handleSearch"
+          clearable
+        />
+        <el-button
+          type="primary"
+          size="small"
+          @click="handleSearch"
+          >查询</el-button
+        > 
+      </template>
+    </Report>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import BTable from '@/components/Table/index.vue';
-import DataReportLeft from './components/dataReportLeft.vue'
+import DataReportLeft from '@/components/DataReportLeft/index.vue'
 import Report from './components/report.vue'
 
 export default {
@@ -96,6 +85,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
@@ -113,26 +105,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/dataReport/saveWaterAnalysis.vue

@@ -1,112 +1,49 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="24"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <el-select placeholder="年度">
-              </el-select>
-              <el-select placeholder="区域" style="margin-left:20px">
-              </el-select>
-              <el-input
-                v-model="form.tarcecodeapplyno"
-                style="width: 250px;margin:0 15px;"
-                placeholder="请i输入农户编号/姓名/电话"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-button
-                type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
-              >
-            </div>
-            <div class="top-left">
-              <el-button
-                type="primary"
-                size="small"
-                @click="addAssociation"
-                >新增农户</el-button
-              ></div>
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
-            >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link
-                >
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
-
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                  >下载</el-link
-                >
-                <el-link
-                size="small"
-                :underline="false"
-                type="danger"
-                style="margin-right: 10px"
-                @click="download(scope.row)"
-                >删除</el-link
-              >
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
-    <added-farmers :visible.sync="associationManageShow"/>
-  </div>
+  <el-row class="el-row-container" v-loading="loading">
+    <el-col
+      :span="4"
+      style="height:100%;padding-bottom:32px;"
+    >
+    <el-card style="margin:16px;height: 100%; overflow-y: auto">
+      <data-report-left></data-report-left>
+    </el-card>
+    </el-col>
+    <el-col
+      :span="20"
+      style="padding: 16px 16px 16px 0; height: 100%;"
+    >
+    <Report :columns="columns" style="height:100%;">
+      <template slot="headerLeft">
+        <el-input
+          v-model="form.tarcecodeapplyno"
+          style="width: 250px;margin-right:16px;"
+          placeholder="请输入溯源码编号"
+          @keyup.enter.native="handleSearch"
+          clearable
+        />
+        <el-button
+          type="primary"
+          size="small"
+          @click="handleSearch"
+          >查询</el-button
+        > 
+      </template>
+    </Report>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import BTable from '@/components/Table/index.vue';
-import AddedFarmers from './components/addedFarmers.vue'
-import { assign, omit } from 'lodash-es';
+import DataReportLeft from '@/components/DataReportLeft/index.vue'
+import Report from './components/report.vue'
 
 export default {
   name:"waterManage",
-  components: { BTable,AddedFarmers },
+  components: { BTable,DataReportLeft,Report},
   data() {
     return {
-      imgUrl: '',
+      activeName:'first',
       form: {
         productName: ''
       },
@@ -114,49 +51,25 @@ export default {
       associationManageShow: false,
       columns: [
         {
-          label: '年度',
+          label: '机井名称',
           prop: 'person',
           customRender: '',
           align: 'center'
         },
         {
-          label: '管理区域',
+          label: '累计用水量（m³）',
           prop: 'area',
           customRender: '',
           align: 'center'
         },
         {
-          label: '农户',
+          label: '灌溉次数',
           prop: 'name',
           customRender: '',
           align: 'center'
         },
         {
-          label: '额定水权',
-          prop: 'phone',
-          customRender: '',
-          align: 'center'
-        },
-        {
-          label: '已用水量',
-          prop: 'phone',
-          customRender: '',
-          align: 'center'
-        },
-        {
-          label: '节水比率',
-          prop: 'phone',
-          customRender: '',
-          align: 'center'
-        },
-        {
-          label: '土地面积（亩）',
-          prop: 'phone',
-          customRender: '',
-          align: 'center'
-        },
-        {
-          label: '剩余水权（立方）',
+          label: '累计用电量（°）',
           prop: 'phone',
           customRender: '',
           align: 'center'
@@ -165,55 +78,16 @@ export default {
     };
   },
   methods: {
-    addAssociation() {
-      this.associationManageShow = true
-    },
-    loadData(parameter) {
-      const queryform = this.form;
-      const payload = omit(assign({}, parameter, queryform, {orderByColumn:'tarcecodeapplyCreateddate',isAsc:'desc'}), []);
-      return this.getTableData(payload);
-    },
-    getTableData(payload) {
-      return Promise.resolve({
-        data: [{
-            person:"王大虎",
-            area: '2016-05-02',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1518 弄'
-          }, {
-            person:"王大虎",
-            area: '2016-05-04',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1517 弄'
-          }, {
-            person:"王大虎",
-            area: '2016-05-01',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1519 弄'
-          }, {
-            person:"王大虎",
-            area: '2016-05-03',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1516 弄'
-          }]
-      })
-    },
-    handleSearch() {
-      this.$refs.tableRef.refresh(true);
-    },
-    goDetail(row) {
-      this.$refs.sourceCodeDetail.open(row.tarcecodeapplyBatchno)
-    },
-    download(row) {}
+    handleClick(){},
+    handleSearch() {},
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
@@ -231,26 +105,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/dataReport/waterConsumption.vue

@@ -1,62 +1,46 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="4"
-      >
-      <el-card style="margin:5%;height: 100%; overflow-y: auto">
-        <data-report-left></data-report-left>
-      </el-card>
-      </el-col>
-      <el-col
-        :span="20"
-        style="padding: 20px; height: 100%"
-      >
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="月报表" name="first">
-          <Report :columns="columns">
-            <template slot="headerLeft">
-              <el-input
-                v-model="form.tarcecodeapplyno"
-                style="width: 250px;margin:0 15px;"
-                placeholder="请输入溯源码编号"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-button
-                type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
-              > 
-            </template>
-            <!-- <el-button
-              type="primary"
-              size="small"
-              slot="headerRight"
-            >新增协会</el-button> -->
-          </Report>
-        </el-tab-pane>
-        <el-tab-pane label="季报表" name="second">
-          <Report :columns="columns"/>
-        </el-tab-pane>
-        <el-tab-pane label="年报表" name="third">
-          <Report :columns="columns"/>
-        </el-tab-pane>
-      </el-tabs>
-      </el-col>
-    </el-row>
-  </div>
+  <el-row class="el-row-container" v-loading="loading">
+    <el-col
+      :span="4"
+      style="height:100%;padding-bottom:32px;"
+    >
+    <el-card style="margin:16px;height: 100%; overflow-y: auto">
+      <data-report-left></data-report-left>
+    </el-card>
+    </el-col>
+    <el-col
+      :span="20"
+      style="padding: 16px 16px 16px 0; height: 100%;"
+    >
+    <Report :columns="columns" style="height:100%;">
+      <template slot="headerLeft">
+        <el-input
+          v-model="form.tarcecodeapplyno"
+          style="width: 250px;margin-right:16px;"
+          placeholder="请输入溯源码编号"
+          @keyup.enter.native="handleSearch"
+          clearable
+        />
+        <el-button
+          type="primary"
+          size="small"
+          @click="handleSearch"
+          >查询</el-button
+        > 
+      </template>
+    </Report>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import BTable from '@/components/Table/index.vue';
-import DataReportLeft from './components/dataReportLeft.vue'
+import DataReportLeft from '@/components/DataReportLeft/index.vue'
 import Report from './components/report.vue'
 
 export default {
   name:"waterManage",
-  components: { BTable,DataReportLeft,Report },
+  components: { BTable,DataReportLeft,Report},
   data() {
     return {
       activeName:'first',
@@ -101,14 +85,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 15px;
-  // padding: 20px 10px;
-  // background-color: #fff;
-  // border-radius: 5px;
   .top-left {
     height: 100%;
     display: flex;
@@ -121,26 +105,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/gisShow/components/mapContainer.vue

@@ -26,6 +26,7 @@ import shuijing from '../assets/shuijing.svg'
         map: null,
         recomposeShow: false,
         address:'',
+        current_market: []
       }
     },
     watch:{
@@ -37,29 +38,18 @@ import shuijing from '../assets/shuijing.svg'
       },
       positions: {
         handler(val){
-          this.initMap()
+          this.addIcon()
         },
         deep: true
       }
     },
     methods: {
-      initMap() {
-        var map = new AMap.Map('container', {
-          viewMode: '3D',
-          center: this.center,
-          layers: [new AMap.TileLayer.Satellite()],
-          zoom: this.zoom,
-          resizeEnable: true
-        });
-        this.map = map
+      addIcon() {
+        const map = this.map
+        this.current_market.forEach(market => {
+          map.remove(market)
+        })
         var layers = [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()];
-        // const positions = [{
-        //   lng: 115.857194, 
-        //   lat: 34.041573
-        // },{
-        //   lng: 115.850, 
-        //   lat: 34.041573
-        // }]
         this.positions.forEach(item => {
           const { lng, lat } = item
           const icons = new AMap.Icon({
@@ -79,6 +69,7 @@ import shuijing from '../assets/shuijing.svg'
             this.$emit("handlerRecomposeShow",true)
           })
           map.add(marker);
+          this.current_market.push(marker)
         })
         map.setLayers(layers);
         map.addControl(new AMap.ToolBar()); // 添加组合控件
@@ -101,8 +92,19 @@ import shuijing from '../assets/shuijing.svg'
         state.MSearch = new AMap.PlaceSearch(PlaceSearchOptions); // 构造PlaceSearch类
         state.MSearch.search(state.keyWord, keywordSearch_CallBack);
         AMap.Event.addListener(state.MSearch, 'complete', keywordSearch_CallBack); 
-        }
       },
+      initMap() {
+        var map = new AMap.Map('container', {
+          viewMode: '3D',
+          center: this.center,
+          layers: [new AMap.TileLayer.Satellite()],
+          zoom: this.zoom,
+          resizeEnable: true
+        });
+        this.map = map
+        this.addIcon()
+      }
+    },
     mounted() {
       this.initMap()
     }

src/views/gisShow/components/rightEquipment.vue

@@ -4,7 +4,7 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     @close="handleClose"
-    width="1200px"
+    width="500px"
   >
   <div>
     <div class="container_left">

src/views/infrastructure/components/dataReportLeft.vue

@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <el-tree
-     :data="data"
-     node-key="id"
-     :default-expanded-keys="[1]"
-     :props="defaultProps"
-     @node-click="handleNodeClick"
-     ></el-tree>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'dataReportLeft',
-    data() {
-      return {
-        data: [{
-          id:1,
-          label: '一级 1',
-          children: [{
-            id:2,
-            label: '二级 1-1',
-            children: [{
-              id:3,
-              label: '三级 1-1-1',
-              children:[{
-                id:4,
-                label: '四级 1-1-1',
-                children:[{
-                  id:5,
-                  label: '五级 1-1-1',
-                }]
-              }]
-            }]
-          }]
-        }, {
-          id:2,
-          label: '一级 2',
-          children: [{
-            id:6,
-            label: '二级 2-1',
-            children: [{
-            id:7,
-              label: '三级 2-1-1'
-            }]
-          }, {
-            id:8,
-            label: '二级 2-2',
-            children: [{
-              id:9,
-              label: '三级 2-2-1'
-            }]
-          }]
-        }, {
-          id:3,
-          label: '一级 3',
-          children: [{
-            id:10,
-            label: '二级 3-1',
-            children: [{
-              id:11,
-              label: '三级 3-1-1'
-            }]
-          }, {
-            id:12,
-            label: '二级 3-2',
-            children: [{
-              id:13,
-              label: '三级 3-2-1'
-            }]
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
-        }
-      };
-    },
-    methods: {
-      handleNodeClick(data) {
-        console.log(data);
-      }
-    }
-  };
-</script>
-<style lang="sass" scoped>
-
-</style>

src/views/infrastructure/components/recompose.vue

@@ -34,6 +34,11 @@
             style="width:250px;"
             v-model="textarea">
           </el-select>
+          
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="" prop="productName">
           <span>（上级组织：xxxx镇 总面积：56665亩 额定水权：6555m³ 剩余水权：6544）</span>
         </el-form-item>
       </el-row>
@@ -55,7 +60,12 @@
             style="width:250px;"
             v-model="textarea">
           </el-input>
-          <span style="margin-left:5px">m³ （上年实际用水量：65546m³ 剩余水权：6555m³）</span>
+          <span style="margin-left:5px">m³ </span>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="" prop="productName">
+          <span>（上年实际用水量：65546m³ 剩余水权：6555m³）</span>
         </el-form-item>
       </el-row>
       <el-row>
@@ -76,6 +86,7 @@
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"

src/views/infrastructure/components/setAnnualWaterRight.vue

@@ -97,6 +97,7 @@
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"

src/views/infrastructure/components/setPreferenc.vue

@@ -66,6 +66,7 @@
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"

src/views/infrastructure/components/waterPriceSetting.vue

@@ -19,11 +19,26 @@
       <el-row>
         <el-col :span="24">
           <el-row>
-            <el-col :span="6" style="text-align:left">
-              <el-select
-                placeholder="请选择年度"
-                v-model="textarea">
-              </el-select>
+            <el-col :span="24" style="text-align:left">
+              <el-form-item label="联系电话" prop="dateTime">
+                <el-row>
+                  <el-col>
+                    <el-select
+                      placeholder="请选择年度"
+                      style="width:100%"
+                      v-model="baseForm.dateTime">
+                      <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+              
             </el-col>
           </el-row>
         </el-col>
@@ -46,6 +61,7 @@
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"
@@ -56,16 +72,11 @@
 </template>
 
 <script>
+import { addWaterright } from '@/api/waterright/index.js'
 import { assign } from 'lodash-es';
-import { UPLOAD_TYPE_MAP } from '@/utils/constants';
 export default {
   name:'waterPriceSetting',
   props: {
-    data: {
-      default() {
-        return {};
-      }
-    },
     visible: {
       type: Boolean,
       default: false
@@ -73,47 +84,38 @@ export default {
   },
   data() {
     return {
-      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
       dialogSubmitLoading: false,
       dialogVisible: false,
       baseForm: {
-        productValue: '',
-        productName: '',
-        stockAmount: '',
-        goodsUnit: '',
-        goodsSpecValue: '',
-        imageArr1: [],
-        supplierId: '',
-        imageArr2: []
+        dateTime: ''
       },
-      productList: [],
-      syinfoList: [],
-      processList: [],
       hasFetched: false,
-      landList: [], //基地列表
+      options:[
+        {
+          label: '2023',
+          value: '2023'
+        },{
+          label: '2024',
+          value: '2024'
+        },{
+          label: '2025',
+          value: '2025'
+        },{
+          label: '2026',
+          value: '2026'
+        },{
+          label: '2027',
+          value: '2027'
+        }
+      ],
+      checked: false,
       rules: {
-        stockAmount: [
-          { required: true, message: '请选择负责人', trigger: 'blur' }
-        ],
-        sourceinfoId: [
-          { required: true, message: '请选择管辖范围', trigger: 'blur' }
-        ],
-        productName: [
-          { required: true, message: '请输入协会名称', trigger: 'blur' }
-        ],
-        supplierId: [
-          { required: false, message: '请输入协会介绍', trigger: 'blur' }
-        ],
-        goodsSpecValue: [
-          { required: true, message: '请选择规格', trigger: 'blur' }
+        dateTime: [
+          { required: true, message: '请选择您的年份', trigger: 'blur' }
         ]
       }
     };
   },
-  computed: {
-    goodsUnitLable: function () {
-    }
-  },
   watch: {
     visible(val) {
       if (val !== this.dialogVisible) {
@@ -121,83 +123,37 @@ export default {
         if (val) {
           assign(this.baseForm, this.data);
           if (!this.hasFetched) {
-            this.getProductList();
-            this.getSyinfoList();
-            this.getProcessList();
             this.hasFetched = true;
           }
         }
       }
     },
-    data: {
-      deep: true,
-      handler(val) {
-        // console.log(val)
-        assign(this.baseForm, val);
-        // console.log(this.baseForm)
-      }
-    }
   },
-  created() {},
-  mounted() {},
   methods: {
-    getProductList() {
-    },
-    getSyinfoList() {
-    },
-    getProcessList() {
-    },
-    goProductsPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/Products',
-        query: {}
-      });
-    },
-    goSourceInfoPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/sourceInfo',
-        query: {
-          type: 'add'
-        }
-      });
-    },
-    goProcessPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/basicsettings/process',
-        query: {}
-      });
+    async addWaterrightHandler() {
+      const useOldStatus = this.checked ? 1 : 0
+      const waterrightYear = this.baseForm.dateTime
+      await addWaterright({
+        useOldStatus,
+        waterrightYear
+      })
+      this.handleClose()
+      this.$emit('refresh')
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
-      this.resetFormData();
       this.dialogVisible = false;
     },
-    resetFormData() {
-      this.baseForm = {};
-    },
+
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
-        console.log(valid)
+        valid && this.addWaterrightHandler()
       })
     },
-
     handleClose() {
       this.$emit('update:visible', false);
       this.resetForm('baseForm');
     },
-    handleSuccess() {
-      this.resetForm('baseForm');
-      this.$emit('update:visible', false);
-      this.$emit('success');
-    },
-    handleKeyUp(target, key) {
-      target[key] = target[key].match(/\d+(\.\d{0,2})?/)
-        ? target[key].match(/\d+(\.\d{0,2})?/)[0]
-        : '';
-    }
   }
 };
 </script>

src/views/infrastructure/deviceSetup.vue

@@ -1,110 +1,125 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="4"
-      >
-      <el-card style="margin:5%;height: 100%; overflow-y: auto">
-        <data-report-left></data-report-left>
-      </el-card>
-      </el-col>
-      <el-col
-        :span="20"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <el-input
-                v-model="form.goodsName"
-                style="width: 250px"
-                placeholder="请输入机井编号/机井名称"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-             <el-select placeholder="在线状态" style="margin: 0 10px">
+  <el-row class="el-row-container" style="height: 100%" v-loading="loading">
+    <el-col
+      :span="4"
+      style="height:100%;padding-bottom:32px;"
+    >
+    <el-card style="margin:16px;height: 100%; overflow-y: auto">
+      <data-report-left></data-report-left>
+    </el-card>
+    </el-col>
+    <el-col
+      :span="20"
+      style="padding: 16px 16px 16px 0; height: 100%"
+    >
+      <el-card style="height: 100%; overflow-y: auto">
+        <el-col :span="24" class="elrow-main__col-top">
+          <div>
+            <el-input
+              v-model="form.goodsName"
+              style="width: 250px"
+              placeholder="请输入机井编号/机井名称"
+              @keyup.enter.native="handleSearch"
+              clearable
+            />
+            <el-select placeholder="在线状态" style="margin: 0 10px">
 
-             </el-select>
-              <el-button
+            </el-select>
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleSearch"
+              >查询</el-button
+            >
+          </div>
+        </el-col>
+        <el-col :span="24" class="elrow-main__col-bottom">
+          <img v-if="imgUrl" :src="imgUrl" />
+          <b-table
+            ref="tableRef"
+            :args="{ 'highlight-current-row': true }"
+            :data="loadData"
+            :columns="columns"
+            isShowIndex
+            :showPagination="loadData.length"
+          >
+            <template #styleImg="scope">
+              <el-image
+                :src="scope.row.imgPreview"
+                :preview-src-list="[scope.row.imgPreview]"
+                slot="error"
+                class="image-slot"
+                style="width: 100px; height: 50px"
+              >
+                <div slot="error" class="image-slot"></div>
+              </el-image>
+            </template>
+            <template #codeNo="scope">
+              <el-link
                 type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >{{ scope.row.traceCodeApplyConcat }}</el-link
               >
-            </div>
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
-            >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link
-                >
-              </template>
-              <template #status="scope">
-                <span style="display:flex;align-items:center;justify-content:center">
-                  {{ scope.row.name }}
-                  <span class="status"></span>
-                </span>
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
+            </template>
+            <template #status="scope">
+              <span style="display:flex;align-items:center;justify-content:center">
+                <span class="status"></span>
+                {{ scope.row.name }}
+              </span>
+            </template>
+            <template #useNumber="scope">
+              {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+            </template>
+            <template #finishGoodName="scope">
+              {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+            </template>
 
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="setPreferencHandler(scope.row)"
-                  >参数设置</el-link
-                >
-                <!-- <el-link
+            <template #operate="scope">
+              <el-link
                 size="small"
                 :underline="false"
-                type="danger"
+                type="primary"
+                style="margin-right: 10px"
+                @click="irrigationShowHistory(scope.row)"
+                >灌溉记录</el-link
+              >
+              <el-link
+                size="small"
+                :underline="false"
+                type="primary"
                 style="margin-right: 10px"
                 @click="download(scope.row)"
-                >修改</el-link> -->
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
+              >修改</el-link>
+              <el-link
+                size="small"
+                :underline="false"
+                type="primary"
+                style="margin-right: 10px"
+                @click="showDetails(scope.row)"
+              >详情</el-link>
+              <el-link
+                slot="reference"
+                size="small"
+                :underline="false"
+                type="danger"
+                style="margin-right: 10px"
+                @click="deleteRow(scope.row)"
+              >删除</el-link>
+            </template>
+          </b-table>
+        </el-col>
+      </el-card>
+    </el-col>
     <set-preferencs
       :visible.sync="associationManageShow"
     />
-  </div>
+  </el-row>
 </template>
 
 <script>
 import BTable from '@/components/Table/index.vue';
-import DataReportLeft from './components/dataReportLeft.vue'
+import DataReportLeft from '@/components/DataReportLeft/index.vue'
 import setPreferencs from './components/setPreferenc.vue'
 import { assign, omit } from 'lodash-es';
 
@@ -164,6 +179,7 @@ export default {
         {
           label: '操作',
           customRender: 'operate',
+          width: '200',
           align: 'center'
         }
       ]
@@ -224,6 +240,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
@@ -249,26 +268,4 @@ export default {
   background: red;
   margin-left: 5px;
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/infrastructure/waterElectricityPriceSetting.vue

@@ -1,98 +1,97 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="24"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <el-select
-                placeholder="行政区域（全国）"
-              >
-              </el-select>
-              <el-select
-                style="margin:0 20px"
-                placeholder="全部"
+  <el-row class="el-row-container" v-loading="loading">
+    <el-col
+      :span="24"
+      style="padding: 16px; height: 100%"
+    >
+      <el-card style="height: 100%; overflow-y: auto">
+        <el-col :span="24" class="elrow-main__col-top">
+          <div>
+            <el-select
+              placeholder="行政区域（全国）"
+            >
+            </el-select>
+            <el-select
+              style="margin:0 20px"
+              placeholder="全部"
+            >
+            </el-select>
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleSearch"
+              >查询</el-button
+            >
+          </div>
+          <!-- <div class="top-left">
+            <el-button
+              type="primary"
+              size="small"
+              @click="addAssociation"
+              >新增
+              </el-button
+          ></div> -->
+        </el-col>
+        <el-col :span="24" class="elrow-main__col-bottom">
+          <img v-if="imgUrl" :src="imgUrl" />
+          <b-table
+            ref="tableRef"
+            :args="{ 'highlight-current-row': true }"
+            :data="loadData"
+            :columns="columns"
+            isShowIndex
+            :showPagination="loadData.length"
+          >
+            <template #styleImg="scope">
+              <el-image
+                :src="scope.row.imgPreview"
+                :preview-src-list="[scope.row.imgPreview]"
+                slot="error"
+                class="image-slot"
+                style="width: 100px; height: 50px"
               >
-              </el-select>
-              <el-button
+                <div slot="error" class="image-slot"></div>
+              </el-image>
+            </template>
+            <template #codeNo="scope">
+              <el-link
                 type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >{{ scope.row.traceCodeApplyConcat }}</el-link
               >
-            </div>
-            <!-- <div class="top-left">
-              <el-button
-                type="primary"
-                size="small"
-                @click="addAssociation"
-                >新增
-                </el-button
-            ></div> -->
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
-            >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link
-                >
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
+            </template>
+            <template #useNumber="scope">
+              {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+            </template>
+            <template #finishGoodName="scope">
+              {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+            </template>
 
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="editAssociation(scope.row)"
-                  >修改</el-link
-                >
-                <el-link
+            <template #operate="scope">
+              <el-link
                 size="small"
                 :underline="false"
-                type="danger"
+                type="primary"
                 style="margin-right: 10px"
-                @click="download(scope.row)"
-                >删除</el-link
+                @click="editAssociation(scope.row)"
+                >修改</el-link
               >
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
+              <el-link
+              size="small"
+              :underline="false"
+              type="danger"
+              style="margin-right: 10px"
+              @click="download(scope.row)"
+              >删除</el-link
+            >
+            </template>
+          </b-table>
+        </el-col>
+      </el-card>
+    </el-col>
     <set-annual-water-right :visible.sync="associationManageShow"/>
-  </div>
+  </el-row>
 </template>
 
 <script>
@@ -223,6 +222,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
@@ -240,26 +242,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/infrastructure/waterEstablishment.vue

@@ -1,99 +1,79 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="24"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <el-select
-                v-model="form.goodsName"
-                style="width: 250px"
-                placeholder="年份"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-select
-                v-model="form.goodsName"
-                style="width: 250px;margin: 0 20px;"
-                placeholder="区域"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-button
-                type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
-              >
-            </div>
-            <div class="top-left">
-              <el-button
-                type="primary"
-                size="small"
-                @click="setAnnualWaterRight"
-                >设置年度水权
-                </el-button
-              ></div>
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <el-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="tableData"
-              row-key="id"
-              :columns="columns"
-              isShowIndex
-              :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
-              :header-row-style="{ background: '#E5EEED' }"
-              :header-cell-style="{ background: '#E5EEED' }"
+  <el-row class="el-row-container" v-loading="loading">
+    <el-col
+      :span="24"
+      style="padding: 16px; height: 100%"
+    >
+      <el-card style="height: 100%; overflow-y: auto">
+        <el-col :span="24" class="elrow-main__col-top">
+          <div style="display:flex">
+            <el-select
+              style="width: 100%;margin-right:16px;"
+              laceholder="请选择您的年份"
+              v-model="waterrightYear"
             >
-              <el-table-column
-                v-for="item in columns"
-                :key="item.id"
-                :prop="item.prop"
+              <el-option
+                v-for="item in options"
+                :key="item.value"
                 :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <select-tree 
+              :placeholder="'年份'" 
+              style="width:100%"
+              :treeData="treeData"
+              @handlerClick="handlerClick"
+              :checkVal="cusareaName"
+            ></select-tree>
+            <el-button
+              style="margin-left: 16px;"
+              type="primary"
+              size="small"
+              @click="handleSearch"
+              >查询</el-button
+            >
+          </div>
+          <div class="top-left">
+            <el-button
+              type="primary"
+              size="small"
+              @click="setAnnualWaterRight"
+              >设置年度水权
+              </el-button
+            ></div>
+        </el-col>
+        <el-col :span="24" class="elrow-main__col-bottom">
+          <!--  -->
+          <b-table
+            ref="tableRef"
+            :args="{ 'highlight-current-row': true }"
+            :data="tableData"
+            :columns="columns"
+            isShowIndex
+          >
+            <template #operate="scope">
+              <el-link
+                type="primary"
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >修改</el-link
               >
-              </el-table-column>
-              <el-table-column label="操作">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="handlerRecompose()"
-                  >修改</el-link
-                >
-                <!-- <el-popconfirm
-                  icon="el-icon-info"
-                  icon-color="red"
-                  title="这是一段内容确定删除吗？"
-                >
-                <el-link
-                  slot="reference"
-                  size="small"
-                  :underline="false"
-                  type="danger"
-                  style="margin-right: 10px"
-                  @click="download()"
-                >删除</el-link>
-              </el-popconfirm> -->
-            </el-table-column>
-            </el-table>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
+            </template>
+          </b-table>
+        </el-col>
+      </el-card>
+    </el-col>
     <set-annual-water-right :visible.sync="associationManageShow"/>
     <recompose :visible.sync="recomposeShow"/>
-    <water-price-setting :visible.sync="waterprice"/>
-  </div>
+    <water-price-setting :visible.sync="waterprice" @refresh="handleSearch"/>
+  </el-row>
 </template>
 
 <script>
+import { getTree } from '@/api/tree.js'
+import { getWaterrightList,addWaterright,editWaterright,getWaterrightUpareaInfo } from '@/api/waterright/index.js'
+import SelectTree from '@/components/SelectTree';
 import BTable from '@/components/Table/index.vue';
 import setAnnualWaterRight from './components/setAnnualWaterRight.vue'
 import waterPriceSetting from './components/waterPriceSetting.vue'
@@ -102,104 +82,100 @@ import { assign, omit } from 'lodash-es';
 
 export default {
   name: 'waterEstablishment',
-  components: { BTable,setAnnualWaterRight, recompose,waterPriceSetting },
+  components: { BTable,setAnnualWaterRight, recompose,waterPriceSetting,SelectTree },
   data() {
     return {
-      dateValue:"",
-      imgUrl: '',
-      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
       form: {
         productName: ''
       },
+      options:[
+        {
+          value: '',
+          label: '全部'
+        },
+        {
+          value: '2023',
+          label: '2023'
+        }, {
+          value: '2022',
+          label: '2022'
+        }, {
+          value: '2021',
+          label: '2021'
+        }, {
+          value: '2020',
+          label: '2020'
+        }, {
+          value: '2019',
+          label: '2019'
+        }
+      ],
+      treeData: [],
       loading: false,
       recomposeShow: false,
       associationManageShow: false,
       waterprice: false,
+      cusareaName:'',
+      waterrightYear: '',
+      areaId:'',
       columns: [
         {
           label: '年度',
-          prop: 'person',
+          prop: 'waterrightYear',
           customRender: '',
           align: 'center'
         },
         {
           label: '行政区',
-          prop: 'area',
+          prop: 'cusareaName',
           customRender: '',
           align: 'center'
         },
         {
           label: '灌区总面积（亩）',
-          prop: 'name',
+          prop: 'waterrightAreasize',
           customRender: '',
           align: 'center'
         },
         {
           label: '初始水权（m³）',
-          prop: 'phone',
+          prop: 'waterrightAmount',
           customRender: '',
           align: 'center'
         },{
           label: '亩均水权（亩/立方）',
           prop: 'phone',
-          customRender: '',
+          customRender: 'Permuarea',
+          align: 'center'
+        },{
+          label: '操作',
+          customRender: 'operate',
+          width: 200,
           align: 'center'
         }
       ],
-      tableData: [{
-        id: 1,
-        date: '2016-05-02',
-        phone: 1588888888,
-        area: '郑州',
-        person: '2023',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        id: 2,
-        date: '2016-05-04',
-        phone: 1588888888,
-        area: '郑州',
-        person: '2023',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
-      }, {
-        id: 3,
-        date: '2016-05-01',
-        phone: 1588888888,
-        area: '郑州',
-        person: '2023',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄',
-        children: [{
-            id: 31,
-            date: '2016-05-01',
-            phone: 1588888888,
-            area: '郑州',
-            person: '2023',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄'
-          }, {
-            id: 32,
-            date: '2016-05-01',
-            phone: 1588888888,
-            area: '郑州',
-            person: '2023',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄'
-        }]
-      }, {
-        id: 4,
-        date: '2016-05-03',
-        phone: 1588888888,
-        area: '郑州',
-        person: '2023',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
-      }],
     };
   },
-  created() {},
+ 
   methods: {
+    async tableData() {
+      if(!this.areaId) {
+        const res = await getTree()
+        this.treeData = res?.data
+        this.cusareaName ||= this.treeData[0].cusareaName
+        this.areaId = this.treeData[0].cusareaId
+      }
+      return this.getWaterrightListHandler()
+    },
+    getWaterrightListHandler() {
+      return getWaterrightList({
+        areaId: this.areaId,
+        waterrightYear: this.waterrightYear
+      })
+    },
+    handlerClick(value) {
+      this.areaId = value?.cusareaId
+    },
     setAnnualWaterRight() {
       this.waterprice = true
     },
@@ -209,25 +185,23 @@ export default {
       return this.getTableData(payload);
     },
     getTableData(payload) {
-      return {
-      }
+      return {}
     },
     handleSearch() {
       this.$refs.tableRef.refresh(true);
-    },
-    goDetail(row) {
-      this.$refs.sourceCodeDetail.open(row.tarcecodeapplyBatchno)
+      
     },
     handlerRecompose() {
       this.recomposeShow = true
-    },
-    download(row) {
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
@@ -245,26 +219,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/monitoringMamage/components/dataReportLeft.vue

@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <el-tree
-     :data="data"
-     node-key="id"
-     :default-expanded-keys="[1]"
-     :props="defaultProps"
-     @node-click="handleNodeClick"
-     ></el-tree>
-  </div>
-</template>
-<script>
-  export default {
-   name: 'dataReportLeft',
-    data() {
-      return {
-        data: [{
-          id:1,
-          label: '一级 1',
-          children: [{
-            id:2,
-            label: '二级 1-1',
-            children: [{
-              id:3,
-              label: '三级 1-1-1',
-              children:[{
-                id:4,
-                label: '四级 1-1-1',
-                children:[{
-                  id:5,
-                  label: '五级 1-1-1',
-                }]
-              }]
-            }]
-          }]
-        }, {
-          id:2,
-          label: '一级 2',
-          children: [{
-            id:6,
-            label: '二级 2-1',
-            children: [{
-            id:7,
-              label: '三级 2-1-1'
-            }]
-          }, {
-            id:8,
-            label: '二级 2-2',
-            children: [{
-              id:9,
-              label: '三级 2-2-1'
-            }]
-          }]
-        }, {
-          id:3,
-          label: '一级 3',
-          children: [{
-            id:10,
-            label: '二级 3-1',
-            children: [{
-              id:11,
-              label: '三级 3-1-1'
-            }]
-          }, {
-            id:12,
-            label: '二级 3-2',
-            children: [{
-              id:13,
-              label: '三级 3-2-1'
-            }]
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
-        }
-      };
-    },
-    methods: {
-      handleNodeClick(data) {
-        console.log(data);
-      }
-    }
-  };
-</script>
-<style lang="sass" scoped>
-
-</style>

src/views/monitoringMamage/components/realTimeMonitor.vue

@@ -110,6 +110,7 @@
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"

src/views/monitoringMamage/index.vue

@@ -1,178 +1,187 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="4"
-      >
-      <el-card style="margin:5%;height: 100%; overflow-y: auto">
-        <data-report-left></data-report-left>
-      </el-card>
-      </el-col>
-      <el-col
-        :span="20"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-      <el-card style="overflow-y: auto">
-        <div style="margin-bottom: 16px;"><span style="font-weight:bold">机井情况</span>(总数: 256口)</div>
-        <div style="height:100px;width:auto;overflow:hidden">
-          <el-row>
-            <el-col :span="14">
-              <el-row :gutter="8">
-                <el-col 
-                  :span="4" 
-                  class="right_width" 
-                  v-for="item in dataList" 
-                  :key="item.title"
-                >
-                  <div class="left">
-                    <span>
-                      <div :class="item.styleClass"></div>
-                        {{ item.title }}
-                      </span>
-                    <div>
-                      {{ item.number }}
-                    </div>
+  <el-row class="el-row-container" v-loading="loading">
+    <el-col
+      :span="4"
+      style="height:100%;padding-bottom:32px;"
+    >
+    <el-card style="margin:16px;height: 100%; overflow-y: auto">
+      <data-report-left :treeData="treeData"></data-report-left>
+    </el-card>
+    </el-col>
+    <el-col
+      :span="20"
+    >
+    <el-card style="overflow-y: hidden;min-height:180px;margin-bottom:16px;">
+      <div style="margin-bottom: 16px;"><span style="font-weight:bold">机井情况</span>(总数: 256口)</div>
+      <div style="height:100px;width:auto;overflow:hidden">
+        <el-row>
+          <el-col :span="14">
+            <el-row :gutter="8">
+              <el-col 
+                :span="4" 
+                class="right_width" 
+                v-for="item in dataList" 
+                :key="item.title"
+              >
+                <div class="left">
+                  <span>
+                    <div :class="item.styleClass"></div>
+                      {{ item.title }}
+                    </span>
+                  <div>
+                    {{ item.number }}
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="10">
+            <div style="display:flex;justify-content: space-evenly">
+              <echarts-pie/>
+              <div style="position:relative;left:-50px;">
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <div class="radius_container">
+                    <span class="radius"></span>
+                    <span class="label">额定用水量:</span> 6256吨
+                  </div>
+                  <div class="radius_container">
+                    <span class="radius"></span>
+                    <span class="label">额定用水量:</span> 6256吨
+                  </div>
+                  <div class="radius_container">
+                    <span class="radius"></span>
+                    <span class="label">额定用水量:</span> 6256吨
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="radius_container">
+                    <span class="label">额定用水量:</span> 6256吨
+                  </div>
+                  <div class="radius_container">
+                    <span class="label">额定用水量:</span> 6256吨
+                  </div>
+                  <div class="radius_container">
+                    <span class="label">额定用水量:</span> 6256吨
                   </div>
                 </el-col>
               </el-row>
-            </el-col>
-            <el-col :span="10">
-              <div style="display:flex;justify-content: space-evenly">
-                <echarts-pie/>
-                <div style="position:relative;left:-50px;">
-                <el-row :gutter="20">
-                  <el-col :span="12">
-                    <div class="radius_container">
-                      <span class="radius"></span>
-                      <span class="label">额定用水量:</span> 6256吨
-                    </div>
-                    <div class="radius_container">
-                      <span class="radius"></span>
-                      <span class="label">额定用水量:</span> 6256吨
-                    </div>
-                    <div class="radius_container">
-                      <span class="radius"></span>
-                      <span class="label">额定用水量:</span> 6256吨
-                    </div>
-                  </el-col>
-                  <el-col :span="12">
-                    <div class="radius_container">
-                      <span class="label">额定用水量:</span> 6256吨
-                    </div>
-                    <div class="radius_container">
-                      <span class="label">额定用水量:</span> 6256吨
-                    </div>
-                    <div class="radius_container">
-                      <span class="label">额定用水量:</span> 6256吨
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-      </el-card>
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <el-input
-                v-model="form.goodsName"
-                style="width: 250px;margin-right:20px;"
-                placeholder="请输入机井编号/机井名称"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-select
-                v-model="form.goodsName"
-                style="width: 200px;margin-right:20px;"
-                placeholder="设备状态"
-                clearable
-              ></el-select>
-              <el-button
-                type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
-              >
+            </div>
             </div>
           </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
+        </el-row>
+      </div>
+    </el-card>
+    <el-card style="height: calc(100% - 180px); overflow-y: auto;">
+      <el-col :span="24" class="elrow-main__col-top">
+        <div>
+          <el-input
+            v-model="form.goodsName"
+            style="width: 250px;margin-right:20px;"
+            placeholder="请输入机井编号/机井名称"
+            @keyup.enter.native="handleSearch"
+            clearable
+          />
+          <el-select
+            v-model="form.goodsName"
+            style="width: 200px;"
+            placeholder="设备状态"
+            clearable
+          ></el-select>
+          <el-date-picker
+            v-model="dateValue"
+            type="daterange"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :default-time="['00:00:00', '23:59:59']"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 300px; margin:0 20px"
+          >
+          </el-date-picker>
+          <el-button
+            type="primary"
+            size="small"
+            @click="handleSearch"
+            >查询</el-button
+          >
+        </div>
+      </el-col>
+      <el-col :span="24" class="elrow-main__col-bottom">
+        <img v-if="imgUrl" :src="imgUrl" />
+        <b-table
+          ref="tableRef"
+          :args="{ 'highlight-current-row': true }"
+          :data="loadData"
+          :columns="columns"
+          isShowIndex
+        >
+          <template #styleImg="scope">
+            <el-image
+              :src="scope.row.imgPreview"
+              :preview-src-list="[scope.row.imgPreview]"
+              slot="error"
+              class="image-slot"
+              style="width: 100px; height: 50px"
+            >
+              <div slot="error" class="image-slot"></div>
+            </el-image>
+          </template>
+          <template #codeNo="scope">           
+            <el-link
+              type="primary"
+              :underline="false"
+              @click="goDetail(scope.row)"
+              >{{ scope.row.traceCodeApplyConcat }}</el-link
             >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">           
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link
-                >
-              </template>
-              <template #status="scope">
-                <span style="display:flex;align-items:center;justify-content:center">
-                  <span class="status"></span>
-                  {{ scope.row.name }}
-                </span>
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
+          </template>
+          <template #status="scope">
+            <span style="display:flex;align-items:center;justify-content:center">
+              <span class="status"></span>
+              {{ scope.row.name }}
+            </span>
+          </template>
+          <template #useNumber="scope">
+            {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+          </template>
+          <template #finishGoodName="scope">
+            {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+          </template>
 
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="realTime(scope.row)"
-                  >实时监测</el-link
-                >
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="irrigationShowHistory(scope.row)"
-                  >灌溉记录</el-link
-                >
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
+          <template #operate="scope">
+            <el-link
+              size="small"
+              :underline="false"
+              type="primary"
+              style="margin-right: 10px"
+              @click="realTime(scope.row)"
+              >实时监测</el-link
+            >
+            <el-link
+              size="small"
+              :underline="false"
+              type="primary"
+              style="margin-right: 10px"
+              @click="irrigationShowHistory(scope.row)"
+              >灌溉记录</el-link
+            >
+          </template>
+        </b-table>
       </el-col>
-    </el-row>
+    </el-card>
+    </el-col>
     <real-time-monitor :visible.sync="realTimeShow"/>
     <irrigation-record :visible.sync="irrigationShow" />
-  </div>
+  </el-row>
 </template>
 
 <script>
 import EchartsPie from './components/echartsPie.vue'
 import BTable from '@/components/Table/index.vue';
-import DataReportLeft from './components/dataReportLeft.vue'
+import DataReportLeft from '@/components/DataReportLeft/index.vue'
 import realTimeMonitor from './components/realTimeMonitor.vue';
 import IrrigationRecord from './components/IrrigationRecord.vue';
 import { assign, omit } from 'lodash-es';
+import { getTree } from '@/api/tree.js'
 
 export default {
   name: 'monitoringMamage',
@@ -204,6 +213,7 @@ export default {
         number: 551,
         styleClass: 'radius noliving'
       }],
+      treeData: [],
       loading: false,
       associationManageShow: false,
       realTimeShow: false,
@@ -258,6 +268,13 @@ export default {
     };
   },
   methods: {
+    getTreeList() {
+      getTree().then(res=>{
+        const data = res?.data
+        console.log(data,'datattdaytsdysty')
+        this.treeData = data
+      })
+    },
     irrigationShowHistory() {
       this.irrigationShow = true
     },
@@ -304,6 +321,9 @@ export default {
     goDetail(row) {
       this.$refs.sourceCodeDetail.open(row.tarcecodeapplyBatchno)
     },
+  },
+  mounted() {
+    this.getTreeList()
   }
 };
 </script>

src/views/monitoringMamage/monitoringMamage.scss

@@ -1,3 +1,11 @@
+::v-deep .el-col-20{
+  padding:16px 16px 32px 0;
+  position:relative;
+  height:100%;
+}
+.el-row-container{
+  height: 100%;
+}
 .right_width{
   width: 20%;
 }
@@ -110,26 +118,4 @@
   border-radius: 50%;
   background: red;
   margin-right: 8px;
-}
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
 }

src/views/peasantHouseholdManage/components/IrrigationRecord.vue

@@ -239,6 +239,7 @@ export default {
       const payload = omit(assign({}, parameter, queryform, {orderByColumn:'tarcecodeapplyCreateddate',isAsc:'desc'}), []);
       return this.getTableData(payload);
     },
+    handleSearch() {},
     getTableData(payload) {
       return Promise.resolve({
         data: [{

src/views/peasantHouseholdManage/components/addedFarmers.vue

@@ -18,11 +18,16 @@
     >
       <el-row>
         <el-col :span="24" style="background:#F5F7FA;padding-top:20px;margin-bottom:20px;">
-          <el-form-item label="所属区域" prop="productName">
+          <el-form-item label="所属区域" prop="areaId">
             <el-row>
               <el-col :span="24" style="padding-right:5%">
-                <el-select placeholder="请选择区域" style="width:100%">
-                </el-select>
+                <select-tree 
+                  :placeholder="'请选择区域'" 
+                  style="width:100%"
+                  :treeData="treeData"
+                  @handlerClick="handlerClick"
+                  :checkVal="cusareaName"
+                ></select-tree>
               </el-col>
             </el-row>
           </el-form-item>
@@ -46,29 +51,29 @@
         <el-col :span="24">
           <el-row>
             <el-col :span="12">
-            <el-form-item label="农户编号" prop="sourceinfoId">
-              <el-row>
-                <el-col>
-                  <el-input
-                    v-model="baseForm.sourceinfoId"
-                    filterable
-                    style="width: 100%"
-                    placeholder="8位数字（不能重复）自动生成"
-                  >
-                  </el-input>
-                </el-col>
-              </el-row>
-            </el-form-item>
+              <el-form-item label="农户姓名" prop="farmerName">
+                <el-row>
+                  <el-col>
+                    <el-input
+                      v-model="baseForm.farmerName"
+                      filterable
+                      style="width: 100%"
+                      placeholder="请输入农户姓名"
+                    >
+                    </el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="农户姓名" prop="sourceinfoId">
+              <el-form-item label="身份证号" prop="farmerIdcard">
                 <el-row>
                   <el-col>
                     <el-input
-                      v-model="baseForm.sourceinfoId"
+                      v-model="baseForm.farmerIdcard"
                       filterable
                       style="width: 100%"
-                      placeholder="8位数字（不能重复）自动生成"
+                      placeholder="请输入身份证号"
                     >
                     </el-input>
                   </el-col>
@@ -77,34 +82,32 @@
             </el-col>
           </el-row>
         </el-col>
-      </el-row>
-      <el-row :gutter="10">
         <el-col :span="24">
           <el-row>
             <el-col :span="12">
-            <el-form-item label="身份证号" prop="sourceinfoId">
-              <el-row>
-                <el-col>
-                  <el-input
-                    v-model="baseForm.sourceinfoId"
-                    filterable
-                    style="width: 100%"
-                    placeholder="8位数字（不能重复）自动生成"
-                  >
-                  </el-input>
-                </el-col>
-              </el-row>
-            </el-form-item>
+              <el-form-item label="联系电话" prop="farmerPhone">
+                <el-row>
+                  <el-col>
+                    <el-input
+                      v-model="baseForm.farmerPhone"
+                      filterable
+                      style="width: 100%"
+                      placeholder="请输入联系电话"
+                    >
+                    </el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="联系电话" prop="sourceinfoId">
+              <el-form-item label="水权" prop="farmerWramount">
                 <el-row>
                   <el-col>
                     <el-input
-                      v-model="baseForm.sourceinfoId"
+                      v-model="baseForm.farmerWramount"
                       filterable
                       style="width: 100%"
-                      placeholder="8位数字（不能重复）自动生成"
+                      placeholder="请输入水权"
                     >
                     </el-input>
                   </el-col>
@@ -113,52 +116,35 @@
             </el-col>
           </el-row>
         </el-col>
-      </el-row>
-      <el-row :gutter="10">
         <el-col :span="24">
           <el-row>
             <el-col :span="12">
-            <el-form-item label="土地面积" prop="sourceinfoId">
-              <el-row>
-                <el-col style="position:relative">
-                  <el-input
-                    v-model="baseForm.sourceinfoId"
-                    filterable
-                    style="width: 90%"
-                    placeholder="8位数字（不能重复）自动生成"
-                  >
-                  </el-input>
-                  <span style="position:absolute;margin-left:10px">亩</span>
-                </el-col>
-              </el-row>
-            </el-form-item>
-          </el-col>
-            <el-col :span="12">
-            <el-form-item label="水权" prop="sourceinfoId">
-              <el-row>
-                <el-col>
-                  <el-input
-                    v-model="baseForm.sourceinfoId"
-                    filterable
-                    style="width: 100%"
-                    placeholder="请输入水权"
-                  >
-                  </el-input>
-                </el-col>
-              </el-row>
-            </el-form-item>
+              <el-form-item label="土地面积" prop="farmerAreasize">
+                <el-row>
+                  <el-col style="position:relative">
+                    <el-input
+                      v-model="baseForm.farmerAreasize"
+                      filterable
+                      style="width: 90%"
+                      placeholder="请输入土地面积"
+                    >
+                    </el-input>
+                    <span style="position:absolute;margin-left:10px">亩</span>
+                  </el-col>
+                </el-row>
+              </el-form-item>
             </el-col>
           </el-row>
         </el-col>
       </el-row>
     </el-form>
-
     <div style="text-align: right">
       <el-button type="info" plain @click="resetForm('baseForm')"
         >取消</el-button
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"
@@ -170,64 +156,61 @@
 
 <script>
 import { assign } from 'lodash-es';
-import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+import SelectTree from '@/components/SelectTree';
+import { addFarmer,editFarmer } from '@/api/farmer/list.js'
+
 export default {
   name: 'addedFarmers',
+  components:{
+    SelectTree
+  },
   props: {
-    data: {
-      default() {
-        return {};
-      }
-    },
     visible: {
       type: Boolean,
       default: false
+    },
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    editFarmerData: {
+      type: Object,
+      default: () => {}
+    },
+    isEdit:{
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
-      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
       dialogSubmitLoading: false,
       dialogVisible: false,
-      textarea: '',
-      baseForm: {
-        productValue: '',
-        productName: '',
-        stockAmount: '',
-        goodsUnit: '',
-        goodsSpecValue: '',
-        imageArr1: [],
-        supplierId: '',
-        imageArr2: []
-      },
-      productList: [],
-      syinfoList: [],
-      processList: [],
+      baseForm: this.editFarmerData,
       hasFetched: false,
-      landList: [], //基地列表
+      cusareaName: '',
       rules: {
-        stockAmount: [
-          { required: true, message: '请选择负责人', trigger: 'blur' }
+        areaId: [
+          { required: true, message: '请选择所属区域', trigger: 'blur' }
         ],
-        sourceinfoId: [
-          { required: true, message: '请选择管辖范围', trigger: 'blur' }
+        farmerName: [
+          { required: true, message: '请输入农户姓名', trigger: 'blur' }
         ],
-        productName: [
-          { required: true, message: '请输入协会名称', trigger: 'blur' }
+        farmerIdcard: [
+          { required: true, message: '请输入农户身份证号', trigger: 'blur' }
         ],
-        supplierId: [
-          { required: false, message: '请输入协会介绍', trigger: 'blur' }
+        farmerPhone: [
+          { required: true, message: '请输入联系电话', trigger: 'blur' }
         ],
-        goodsSpecValue: [
-          { required: true, message: '请选择规格', trigger: 'blur' }
+        farmerAreasize: [
+          { required: true, message: '请输入水权', trigger: 'blur' }
+        ],
+        farmerWramount: [
+          { required: true, message: '请输入土地面积', trigger: 'blur' }
         ]
       }
     };
   },
-  computed: {
-    goodsUnitLable: function () {
-    }
-  },
   watch: {
     visible(val) {
       if (val !== this.dialogVisible) {
@@ -240,25 +223,41 @@ export default {
         }
       }
     },
-    data: {
-      deep: true,
+    editFarmerData: {
       handler(val) {
-        assign(this.baseForm, val);
-      }
+        this.baseForm = val
+        this.cusareaName = val.cusareaName
+      },
+      deep: true
     }
   },
   methods: {
-    resetForm(formName) {
-      this.$refs[formName].resetFields();
-      this.resetFormData();
+    handlerClick(value) {
+      this.baseForm.areaId = value?.cusareaId
+    },
+    resetForm() {
       this.dialogVisible = false;
     },
-    resetFormData() {
-      this.baseForm = {};
+    async handlerAddFarmer() {
+      if(!this.isEdit){
+        const res = await addFarmer(this.baseForm)
+        if(res?.code === "000000") {
+          this.handleClose()
+          this.cusareaName = ''
+          this.$emit('refresh')
+        }
+      }else{
+        const res = await editFarmer(this.baseForm)
+        if(res?.code === "000000") {
+          this.handleClose()
+          this.cusareaName = ''
+          this.$emit('refresh')
+        }
+      }
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
-        console.log(valid)
+        this.handlerAddFarmer()
       })
     },
     handleClose() {

src/views/peasantHouseholdManage/components/dataReportLeft.vue

@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <el-tree
-     :data="data"
-     node-key="id"
-     :default-expanded-keys="[1]"
-     :props="defaultProps"
-     @node-click="handleNodeClick"
-     ></el-tree>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'dataReportLeft',
-    data() {
-      return {
-        data: [{
-          id:1,
-          label: '一级 1',
-          children: [{
-            id:2,
-            label: '二级 1-1',
-            children: [{
-              id:3,
-              label: '三级 1-1-1',
-              children:[{
-                id:4,
-                label: '四级 1-1-1',
-                children:[{
-                  id:5,
-                  label: '五级 1-1-1',
-                }]
-              }]
-            }]
-          }]
-        }, {
-          id:2,
-          label: '一级 2',
-          children: [{
-            id:6,
-            label: '二级 2-1',
-            children: [{
-            id:7,
-              label: '三级 2-1-1'
-            }]
-          }, {
-            id:8,
-            label: '二级 2-2',
-            children: [{
-              id:9,
-              label: '三级 2-2-1'
-            }]
-          }]
-        }, {
-          id:3,
-          label: '一级 3',
-          children: [{
-            id:10,
-            label: '二级 3-1',
-            children: [{
-              id:11,
-              label: '三级 3-1-1'
-            }]
-          }, {
-            id:12,
-            label: '二级 3-2',
-            children: [{
-              id:13,
-              label: '三级 3-2-1'
-            }]
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
-        }
-      };
-    },
-    methods: {
-      handleNodeClick(data) {
-        console.log(data);
-      }
-    }
-  };
-</script>
-<style lang="sass" scoped>
-
-</style>

src/views/peasantHouseholdManage/components/farmerManagement.vue

@@ -21,7 +21,7 @@
           </el-col>
           <el-col :span="18">
             <div class="content">
-              <span>河南省郑州市金水区XXXXXX</span>
+              <span>{{ detailsData.cusareaName }}</span>
             </div>
           </el-col>
         </el-row>
@@ -31,13 +31,13 @@
           <el-col :span="6">
             <div class="label no_left_border">
               <span>
-                农户编号
+                农户姓名
               </span>
             </div>
           </el-col>
           <el-col :span="18">
             <div class="content">
-              <span>2255555555</span>
+              <span>{{ detailsData.farmerName }}</span>
             </div>
           </el-col>
         </el-row>
@@ -49,13 +49,13 @@
           <el-col :span="6">
             <div class="label">
               <span>
-                农户姓名
+                身份证号
               </span>
             </div>
           </el-col>
           <el-col :span="18">
             <div class="content">
-              <span>张三</span>
+              <span>{{ detailsData.farmerIdcard }}</span>
             </div>
           </el-col>
         </el-row>
@@ -65,13 +65,13 @@
           <el-col :span="6">
             <div class="label no_left_border">
               <span>
-                身份证号
+                手机号
               </span>
             </div>
           </el-col>
           <el-col :span="18">
             <div class="content">
-              <span>422455488848854524</span>
+              <span>{{ detailsData.farmerPhone }}</span>
             </div>
           </el-col>
         </el-row>
@@ -83,13 +83,13 @@
           <el-col :span="6">
             <div class="label">
               <span>
-                手机号
+                种植面积
               </span>
             </div>
           </el-col>
           <el-col :span="18">
             <div class="content">
-              <span>15986858555</span>
+              <span>{{detailsData.farmerAreasize || 0}}m³</span>
             </div>
           </el-col>
         </el-row>
@@ -99,13 +99,13 @@
           <el-col :span="6">
             <div class="label no_left_border">
               <span>
-                种植面积
+                水权数量
               </span>
             </div>
           </el-col>
           <el-col :span="18">
             <div class="content">
-              <span>65m³</span>
+              <span>{{detailsData.farmerWramount}}</span>
             </div>
           </el-col>
         </el-row>
@@ -117,13 +117,13 @@
           <el-col :span="6">
             <div class="label_last">
               <span>
-                水权数量
+                剩余水权
               </span>
             </div>
           </el-col>
           <el-col :span="18">
             <div class="content_last">
-              <span>25m³</span>
+              <span>25</span>
             </div>
           </el-col>
         </el-row>
@@ -139,7 +139,7 @@
           </el-col>
           <el-col :span="18">
             <div class="content_last">
-              <span>25m³</span>
+              <span>{{detailsData.farmerWrbalance}}</span>
             </div>
           </el-col>
         </el-row>
@@ -147,7 +147,7 @@
     </el-row>
   </div>
   <div>
-    <h3>农户基础信息</h3>
+    <h3>用水卡信息</h3>
     <b-table
     ref="tableRef"
     :args="{ 'highlight-current-row': true }"
@@ -177,10 +177,17 @@
     </template>
     <template #status="scope">
       <span style="display:flex;align-items:center;justify-content:center">
-        <span class="status"></span>
-        {{ scope.row.name }}
+        <!-- <span class="status"></span> -->
+        {{ scope.row.cardStatusContent }}
+      </span>
+    </template>
+    <template #cardAmount="scope">
+      <span style="display:flex;align-items:center;justify-content:center">
+        <!-- <span class="status"></span> -->
+        {{ Number(scope.row.cardAmount || 0).toFixed(2) }}
       </span>
     </template>
+    
     <template #useNumber="scope">
       {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
     </template>
@@ -195,6 +202,7 @@
     >
     <el-button
       type="primary"
+      style="margin-left:16px;"
       @click="submitForm('baseForm')"
       :disabled="dialogSubmitLoading"
       :loading="dialogSubmitLoading"
@@ -208,6 +216,7 @@
 import BTable from '@/components/Table/index.vue';
 import { assign, omit } from 'lodash-es';
 import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+
 export default {
   name: 'farmerManagement',
   props: {
@@ -219,6 +228,10 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    detailsData: {
+      type: Object,
+      default: () => {}
     }
   },
   components:{
@@ -265,29 +278,25 @@ export default {
       columns: [
         {
           label: '卡号',
-          prop: 'person',
+          prop: 'cardNo',
           customRender: '',
           align: 'center'
         },
         {
           label: '卡状态',
-          prop: 'area',
+          prop: 'cardStatus',
           customRender: 'status',
           align: 'center'
         },
         {
           label: '卡余额',
-          prop: 'name',
-          customRender: '',
+          prop: 'cardAmount',
+          customRender: 'cardAmount',
           align: 'center'
         }
       ]
     };
   },
-  computed: {
-    goodsUnitLable: function () {
-    }
-  },
   watch: {
     visible(val) {
       if (val !== this.dialogVisible) {
@@ -295,9 +304,6 @@ export default {
         if (val) {
           assign(this.baseForm, this.data);
           if (!this.hasFetched) {
-            this.getProductList();
-            this.getSyinfoList();
-            this.getProcessList();
             this.hasFetched = true;
           }
         }
@@ -306,84 +312,28 @@ export default {
     data: {
       deep: true,
       handler(val) {
-        // console.log(val)
         assign(this.baseForm, val);
-        // console.log(this.baseForm)
+      }
+    },
+    detailsData: {
+      deep: true,
+      handler(val) {
+        this.$refs.tableRef.refresh(true);
       }
     }
   },
-  created() {},
-  mounted() {},
   methods: {
-    loadData(parameter) {
-      const queryform = this.form;
-      const payload = omit(assign({}, parameter, queryform, {orderByColumn:'tarcecodeapplyCreateddate',isAsc:'desc'}), []);
-      return this.getTableData(payload);
+    loadData() {
+      return this.getTableData();
     },
-    getTableData(payload) {
+    getTableData() {
       return Promise.resolve({
-        data: [{
-          person:"王大虎",
-          area: '2016-05-02',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          person:"王大虎",
-          area: '2016-05-04',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          person:"王大虎",
-          area: '2016-05-01',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          person:"王大虎",
-          area: '2016-05-03',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
+        data: this.detailsData?.cardList || []
       })
     },
-    getProductList() {
-    },
-    getSyinfoList() {
-    },
-    getProcessList() {
-    },
-    goProductsPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/Products',
-        query: {}
-      });
-    },
-    goSourceInfoPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/sourceInfo',
-        query: {
-          type: 'add'
-        }
-      });
-    },
-    goProcessPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/basicsettings/process',
-        query: {}
-      });
-    },
     resetForm(formName) {
       this.dialogVisible = false;
     },
-    resetFormData() {
-      this.baseForm = {};
-    },
     submitForm(formName) {
       this.dialogVisible = false;
     },
@@ -392,16 +342,6 @@ export default {
       this.$emit('update:visible', false);
       this.resetForm('baseForm');
     },
-    handleSuccess() {
-      this.resetForm('baseForm');
-      this.$emit('update:visible', false);
-      this.$emit('success');
-    },
-    handleKeyUp(target, key) {
-      target[key] = target[key].match(/\d+(\.\d{0,2})?/)
-        ? target[key].match(/\d+(\.\d{0,2})?/)[0]
-        : '';
-    }
   }
 };
 </script>

src/views/peasantHouseholdManage/components/report.vue

@@ -3,7 +3,7 @@
     <el-row style="height: 100%" v-loading="loading">
       <el-col
         :span="24"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
+        style="padding: 20px;  height: 100%"
       >
         <el-card style="height: 100%; overflow-y: auto">
           <el-col :span="24" class="elrow-main__col-top">
@@ -212,26 +212,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/peasantHouseholdManage/index.vue

@@ -1,132 +1,144 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="4"
-      >
-      <el-card style="margin:5%;height: 100%; overflow-y: auto">
-        <data-report-left></data-report-left>
-      </el-card>
-      </el-col>
-      <el-col
-        :span="20"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <el-input
-                v-model="form.goodsName"
-                style="width: 250px;margin:0 20px;"
-                placeholder="请输入农户编号/姓名/电话"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-button
+  <el-row class="el-row-container" style="height: 100%" v-loading="loading">
+    <el-col
+      :span="4"
+      style="height:100%;padding-bottom:32px;"
+    >
+    <el-card style="margin:16px;height: 100%; overflow-y: auto">
+      <data-report-left
+        @setCurrentData="setCurrentData"
+        :treeData="treeData"
+      ></data-report-left>
+    </el-card>
+    </el-col>
+    <el-col
+      :span="20"
+      style="padding: 16px 16px 16px 0; height: 100%"
+    >
+      <el-card style="height: 100%; overflow-y: auto">
+        <el-col :span="24" class="elrow-main__col-top">
+          <div>
+            <el-input
+              v-model="farmerName"
+              style="width: 250px;margin-right:16px;"
+              placeholder="请输入姓名/电话"
+              @keyup.enter.native="handleSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleSearch"
+              >查询</el-button
+            >
+          </div>
+          <div class="top-left">
+            <el-button
+              type="primary"
+              size="small"
+              @click="addAssociation"
+              >新增农户
+              </el-button
+            ></div>
+        </el-col>
+        <el-col :span="24" class="elrow-main__col-bottom">
+          <b-table
+            ref="tableRef"
+            :args="{ 'highlight-current-row': true }"
+            :data="loadData"
+            :columns="columns"
+            isShowIndex
+          >
+            <template #styleImg="scope">
+              <el-image
+                :src="scope.row.imgPreview"
+                :preview-src-list="[scope.row.imgPreview]"
+                slot="error"
+                class="image-slot"
+                style="width: 100px; height: 50px"
+              >
+                <div slot="error" class="image-slot"></div>
+              </el-image>
+            </template>
+            <template #codeNo="scope">
+              <el-link
                 type="primary"
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >{{ scope.row.traceCodeApplyConcat }}</el-link
+              >
+            </template>
+            <template #status="scope">
+              <span style="display:flex;align-items:center;justify-content:center">
+                <span class="status"></span>
+                {{ scope.row.name }}
+              </span>
+            </template>
+            <template #useNumber="scope">
+              {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+            </template>
+            <template #finishGoodName="scope">
+              {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+            </template>
+
+            <template #operate="scope">
+              <el-link
                 size="small"
-                @click="handleSearch"
-                >查询</el-button
+                :underline="false"
+                type="primary"
+                style="margin-right: 10px"
+                @click="irrigationShowHistory(scope.row)"
+                >灌溉记录</el-link
               >
-            </div>
-            <div class="top-left">
-              <el-button
+              <el-link
+                size="small"
+                :underline="false"
                 type="primary"
+                style="margin-right: 10px"
+                @click="editFarmerHandler(scope.row)"
+              >修改</el-link>
+              <el-link
                 size="small"
-                @click="addAssociation"
-                >新增农户
-                </el-button
-              ></div>
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
-            >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link
-                >
-              </template>
-              <template #status="scope">
-                <span style="display:flex;align-items:center;justify-content:center">
-                  <span class="status"></span>
-                  {{ scope.row.name }}
-                </span>
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
-
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="irrigationShowHistory(scope.row)"
-                  >灌溉记录</el-link
-                >
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                >修改</el-link>
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="showDetails(scope.row)"
-                >详情</el-link>
-                <el-link
-                  slot="reference"
-                  size="small"
-                  :underline="false"
-                  type="danger"
-                  style="margin-right: 10px"
-                  @click="deleteRow(scope.row)"
-                >删除</el-link>
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
-    <added-farmers :visible.sync="associationManageShow"/>
-    <farmer-management :visible.sync="farmerManageShow"/>
-    <irrigation-record :visible.sync="irrigationShow" />
-  </div>
+                :underline="false"
+                type="primary"
+                style="margin-right: 10px"
+                @click="showDetails(scope.row)"
+              >详情</el-link>
+              <el-link
+                slot="reference"
+                size="small"
+                :underline="false"
+                type="danger"
+                style="margin-right: 10px"
+                @click="deleteRow(scope.row)"
+              >删除</el-link>
+            </template>
+          </b-table>
+        </el-col>
+      </el-card>
+    </el-col>
+  <added-farmers
+    :visible.sync="associationManageShow"
+    :treeData="treeData"
+    :editFarmerData="editFarmerData"
+    :isEdit="isEdit"
+    @refresh="handleSearch"
+  />
+  <farmer-management 
+    :visible.sync="farmerManageShow"
+    :detailsData="detailsData"
+  />
+  <irrigation-record :visible.sync="irrigationShow" />
+  </el-row>
 </template>
 
 <script>
+import { Message } from 'element-ui';
+import { getTree } from '@/api/tree.js'
+import { getFarmerList,deleteFarmer,getFarmerDetail } from '@/api/farmer/list.js'
 import BTable from '@/components/Table/index.vue';
-import DataReportLeft from './components/dataReportLeft.vue'
+import DataReportLeft from '@/components/DataReportLeft/index.vue'
 import AddedFarmers from './components/addedFarmers.vue'
-import { assign, omit } from 'lodash-es';
 import FarmerManagement from './components/farmerManagement.vue';
 import IrrigationRecord from './components/IrrigationRecord.vue';
 
@@ -136,53 +148,55 @@ export default {
   data() {
     return {
       visibles: false,
+      farmerName:'',
+      detailsData: {},
+      treeData: [],
+      currentClick:{},
       dateValue:"",
       imgUrl: '',
       baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
       form: {
         productName: ''
       },
+      isEdit: false,
       loading: false,
       associationManageShow: false,
       farmerManageShow: false,
       irrigationShow: false,
+      editFarmerData: {},
+      farmerId: '',
       columns: [
         {
-          label: '农户编号',
-          prop: 'person',
-          customRender: '',
-          align: 'center'
-        },
-        {
           label: '农户姓名',
-          prop: 'area',
+          prop: 'farmerName',
           customRender: '',
           align: 'center'
         },
         {
           label: '农户身份证',
-          prop: 'name',
+          prop: 'farmerIdcard',
           customRender: '',
-          align: 'center'
+          align: 'center',
+          width: 160
         },
         {
           label: '联系电话',
-          prop: 'phone',
-          customRender: 'status',
+          prop: 'farmerPhone',
+          customRender: '',
           align: 'center'
         },{
           label: '种植面积（亩）',
-          prop: 'phone',
+          prop: 'farmerAreasize',
           customRender: '',
           align: 'center'
         },{
           label: '水权数量（立方）',
-          prop: 'phone',
+          prop: 'farmerWramount',
           customRender: '',
           align: 'center'
         },{
           label: '剩余水权（立方）',
-          prop: 'phone',
+          prop: 'farmerWrbalance',
           customRender: '',
           align: 'center'
         },
@@ -192,11 +206,40 @@ export default {
           width: 200,
           align: 'center'
         }
-      ]
+      ],
     };
   },
-  created() {},
   methods: {
+    editFarmerHandler(row) {
+      this.associationManageShow = true
+      this.isEdit = true
+      this.editFarmerData = row
+    },
+    async getDetail(farmerId) {
+      const res  = await getFarmerDetail({
+        farmerId
+      })
+      this.detailsData = res?.data
+    },
+    async loadData() {
+      if(!this.currentClickId ) {
+        const res = await getTree()
+        this.treeData = res?.data
+        this.currentClick = res?.data[0]
+        this.currentClickId = this.currentClick?.cusareaId
+      }
+      return this.getFarmerList(this.farmerName, this.currentClickId)
+    },
+    getFarmerList(farmerName,areaId) {
+      return getFarmerList({
+        farmerName,
+        areaId
+      })
+    },
+    setCurrentData(areaId) {
+      this.currentClickId = areaId
+      this.$refs.tableRef.refresh(false);
+    },
     closePopOver(flag) {
       this.visible = flag
     },
@@ -206,44 +249,14 @@ export default {
     // 详情
     showDetails(row){
       this.farmerManageShow = true
+      this.farmerId = row.farmerId
+      this.getDetail(row.farmerId)
     },
     addAssociation() {
+      this.isEdit = false
+      this.editFarmerData = {}
       this.associationManageShow = true
     },
-    loadData(parameter) {
-      const queryform = this.form;
-      const payload = omit(assign({}, parameter, queryform, {orderByColumn:'tarcecodeapplyCreateddate',isAsc:'desc'}), []);
-      return this.getTableData(payload);
-    },
-    getTableData(payload) {
-      return Promise.resolve({
-        data: [{
-          person:"王大虎",
-          area: '2016-05-02',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          person:"王大虎",
-          area: '2016-05-04',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          person:"王大虎",
-          area: '2016-05-01',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          person:"王大虎",
-          area: '2016-05-03',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
-      })
-    },
     handleSearch() {
       this.$refs.tableRef.refresh(true);
     },
@@ -253,14 +266,26 @@ export default {
     download(row) {
       this.visibles = true
     },
-    deleteRow() {
-      this.visibles = true
+    deleteRow(row) {
+      this.$modal
+      .confirm(`是否确认删除农户${row.farmerName}`)
+      .then(()=> {
+        deleteFarmer({
+          farmerIds: row.farmerId
+        }).then(() => {
+          Message({ message: "删除成功", type: 'success' });
+          this.refresh()
+        })
+      })
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
@@ -286,26 +311,4 @@ export default {
   background: red;
   margin-right: 5px;
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/waterCardManage/components/addedICCard.vue

@@ -18,78 +18,19 @@
     >
       <el-row :gutter="10">
         <el-col :span="24">
-          <el-form-item label="用户名：" prop="productName">
-            <el-row :gutter="5">
-              <el-col :span="23">
-                <el-input
-                  placeholder="请输入用户名"
-                  v-model="textarea">
-                  <el-button slot="append" icon="el-icon-search"></el-button>
-                </el-input>
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item label="用户名：" prop="sourceinfoId">
-            <el-row :gutter="5">
-              <el-col :span="23">
-                <el-input
-                  disabled
-                  v-model="baseForm.sourceinfoId"
-                  filterable
-                  style="width: 100%"
-                  placeholder="用户名"
-                >
-                </el-input>
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="10">
-        <el-col :span="24">
-          <el-form-item label="IC卡号：" prop="stockAmount">
+          <el-form-item label="用户名：" prop="farmerId">
             <el-row :gutter="5">
               <el-col :span="23">
                 <el-select
-                  v-model="baseForm.sourceinfoId"
-                  filterable
-                  style="width: 100%"
-                  placeholder="请选择负责人"
-                >
-                  <el-option
-                    v-for="item in syinfoList"
-                    :key="item.id"
-                    :label="item.sourceinfoName"
-                    :value="item.sourceinfoId"
-                  >
-                  </el-option>
-                </el-select>
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      
-      <el-row :gutter="10">
-        <el-col :span="24">
-          <el-form-item label="卡类状态：" prop="supplierId">
-            <el-row :gutter="5">
-              <el-col :span="23">
-                <el-select
-                  v-model="baseForm.sourceinfoId"
+                  placeholder="请输入用户名"
                   filterable
                   style="width: 100%"
-                  placeholder="请选择卡类状态"
-                >
+                  v-model="baseForm.farmerId">
                   <el-option
-                    v-for="item in syinfoList"
-                    :key="item.id"
-                    :label="item.sourceinfoName"
-                    :value="item.sourceinfoId"
-                  >
+                    v-for="item in userList"
+                    :key="item.farmerId"
+                    :label="item.farmerName + '-' + item.farmerPhone"
+                    :value="item.farmerId">
                   </el-option>
                 </el-select>
               </el-col>
@@ -97,15 +38,17 @@
           </el-form-item>
         </el-col>
       </el-row>
+
       <el-row :gutter="10">
         <el-col :span="24">
-          <el-form-item label="余额：" prop="supplierId">
+          <el-form-item label="IC卡号：" prop="cardNo">
             <el-row :gutter="5">
               <el-col :span="23">
                 <el-input
-                  disabled
-                  v-model="textarea">
-                </el-input>
+                  v-model="baseForm.cardNo"
+                  style="width: 100%"
+                  placeholder="请输入IC卡号"
+                />
               </el-col>
             </el-row>
           </el-form-item>
@@ -119,6 +62,7 @@
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"
@@ -129,8 +73,8 @@
 </template>
 
 <script>
+import { addCard } from '@/api/card/index.js'
 import { assign } from 'lodash-es';
-import { UPLOAD_TYPE_MAP } from '@/utils/constants';
 export default {
   name: 'addedICCard',
   props: {
@@ -142,51 +86,37 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    areaId: {
+      type: String,
+      default: ''
+    },
+    userList:{
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
-      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
       dialogSubmitLoading: false,
       dialogVisible: false,
       baseForm: {
-        productValue: '',
-        productName: '',
-        stockAmount: '',
-        goodsUnit: '',
-        goodsSpecValue: '',
-        imageArr1: [],
-        supplierId: '',
-        imageArr2: []
+        farmerName: '',
+        farmerId:'',
+        cardNo:''
       },
-      productList: [],
       syinfoList: [],
-      processList: [],
       hasFetched: false,
-      landList: [], //基地列表
       rules: {
-        stockAmount: [
-          { required: true, message: '请选择负责人', trigger: 'blur' }
+        cardNo: [
+          { required: true, message: '请输入IC卡', trigger: 'blur' }
         ],
-        sourceinfoId: [
-          { required: true, message: '请选择管辖范围', trigger: 'blur' }
+        farmerId: [
+          { required: true, message: '请选择用户名', trigger: 'blur' }
         ],
-        productName: [
-          { required: true, message: '请输入协会名称', trigger: 'blur' }
-        ],
-        supplierId: [
-          { required: false, message: '请输入协会介绍', trigger: 'blur' }
-        ],
-        goodsSpecValue: [
-          { required: true, message: '请选择规格', trigger: 'blur' }
-        ]
       }
     };
   },
-  computed: {
-    goodsUnitLable: function () {
-    }
-  },
   watch: {
     visible(val) {
       if (val !== this.dialogVisible) {
@@ -194,9 +124,6 @@ export default {
         if (val) {
           assign(this.baseForm, this.data);
           if (!this.hasFetched) {
-            this.getProductList();
-            this.getSyinfoList();
-            this.getProcessList();
             this.hasFetched = true;
           }
         }
@@ -205,44 +132,11 @@ export default {
     data: {
       deep: true,
       handler(val) {
-        // console.log(val)
         assign(this.baseForm, val);
-        // console.log(this.baseForm)
       }
     }
   },
-  created() {},
-  mounted() {},
   methods: {
-    getProductList() {
-    },
-    getSyinfoList() {
-    },
-    getProcessList() {
-    },
-    goProductsPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/Products',
-        query: {}
-      });
-    },
-    goSourceInfoPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/sourceInfo',
-        query: {
-          type: 'add'
-        }
-      });
-    },
-    goProcessPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/basicsettings/process',
-        query: {}
-      });
-    },
     resetForm(formName) {
       this.$refs[formName].resetFields();
       this.resetFormData();
@@ -251,9 +145,16 @@ export default {
     resetFormData() {
       this.baseForm = {};
     },
+    async handlerAddCard() {
+      const res = await addCard(this.baseForm)
+      if(res?.code === "000000") {
+        this.handleClose()
+        this.$emit('refresh')
+      }
+    },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
-        console.log(valid)
+        valid && this.handlerAddCard()
       })
     },
 
@@ -261,16 +162,6 @@ export default {
       this.$emit('update:visible', false);
       this.resetForm('baseForm');
     },
-    handleSuccess() {
-      this.resetForm('baseForm');
-      this.$emit('update:visible', false);
-      this.$emit('success');
-    },
-    handleKeyUp(target, key) {
-      target[key] = target[key].match(/\d+(\.\d{0,2})?/)
-        ? target[key].match(/\d+(\.\d{0,2})?/)[0]
-        : '';
-    }
   }
 };
 </script>

src/views/waterCardManage/components/dataDetail.vue

@@ -45,6 +45,7 @@
         :data="loadData"
         :columns="columns"
         isShowIndex
+        :showPagination="loadData.length"
       >
         <template #styleImg="scope">
           <el-image
@@ -85,6 +86,7 @@
           :data="loadData"
           :columns="columns"
           isShowIndex
+          :showPagination="loadData.length"
         >
         <template #styleImg="scope">
           <el-image
@@ -157,6 +159,7 @@ export default {
         supplierId: '',
         imageArr2: []
       },
+      loadData:[],
       productList: [],
       syinfoList: [],
       processList: [],

src/views/waterCardManage/components/dataReportLeft.vue

@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <el-tree
-     :data="data"
-     node-key="id"
-     :default-expanded-keys="[1]"
-     :props="defaultProps"
-     @node-click="handleNodeClick"
-     ></el-tree>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'dataReportLeft',
-    data() {
-      return {
-        data: [{
-          id:1,
-          label: '一级 1',
-          children: [{
-            id:2,
-            label: '二级 1-1',
-            children: [{
-              id:3,
-              label: '三级 1-1-1',
-              children:[{
-                id:4,
-                label: '四级 1-1-1',
-                children:[{
-                  id:5,
-                  label: '五级 1-1-1',
-                }]
-              }]
-            }]
-          }]
-        }, {
-          id:2,
-          label: '一级 2',
-          children: [{
-            id:6,
-            label: '二级 2-1',
-            children: [{
-            id:7,
-              label: '三级 2-1-1'
-            }]
-          }, {
-            id:8,
-            label: '二级 2-2',
-            children: [{
-              id:9,
-              label: '三级 2-2-1'
-            }]
-          }]
-        }, {
-          id:3,
-          label: '一级 3',
-          children: [{
-            id:10,
-            label: '二级 3-1',
-            children: [{
-              id:11,
-              label: '三级 3-1-1'
-            }]
-          }, {
-            id:12,
-            label: '二级 3-2',
-            children: [{
-              id:13,
-              label: '三级 3-2-1'
-            }]
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
-        }
-      };
-    },
-    methods: {
-      handleNodeClick(data) {
-        console.log(data);
-      }
-    }
-  };
-</script>
-<style lang="sass" scoped>
-
-</style>

src/views/waterCardManage/components/rechargeCard.vue

@@ -18,30 +18,14 @@
     >
       <el-row :gutter="10">
         <el-col :span="24">
-          <el-form-item label="IC卡号" prop="productName">
-            <el-row>
-              <el-col :span="24">
-                <el-select
-                  style="width: 100%"
-                  placeholder="请输入IC卡号"
-                  v-model="textarea"
-                >
-                </el-select>
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item label="用户号" prop="sourceinfoId">
+          <el-form-item label="IC卡号" prop="cardNo">
             <el-row>
               <el-col :span="24">
                 <el-input
-                  v-model="baseForm.sourceinfoId"
-                  filterable
+                  v-model="rechargeCardData.cardNo"
                   style="width: 100%"
-                  placeholder="用户号"
-                >
-                </el-input>
+                  disabled
+                />
               </el-col>
             </el-row>
           </el-form-item>
@@ -50,14 +34,13 @@
 
       <el-row :gutter="10">
         <el-col :span="24">
-          <el-form-item label="用户名" prop="stockAmount">
+          <el-form-item label="用户名" prop="farmerName">
             <el-row>
               <el-col :span="24">
                 <el-input
-                  v-model="baseForm.sourceinfoId"
-                  filterable
+                  v-model="rechargeCardData.farmerName"
                   style="width: 100%"
-                  placeholder="用户名"
+                  disabled
                 />
               </el-col>
             </el-row>
@@ -67,20 +50,21 @@
       
       <el-row :gutter="10">
         <el-col :span="24">
-          <el-form-item label="当前余额" prop="supplierId">
-            0 元
+          <el-form-item label="当前余额" prop="cardAmount">
+            {{rechargeCardData.cardAmount}} 元
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="10">
         <el-col :span="24">
-          <el-form-item label="充值金额" prop="supplierId">
+          <el-form-item label="充值金额" prop="rechargercdRechargeamount">
             <el-row>
               <el-col :span="24">
                 <el-input
+                  type="number"
                   placeholder="充值金额"
                   style="width: 100px;margin-right: 10px"
-                  v-model="textarea">
+                  v-model="baseForm.rechargercdRechargeamount">
                 </el-input>
                 元
               </el-col>
@@ -90,7 +74,7 @@
       </el-row>
       <el-row :gutter="10">
         <el-col :span="24">
-          <el-form-item label="支付方式" prop="supplierId">
+          <el-form-item label="支付方式" prop="rechargercdRechargetype">
             <div>
               <span @click="() => changePayType('pay')" :class="payType === 'pay' ? 'xianjin_pay_action' : ''" class="pay">
                 <div class="img_container">
@@ -122,6 +106,7 @@
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"
@@ -132,8 +117,8 @@
 </template>
 
 <script>
+import { rechargeCard } from '@/api/card/index.js'
 import { assign } from 'lodash-es';
-import { UPLOAD_TYPE_MAP } from '@/utils/constants';
 import cash from '../assets/cash.svg'
 import weixin from '../assets/weixin.svg'
 import weixinAction from '../assets/weixin_action.svg'
@@ -142,65 +127,37 @@ import weixinRightBottom from '../assets/weixin_right_bottom.svg'
 export default {
   name: 'rechargeCard',
   props: {
-    data: {
-      default() {
-        return {};
-      }
-    },
     visible: {
       type: Boolean,
       default: false
+    },
+    rechargeCardData:{
+      type: Object,
+      default: () => {}
     }
   },
   data() {
     return {
-      weixinRightBottom:weixinRightBottom,
+      weixinRightBottom,
       payType: 'pay',
       cash: cash,
-      weixinAction:weixinAction,
-      weixin: weixin,
-      zhifubao: zhifubao,
-      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      weixinAction,
+      weixin,
+      zhifubao,
       dialogSubmitLoading: false,
       dialogVisible: false,
       baseForm: {
-        productValue: '',
-        productName: '',
-        stockAmount: '',
-        goodsUnit: '',
-        goodsSpecValue: '',
-        imageArr1: [],
-        supplierId: '',
-        imageArr2: []
+        rechargercdRechargeamount: 1
       },
-      productList: [],
-      syinfoList: [],
-      processList: [],
+      rechargercdRechargetype: 0,
       hasFetched: false,
-      landList: [], //基地列表
       rules: {
-        stockAmount: [
-          { required: true, message: '请选择负责人', trigger: 'blur' }
-        ],
-        sourceinfoId: [
-          { required: true, message: '请选择管辖范围', trigger: 'blur' }
-        ],
-        productName: [
-          { required: true, message: '请输入协会名称', trigger: 'blur' }
-        ],
-        supplierId: [
-          { required: false, message: '请输入协会介绍', trigger: 'blur' }
-        ],
-        goodsSpecValue: [
-          { required: true, message: '请选择规格', trigger: 'blur' }
+        rechargercdRechargeamount: [
+          { required: true, pattern: /^[1-9]\d*(\.\d+)?$/, message: '请正确输入充值金额', trigger: 'blur' }
         ]
       }
     };
   },
-  computed: {
-    goodsUnitLable: function () {
-    }
-  },
   watch: {
     visible(val) {
       if (val !== this.dialogVisible) {
@@ -208,57 +165,16 @@ export default {
         if (val) {
           assign(this.baseForm, this.data);
           if (!this.hasFetched) {
-            this.getProductList();
-            this.getSyinfoList();
-            this.getProcessList();
             this.hasFetched = true;
           }
         }
       }
     },
-    data: {
-      deep: true,
-      handler(val) {
-        // console.log(val)
-        assign(this.baseForm, val);
-        // console.log(this.baseForm)
-      }
-    }
   },
-  created() {},
-  mounted() {},
   methods: {
     changePayType(payType) {
       this.payType = payType
-    },
-    getProductList() {
-    },
-    getSyinfoList() {
-    },
-    getProcessList() {
-    },
-    goProductsPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/Products',
-        query: {}
-      });
-    },
-    goSourceInfoPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/sourceInfo',
-        query: {
-          type: 'add'
-        }
-      });
-    },
-    goProcessPage() {
-      this.handleClose();
-      this.$router.push({
-        path: '/basicsettings/process',
-        query: {}
-      });
+      this.rechargercdRechargetype = payType == 'pay' ? 0 : payType == 'weixin' ? 1 : 2
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
@@ -268,31 +184,45 @@ export default {
     resetFormData() {
       this.baseForm = {};
     },
+    async rechargeCardHandler() {
+      const { cardId  } = this.rechargeCardData
+      const rechargercdRechargeamount = Number(this.baseForm.rechargercdRechargeamount)
+      /*
+        现金 0
+        微信 1
+        支付宝 2
+      */
+      const res = await rechargeCard({
+        cardId,
+        rechargercdRechargeamount,
+        rechargercdRechargetype: this.rechargercdRechargetype
+      })
+      if(res?.code === "000000") {
+        this.handleClose()
+        this.$emit('refresh')
+      }
+    },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
-        console.log(valid)
+        valid && this.rechargeCardHandler()
       })
     },
-
     handleClose() {
       this.$emit('update:visible', false);
       this.resetForm('baseForm');
     },
-    handleSuccess() {
-      this.resetForm('baseForm');
-      this.$emit('update:visible', false);
-      this.$emit('success');
-    },
-    handleKeyUp(target, key) {
-      target[key] = target[key].match(/\d+(\.\d{0,2})?/)
-        ? target[key].match(/\d+(\.\d{0,2})?/)[0]
-        : '';
-    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+::v-deep input::-webkit-outer-spin-button,
+::v-deep input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+::v-deep input[type='number'] {
+  -moz-appearance: textfield !important;
+}
 .input-number {
   width: 100%;
 }

src/views/waterCardManage/components/report.vue

@@ -3,7 +3,7 @@
     <el-row style="height: 100%" v-loading="loading">
       <el-col
         :span="24"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
+        style="padding: 20px; height: 100%"
       >
         <el-card style="height: 100%; overflow-y: auto">
           <el-col :span="24" class="elrow-main__col-top">
@@ -197,9 +197,6 @@ export default {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 15px;
-  // padding: 20px 10px;
-  // background-color: #fff;
-  // border-radius: 5px;
   .top-left {
     height: 100%;
     display: flex;
@@ -212,26 +209,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/waterCardManage/dataDetail.vue

@@ -0,0 +1,308 @@
+<template>
+  <el-row class="el-row-container">
+    <el-card style="margin:16px;min-height: calc(100% - 32px); overflow-y: auto">
+      <el-row style="margin-bottom: 10px">
+        <el-col :span="12" class="header-label">
+          基础信息
+        </el-col>
+        <el-col :span="12" style="text-align:right">
+          <el-button type="primary" @click="backPage">返回</el-button>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="5">
+          <span class="label"><span>IC卡卡号：</span>{{baseForm.cardNo}}</span>
+        </el-col>
+        <el-col :span="5">
+          <span class="label"><span>农户姓名：</span>{{baseForm.farmerName}}</span></el-col>
+        <el-col :span="5">
+          <span class="label"><span>卡状态：</span>{{baseForm.cardStatusContent}}</span></el-col>
+        <el-col :span="4">
+          <span class="label"><span>办卡时间：</span>{{baseForm.cardCreateddate}}</span></el-col>
+        <el-col :span="5">
+          <span class="label"><span>所属区域：</span>{{baseForm.areaFullName}}</span></el-col>
+      </el-row>
+      <el-row style="margin: 20px 0">
+        <el-col :span="5">
+          <span class="label"><span>总用水量：</span>{{baseForm.waterNumTotal || 0}} m³</span>
+        </el-col>
+        <el-col :span="5">
+          <span class="label"><span>总用电量：</span>{{baseForm.electricNumTotal || 0}} m³</span></el-col>
+      </el-row>
+      <div style="text-align:right;position:relative;z-index:1000">
+        <el-date-picker
+          v-model="time"
+          clearable
+          value-format="yyyy-MM-dd HH:MM:SS"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+        <el-button type="primary" style="margin-left:10px;" @click="handleSearch">查询</el-button>
+      </div>
+      <el-tabs @tab-click="handleClick" style="margin-top:-30px;">
+        <el-tab-pane label="灌溉记录">
+          <b-table
+            ref="tableRef"
+            :args="{ 'highlight-current-row': true }"
+            :data="rechargercdList"
+            :columns="columns"
+            isShowIndex
+            :showPagination="!rechargercdList.length"
+          >
+            <template #styleImg="scope">
+              <el-image
+                :src="scope.row.imgPreview"
+                :preview-src-list="[scope.row.imgPreview]"
+                slot="error"
+                class="image-slot"
+                style="width: 100px; height: 50px"
+              >
+                <div slot="error" class="image-slot"></div>
+              </el-image>
+            </template>
+            <template #codeNo="scope">
+              <el-link
+                type="primary"
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >{{ scope.row.traceCodeApplyConcat }}</el-link
+              >
+            </template>
+            <template #status="scope">
+              <span style="display:flex;align-items:center;justify-content:center">
+                {{ scope.row.name }}
+              </span>
+            </template>
+            <template #useNumber="scope">
+              {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+            </template>
+            <template #finishGoodName="scope">
+              {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+            </template>
+          </b-table>
+        </el-tab-pane>
+        <el-tab-pane label="充值记录">
+          <b-table
+            ref="tableRechargercd"
+            :args="{ 'highlight-current-row': true }"
+            :data="rechargercdList"
+            :columns="columns"
+            isShowIndex
+          >
+            <template #styleImg="scope">
+              <el-image
+                :src="scope.row.imgPreview"
+                :preview-src-list="[scope.row.imgPreview]"
+                slot="error"
+                class="image-slot"
+                style="width: 100px; height: 50px"
+              >
+                <div slot="error" class="image-slot"></div>
+              </el-image>
+            </template>
+            <template #ICCard="scope">
+              {{ scope }}
+              <b-table
+                ref="tableRef"
+                :args="{ 'highlight-current-row': true }"
+                :data="loadData"
+                :columns="scope.columns"
+                isShowIndex
+              >
+              </b-table>
+            </template>
+            <template #codeNo="scope">
+              <el-link
+                type="primary"
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >{{ scope.row.traceCodeApplyConcat }}</el-link
+              >
+            </template>
+            <template #rechargercdRechargeamount="scope">
+              <el-link
+                type="primary"
+                :underline="false"
+                >+{{ Number(scope.row.rechargercdRechargeamount).toFixed(2) }}</el-link
+              >
+            </template>
+            <template #cardAmount="scope">
+              {{ Number(scope.row.cardAmount).toFixed(2) }}
+            </template>
+            <template #status="scope">
+              <span style="display:flex;align-items:center;justify-content:center">
+                {{ scope.row.name }}
+              </span>
+            </template>
+            <template #useNumber="scope">
+              {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+            </template>
+            <template #finishGoodName="scope">
+              {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+            </template>
+          </b-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </el-row>
+</template>
+
+<script>
+import { getCardDetail,getRechargercdList } from '@/api/card/index.js'
+import BTable from '@/components/Table/index.vue';
+export default {
+  name: 'dataDetail',
+  props: {
+    detailCardId:{ 
+      type:String,
+    }
+  },
+  components:{
+    BTable
+  },
+  data() {
+    return {
+      baseForm: {},
+      time:'',
+      columns: [
+        {
+          label: 'IC卡号',
+          prop: 'cardNo',
+          customRender: '',
+          align: 'center',
+        },
+        {
+          label: '充值金额（元）',
+          prop: 'rechargercdRechargeamount',
+          customRender: 'rechargercdRechargeamount',
+          align: 'center'
+        },
+        {
+          label: '充值后金额（元）',
+          prop: 'cardAmount',
+          customRender: 'cardAmount',
+          align: 'center'
+        },
+        {
+          label: '充值时间',
+          prop: 'rechargercdRechargetime',
+          customRender: '',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  methods: {
+    handleClick(){},
+    async rechargercdList() {
+      const res = await getCardDetail({
+        cardId:this.detailCardId
+      })
+      this.baseForm = res.data
+      return this.getRechargercdData(res.data);
+    },
+    getRechargercdData(payload) {
+      const {farmerId,cardNo,cardId} = payload
+      const startTime = this.time[0] || ''
+      const endTime = this.time[1] || ''
+      return getRechargercdList({
+        farmerId,
+        cardNo,
+        cardId,
+        startTime,
+        endTime
+      })
+    },
+    backPage() {
+      this.$emit("backPage")
+    },
+    goProductsPage() {
+      this.handleClose();
+      this.$router.push({
+        path: '/Products',
+        query: {}
+      });
+    },
+    goSourceInfoPage() {
+      this.handleClose();
+      this.$router.push({
+        path: '/sourceInfo',
+        query: {
+          type: 'add'
+        }
+      });
+    },
+    goProcessPage() {
+      this.handleClose();
+      this.$router.push({
+        path: '/basicsettings/process',
+        query: {}
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetFormData();
+      this.dialogVisible = false;
+    },
+    resetFormData() {
+      this.baseForm = {};
+    },
+    
+    handleSearch() {
+      this.$refs.tableRechargercd.refresh(true);
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    handleClose() {
+      this.$emit('update:visible', false);
+      this.resetForm('baseForm');
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.el-row-container{
+  height: calc(100% - 32px);
+  .header-label{
+    color: #333333;
+    font-size: 16px;
+    font-weight: 700;
+    font-family: "Source Han Sans CN VF";
+    text-align: left;
+  }
+}
+::v-deep.el-dialog__title{
+  color: #333333;
+  font-size: 16px;
+  font-weight: 700;
+}
+.input-number {
+  width: 100%;
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+.label{
+  color: #333;
+  span{
+    color: #999;
+    font-size: 14px;
+    font-style: normal;
+  }
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/waterCardManage/index.vue

@@ -1,190 +1,261 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="4"
-      >
-      <el-card style="margin:5%;height: 100%; overflow-y: auto">
-        <data-report-left></data-report-left>
-      </el-card>
-      </el-col>
-      <el-col
-        :span="20"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <el-select placeholder="用户卡号">
-              </el-select>
-              <el-input
-                v-model="form.goodsName"
-                style="width: 250px;margin:0 20px;"
-                placeholder="请输入内容"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-             <el-select placeholder="IC卡状态" style="margin-right:20px">
-
-             </el-select>
-              <el-button
+  <el-row  class="el-row-container" v-loading="loading">
+    <el-col
+      v-if="!detailType"
+      :span="4"
+      style="height:100%;padding-bottom:32px;"
+    >
+    <el-card style="margin:16px;height: 100%; overflow-y: auto">
+      <data-report-left
+        @setCurrentData="setCurrentData"
+        :treeData="treeData"
+      ></data-report-left>
+    </el-card>
+    </el-col>
+    <el-col
+      v-show="!detailType"
+      :span="20"
+      style="padding: 16px 16px 16px 0;  height: 100%"
+    >
+      <el-card style="height: 100%; overflow-y: auto">
+        <el-col :span="24" class="elrow-main__col-top">
+          <div>
+            <el-select 
+              placeholder="用户卡号" 
+              v-model="labelType"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <el-input
+              v-model="inputContent"
+              style="width: 250px;margin:0 16px;"
+              placeholder="请输入内容"
+              @keyup.enter.native="handleSearch"
+              clearable
+            />
+            <el-select
+              placeholder="IC卡状态"
+              v-model="cardStatus"
+              style="margin-right:16px"
+            >
+              <el-option
+                v-for="item in icType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleSearch"
+              >查询</el-button
+            >
+          </div>
+          <div class="top-left">
+            <el-button
+              type="primary"
+              size="small"
+              @click="addICard"
+              >新增IC卡
+              </el-button
+            ></div>
+        </el-col>
+        <el-col :span="24" class="elrow-main__col-bottom">
+          <img v-show="imgUrl" :src="imgUrl" />
+          <b-table
+            ref="tableRef"
+            :args="{ 'highlight-current-row': true }"
+            :data="loadData"
+            :columns="columns"
+            isShowIndex
+          >
+            <template #styleImg="scope">
+              <el-image
+                :src="scope.row.imgPreview"
+                :preview-src-list="[scope.row.imgPreview]"
+                slot="error"
+                class="image-slot"
+                style="width: 100px; height: 50px"
+              >
+                <div slot="error" class="image-slot"></div>
+              </el-image>
+            </template>
+            <template #codeNo="scope">
+              <el-link
                 type="primary"
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >{{ scope.row.traceCodeApplyConcat }}</el-link
+              >
+            </template>
+            <template #status="scope">
+              <span style="display:flex;align-items:center;justify-content:center">
+                {{ scope.row.cardStatusContent }}
+              </span>
+            </template>
+            <template #cardAmount="scope">
+              <span style="display:flex;align-items:center;justify-content:center">
+                {{ Number(scope.row.cardAmount).toFixed(2) }}
+              </span>
+            </template>
+            <template #useNumber="scope">
+              {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+            </template>
+            <template #finishGoodName="scope">
+              {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+            </template>
+
+            <template #operate="scope">
+              <el-link
                 size="small"
-                @click="handleSearch"
-                >查询</el-button
+                :underline="false"
+                :type="scope.row.cardStatus == '2'?'info':'primary'"
+                style="margin-right: 10px"
+                @click="editCardHandler(scope.row,2)"
+                >注销</el-link
               >
-            </div>
-            <div class="top-left">
-              <el-button
+              <el-link
+                size="small"
+                v-if="scope.row.cardStatus == '0'"
+                :underline="false"
                 type="primary"
+                style="margin-right: 10px"
+                @click="editCardHandler(scope.row,1)"
+              >挂失</el-link>
+              <el-link
                 size="small"
-                @click="addICard"
-                >新增IC卡
-                </el-button
-              ></div>
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
-            >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link
-                >
-              </template>
-              <template #status="scope">
-                <span style="display:flex;align-items:center;justify-content:center">
-                  {{ scope.row.name }}
-                  <!-- <span class="status"></span> -->
-                </span>
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
-
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                  >注销</el-link
-                >
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                >解挂</el-link>
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                >修改</el-link>
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="danger"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                >删除</el-link>
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="warning"
-                  style="margin-right: 10px"
-                  @click="recharge(scope.row)"
-                >充值</el-link>
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="changeDataDetailShow(scope.row)"
-                >数据详情</el-link>
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
-    <AddedICCard :visible.sync="associationManageShow"/>
-    <recharge-card :visible.sync="rechargeShow"/>
-    <data-detail :visible.sync="dataDetailShow"/>
-  </div>
+                v-if="scope.row.cardStatus == '1'"
+                :underline="false"
+                type="primary"
+                style="margin-right: 10px"
+                @click="editCardHandler(scope.row,0)"
+              >解挂</el-link>
+              <el-link
+                size="small"
+                :underline="false"
+                type="danger"
+                style="margin-right: 10px"
+                @click="deleteCardHandler(scope.row)"
+              >删除</el-link>
+              <el-link
+                v-if="scope.row.cardStatus !== '2'"
+                size="small"
+                :underline="false"
+                type="warning"
+                style="margin-right: 10px"
+                @click="rechargeCardHandler(scope.row)"
+              >充值</el-link>
+              <el-link
+                size="small"
+                :underline="false"
+                type="primary"
+                style="margin-right: 10px"
+                @click="changeDataDetailShow(scope.row)"
+              >数据详情</el-link>
+            </template>
+          </b-table>
+        </el-col>
+      </el-card>
+    </el-col>
+    <AddedICCard 
+      :visible.sync="associationManageShow"
+      :areaId="currentClickId"
+      :userList="userList"
+      @refresh="handleSearch"
+    />
+    <recharge-card
+      :visible.sync="rechargeShow"
+      :rechargeCardData="rechargeCardData"
+      @refresh="handleSearch"
+    />
+    <data-detail 
+      v-if="detailType"
+      :detailCardId="detailCardId"
+      @backPage="showList"
+    />
+  </el-row>
 </template>
 
 <script>
+import { Message } from 'element-ui';
+import { getFarmerList } from '@/api/farmer/list.js'
+import { getTree } from '@/api/tree.js'
+import { getCardList,editCard,deleteCard,getCardDetail } from '@/api/card/index.js'
 import BTable from '@/components/Table/index.vue';
-import DataReportLeft from './components/dataReportLeft.vue'
+import DataReportLeft from '@/components/DataReportLeft/index.vue'
 import AddedICCard from './components/addedICCard.vue'
-import { assign, omit } from 'lodash-es';
 import RechargeCard from './components/rechargeCard.vue';
-import DataDetail from './components/dataDetail.vue';
+import DataDetail from './dataDetail.vue';
 
 export default {
   name: 'waterCardManage',
-  components: { BTable,DataReportLeft,AddedICCard,RechargeCard,DataDetail, DataDetail },
+  components: { BTable,DataReportLeft,AddedICCard,RechargeCard,DataDetail },
   data() {
     return {
+      inputContent:'',
+      labelType:0,
+      options:[{
+        value: 0,
+        label: '农户手机号',
+      },{
+        value: 1,
+        label: '用户卡号',
+      },{
+        value: 2,
+        label: '农户姓名',
+      }],
+      cardStatus: '',
+      icType: [{
+        value:'',
+        label:'全部'
+      },{
+        value: 0,
+        label: '正常'
+      },{
+        value: 1,
+        label: '挂失'
+      },{
+        value: 2,
+        label: '注销'
+      }],
+      detailType: false,
       dateValue:"",
       imgUrl: '',
       baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
       form: {
         productName: ''
       },
+      currentClickId:'',
+      treeData: [],
       loading: false,
       associationManageShow: false,
       dataDetailShow: false,
       rechargeShow: false,
+      userList: [],
+      rechargeCardData: {},
+      detailCardId: '',
       columns: [
         {
           label: 'IC卡号',
-          prop: 'person',
-          customRender: '',
-          align: 'center'
-        },
-        {
-          label: '农户号',
-          prop: 'area',
+          prop: 'cardNo',
           customRender: '',
           align: 'center'
         },
         {
           label: '农户姓名',
-          prop: 'name',
+          prop: 'farmerName',
           customRender: '',
           align: 'center'
         },
         {
           label: 'IC卡状态',
-          prop: 'phone',
+          prop: 'cardStatusContent',
           customRender: 'status',
           align: 'center'
         },{
@@ -194,69 +265,112 @@ export default {
           align: 'center'
         },{
           label: '卡内余额',
-          prop: 'phone',
-          customRender: '',
+          prop: 'cardAmount',
+          customRender: 'cardAmount',
           align: 'center'
         },{
           label: '累计用水量',
-          prop: 'phone',
+          prop: 'waterNumTotal',
           customRender: '',
           align: 'center'
         },{
           label: '累计用电量',
-          prop: 'phone',
+          prop: 'electricNumTotal',
           customRender: '',
           align: 'center'
         },
         {
           label: '操作',
           customRender: 'operate',
-          width: 300,
-          align: 'center'
+          width: 250,
+          align: 'right'
         }
       ]
     };
   },
-  created() {},
   methods: {
-    addICard() {
+    // 注销 cardStatus = 2,解挂 cardStatus = 0,挂失 cardStatus = 1
+    async editCardHandler(row,cardStatus) {
+      if(cardStatus == '2')return
+      const { farmerId,cardNo,cardAmount,cardId } = row
+      await editCard({
+        farmerId,
+        cardNo,
+        cardAmount,
+        cardId,
+        cardStatus
+      })
+      this.handleSearch()
+    },
+    // 删除
+    deleteCardHandler(row){
+      const {cardId,farmerName} = row
+      this.$modal
+      .confirm(`是否确认删除农户${farmerName}`)
+      .then(()=> {
+        deleteCard({
+          cardIds: cardId
+        }).then(() => {
+          Message({ message: "删除成功", type: 'success' });
+          this.handleSearch()
+        })
+      })
+    },
+    // 充值
+    async rechargeCardHandler() {},
+    async searchHandler(farmerName,areaId) {
+      const res = await getFarmerList({
+        farmerName,
+        areaId
+      })
+      this.userList = res.data
+    },
+    setCurrentData(areaId) {
+      this.currentClickId = areaId
+      this.$refs.tableRef.refresh(false);
+      this.searchHandler(this.farmerName,areaId)
+    },
+    showList(){
+      this.detailType = false
+    },
+    async addICard() {
       this.associationManageShow = true
     },
-    loadData(parameter) {
-      const queryform = this.form;
-      const payload = omit(assign({}, parameter, queryform, {orderByColumn:'tarcecodeapplyCreateddate',isAsc:'desc'}), []);
-      return this.getTableData(payload);
+    async loadData() {
+      if(!this.currentClickId ) {
+        const res = await getTree()
+        this.treeData = res?.data
+        this.currentClick = res?.data[0]
+        this.currentClickId = this.currentClick?.cusareaId
+      }
+      this.searchHandler(this.farmerName,this.currentClickId)
+      return this.getTableData(this.currentClickId);
     },
-    changeDataDetailShow() {
-      this.dataDetailShow = true
+    changeDataDetailShow(row) {
+      this.detailType = true
+      const {cardId} = row
+      this.detailCardId = cardId
     },
-    getTableData(payload) {
-      return Promise.resolve({
-        data: [{
-            person:"王大虎",
-            area: '2016-05-02',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1518 弄'
-          }, {
-            person:"王大虎",
-            area: '2016-05-04',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1517 弄'
-          }, {
-            person:"王大虎",
-            area: '2016-05-01',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1519 弄'
-          }, {
-            person:"王大虎",
-            area: '2016-05-03',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1516 弄'
-          }]
+    getTableData(areaId) {
+      switch(this.labelType){
+        case 0:
+          this.farmerPhone = this.inputContent
+          break
+        case 1:
+          this.cardNo = this.inputContent
+          break
+        case 2:
+          this.farmerName = this.inputContent
+          break
+        default:
+          this.farmerPhone = this.inputContent
+      }
+      return getCardList({
+        farmerName:this.farmerName,
+        cardNo:this.cardNo,
+        farmerPhone: this.farmerPhone,
+        areaId,
+        cardStatus: this.cardStatus
       })
     },
     handleSearch() {
@@ -265,7 +379,8 @@ export default {
     goDetail(row) {
       this.$refs.sourceCodeDetail.open(row.tarcecodeapplyBatchno)
     },
-    recharge(row) {
+    rechargeCardHandler(row) {
+      this.rechargeCardData = row
       this.rechargeShow = true
     }
   }
@@ -273,6 +388,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
@@ -298,26 +416,4 @@ export default {
   background: red;
   margin-left: 5px;
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/waterManage/component/associationManage.vue

@@ -115,6 +115,7 @@
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"

src/views/waterManage/index.vue

@@ -1,102 +1,100 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="24"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <el-input
-                v-model="form.goodsName"
-                style="width: 250px"
-                placeholder="请输入产品名称/批次号"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-input
-                v-model="form.tarcecodeapplyno"
-                style="width: 250px;margin:0 15px;"
-                placeholder="请输入溯源码编号"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-button
-                type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
+  <el-row class="el-row-container" v-loading="loading">
+    <el-col
+      :span="24"
+      style="padding: 16px; height: 100%"
+    >
+      <el-card style="height: 100%; overflow-y: auto">
+        <el-col :span="24" class="elrow-main__col-top">
+          <div>
+            <el-input
+              v-model="form.goodsName"
+              style="width: 250px"
+              placeholder="请输入产品名称/批次号"
+              @keyup.enter.native="handleSearch"
+              clearable
+            />
+            <el-input
+              v-model="form.tarcecodeapplyno"
+              style="width: 250px;margin:0 16px;"
+              placeholder="请输入溯源码编号"
+              @keyup.enter.native="handleSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleSearch"
+              >查询</el-button
+            >
+          </div>
+          <div class="top-left">
+            <el-button
+              type="primary"
+              size="small"
+              @click="addAssociation"
+              >新增协会</el-button
+            ></div>
+        </el-col>
+        <el-col :span="24" class="elrow-main__col-bottom">
+          <img v-if="imgUrl" :src="imgUrl" />
+          <b-table
+            ref="tableRef"
+            :args="{ 'highlight-current-row': true }"
+            :data="loadData"
+            :columns="columns"
+            isShowIndex
+          >
+            <template #styleImg="scope">
+              <el-image
+                :src="scope.row.imgPreview"
+                :preview-src-list="[scope.row.imgPreview]"
+                slot="error"
+                class="image-slot"
+                style="width: 100px; height: 50px"
               >
-            </div>
-            <div class="top-left">
-              <el-button
+                <div slot="error" class="image-slot"></div>
+              </el-image>
+            </template>
+            <template #codeNo="scope">
+              <el-link
                 type="primary"
-                size="small"
-                @click="addAssociation"
-                >新增协会</el-button
-              ></div>
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
-            >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link
-                >
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >{{ scope.row.traceCodeApplyConcat }}</el-link
+              >
+            </template>
+            <template #useNumber="scope">
+              {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+            </template>
+            <template #finishGoodName="scope">
+              {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+            </template>
 
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                  >下载</el-link
-                >
-                <el-link
+            <template #operate="scope">
+              <el-link
                 size="small"
                 :underline="false"
-                type="danger"
+                type="primary"
                 style="margin-right: 10px"
                 @click="download(scope.row)"
-                >删除</el-link
+                >下载</el-link
               >
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
-    <association-manage :visible.sync="associationManageShow"/>
-  </div>
+              <el-link
+              size="small"
+              :underline="false"
+              type="danger"
+              style="margin-right: 10px"
+              @click="download(scope.row)"
+              >删除</el-link
+            >
+            </template>
+          </b-table>
+        </el-col>
+      </el-card>
+    </el-col>
+  <association-manage :visible.sync="associationManageShow"/>
+  </el-row>
 </template>
 
 <script>
@@ -201,14 +199,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 15px;
-  // padding: 20px 10px;
-  // background-color: #fff;
-  // border-radius: 5px;
   .top-left {
     height: 100%;
     display: flex;
@@ -221,26 +219,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/waterMarket/component/waterDeal.vue

@@ -7,8 +7,8 @@
     @close="handleClose"
     width="1200px"
   >
-  <el-row class="tab-wea-info">
-    <el-col :span="7">
+  <el-row class="tab-wea-info" :gutter="20">
+    <el-col :span="8">
       <el-card class="box-card">
         <div slot="header">
           <span>卖方信息</span>
@@ -27,7 +27,7 @@
         </div>
       </el-card>
     </el-col>
-    <el-col :span="7" :offset="1">
+    <el-col :span="8">
       <el-card class="box-card">
         <div slot="header">
           <span>买方信息</span>
@@ -46,7 +46,7 @@
         </div>
       </el-card>
     </el-col>
-    <el-col :span="7" :offset="1">
+    <el-col :span="8">
       <el-card class="box-card">
         <div slot="header">
           <span>交易信息</span>
@@ -68,7 +68,7 @@
             size="small"
             :underline="false"
             type="primary"
-            style="margin-right: 10px"
+            style="margin:0 10px 0 16px"
             @click="download(scope.row)"
             >确认交易</el-button
           >

src/views/waterMarket/index.vue

@@ -1,107 +1,105 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="24"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <span style="display:inline-block;width: 80px;text-align:center">买方</span>
-              <el-input
-                v-model="form.goodsName"
-                style="width: 250px"
-                placeholder="请输入买方姓名"
-                @keyup.enter.native="handleSearch"
-                clearable
-              />
-              <el-date-picker
-                v-model="dateValue"
-                type="daterange"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                :default-time="['00:00:00', '23:59:59']"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                style="width: 300px; margin:0 20px"
+  <el-row class="el-row-container" v-loading="loading">
+    <el-col
+      :span="24"
+      style="padding: 16px; height: 100%"
+    >
+      <el-card style="height: 100%; overflow-y: auto">
+        <el-col :span="24" class="elrow-main__col-top">
+          <div>
+            <span style="display:inline-block;width: 50px;">买方</span>
+            <el-input
+              v-model="form.goodsName"
+              style="width: 250px"
+              placeholder="请输入买方姓名"
+              @keyup.enter.native="handleSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateValue"
+              type="daterange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :default-time="['00:00:00', '23:59:59']"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width: 300px; margin:0 16px"
+            >
+            </el-date-picker>
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleSearch"
+              >查询</el-button
+            >
+          </div>
+          <div class="top-left">
+            <el-button
+              type="primary"
+              size="small"
+              @click="addAssociation"
+              >新增交易
+              </el-button
+            ></div>
+        </el-col>
+        <el-col :span="24" class="elrow-main__col-bottom">
+          <img v-if="imgUrl" :src="imgUrl" />
+          <b-table
+            ref="tableRef"
+            :args="{ 'highlight-current-row': true }"
+            :data="loadData"
+            :columns="columns"
+            isShowIndex
+          >
+            <template #styleImg="scope">
+              <el-image
+                :src="scope.row.imgPreview"
+                :preview-src-list="[scope.row.imgPreview]"
+                slot="error"
+                class="image-slot"
+                style="width: 100px; height: 50px"
               >
-              </el-date-picker>
-              <el-button
+                <div slot="error" class="image-slot"></div>
+              </el-image>
+            </template>
+            <template #codeNo="scope">
+              <el-link
                 type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >{{ scope.row.traceCodeApplyConcat }}</el-link
               >
-            </div>
-            <div class="top-left">
-              <el-button
-                type="primary"
-                size="small"
-                @click="addAssociation"
-                >新增交易
-                </el-button
-              ></div>
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
-            >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link
-                >
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
+            </template>
+            <template #useNumber="scope">
+              {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+            </template>
+            <template #finishGoodName="scope">
+              {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+            </template>
 
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                  >修改</el-link
-                >
-                <el-link
+            <template #operate="scope">
+              <el-link
                 size="small"
                 :underline="false"
-                type="danger"
+                type="primary"
                 style="margin-right: 10px"
                 @click="download(scope.row)"
-                >删除</el-link
+                >修改</el-link
               >
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
+              <el-link
+              size="small"
+              :underline="false"
+              type="danger"
+              style="margin-right: 10px"
+              @click="download(scope.row)"
+              >删除</el-link
+            >
+            </template>
+          </b-table>
+        </el-col>
+      </el-card>
+    </el-col>
     <water-deal :visible.sync="associationManageShow"/>
-  </div>
+  </el-row>
 </template>
 
 <script>
@@ -212,6 +210,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
@@ -229,26 +230,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

src/views/waterSubsidy/components/newPolicy.vue

@@ -50,12 +50,13 @@
       </el-row>
     </el-form>
 
-    <div style="text-align: right;margin-top:20px;">
+    <div style="text-align: right;margin-top:20px;" class="button-container">
       <el-button type="info" plain @click="resetForm('baseForm')"
         >取消</el-button
       >
       <el-button
         type="primary"
+        style="margin-left:16px;"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"

src/views/waterSubsidy/index.vue

@@ -1,93 +1,91 @@
 <template>
-  <div>
-    <el-row style="height: 100%" v-loading="loading">
-      <el-col
-        :span="24"
-        style="padding: 20px; background-color: #f1f3f4; height: 100%"
-      >
-        <el-card style="height: 100%; overflow-y: auto">
-          <el-col :span="24" class="elrow-main__col-top">
-            <div>
-              <el-select placeholder="请选择您的区域">
-              </el-select>
-              <el-input style="width: 250px;margin: 0 20px;" placeholder="请输入关键字"/>
-              <el-button
-                type="primary"
-                size="small"
-                @click="handleSearch"
-                >查询</el-button
+  <el-row class="el-row-container" v-loading="loading">
+    <el-col
+      :span="24"
+      style="padding: 16px; height: 100%"
+    >
+      <el-card style="height: 100%; overflow-y: auto">
+        <el-col :span="24" class="elrow-main__col-top">
+          <div>
+            <el-select placeholder="请选择您的区域">
+            </el-select>
+            <el-input style="width: 250px;margin: 0 16px;" placeholder="请输入关键字"/>
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleSearch"
+              >查询</el-button
+            >
+          </div>
+          <div class="top-left">
+            <el-button
+              type="primary"
+              size="small"
+              @click="addAssociation"
+              >发布新政策
+              </el-button
+            ></div>
+        </el-col>
+        <el-col :span="24" class="elrow-main__col-bottom">
+          <img v-if="imgUrl" :src="imgUrl" />
+          <b-table
+            ref="tableRef"
+            :args="{ 'highlight-current-row': true }"
+            :data="loadData"
+            :columns="columns"
+            isShowIndex
+          >
+            <template #styleImg="scope">
+              <el-image
+                :src="scope.row.imgPreview || ''"
+                :preview-src-list="[scope.row.imgPreview]"
+                slot="error"
+                class="image-slot"
+                style="width: 100px; height: 50px"
               >
-            </div>
-            <div class="top-left">
-              <el-button
+                <div slot="error" class="image-slot"></div>
+              </el-image>
+            </template>
+            <template #codeNo="scope">
+              <el-link
                 type="primary"
-                size="small"
-                @click="addAssociation"
-                >发布新政策
-                </el-button
-              ></div>
-          </el-col>
-          <el-col :span="24" class="elrow-main__col-bottom">
-            <img v-if="imgUrl" :src="imgUrl" />
-            <b-table
-              ref="tableRef"
-              :args="{ 'highlight-current-row': true }"
-              :data="loadData"
-              :columns="columns"
-              isShowIndex
-            >
-              <template #styleImg="scope">
-                <el-image
-                  :src="scope.row.imgPreview || ''"
-                  :preview-src-list="[scope.row.imgPreview]"
-                  slot="error"
-                  class="image-slot"
-                  style="width: 100px; height: 50px"
-                >
-                  <div slot="error" class="image-slot"></div>
-                </el-image>
-              </template>
-              <template #codeNo="scope">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="goDetail(scope.row)"
-                  >{{ scope.row.traceCodeApplyConcat }}</el-link>
-              </template>
-              <template #useNumber="scope">
-                {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
-              </template>
-              <template #finishGoodName="scope">
-                {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
-              </template>
+                :underline="false"
+                @click="goDetail(scope.row)"
+                >{{ scope.row.traceCodeApplyConcat }}</el-link>
+            </template>
+            <template #useNumber="scope">
+              {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
+            </template>
+            <template #finishGoodName="scope">
+              {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+            </template>
 
-              <template #operate="scope">
-                <el-link
-                  size="small"
-                  :underline="false"
-                  type="primary"
-                  style="margin-right: 10px"
-                  @click="download(scope.row)"
-                  >修改</el-link
-                >
-                <el-link
+            <template #operate="scope">
+              <el-link
                 size="small"
                 :underline="false"
-                type="danger"
+                type="primary"
                 style="margin-right: 10px"
                 @click="download(scope.row)"
-                >删除</el-link
+                >修改</el-link
               >
-              </template>
-            </b-table>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
+              <el-link
+              size="small"
+              :underline="false"
+              type="danger"
+              style="margin-right: 10px"
+              @click="download(scope.row)"
+              >删除</el-link
+            >
+            </template>
+          </b-table>
+        </el-col>
+      </el-card>
+    </el-col>
     <new-policy
       :visible.sync="showPolicy"
     />
-  </div>
+  </el-row>
 </template>
 
 <script>
@@ -202,6 +200,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-row-container{
+  height: 100%;
+}
 .elrow-main__col-top {
   display: flex;
   align-items: center;
@@ -219,26 +220,4 @@ export default {
     }
   }
 }
-.app-main {
-  background-color: #f3f5f9;
-  padding: 20px;
-  height: 100%;
-  #products-app {
-    height: 100%;
-    box-sizing: border-box;
-    .elrow-main {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      &__col-bottom {
-        margin-top: 20px;
-        flex: 1;
-        background-color: #fff;
-        border-radius: 5px;
-        padding: 20px 10px;
-      }
-    }
-  }
-}
 </style>

vue.config.js

@@ -39,7 +39,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       ['/iotprod-api']: {
-        target: `http://111.43.116.162:7000`,
+        target: `http://192.168.1.57:8027`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
@@ -48,7 +48,7 @@ module.exports = {
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://192.168.1.57:8021`,
         // target: `http://192.168.95:8021`,
-        target: `http://192.168.1.221:8021`,
+        target: `http://192.168.1.57:8027`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''