m-页面的开发

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 农产品
+VUE_APP_TITLE = 水价改革管理系统
 
 # 开发环境配置
 ENV = 'development'
@@ -21,10 +21,10 @@ VUE_APP_SSO_ENABLED = FALSE
 
 VUE_APP_SYS_APP_MENUCFGID = 80e51453-7062-31ae-b673-00f24b0d7bed
 
-VUE_APP_SYS_BASE_URL= /todo
+VUE_APP_SYS_BASE_URL= /water
 
-VUE_APP_ROUTER_BASE_URL= todo
+VUE_APP_ROUTER_BASE_URL= water
 
-VUE_APP_PUBLIC_PATH= /todo/
+VUE_APP_PUBLIC_PATH= /water/
 
 VUE_APP_THIRD_BASE_URL=

.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 农产品 
+VUE_APP_TITLE = 水价改革管理系统 
 
 # 生产环境配置
 ENV = 'production'
@@ -17,10 +17,10 @@ VUE_APP_SSO_ENABLED = FALSE
 
 VUE_APP_SYS_APP_MENUCFGID = 80e51453-7062-31ae-b673-00f24b0d7bed
 
-VUE_APP_SYS_BASE_URL= /todo
+VUE_APP_SYS_BASE_URL= /water
 
-VUE_APP_ROUTER_BASE_URL= todo
+VUE_APP_ROUTER_BASE_URL= water
 
-VUE_APP_PUBLIC_PATH= /todo/
+VUE_APP_PUBLIC_PATH= /water/
 
 VUE_APP_THIRD_BASE_URL=

.env.staging

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 农产品 
+VUE_APP_TITLE = 水价改革管理系统 
 
 NODE_ENV = production
 

src/components/Home/messageButton.vue

@@ -48,7 +48,9 @@ export default {
   computed: {
     menu() {}
   },
-  methods: {},
+  methods: {
+    openMessage(){}
+  },
   mounted() {}
 };
 </script>

src/router/index.js

@@ -63,10 +63,6 @@ export const constantRoutes = [
     path: '/401',
     component: () => import('@/views/error/401'),
     hidden: true
-  },
-  {
-    path: '/',
-    component: () => import('@/views/index')
   }
 ];
 

src/store/modules/mock.js

@@ -0,0 +1,332 @@
+export const getMenuList = {
+	code: "000000",
+	msg: "操作成功",
+	data: [
+		{
+			"path": "/water",
+			"hidden": false,
+			"component": "Layout",
+			"menuId": "8abae020-0189-1000-e001-7c38c0a801dd",
+			"children": [
+				{
+					"name": "home",
+					"path": "home",
+					"hidden": false,
+					"component": "home",
+					"meta": {
+						"title": "首页",
+						"icon": "dashboard",
+						"noCache": true,
+						"link": null
+					},
+					"menuId": "8abae020-0189-1000-e001-7c38c0a801dd"
+				}
+			]
+		},
+		{
+				"name": "water/gisShow",
+				"path": "/water/gisShow",
+				"hidden": false,
+				"redirect": "noRedirect",
+				"component": "Layout",
+				"alwaysShow": true,
+				"meta": {
+					"title": "GIS 展示",
+					"icon": "log",
+					"noCache": true,
+					"link": null
+				},
+				"menuId": "8abae020-0189-1000-e001-65efc0a801dd",
+				"children":[{
+					"name": "gisShow",
+					"path": "gisShow",
+					"hidden": false,
+					"component": "gisShow",
+					"meta": {
+							"title": "GIS 展示",
+							"icon": null,
+							"noCache": true,
+							"link": null
+					},
+					"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+				}]
+		},
+		{
+				"name": "water/monitoringMamage",
+				"path": "/water/monitoringMamage",
+				"hidden": false,
+				"redirect": "noRedirect",
+				"component": "Layout",
+				"alwaysShow": true,
+				"meta": {
+					"title": "监测管理",
+					"icon": "list",
+					"noCache": true,
+					"link": null
+				},
+				"menuId": "8abae020-0189-1000-e001-087dc0a801dd",
+				"children":[{
+					"name": "monitoringMamage",
+					"path": "monitoringMamage",
+					"hidden": false,
+					"component": "monitoringMamage",
+					"meta": {
+							"title": "监测管理",
+							"icon": null,
+							"noCache": true,
+							"link": null
+					},
+					"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+				}]
+		},
+		{
+				"name": "water/peasantHouseholdManage",
+				"path": "/water/peasantHouseholdManage",
+				"hidden": false,
+				"redirect": "noRedirect",
+				"component": "Layout",
+				"alwaysShow": true,
+				"meta": {
+						"title": "农户管理",
+						"icon": "international",
+						"noCache": true,
+						"link": null
+				},
+				"menuId": "8abae020-0189-1000-e001-336ec0a801dd",
+				"children":[{
+					"name": "peasantHouseholdManage",
+					"path": "peasantHouseholdManage",
+					"hidden": false,
+					"component": "peasantHouseholdManage",
+					"meta": {
+							"title": "农户管理",
+							"icon": null,
+							"noCache": true,
+							"link": null
+					},
+					"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+				}]
+		},
+		{
+			"name": "water/waterCardManage",
+			"path": "/water/waterCardManage",
+			"hidden": false,
+			"redirect": "noRedirect",
+			"component": "Layout",
+			"alwaysShow": true,
+			"meta": {
+				"title": "水卡管理",
+				"icon": "shopping",
+				"noCache": true,
+				"link": null
+			},
+			"menuId": "8abae020-0189-1000-e001-392ac0a801dd",
+			"children":[{
+				"name": "waterCardManage",
+				"path": "waterCardManage",
+				"hidden": false,
+				"component": "waterCardManage",
+				"meta": {
+						"title": "水卡管理",
+						"icon": null,
+						"noCache": true,
+						"link": null
+				},
+				"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+			}]
+		},
+		{
+				"name": "water/infrastructure",
+				"path": "/water/infrastructure",
+				"hidden": false,
+				"redirect": "noRedirect",
+				"component": "Layout",
+				"alwaysShow": true,
+				"meta": {
+						"title": "基础设置",
+						"icon": "system",
+						"noCache": true,
+						"link": null
+				},
+				"menuId": "8abae020-0189-1000-e001-3eecc0a801dd",
+				"children": [
+					{
+						"name": "waterEstablishment",
+						"path": "waterEstablishment",
+						"hidden": false,
+						"component": "infrastructure/waterEstablishment",
+						"meta": {
+								"title": "水权设置",
+								"icon": null,
+								"noCache": true,
+								"link": null
+						},
+						"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+					},{
+						"name": "waterElectricityPriceSetting",
+						"path": "waterElectricityPriceSetting",
+						"hidden": false,
+						"component": "infrastructure/waterElectricityPriceSetting",
+						"meta": {
+								"title": "水电价设置",
+								"icon": null,
+								"noCache": true,
+								"link": null
+						},
+						"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+					},{
+						"name": "deviceSetup",
+						"path": "deviceSetup",
+						"hidden": false,
+						"component": "infrastructure/deviceSetup",
+						"meta": {
+								"title": "设备管理",
+								"icon": null,
+								"noCache": true,
+								"link": null
+						},
+						"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+					}
+				]
+		},
+		{
+				"name": "water/dataReport",
+				"path": "/water/dataReport",
+				"hidden": false,
+				"redirect": "noRedirect",
+				"component": "Layout",
+				"alwaysShow": true,
+				"meta": {
+						"title": "数据报表",
+						"icon": "system",
+						"noCache": true,
+						"link": null
+				},
+				"menuId": "8abae020-0189-1000-e001-3eecc0a801dd",
+				"children": [
+					{
+						"name": "intakeWaterAnalysis",
+						"path": "intakeWaterAnalysis",
+						"hidden": false,
+						"component": "dataReport/intakeWaterAnalysis",
+						"meta": {
+								"title": "用水统计（组织）",
+								"icon": null,
+								"noCache": true,
+								"link": null
+						},
+						"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+					},{
+						"name": "saveWaterAnalysis",
+						"path": "saveWaterAnalysis",
+						"hidden": false,
+						"component": "dataReport/saveWaterAnalysis",
+						"meta": {
+								"title": "节水分析（农户）",
+								"icon": null,
+								"noCache": true,
+								"link": null
+						},
+						"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+					},{
+						"name": "waterConsumption",
+						"path": "waterConsumption",
+						"hidden": false,
+						"component": "dataReport/waterConsumption",
+						"meta": {
+								"title": "取水分析（机井）",
+								"icon": null,
+								"noCache": true,
+								"link": null
+						},
+						"menuId": "be726414-0189-1000-e002-ec3bc0a801dd"
+					}
+				]
+		},
+		{
+			"name": "water/waterSubsidy",
+			"path": "/water/waterSubsidy",
+			"hidden": false,
+			"redirect": "noRedirect",
+			"component": "Layout",
+			"alwaysShow": true,
+			"meta": {
+					"title": "节水政策补贴",
+					"icon": "shopping",
+					"noCache": true,
+					"link": null
+			},
+			"children": [
+				{
+					"name": "/waterSubsidy",
+					"path": "/waterSubsidy",
+					"hidden": false,
+					"component": "waterSubsidy",
+					"meta": {
+							"title": "节水政策补贴",
+							"icon": "dashboard",
+							"noCache": true,
+							"link": null
+					},
+					"menuId": "8abae020-0189-1000-e001-7c38c0a801dd"
+				}],
+			"menuId": "8abae020-0189-1000-e001-392ac0a801dd",
+		},{
+			"name": "water/waterMarket",
+			"path": "/water/waterMarket",
+			"hidden": false,
+			"redirect": "noRedirect",
+			"component": "Layout",
+			"alwaysShow": true,
+			"meta": {
+					"title": "水权交易",
+					"icon": "shopping",
+					"noCache": true,
+					"link": null
+			},
+			"children": [
+				{
+					"name": "/waterMarket",
+					"path": "/waterMarket",
+					"hidden": false,
+					"component": "waterMarket",
+					"meta": {
+							"title": "水权交易",
+							"icon": "dashboard",
+							"noCache": true,
+							"link": null
+					},
+					"menuId": "8abae020-0189-1000-e001-7c38c0a801dd"
+				}],
+			"menuId": "8abae020-0189-1000-e001-392ac0a801dd",
+		},{
+			"name": "water/waterManage",
+			"path": "/water/waterManage",
+			"hidden": false,
+			"redirect": "noRedirect",
+			"component": "Layout",
+			"alwaysShow": true,
+			"meta": {
+					"title": "用水协会管理",
+					"icon": "shopping",
+					"noCache": true,
+					"link": null
+			},
+			"children": [
+				{
+					"name": "/waterManage",
+					"path": "/waterManage",
+					"hidden": false,
+					"component": "waterManage",
+					"meta": {
+							"title": "用水协会管理",
+							"icon": "dashboard",
+							"noCache": true,
+							"link": null
+					},
+					"menuId": "8abae020-0189-1000-e001-7c38c0a801dd"
+				}],
+			"menuId": "8abae020-0189-1000-e001-392ac0a801dd",
+		}
+	]
+}

src/store/modules/permission.js

@@ -1,6 +1,7 @@
 import auth from '@/plugins/auth';
 import router, { constantRoutes, dynamicRoutes } from '@/router';
 import { getMenus } from '@/api/menu';
+import{ getMenuList } from './mock'
 import Layout from '@/layout/index';
 import ParentView from '@/components/ParentView';
 import InnerLink from '@/layout/components/InnerLink';
@@ -37,8 +38,7 @@ const permission = {
     GenerateRoutes({ commit }) {
       return new Promise((resolve) => {
         // 向后端请求路由数据
-        getMenus().then((res) => {
-          const menuDataList = recursionUpdateRouterPath(res.data);
+          const menuDataList = recursionUpdateRouterPath(getMenuList.data);
 
           const sdata = JSON.parse(JSON.stringify(menuDataList));
           const rdata = JSON.parse(JSON.stringify(menuDataList));
@@ -92,7 +92,6 @@ const permission = {
 
           resolve(rewriteRoutes);
         });
-      });
     }
   }
 };

src/utils/sso.js

@@ -133,7 +133,7 @@ export function getResdirectAppUrl(ssoToken) {
       ? parseTarget(
           ssoConfig.ssoLoginUrl + backUrl + `&appid=${ssoConfig.appId}`
         )
-      : '/tss/login';
+      : '/water/login';
     // alert(  ssoConfig.ssoEnabled );
     // alert(redirectUrl);
     // alert(ssoConfig.ssoLoginUrl);

src/views/dataReport/components/dataReportLeft.vue

@@ -0,0 +1,87 @@
+<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 {
+    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

@@ -0,0 +1,214 @@
+<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
+            >
+              <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>
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import { assign, omit } from 'lodash-es';
+
+export default {
+  name:"waterManage",
+  props: {
+    columns:{
+      type: Array,
+      default: []
+    }
+  },
+  components: { BTable },
+  data() {
+    return {
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+    };
+  },
+  created() {},
+  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) {
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/dataReport/intakeWaterAnalysis.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <el-row style="height: 100%" v-loading="loading">
+      <el-col
+        :span="6"
+      >
+      <el-card style="margin:5%;height: 100%; overflow-y: auto">
+        <data-report-left></data-report-left>
+      </el-card>
+      </el-col>
+      <el-col
+        :span="18"
+        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>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import DataReportLeft from './components/dataReportLeft.vue'
+import Report from './components/report.vue'
+import { assign, omit } from 'lodash-es';
+
+export default {
+  name:"waterManage",
+  components: { BTable,DataReportLeft,Report},
+  data() {
+    return {
+      activeName:'first',
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      columns: [
+        {
+          label: '机井名称',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '累计用水量（m³）',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '灌溉次数',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '累计用电量（°）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  methods: {
+    handleClick(){},
+    handleSearch() {},
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/dataReport/saveWaterAnalysis.vue

@@ -0,0 +1,254 @@
+<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>
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import { assign, omit } from 'lodash-es';
+
+export default {
+  name:"waterManage",
+  components: { BTable},
+  data() {
+    return {
+      imgUrl: '',
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      columns: [
+        {
+          label: '年度',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '管理区域',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          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: '剩余水权（立方）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  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) {}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/dataReport/waterConsumption.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <el-row style="height: 100%" v-loading="loading">
+      <el-col
+        :span="6"
+      >
+      <el-card style="margin:5%;height: 100%; overflow-y: auto">
+        <data-report-left></data-report-left>
+      </el-card>
+      </el-col>
+      <el-col
+        :span="18"
+        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>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import DataReportLeft from './components/dataReportLeft.vue'
+import Report from './components/report.vue'
+import { assign, omit } from 'lodash-es';
+
+export default {
+  name:"waterManage",
+  components: { BTable,DataReportLeft,Report },
+  data() {
+    return {
+      activeName:'first',
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      columns: [
+        {
+          label: '机井名称',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '累计用水量（m³）',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '灌溉次数',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '累计用电量（°）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  methods: {
+    handleClick(){},
+    handleSearch() {},
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/gisShow/components/dataReportLeft.vue

@@ -0,0 +1,87 @@
+<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 {
+    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/gisShow/components/echartsGradient.vue

@@ -0,0 +1,206 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons') // echarts theme
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.setOption({
+        title: {
+          text: '',
+          show: true,
+          textStyle: {
+            color: '#333'
+          }
+        },
+        animation: false,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          selectedMode: false,
+          data: [
+            {
+              name:'用水',
+              icon: 'circle',
+              itemStyle: {
+                color: '#1890FF',
+              },
+            },
+            {
+              name:'用电',
+              icon: 'circle',
+              itemStyle: {
+                color: '#F4A72F'
+              }
+            }
+          ]
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+              noZero:false
+            },
+            type: 'category',
+            boundaryGap: false,
+            axisLabel: {color: "#333"},
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          }
+        ],
+        yAxis: [{
+          name: '用水单位: 方',
+          nameTextStyle: {color: '#333'},
+          type: "value",
+          min:0,
+          max:1000,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+            }
+          },
+          splitArea:{
+            show: false
+          },
+          axisLabel: {verticalAlign: "center", color: "#333"},
+          splitNumber: 5,
+        }, {
+          name: '用电单位: 度',
+          nameTextStyle: {color: '#333',padding:[0,40,0,0]},
+          type: "value",
+          min:0,
+          max:1000,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed'
+            }
+          },
+          splitArea:{
+            show: false
+          },
+          axisLabel: {verticalAlign: "center", color: "#333"},
+          splitNumber: 5,
+        }],
+        series: [
+          {
+            name: '用水',
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            symbolSize: 5,
+            showSymbol: false,
+            sampling: 'average',
+            lineStyle: {
+              width: 1,
+              color: '#F4A72F',
+              type: 'solid',
+            },
+            areaStyle: {
+              opacity: 0.5,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(244,167,47,0.5)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(244,167,47,0.1)'
+                }
+              ])
+            },
+            data: [140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90]
+          },
+          {
+            name: '用电',
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,      
+            symbol: 'circle',
+            symbolSize: 5,
+            sampling: 'average',
+            lineStyle: {
+              width: 1,
+              color: '#1890FF',
+              type: 'solid',
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 144, 255, 0.5)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(24, 144, 255, 0.1)'
+                }
+              ])
+            },
+            data: [120, 282, 111, 234, 220, 340, 310,120, 282, 111, 234, 220]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/gisShow/components/mapContainer.vue

@@ -0,0 +1,105 @@
+<template>
+  <div id="container">
+  </div>
+</template>
+
+<script>  
+import shuijing from '../assets/shuijing.svg'
+  export default {
+    name: "v-map",
+    props: {
+      center: {
+        type: Array,
+        default: () => [],
+      },
+      zoom: {
+        type: Number,
+        default: 16
+      }
+    },
+    data() {
+      return {
+        map: null,
+        recomposeShow: false,
+        address:'',
+      }
+    },
+    watch:{
+      center: {
+        handler(val) {
+          this.initMap()
+        },
+        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
+        var layers = [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()];
+        const positions = [{
+          lng: 115.857194, 
+          lat: 34.041573
+        },{
+          lng: 115.850, 
+          lat: 34.041573
+        }]
+        positions.forEach(item => {
+          const { lng, lat } = item
+          const icons = new AMap.Icon({
+            image: shuijing, //自定义图标路径
+            size: new AMap.Size(130, 130), //图片大小
+            imageSize: new AMap.Size(50, 50), //图片拉伸设置
+          });
+          var marker = new AMap.Marker({
+            position: new AMap.LngLat(lng, lat), //定义图标的位置
+            offset: new AMap.Pixel(0, 0), //设置图标偏移量
+            icon: icons, //自定义图标路径
+            title: '', //设置标题
+            draggable: false, //是否可以拖拽
+            clickable: true
+          });
+          marker.on('click',(e) => {
+            this.$emit("handlerRecomposeShow",true)
+          })
+          map.add(marker);
+        })
+        map.setLayers(layers);
+        map.addControl(new AMap.ToolBar()); // 添加组合控件
+        map.addControl(new AMap.Scale()); // 添加比例尺
+        map.addControl(new AMap.HawkEye({ isOpen: true })); // 添加鹰眼控件
+        map.addControl(new AMap.MapType({ defaultType: 1 })); // 添加图层切换控件
+        map.addControl(new AMap.Geolocation()); // 添加定位
+        map.on('click', function (e) {
+          const { lng, lat } = e.lnglat;
+          addMarker({ lng, lat });
+          addInfo({ lng, lat });
+        });
+        var PlaceSearchOptions = {
+          city: '420000', // 城市
+          type: '', // 数据类别
+          pageSize: 10, // 每页结果数,默认10
+          pageIndex: 1, // 请求页码，默认1
+          extensions: 'base', // 返回信息详略，默认为base（基本信息）
+        };
+        state.MSearch = new AMap.PlaceSearch(PlaceSearchOptions); // 构造PlaceSearch类
+        state.MSearch.search(state.keyWord, keywordSearch_CallBack);
+        AMap.Event.addListener(state.MSearch, 'complete', keywordSearch_CallBack); 
+        }
+      },
+    mounted() {
+      this.initMap()
+    }
+  }
+</script>
+
+
+<style scoped>
+
+</style>

src/views/gisShow/components/rightEquipment.vue

@@ -0,0 +1,226 @@
+<template>
+  <el-drawer
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1200px"
+  >
+  <div>
+    <div class="container_left">
+      <h3>设备信息</h3>
+      <el-row>
+        <el-col :span="11">
+          <img :src="equipment"/>
+        </el-col>
+        <el-col :span="13">
+          <div class="equipment_right" v-for="(item,index) in list" :key="index">
+            <el-row>
+              <el-col :span="8">
+                <label>{{item.label}}</label>
+              </el-col>
+              <el-col :span="16">
+                <span class="content">{{item.text}}</span>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+      <h3>当前使用记录</h3>
+      <el-row>
+        <el-col :span="12" v-for="(item,index) in current_history" :key="index">
+          <el-row>
+            <el-col :span="8">
+              <label>{{item.label}}</label>
+            </el-col>
+            <el-col :span="16">
+              <span class="content">{{item.text}}</span>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+      <div class="year_history">
+        <h3>年度使用记录</h3>
+        <el-select placeholder="年份" style="width: 150px;">
+        </el-select>
+      </div>
+      <el-row>
+        <el-col :span="12" v-for="item in current_history" :key="item.label">
+          <el-row>
+            <el-col :span="8">
+              <label>{{item.label}}</label>
+            </el-col>
+            <el-col :span="16">
+              <span class="content">{{item.text}}</span>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </div>
+    <div style="margin-right:20px;">
+      <echartsGradient style="margin-top:20px"/>
+    </div>
+  </div>
+  </el-drawer>
+</template>
+
+<script>
+import { assign } from 'lodash-es';
+import equipment from './assets/equipment.svg'
+import echartsGradient from './echartsGradient.vue';
+export default {
+  name: 'rightEquipment',
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    echartsGradient
+  },
+  data() {
+    return {
+      year_history: [{
+        label: '使用次数：',
+        text:'50次'
+      },{
+        label: '使用人数：',
+        text:'20人'
+      },{
+        label: '累计用水量：',
+        text:'10000  m³ /s'
+      },{
+        label: '累计用电量：',
+        text:'42,125°'
+      }],
+      current_history: [{
+        label: '使用农户：',
+        text:'张三'
+      },{
+        label: 'IC卡号：',
+        text:'545454545454545'
+      },{
+        label: '当前流速：',
+        text:'10000  m³ /s'
+      },{
+        label: '瞬时流量：',
+        text:'10000  m³ /s'
+      },{
+        label: '已用时长：',
+        text:'2小时30分钟'
+      }],
+      list:[{
+        label: '设备名称：',
+        text: '1号水电双计设备'
+      },{
+        label: '设备编号：',
+        text: '54545415315569'
+      },{
+        label: '水源名称：',
+        text: '001号水井'
+      },{
+        label: '所属区域：',
+        text: '1号基地'
+      },{
+        label: '所在位置：',
+        text: '河南省郑州市金水区瀚海北金商业写字楼B座'
+      },{
+        label: '在线状态：',
+        text: '在线'
+      },{
+        label: '运行状态：',
+        text: '开'
+      }],
+      equipment: equipment,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      hasFetched: false,
+    };
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        if (val) {
+          assign(this.baseForm, this.data);
+          if (!this.hasFetched) {
+            this.hasFetched = true;
+          }
+        }
+      }
+    },
+    data: {
+      deep: true,
+      handler(val) {
+        assign(this.baseForm, val);
+      }
+    }
+  },
+  methods: {
+    resetForm(formName) {
+      this.dialogVisible = false;
+    },
+    handleClose() {
+      this.$emit('update:visible', false);
+      this.resetForm('baseForm');
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.container_left{
+  width: 90%;
+  padding: 0 5%;
+  h3{
+    color: #333;
+    font-family: Source Han Sans CN VF;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 26px;
+  }
+  .equipment_right{
+    margin-bottom:5px;
+    position: relative;
+  }
+  
+  label{
+    color: #999;
+    text-overflow: ellipsis;
+    font-family: Source Han Sans CN VF;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+  }
+  .content{
+    color:  #333;
+    font-family: Source Han Sans CN VF;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+  }
+  .year_history{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style>

src/views/gisShow/gisShow.scss

@@ -0,0 +1,110 @@
+::v-deep .el-input__inner{
+  height: 30px;
+  border: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+::v-deep .el-input__suffix{
+  margin-top: -3px;
+  font-size: 12px;
+}
+::v-deep.el-col-4{
+  width: 20%;
+  display: flex;
+  height: 50px;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  p{
+    color: #FFF;
+    font-variant-numeric: lining-nums tabular-nums;
+    font-family: Source Han Sans CN VF;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+    margin-left: 5px;
+  }
+}
+.amap-page-container {
+  height: 400px;
+  margin-top: 20px;
+  position: relative;
+}
+.input-search {
+  position: absolute;
+  top: 20px;
+  left: 0px;
+  z-index: 105;
+  display: flex;
+}
+
+.inpu {
+  width:200px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  height: 30px;
+}
+.el-button--medium{
+  height: 30px;
+  line-height:10px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.wan {
+  margin-top: 20px;
+}
+#container{
+  width: 100%;
+  height: 100%;
+}
+.search{
+  width: 320px;
+  height: 32px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index:100;
+  background: #ffffff;
+  border-radius: 4px;
+  display: flex;
+}
+.search_button{
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding: 10px;
+}
+.left{
+  width: 350px;
+  height: 50px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.60);
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  z-index: 100;
+  .item_style{
+    cursor: pointer;
+  }
+  .radius{
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #14A478;
+    cursor: pointer;
+  }
+  .run{
+    background: #1890FF;
+  }
+  .error{
+    background: #F4A72F;
+  }
+  .waring{
+    background: #FF5951;
+  }
+  .nolive{
+    background: #B6B7B9;
+  }
+}

src/views/gisShow/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div style="width: 100%;height:100%">
+    <map-container :center="center" :zoom="zoom" @handlerRecomposeShow="recomposeShowHandler"/>
+    <div class="left">
+      <el-row :getters="20">
+        <el-col
+          :span="4"
+          v-for="item in bottom_left"
+          :key="item.title"
+          class="item_style"
+          @click="handlerLeft"
+        >
+          <span :class="item.styleClass"></span>
+          <p>{{item.title}}</p>
+        </el-col>
+      </el-row>
+    </div>
+    <rightEquipmentVue :visible.sync="recomposeShow"/>
+    <div class="input-search">
+      <el-input class="inpu" clearable placeholder="请输入你要定位的地址" v-model="address">
+      </el-input>
+      <el-button type="primary" @click="searchMap()" class="position">搜索</el-button>
+  </div>
+  </div>
+</template>
+<script>
+  import rightEquipmentVue from './components/rightEquipment.vue';
+  import MapContainer from './components/mapContainer.vue'
+  export default {
+    data() {
+      return {
+        bottom_left:[{
+          title: '在线',
+          styleClass: 'radius'
+        },{
+          title: '运行',
+          styleClass: 'radius run'
+        },{
+          title: '故障',
+          styleClass: 'radius error'
+        },{
+          title: '告警',
+          styleClass: 'radius waring'
+        },{
+          title: '离线',
+          styleClass: 'radius nolive'
+        }],
+        search_model:'',
+        state: {
+          keyWord: ""
+        },
+        map: null,
+        recomposeShow: false,
+        address: '',
+        center: [115.857193,34.041573],
+        zoom: 16,
+        lng: '',
+        lat: ''
+      }
+    },
+    components: {
+      rightEquipmentVue,
+      MapContainer
+    },
+    methods:{
+      handlerLeft() {
+
+      },
+      recomposeShowHandler(flag) {
+        this.recomposeShow = flag
+      },
+      searchMap() {
+        let that = this;
+        let address = this.address;
+        var geocoder = new AMap.Geocoder({
+          city: "", //城市设为北京，默认：“全国”
+        });
+        geocoder.getLocation(address, function(status, result) {
+          if (status === 'complete' && result.geocodes.length) {
+            var lnglat = result.geocodes[0].location;
+            that.center = [lnglat.lng, lnglat.lat]
+            that.lng = lnglat.lng;
+            that.lat = lnglat.lat;
+            that.markers = [{
+              position: that.center,
+            }]
+            that.zoom = 11
+          } else {
+            console.log('根据地址查询位置失败');
+          }
+        });
+      },
+      getCoordinate(data) {
+        console.log("getCoordinate:", data)
+      },
+    }
+  };
+</script>
+<style lang="scss" scoped>
+@import './gisShow.scss'
+</style>

src/views/gisShow/mixins/resize.js

@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}

src/views/home/assets/electricity.svg

@@ -0,0 +1,10 @@
+<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="32.8" cy="32" r="32" fill="url(#paint0_linear_7_762)"/>
+<path d="M46.8 13H28.1337L18.8 32.6204H26.8592L21.1339 52L44.4682 28.6278H35.9103L46.8 13Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_7_762" x1="13.5273" y1="5.45455" x2="54.6182" y2="58.5455" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F19C50"/>
+<stop offset="1" stop-color="#EFBB4E"/>
+</linearGradient>
+</defs>
+</svg>

src/views/home/assets/time.svg

@@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="32" cy="32" r="32" fill="url(#paint0_linear_7_822)"/>
+<path d="M32 51C21.5066 51 13 42.4934 13 32C13 21.5066 21.5066 13 32 13C42.4934 13 51 21.5066 51 32C51 42.4934 42.4934 51 32 51ZM38.5549 36.3555L33.6328 32.5912V21.3496C33.6328 20.4479 32.9018 19.7168 32 19.7168C31.0982 19.7168 30.3672 20.4479 30.3672 21.3496V34.2049L36.5711 38.9495C37.2874 39.4973 38.3122 39.3607 38.86 38.6444C39.4078 37.9281 39.2712 36.9033 38.5549 36.3555Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_7_822" x1="6.90909" y1="13.8182" x2="52" y2="60.7273" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6FCE41"/>
+<stop offset="1" stop-color="#A1ED7C"/>
+</linearGradient>
+</defs>
+</svg>

src/views/home/components/echartsGradient.vue

@@ -0,0 +1,204 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.chart.setOption({
+        title: {
+          text: '',
+          show: true,
+          textStyle: {
+            color: '#333'
+          }
+        },
+        animation: false,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          selectedMode: false,
+          data: [
+            {
+              name:'用水',
+              icon: 'circle',
+              itemStyle: {
+                color: '#F4A72F'
+              },
+            },
+            {
+              name:'用电',
+              icon: 'circle',
+              itemStyle: {
+                color: '#1890FF',
+              }
+            }
+          ]
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+              noZero:false
+            },
+            type: 'category',
+            boundaryGap: false,
+            axisLabel: {color: "#333"},
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          }
+        ],
+        yAxis: [{
+          name: '用水单位: 方',
+          nameTextStyle: {color: '#333'},
+          type: "value",
+          min:0,
+          max:1000,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+            }
+          },
+          splitArea:{
+            show: false
+          },
+          axisLabel: {verticalAlign: "center", color: "#333"},
+          splitNumber: 5,
+        }, {
+          name: '用电单位: 度',
+          nameTextStyle: {color: '#333',padding:[0,0,0,0]},
+          type: "value",
+          min:0,
+          max:1000,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed'
+            }
+          },
+          splitArea:{
+            show: false
+          },
+          axisLabel: {verticalAlign: "center", color: "#333"},
+          splitNumber: 5,
+        }],
+        series: [
+          {
+            name: '用水',
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            symbolSize: 5,
+            showSymbol: false,
+            sampling: 'average',
+            lineStyle: {
+              width: 1,
+              color: '#F4A72F',
+              type: 'solid',
+            },
+            areaStyle: {
+              opacity: 0.5,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(244,167,47,0.5)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(244,167,47,0.1)'
+                }
+              ])
+            },
+            data: [0, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90]
+          },
+          {
+            name: '用电',
+            type: 'line',
+            smooth: true,      
+            symbol: 'circle',
+            symbolSize: 5,
+            sampling: 'average',
+            lineStyle: {
+              width: 1,
+              color: '#1890FF',
+              type: 'solid',
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 144, 255, 0.5)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(24, 144, 255, 0.1)'
+                }
+              ])
+            },
+            data: [420, 282, 111, 234, 220, 0, 310,120, 282, 111, 234, 220]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/home/components/echartsPie.vue

@@ -0,0 +1,157 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.setOption({
+        tooltip:{
+          show:false,
+        },
+        hoverAnimation: false,
+        title: {
+          text: '年度用水量分析',
+          subtext: '',
+          textStyle: {
+            color: '#333333',
+            fontSize: 16,
+            fontWeight: 700
+          },
+          subtextStyle: {
+            fontSize: 12,
+            color: '#333',
+            fontWeight: 700
+          }
+        },
+        tooltip: {
+          show: false,
+          trigger: 'item',
+          formatter: "{a} <br/>{b}: {c} ({d}%)"
+        },
+        animation: false,
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            center: ['25%', '50%'],
+            label: {
+              position: 'center',
+              show: true,
+              color: '#1E7CE8',
+              formatter: [
+                '{a|6,256 m³}',
+                '{b|已使用}',
+              ].join('\n'),
+              rich: {
+                a: {
+                  color: '#333333',
+                  fontWeight: 700,
+                  textAlign: 'center',
+                  fontSize: '22px', 
+                },
+                b: {
+                  color: '#999999',
+                  fontSize: '14px',
+                  fontWeight: '400',
+                  padding:[32,0,0,0]
+                }
+              },
+              textStyle: {
+                align: "center",
+                color: '#333',
+                fontWeight: 700,
+                fontSize: 16,
+                baseline: "middle"
+              },
+              lineHeight: 16,
+              fontSize: 12,
+            },
+            itemStyle: {
+              color: '#c23531',
+              shadowBlur: 200,
+              shadowColor: 'rgba(0, 0, 0, 0)'
+            },
+            emphasis: {
+              scale: false,
+              selectorLabel:{
+                show: false
+              },
+              itemStyle: {
+                color: 'inherit'
+              },
+              textStyle: {
+                fontSize: '30',
+                fontWeight: 'bold'
+              },
+              label: {
+                show: false,
+                fontWeight: 'bold'
+              },
+              disable:false,  //是否关闭扇区高亮效果
+              scale:false,    //扇区是否缩放
+              scaleSize:0, 
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: 'Direct',itemStyle:{color: '#1890FF'} },
+              { value: 1048, name: 'Direct2',itemStyle:{color: '#D9D9D9'} }
+            ]
+          }
+        ]
+      })
+      this.chart.on('mouseover',e=>{
+        let op = this.chart.getOption()
+        this.chart.dispatchAction({
+          type: 'downplay',
+          animation: false,
+          seriesIndex: 0,
+          dataIndex: e.dataIndex,
+          color: e.color
+        })
+        this.chart.setOption(op, true)
+      })
+    }
+  }
+}
+</script>

src/views/home/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <el-card>
+      <el-select
+        placeholder="区域选择"
+      >
+        <el-option
+          label=""
+          value=""
+        ></el-option>
+      </el-select>
+      
+      <el-select
+        style="margin-left:10px"
+        placeholder="年份"
+      >
+      <el-option
+        label="2023"
+        :value="year"
+      ></el-option>
+      </el-select>
+    </el-card>
+    <el-card>
+      <el-row :gutter="20"
+        v-for="item in list"
+        :key="item"
+      >
+      <el-col :span="4"
+        v-for="i in item"
+        :key="i"
+      >
+        <div class="card">
+          <img :src="i.imageSrc"/>
+          <div class="card_content_right">
+            <span>{{i.title}}</span>
+            <div>{{i.number}}</div>
+          </div>
+        </div>
+      </el-col>
+      </el-row>
+    </el-card>
+    <el-row :gutter="20">
+      <el-col :span="10">
+        <el-card class="pie-container">
+          <echartsPieVue/>
+          <div class="pie-right">
+            <div class="pie-item">
+              <span>额定水量：</span>
+              <span>6256 m³</span>
+            </div>
+            <div class="pie-item">
+              <span>剩余水量：</span>
+              <span>6256 m³</span>
+            </div>
+            <div class="pie-item">
+              <span>去年同期节水：</span>
+              <span>6256 m³</span>
+            </div>
+            <div class="pie-item">
+              <span>节水率：</span>
+              <span>6223456 m³</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="14">
+        <el-card>
+          <echartsGradient/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import numberWells from './assets/number_wells.svg'
+import electricity from './assets/electricity.svg'
+import moneyIcon from './assets/money_icon.svg'
+import waterYield from './assets/water_yield.svg'
+import person from './assets/person.svg'
+import area from './assets/area.svg'
+import water from './assets/water.svg'
+import time from './assets/time.svg'
+import echartsPieVue from './components/echartsPie.vue'
+import echartsGradient from './components/echartsGradient.vue'
+export default {
+  name: "Home",
+  props: {},
+  components:{
+    echartsPieVue,
+    echartsGradient
+  },
+  data() {
+    return{
+      areaSelect: '',
+      year: '2023',
+      list: [[{
+        imageSrc: electricity,
+        title: '水晶数目(口)',
+        number: 551 
+      },{
+        imageSrc: numberWells,
+        title: '使用电量(度)',
+        number: 551 
+      },{
+        imageSrc: waterYield,
+        title: '使用水量(方)',
+        number: 551 
+      },{
+        imageSrc: moneyIcon,
+        title: '使用金额(元)',
+        number: 551 
+      },{
+        imageSrc: person,
+        title: '用户数量(人)',
+        number: 551 
+      }],[{
+        imageSrc: moneyIcon,
+        title: '充值金额(元)',
+        number: 551 
+      },{
+        imageSrc: area,
+        title: '灌溉面积(亩)',
+        number: 551 
+      },{
+        imageSrc: water,
+        title: '亩均用水量(方)',
+        number: 551 
+      },{
+        imageSrc: moneyIcon,
+        title: '亩均用金额(元)',
+        number: 551 
+      },{
+        imageSrc: time,
+        title: '累计使用时间(H)',
+        number: 551 
+      }]]
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep.el-row{
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+  .el-col-4{
+    width: 20%;
+  }
+}
+.pie-container{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .pie-right{
+    position: absolute;
+    top: 30%;
+    left: 60%;
+    .pie-item{
+      margin: 10px 0;
+      color: #333;
+      font-variant-numeric: lining-nums tabular-nums;
+      font-family: Source Han Sans CN VF;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      span{
+        &:first-child{
+          display: inline-block;
+          width: 120px;
+          text-align: right;
+        }
+        &:nth-child(2){
+          display: inline-block;
+          width: 100px;
+          text-align: right;
+        }
+      }
+    }
+  }
+}
+.card{
+  width: 100%;
+  display: inline-flex;
+  padding: 18px 24px 18px 24px;
+  align-items: center;
+  border-radius: 4px;
+  background: #F5F7FA;
+  img{
+    margin-right:15px;
+  }
+  .card_content_right{
+    span{
+      color: #999;
+      font-variant-numeric: lining-nums tabular-nums;
+      font-family: Source Han Sans CN VF;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    div{
+      color: #333;
+      font-variant-numeric: lining-nums tabular-nums;
+      font-family: Source Han Sans CN VF;
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 22px;
+      margin-top:16px;
+    }
+  }
+}
+</style>

src/views/home/mixins/resize.js

@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}

src/views/infrastructure/components/dataReportLeft.vue

@@ -0,0 +1,87 @@
+<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 {
+    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

@@ -0,0 +1,188 @@
+<template>
+  <el-dialog
+    title="水权设置"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="950px"
+  >
+    <el-form
+      ref="baseForm"
+      class="base-form"
+      label-position="right"
+      label-width="130px"
+      :model="baseForm"
+      :rules="rules"
+      size="small"
+    >
+      <el-row>
+        <el-form-item label="电表品牌型号：" prop="productName">
+          <el-select
+            placeholder="请输入"
+            disabled
+            style="width:250px;"
+            v-model="textarea">
+          </el-select>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="区域：" prop="productName">
+          <el-select
+            placeholder="请输入"
+            disabled
+            style="width:250px;"
+            v-model="textarea">
+          </el-select>
+          <span>（上级组织：xxxx镇 总面积：56665亩 额定水权：6555m³ 剩余水权：6544）</span>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="面积：" prop="productName">
+          <el-input
+            placeholder="请输入"
+            v-model="textarea"
+            style="width:250px;"
+          >
+          </el-input>
+          <span style="margin-left:5px">亩</span>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="额定水权：" prop="productName">
+          <el-input
+            placeholder="请输入"
+            style="width:250px;"
+            v-model="textarea">
+          </el-input>
+          <span style="margin-left:5px">m³ （上年实际用水量：65546m³ 剩余水权：6555m³）</span>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="亩均水权：">
+          <el-input
+            placeholder="请输入"
+            style="width:250px;"
+            v-model="textarea">
+          </el-input>
+          <span style="margin-left:5px">亩/m³</span>
+        </el-form-item>
+      </el-row>
+    </el-form>
+
+    <div style="text-align: right">
+      <el-button type="info" plain @click="resetForm('baseForm')"
+        >取消</el-button
+      >
+      <el-button
+        type="primary"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { assign } from 'lodash-es';
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      hasFetched: 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' }
+        ]
+      }
+    };
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        if (val) {
+          assign(this.baseForm, this.data);
+          if (!this.hasFetched) {
+            this.hasFetched = true;
+          }
+        }
+      }
+    },
+    data: {
+      deep: true,
+      handler(val) {
+        assign(this.baseForm, val);
+      }
+    }
+  },
+  methods: {
+    resetForm(formName) {
+      this.dialogVisible = false;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    handleClose() {
+      this.$emit('update:visible', false);
+      this.resetForm('baseForm');
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.input-number {
+  width: 100%;
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/infrastructure/components/setAnnualWaterRight.vue

@@ -0,0 +1,349 @@
+<template>
+  <el-dialog
+    title="新增"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="660px"
+  >
+  <el-tooltip
+    class="item_tooltip" 
+    effect="dark"
+    content="操作提示：设置每亩农田同水量的水价信息和用电量的电价信息"
+    placement="right"
+  >
+    <i class="el-alert__icon el-icon-info"></i>
+  </el-tooltip>
+    <el-form
+      ref="baseForm"
+      class="base-form"
+      label-position="right"
+      label-width="125px"
+      :model="baseForm"
+      :rules="rules"
+      size="small"
+    >
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="所属区域：">
+          <el-row>
+            <el-col :span="24">
+              <el-select style="width: 100%" placeholder="请选择您的行政区">
+
+              </el-select>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <h3>水价</h3>
+      <el-col :span="24">
+        <el-form-item label="水价计费方式：">
+          <el-row>
+            <el-col :span="24">
+              <el-radio v-model="radio" label="1">备选项</el-radio>
+              <el-radio v-model="radio" label="2">备选项</el-radio>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="第1阶梯水价：">
+          <el-row>
+            <el-col :span="24">
+              <el-row>
+                <el-col :span="4">
+                  <el-input disabled/>
+                </el-col>
+                <el-col :span="2" style="display: flex;align-items:center">
+                  <div class="divider_center"></div>
+                </el-col>
+                <el-col :span="4" style="display:flex;align-items:center">
+                  <el-input/>
+                </el-col>
+                <el-col :span="2">
+                  <span style="margin:0 10px;">吨</span>
+                </el-col>
+                <el-col :span="8" style="display:flex">
+                  <el-input style="width: 50%;margin-right:10px;"/>元/吨
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="第2阶梯水价：">
+          <el-row>
+            <el-col :span="24">
+              <el-row>
+                <el-col :span="4">
+                  <el-input disabled/>
+                </el-col>
+                <el-col :span="2" style="display: flex;align-items:center">
+                  <div class="divider_center"></div>
+                </el-col>
+                <el-col :span="4" style="display:flex;align-items:center">
+                  <el-input/>
+                </el-col>
+                <el-col :span="2">
+                  <span style="margin:0 10px;">吨</span>
+                </el-col>
+                <el-col :span="8" style="display:flex">
+                  <el-input style="width: 50%;margin-right:10px;"/>元/吨
+                </el-col>
+                <el-col :span="2" v-if="!shouldShowThree">
+                  <span style="margin: 0 10px;">
+                    <i class="el-icon-delete-solid delete-icon"></i>
+                  </span>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="第3阶梯水价：" v-if="shouldShowThree">
+          <el-row>
+            <el-col :span="24">
+              <el-row>
+                <el-col :span="4">
+                  <el-input disabled/>
+                </el-col>
+                <el-col :span="2" style="display: flex;align-items:center">
+                  <div class="divider_center"></div>
+                </el-col>
+                <el-col :span="4" style="display:flex;align-items:center">
+                  <el-input/>
+                </el-col>
+                <el-col :span="2">
+                  <span style="margin:0 10px;">吨</span>
+                </el-col>
+                <el-col :span="8" style="display:flex">
+                  <el-input style="width: 50%;margin-right:10px;"/>元/吨
+                </el-col>
+                <el-col :span="2">
+                  <span style="margin: 0 10px;">
+                    <i class="el-icon-delete-solid delete-icon" @click="deleteIcon"></i>
+                  </span>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <div class="add" @click="handlerShowThree" v-if="!shouldShowThree">
+          <i class="el-icon-circle-plus-outline add-icon"></i>
+          添加
+        </div>
+      </el-col>
+    </el-row>
+    
+    <el-row>
+      <h3>电价</h3>
+      <el-col :span="24">
+        <el-form-item label="电价计费方式：">
+          <el-row>
+            <el-col :span="18">
+              <el-radio v-model="radio" label="1">备选项</el-radio>
+              <el-radio v-model="radio" label="2">备选项</el-radio>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="电价（元/度）：">
+          <el-row>
+            <el-col :span="18">
+              <el-input style="width: 100%">
+
+              </el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </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"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { assign } from 'lodash-es';
+export default {
+  name: 'setAnnualWaterRight',
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      shouldShowThree: false,
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      hasFetched: 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' }
+        ]
+      }
+    };
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        if (val) {
+          assign(this.baseForm, this.data);
+          if (!this.hasFetched) {
+            this.hasFetched = true;
+          }
+        }
+      }
+    },
+    data: {
+      deep: true,
+      handler(val) {
+        assign(this.baseForm, val);
+      }
+    }
+  },
+  methods: {
+    deleteIcon(){
+      this.shouldShowThree = false
+    },
+    // 关闭第三阶梯
+    handlerHideThree() {
+      this.shouldShowThree = false
+    },
+    // 打开第三阶梯
+    handlerShowThree() {
+      this.shouldShowThree = true
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetFormData();
+      this.dialogVisible = false;
+    },
+    resetFormData() {
+      this.baseForm = {};
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    handleClose() {
+      this.$emit('update:visible', false);
+      this.resetForm('baseForm');
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-form-item__label{
+  text-align: left !important;
+}
+::v-deep .el-tooltip__popper.is-dark {
+	background: #eeeeee;
+}
+
+::v-deep .el-popper.is-customized .el-popper__arrow::before {
+	background: #eeeeee;
+}
+.add{
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 4px;
+  border: 1px solid #14A478;
+  color:#14A478;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+  .add-icon{
+    font-size: 16px;
+    margin-right:2px;
+  }
+}
+.delete-icon{
+  font-size: 24px;
+  color:#FF5951;
+  margin-top:5px;
+  cursor: pointer;
+}
+.input-number {
+  width: 100%;
+}
+.item_tooltip{
+  position: absolute;
+  top: 25px;
+  left: 70px;
+  color: #00000066;
+}
+h3{
+  color: #303133;
+  font-family: Source Han Sans CN VF;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+}
+.divider_center{
+  width:100%;
+  height: 1px;
+  margin-top:16px;
+  margin: 16px 15px 0 15px;
+  background: #DCDFE6;
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/infrastructure/components/setPreferenc.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-dialog
+    title="参数设置"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1200px"
+  >
+    <el-form
+      ref="baseForm"
+      class="base-form"
+      label-position="right"
+      label-width="130px"
+      :model="baseForm"
+      :rules="rules"
+      size="small"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="电表品牌型号：" prop="productName">
+                <el-input
+                  placeholder="请输入"
+                  v-model="textarea">
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="电表品牌型号：" prop="productName">
+                <el-input
+                  placeholder="请输入"
+                  v-model="textarea">
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="24">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="计算模式：" prop="productName">
+                <el-input
+                  placeholder="请输入"
+                  v-model="textarea">
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="以电折水系数：" prop="productName">
+                <el-input
+                  placeholder="请输入"
+                  v-model="textarea">
+                </el-input>
+              </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"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { assign } from 'lodash-es';
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      hasFetched: 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' }
+        ]
+      }
+    };
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        if (val) {
+          assign(this.baseForm, this.data);
+          if (!this.hasFetched) {
+            this.hasFetched = true;
+          }
+        }
+      }
+    },
+    data: {
+      deep: true,
+      handler(val) {
+        assign(this.baseForm, val);
+      }
+    }
+  },
+  methods: {
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetFormData();
+      this.dialogVisible = false;
+    },
+    resetFormData() {
+      this.baseForm = {};
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    handleClose() {
+      this.$emit('update:visible', false);
+      this.resetForm('baseForm');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.input-number {
+  width: 100%;
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/infrastructure/components/waterPriceSetting.vue

@@ -0,0 +1,241 @@
+<template>
+  <el-dialog
+    title="设置年限"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="640px"
+  >
+    <el-form
+      ref="baseForm"
+      class="base-form"
+      label-position="right"
+      label-width="95px"
+      :model="baseForm"
+      :rules="rules"
+      size="small"
+    >
+      <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>
+          </el-row>
+        </el-col>
+        <el-col :span="24">
+          <el-row :gutter="5">
+            <el-col :span="18">
+              <el-checkbox v-model="checked">
+                <b>沿用上一年 </b>
+                <p class="label_text">（沿用上一年的情况下，所有区域都创建一个和上年同样的水权设置信息可修改；<br>不选沿用的情况下，所有区域重新为0，重新设置）</p>
+              </el-checkbox>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <div style="text-align: right;margin-top:30px;">
+      <el-button type="info" plain @click="resetForm('baseForm')"
+        >取消</el-button
+      >
+      <el-button
+        type="primary"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+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
+    }
+  },
+  data() {
+    return {
+      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      productList: [],
+      syinfoList: [],
+      processList: [],
+      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' }
+        ]
+      }
+    };
+  },
+  computed: {
+    goodsUnitLable: function () {
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {}
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetFormData();
+      this.dialogVisible = false;
+    },
+    resetFormData() {
+      this.baseForm = {};
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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 .base-form{
+  padding: 0;
+}
+::v-deep .el-checkbox{
+  margin-top: 10px;
+}
+::v-deep .el-checkbox__input{
+  margin-top: -75px;
+}
+::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
+  p{
+    color:#14A478;
+  }
+}
+.label_text{
+  width:550px;
+  padding:0;
+  margin:0;
+  color: #999;
+  font-size: 14px;
+}
+.input-number {
+  width: 100%;
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/infrastructure/deviceSetup.vue

@@ -0,0 +1,273 @@
+<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-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
+            >
+              <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="setPreferencHandler(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>
+    <set-preferencs
+      :visible.sync="associationManageShow"
+    />
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import DataReportLeft from './components/dataReportLeft.vue'
+import setPreferencs from './components/setPreferenc.vue'
+import { assign, omit } from 'lodash-es';
+
+export default {
+  components: { BTable,DataReportLeft,setPreferencs },
+  data() {
+    return {
+      dateValue:"",
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      columns: [
+        {
+          label: '水电双计编号',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '设备名称',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '水源名称',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '设备状态',
+          prop: 'phone',
+          customRender: 'status',
+          align: 'center'
+        },{
+          label: '累计用水量',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '累计用电量',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '更新时间',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created() {},
+  methods: {
+    setPreferencHandler() {
+      this.associationManageShow = true
+    },
+    setPreferences(row) {
+
+    },
+    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) {
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.status{
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  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

@@ -0,0 +1,265 @@
+<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-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
+            >
+              <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>
+    <set-annual-water-right :visible.sync="associationManageShow"/>
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import { assign, omit } from 'lodash-es';
+import setAnnualWaterRight from './components/setAnnualWaterRight.vue'
+
+export default {
+  components: { BTable,setAnnualWaterRight },
+  data() {
+    return {
+      dateValue:"",
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      columns: [
+        {
+          label: '行政区',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '是否阶梯水价',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          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: '电量（度）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '电价（元/度）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created() {},
+  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) {
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/infrastructure/waterEstablishment.vue

@@ -0,0 +1,269 @@
+<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-table-column
+                v-for="item in columns"
+                :key="item.id"
+                :prop="item.prop"
+                :label="item.label"
+              >
+              </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>
+    <set-annual-water-right :visible.sync="associationManageShow"/>
+    <recompose :visible.sync="recomposeShow"/>
+    <water-price-setting :visible.sync="waterprice"/>
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import setAnnualWaterRight from './components/setAnnualWaterRight.vue'
+import waterPriceSetting from './components/waterPriceSetting.vue'
+import recompose from './components/recompose.vue'
+import { assign, omit } from 'lodash-es';
+
+export default {
+  components: { BTable,setAnnualWaterRight, recompose,waterPriceSetting },
+  data() {
+    return {
+      dateValue:"",
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      recomposeShow: false,
+      associationManageShow: false,
+      waterprice: false,
+      columns: [
+        {
+          label: '年度',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '行政区',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '灌区总面积（亩）',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '初始水权（m³）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '亩均水权（亩/立方）',
+          prop: 'phone',
+          customRender: '',
+          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: {
+    setAnnualWaterRight() {
+      this.waterprice = true
+    },
+    loadData(parameter) {
+      const queryform = this.form;
+      const payload = omit(assign({}, parameter, queryform, {orderByColumn:'tarcecodeapplyCreateddate',isAsc:'desc'}), []);
+      return this.getTableData(payload);
+    },
+    getTableData(payload) {
+      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>
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/monitoringMamage/components/IrrigationRecord.vue

@@ -0,0 +1,363 @@
+<template>
+  <el-dialog
+    title="灌溉记录"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1200px"
+  >
+  <div style="margin-bottom: 20px">
+    <span>农户姓名：</span>
+    <el-input
+      v-model="form.tarcecodeapplyno"
+      style="width: 250px;margin:0 15px;"
+      placeholder="请i输入农户编号/姓名/电话"
+      @keyup.enter.native="handleSearch"
+      clearable
+    />
+    <span>时间：</span>
+    <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>
+  <b-table
+    ref="tableRef"
+    :args="{ 'highlight-current-row': true }"
+    :data="loadData"
+    :columns="columns"
+  >
+    <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 #number="scope">
+      <div>1</div>
+      <div>2</div>
+      {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+    </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>
+  </b-table>
+  </el-dialog>
+</template>
+
+<script>
+import { assign, omit } from 'lodash-es';
+import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+import LeftImg from '../assets/img.svg'
+import BTable from '@/components/Table'
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      LeftImg: LeftImg,
+      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      columns: [
+        {
+          label: '行政区',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '农户',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '手机号',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '计量模式',
+          prop: 'phone',
+          customRender: 'number',
+          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: '用电金额',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '开泵时间',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '关泵时间',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '灌溉时长',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        }
+      ],
+      form: {
+        productName: ''
+      },
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      productList: [],
+      syinfoList: [],
+      processList: [],
+      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' }
+        ]
+      }
+    };
+  },
+  components:{
+    BTable
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {
+    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: '上海市普陀区金沙<br>江路 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 弄'
+          }]
+      })
+    },
+    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.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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>
+.input-number {
+  width: 100%;
+}
+h3{
+  height: 14px;
+  color: #333333;
+  font-size: 14px;
+  font-weight: 700;
+  margin:0 0 20px 0;
+}
+.right_content{
+  margin-bottom: 10px;
+  label{
+    color: #999;
+    font-size: 14px;
+    font-weight: 400;
+  }
+  span{
+    color: #333333;
+    font-size: 14px;
+  }
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/monitoringMamage/components/dataReportLeft.vue

@@ -0,0 +1,87 @@
+<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 {
+    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/echartsPie.vue

@@ -0,0 +1,134 @@
+<template>
+  <div :class="className" style="height: 160px;width:160px" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.setOption({
+        tooltip:{
+          show:false,
+        },
+        hoverAnimation: false,
+        title: {
+          text: '',
+          subtext: '',
+          x: 'center',
+          y: 'center',
+          top: '36%',
+          textStyle: {
+            fontSize: 12,
+          },
+          subtextStyle: {
+            fontSize: 12,
+            color: '#333',
+            fontWeight: 700
+          }
+        },
+        animation: false,
+        series: [
+          {
+            type: 'pie',
+            center: [45,45],
+            radius: ['48%', '55%'],
+            label: {
+              position: 'center',
+              show: true,
+              color: '#1E7CE8',
+              formatter: ['{a|60}%','{b|实际用水量}'].join('\n'),
+              rich: {
+                a: {
+                  fontSize:'22px',
+                },
+                b:{
+                  color: '#333333',
+                  fontSize: '12px',
+                  padding:[10,0,0,0]
+                }
+              },
+              textStyle: {
+                align: "center",
+                color: '#333',
+                fontSize: 12,
+                baseline: "middle"
+              },
+              lineHeight: 16,
+              fontSize: 12,
+            },
+            itemStyle: {
+              color: '#c23531',
+              shadowBlur: 200,
+              shadowColor: 'rgba(0, 0, 0, 0)'
+            },
+            emphasis: {
+              scale: false,
+              selectorLabel:{
+                show: false
+              },
+              itemStyle: {
+                color: 'inherit'
+              },
+              textStyle: {
+                fontSize: '30',
+                fontWeight: 'bold'
+              },
+              label: {
+                show: false,
+                fontWeight: 'bold'
+              },
+              disable:false,  //是否关闭扇区高亮效果
+              scale:false,    //扇区是否缩放
+              scaleSize:0, 
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: 'Direct',itemStyle:{color: '#1890FF'} },
+              { value: 1048, name: 'Direct2',itemStyle:{color: '#D9D9D9'} }
+            ]
+          }
+        ]
+      })
+      this.chart.on('mouseover',e=>{
+        let op = this.chart.getOption()
+        this.chart.dispatchAction({
+          type: 'downplay',
+          animation: false,
+          seriesIndex: 0,
+          dataIndex: e.dataIndex,
+          color: e.color
+        })
+        this.chart.setOption(op, true)
+      })
+    }
+  }
+}
+</script>

src/views/monitoringMamage/components/realTimeMonitor.vue

@@ -0,0 +1,382 @@
+<template>
+  <el-dialog
+    title="实时检测"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1200px"
+  >
+  <h3>淮河社区居民委员会机井(6544425)</h3>
+  <el-row style="margin-bottom: 20px;">
+    <el-col :span="6">
+      <el-image :src="LeftImg"/>
+    </el-col>
+    <el-col :span="18">
+      <el-row class="right_content">
+        <el-col :span="6">
+          <label>设备状态：</label>
+          <span>在线</span>
+        </el-col>
+        <el-col :span="12">
+          <label>水泵：</label>
+          <span>开</span>
+        </el-col>
+      </el-row>
+      <div class="right_content">
+        <label>详细地址：</label>
+        <span>河南省/郑州市/二七区/淮河路街道/淮河社区居民委员会</span>
+      </div>
+      <el-row class="right_content">
+        <el-col :span="6">
+          <label>计量模式：</label>
+          <span>水电双计</span>
+        </el-col>
+        <el-col :span="12">
+          <label>水泵功率：</label>
+          <span>3W</span>
+        </el-col>
+      </el-row>
+      <div class="right_content" style="margin:0">
+        <label>灌溉面积：</label>
+        <span>125亩</span>
+      </div>
+    </el-col>
+  </el-row>
+  <h3>实时数据</h3>
+  <b-table
+    ref="tableRef"
+    :args="{ 'highlight-current-row': true }"
+    :data="loadData"
+    :columns="columns"
+    isShowIndex
+    :showPagination="false"
+  >
+    <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="realTime(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>
+
+    <div style="text-align: right;margin-top:20px">
+      <el-button type="info" plain @click="resetForm('baseForm')"
+        >取消</el-button
+      >
+      <el-button
+        type="primary"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { assign, omit } from 'lodash-es';
+import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+import LeftImg from '../assets/img.svg'
+import BTable from '@/components/Table'
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      LeftImg: LeftImg,
+      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      columns: [
+        {
+          label: '农户姓名',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '手机号',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '瞬时流量( m³/s)',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '累计流量(m³)',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '电压(v)',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '水位(m)',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '状态',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '上传时间',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        }
+      ],
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      productList: [],
+      syinfoList: [],
+      processList: [],
+      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' }
+        ]
+      }
+    };
+  },
+  components:{
+    BTable
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {
+    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 弄'
+          }]
+      })
+    },
+    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.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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>
+.input-number {
+  width: 100%;
+}
+h3{
+  height: 14px;
+  color: #333333;
+  font-size: 14px;
+  font-weight: 700;
+  margin:0 0 20px 0;
+}
+.right_content{
+  margin-bottom: 10px;
+  label{
+    color: #999;
+    font-size: 14px;
+    font-weight: 400;
+  }
+  span{
+    color: #333333;
+    font-size: 14px;
+  }
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/monitoringMamage/index.vue

@@ -0,0 +1,312 @@
+<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>
+                  </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>
+          </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="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>
+      </el-col>
+    </el-row>
+    <real-time-monitor :visible.sync="realTimeShow"/>
+    <irrigation-record :visible.sync="irrigationShow" />
+  </div>
+</template>
+
+<script>
+import EchartsPie from './components/echartsPie.vue'
+import BTable from '@/components/Table/index.vue';
+import DataReportLeft from './components/dataReportLeft.vue'
+import realTimeMonitor from './components/realTimeMonitor.vue';
+import IrrigationRecord from './components/IrrigationRecord.vue';
+import { assign, omit } from 'lodash-es';
+
+export default {
+  components: { BTable,DataReportLeft,EchartsPie,realTimeMonitor,IrrigationRecord },
+  data() {
+    return {
+      imgUrl: '',
+      form: {
+        productName: ''
+      },
+      dataList: [{
+        title: '在线',
+        number: 551,
+        styleClass: 'radius'
+      },{
+        title: '运行',
+        number: 551,
+        styleClass: 'radius run'
+      },{
+        title: '故障',
+        number: 551,
+        styleClass: 'radius error'
+      },{
+        title: '告警',
+        number: 551,
+        styleClass: 'radius waring'
+      },{
+        title: '离线',
+        number: 551,
+        styleClass: 'radius noliving'
+      }],
+      loading: false,
+      associationManageShow: false,
+      realTimeShow: false,
+      irrigationShow: false,
+      columns: [
+        {
+          label: '水电双计编号',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '设备名称',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '水源名称',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '设备状态',
+          prop: 'phone',
+          customRender: 'status',
+          align: 'center'
+        },{
+          label: '累计用水量',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '累计用电量',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '更新时间',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          width: 200,
+          align: 'center'
+        }
+      ]
+    };
+  },
+  methods: {
+    irrigationShowHistory() {
+      this.irrigationShow = true
+    },
+    realTime() {
+      this.realTimeShow = 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)
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './monitoringMamage.scss'
+</style>

src/views/monitoringMamage/monitoringMamage.scss

@@ -0,0 +1,135 @@
+.right_width{
+  width: 20%;
+}
+.radius_container{
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom:8px;
+  .radius{
+    position: absolute;
+    left:-16px;
+    top: 10px;
+    display: inline-block;
+    width:8px;
+    height:8px;
+    border-radius: 50%;
+    background: #1890FF;
+  }
+  .label{
+    color: #666;
+    font-variant-numeric: lining-nums tabular-nums;
+    font-family: Source Han Sans CN VF;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}
+.title{
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-top:-500px;
+  z-index: 100;
+  .radius{
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #14A478;
+    left: -16px;
+  }
+  
+}
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.left{
+  width: 100%;
+  height: 80px;
+  border-radius: 4px;;
+  background: #F5F7FA;
+  color: #333;
+  font-variant-numeric: lining-nums tabular-nums;
+  font-family: Source Han Sans CN VF;
+  font-style: normal;
+  padding-left: 34%;
+  span{
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 400;
+    padding-top: 10px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    .radius{
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #14A478;
+      left: -16px;
+    }
+    .run{
+      background: #1890FF;
+    }
+    .error{
+      background: #F4A72F;
+    }
+    .waring{
+      background: #FF5951;
+    }
+    .noliving{
+      background:rgba(0, 0, 0, 0.26);
+      }
+  }
+  div{
+    font-size: 32px;
+    font-weight: 500;
+  }
+}
+.status{
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  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

@@ -0,0 +1,363 @@
+<template>
+  <el-dialog
+    title="灌溉记录"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1200px"
+  >
+  <div style="margin-bottom: 20px">
+    <span>农户姓名：</span>
+    <el-input
+      v-model="form.tarcecodeapplyno"
+      style="width: 250px;margin:0 15px;"
+      placeholder="请i输入农户编号/姓名/电话"
+      @keyup.enter.native="handleSearch"
+      clearable
+    />
+    <span>时间：</span>
+    <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>
+  <b-table
+    ref="tableRef"
+    :args="{ 'highlight-current-row': true }"
+    :data="loadData"
+    :columns="columns"
+  >
+    <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 #number="scope">
+      <div>1</div>
+      <div>2</div>
+      {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
+    </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>
+  </b-table>
+  </el-dialog>
+</template>
+
+<script>
+import { assign, omit } from 'lodash-es';
+import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+import LeftImg from '../assets/img.svg'
+import BTable from '@/components/Table'
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      LeftImg: LeftImg,
+      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      columns: [
+        {
+          label: '行政区',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '农户',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '手机号',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '计量模式',
+          prop: 'phone',
+          customRender: 'number',
+          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: '用电金额',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '开泵时间',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '关泵时间',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '灌溉时长',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        }
+      ],
+      form: {
+        productName: ''
+      },
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      productList: [],
+      syinfoList: [],
+      processList: [],
+      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' }
+        ]
+      }
+    };
+  },
+  components:{
+    BTable
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {
+    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: '上海市普陀区金沙<br>江路 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 弄'
+          }]
+      })
+    },
+    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.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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>
+.input-number {
+  width: 100%;
+}
+h3{
+  height: 14px;
+  color: #333333;
+  font-size: 14px;
+  font-weight: 700;
+  margin:0 0 20px 0;
+}
+.right_content{
+  margin-bottom: 10px;
+  label{
+    color: #999;
+    font-size: 14px;
+    font-weight: 400;
+  }
+  span{
+    color: #333333;
+    font-size: 14px;
+  }
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/peasantHouseholdManage/components/addedFarmers.vue

@@ -0,0 +1,349 @@
+<template>
+  <el-dialog
+    title="农户管理"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="700px"
+  >
+    <el-form
+      ref="baseForm"
+      class="base-form"
+      label-position="right"
+      label-width="95px"
+      :model="baseForm"
+      :rules="rules"
+      size="small"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="所属区域" prop="productName">
+            <el-row>
+              <el-col :span="24">
+                <el-select placeholder="请选择区域" style="width:100%">
+                </el-select>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-col>
+            <el-row class="area">
+              <el-col :span="6">
+                <label>总面积：</label>65446亩
+              </el-col>
+              <el-col :span="6">
+                <label>总水权：</label>65446m³
+              </el-col>
+              <el-col :span="6">
+                <label>亩产水权：</label>65446亩/m³
+              </el-col>
+              <el-col :span="6">
+                <label>剩余水权：</label>65446m³
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-col>
+        <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-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="8位数字（不能重复）自动生成"
+                    >
+                    </el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </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-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="8位数字（不能重复）自动生成"
+                    >
+                    </el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </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-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"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { assign } from 'lodash-es';
+import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      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: [],
+      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' }
+        ]
+      }
+    };
+  },
+  computed: {
+    goodsUnitLable: function () {
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {}
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetFormData();
+      this.dialogVisible = false;
+    },
+    resetFormData() {
+      this.baseForm = {};
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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>
+.input-number {
+  width: 100%;
+}
+.area{
+  margin:0 0 20px 20px;
+  label{
+    color:#999;
+    font-weight: 400;
+    font-size: 14px;
+  }
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+.history{
+  text-align: right;
+  line-height: 32px;
+  span{
+    color:rgb(20, 164, 120);
+    cursor: pointer;
+  }
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/peasantHouseholdManage/components/dataReportLeft.vue

@@ -0,0 +1,87 @@
+<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 {
+    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

@@ -0,0 +1,465 @@
+<template>
+  <el-dialog
+    title="农户信息"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="800px"
+  >
+  <div>
+    <h2>农户基础信息</h2>
+    <el-row>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="6">
+            <div class="label">
+              <span>
+                行政区
+              </span>
+            </div>
+          </el-col>
+          <el-col :span="18">
+            <div class="content">
+              <span>河南省郑州市金水区XXXXXX</span>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row>
+          <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>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="6">
+            <div class="label">
+              <span>
+                农户姓名
+              </span>
+            </div>
+          </el-col>
+          <el-col :span="18">
+            <div class="content">
+              <span>张三</span>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row>
+          <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>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="6">
+            <div class="label">
+              <span>
+                手机号
+              </span>
+            </div>
+          </el-col>
+          <el-col :span="18">
+            <div class="content">
+              <span>15986858555</span>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row>
+          <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>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="6">
+            <div class="label_last">
+              <span>
+                水权数量
+              </span>
+            </div>
+          </el-col>
+          <el-col :span="18">
+            <div class="content_last">
+              <span>25m³</span>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="6">
+            <div class="label_last no_left_border">
+              <span>
+                剩余水权
+              </span>
+            </div>
+          </el-col>
+          <el-col :span="18">
+            <div class="content_last">
+              <span>25m³</span>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+  <div>
+    <h3>农户基础信息</h3>
+    <b-table
+    ref="tableRef"
+    :args="{ 'highlight-current-row': true }"
+    :data="loadData"
+    :columns="columns"
+    isShowIndex
+    :showPagination="false"
+  >
+    <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>
+  </b-table>
+  </div>
+  <div style="text-align: right;margin-top: 20px">
+    <el-button type="info" plain @click="resetForm('baseForm')"
+      >取消</el-button
+    >
+    <el-button
+      type="primary"
+      @click="submitForm('baseForm')"
+      :disabled="dialogSubmitLoading"
+      :loading="dialogSubmitLoading"
+      >确定</el-button
+    >
+  </div>
+  </el-dialog>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import { assign, omit } from 'lodash-es';
+import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components:{
+    BTable
+  },
+  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: [],
+      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' }
+        ]
+      },
+      columns: [
+        {
+          label: '卡号',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '卡状态',
+          prop: 'area',
+          customRender: 'status',
+          align: 'center'
+        },
+        {
+          label: '卡余额',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  computed: {
+    goodsUnitLable: function () {
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {
+    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 弄'
+        }]
+      })
+    },
+    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;
+    },
+
+    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>
+.label{
+  width: 100%;
+  padding: 10px 0;
+  border:1px solid rgb(187, 187, 187);
+  border-bottom:0;
+  text-align: center;
+  color: #666666;
+  font-size: 14px;
+  font-weight: 400;
+  span{
+    padding-left:5px;
+  }
+}
+.content{
+  width:100%;
+  padding: 10px 0;
+  border:1px solid rgb(187, 187, 187);
+  border-bottom:0;
+  border-left:0;
+  span{
+    padding-left:15px;
+  }
+}
+.label_last{
+  width: 100%;
+  padding: 10px 0;
+  text-align: center;
+  border:1px solid rgb(187, 187, 187);
+  color: #666666;
+  font-size: 14px;
+  font-weight: 400;
+  span{
+    padding-left:5px;
+  }
+}
+.status{
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: red;
+  margin-right: 5px;
+}
+.content_last{
+  width:100%;
+  padding: 10px 0;
+  border:1px solid rgb(187, 187, 187);
+  border-left:0;
+  span{
+    padding-left:15px;
+  }
+}
+.no_left_border{
+  border-left:0;
+}
+</style>
+

src/views/peasantHouseholdManage/components/report.vue

@@ -0,0 +1,237 @@
+<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
+              >
+            </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>
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import { assign, omit } from 'lodash-es';
+
+export default {
+  name:"waterManage",
+  components: { BTable},
+  data() {
+    return {
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      columns: [
+        {
+          label: '用户协议会名称',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '管理区域',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '负责人',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '电话',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created() {},
+  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) {
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/peasantHouseholdManage/index.vue

@@ -0,0 +1,310 @@
+<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
+                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 #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>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import DataReportLeft from './components/dataReportLeft.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';
+
+export default {
+  components: { BTable,DataReportLeft,AddedFarmers,FarmerManagement,IrrigationRecord },
+  data() {
+    return {
+      visibles: false,
+      dateValue:"",
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      farmerManageShow: false,
+      irrigationShow: false,
+      columns: [
+        {
+          label: '农户编号',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '农户姓名',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '农户身份证',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '联系电话',
+          prop: 'phone',
+          customRender: 'status',
+          align: 'center'
+        },{
+          label: '种植面积（亩）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '水权数量（立方）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '剩余水权（立方）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          width: 200,
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created() {},
+  methods: {
+    closePopOver(flag) {
+      this.visible = flag
+    },
+    irrigationShowHistory() {
+      this.irrigationShow = true
+    },
+    // 详情
+    showDetails(row){
+      this.farmerManageShow = true
+    },
+    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) {
+      this.visibles = true
+    },
+    deleteRow() {
+      this.visibles = true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.status{
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  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

@@ -0,0 +1,292 @@
+<template>
+  <el-dialog
+    title="协会管理"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1200px"
+  >
+    <el-form
+      ref="baseForm"
+      class="base-form"
+      label-position="right"
+      label-width="95px"
+      :model="baseForm"
+      :rules="rules"
+      size="small"
+    >
+      <el-row :gutter="10">
+        <el-col :span="24">
+          <el-form-item label="用户名：" prop="productName">
+            <el-row :gutter="5">
+              <el-col :span="18">
+                <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="18">
+                <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-row :gutter="5">
+              <el-col :span="18">
+                <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="18">
+                <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="18">
+                <el-input
+                  disabled
+                  v-model="textarea">
+                </el-input>
+              </el-col>
+            </el-row>
+          </el-form-item>
+        </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"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { assign } from 'lodash-es';
+import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      productList: [],
+      syinfoList: [],
+      processList: [],
+      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' }
+        ]
+      }
+    };
+  },
+  computed: {
+    goodsUnitLable: function () {
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {}
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetFormData();
+      this.dialogVisible = false;
+    },
+    resetFormData() {
+      this.baseForm = {};
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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>
+.input-number {
+  width: 100%;
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/waterCardManage/components/dataDetail.vue

@@ -0,0 +1,312 @@
+<template>
+  <el-dialog
+    title="基础信息"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1200px"
+  >
+  <el-row>
+    <el-col :span="5">
+      <span class="label"><span>IC卡卡号：</span>654155444</span>
+    </el-col>
+    <el-col :span="5">
+      <span class="label"><span>农户姓名：</span>张三</span></el-col>
+    <el-col :span="5">
+      <span class="label"><span>卡状态：</span>正常</span></el-col>
+    <el-col :span="4">
+      <span class="label"><span>办卡时间：</span>2022-02-15</span></el-col>
+    <el-col :span="5">
+      <span class="label"><span>所属区域：</span>2022-02-15 </span></el-col>
+  </el-row>
+  <el-row style="margin: 20px 0">
+    <el-col :span="5">
+      <span class="label"><span>总用水量：</span>65444 m³</span>
+    </el-col>
+    <el-col :span="5">
+      <span class="label"><span>总用电量：</span>65444 m³</span></el-col>
+  </el-row>
+  <div style="text-align:right;position:relative">
+    <el-date-picker
+      v-model="value1"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
+    </el-date-picker>
+    <el-button type="primary" style="margin-left:10px;">查询</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="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>
+        </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="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>
+        </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-dialog>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import { assign } from 'lodash-es';
+import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components:{
+    BTable
+  },
+  data() {
+    return {
+      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      productList: [],
+      syinfoList: [],
+      processList: [],
+      hasFetched: false,
+      landList: [], //基地列表
+      columns: [
+        {
+          label: 'IC卡号',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '充值金额（元）',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '充值后金额（元）',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '充值时间',
+          prop: 'phone',
+          customRender: 'status',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  computed: {
+    goodsUnitLable: function () {
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {}
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetFormData();
+      this.dialogVisible = false;
+    },
+    resetFormData() {
+      this.baseForm = {};
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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.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/components/dataReportLeft.vue

@@ -0,0 +1,87 @@
+<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 {
+    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

@@ -0,0 +1,351 @@
+<template>
+  <el-dialog
+    title="充值信息"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="600px"
+  >
+    <el-form
+      ref="baseForm"
+      class="base-form"
+      label-position="right"
+      label-width="80px"
+      :model="baseForm"
+      :rules="rules"
+      size="small"
+    >
+      <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-row>
+              <el-col :span="24">
+                <el-input
+                  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="用户名" prop="stockAmount">
+            <el-row>
+              <el-col :span="24">
+                <el-input
+                  v-model="baseForm.sourceinfoId"
+                  filterable
+                  style="width: 100%"
+                  placeholder="用户名"
+                />
+              </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">
+            0 元
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col :span="24">
+          <el-form-item label="充值金额" prop="supplierId">
+            <el-row>
+              <el-col :span="24">
+                <el-input
+                  placeholder="充值金额"
+                  style="width: 100px;margin-right: 10px"
+                  v-model="textarea">
+                </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="支付方式" prop="supplierId">
+            <div>
+              <span @click="() => changePayType('pay')" :class="payType === 'pay' ? 'xianjin_pay_action' : ''" class="pay">
+                <div class="img_container">
+                  <img :src="cash" class="icon"/>
+                  现金支付
+                </div>
+              </span>
+              <span  @click="() => changePayType('weixin')" :class="payType === 'weixin' ? 'weixin_pay_action' : ''" class="pay">
+                <div class="img_container">
+                  <img :src="weixin" class="icon"/>
+                  微信支付
+                  <img :src="weixinRightBottom" class="bottomRight" v-if="payType === 'weixin'"/>
+                </div>
+              </span>
+              <span  @click="() => changePayType('zhifubao')" :class="payType === 'zhifubao' ? 'zhifubao_pay_action' : ''" class="pay">
+                <div class="img_container">
+                <img :src="zhifubao" class="icon_zfb"/>
+              </div>
+              </span>
+            </div>
+          </el-form-item>
+        </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"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+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'
+import zhifubao from '../assets/zhifubao.svg'
+import weixinRightBottom from '../assets/weixin_right_bottom.svg'
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      weixinRightBottom:weixinRightBottom,
+      payType: 'pay',
+      cash: cash,
+      weixinAction:weixinAction,
+      weixin: weixin,
+      zhifubao: zhifubao,
+      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      productList: [],
+      syinfoList: [],
+      processList: [],
+      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' }
+        ]
+      }
+    };
+  },
+  computed: {
+    goodsUnitLable: function () {
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {}
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetFormData();
+      this.dialogVisible = false;
+    },
+    resetFormData() {
+      this.baseForm = {};
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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>
+.input-number {
+  width: 100%;
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+.img_container{
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  color: #333333;
+  font-size: 14px;
+  font-weight: 400;
+  .bottomRight{
+    position: absolute;
+    right:0;
+    bottom:0;
+  }
+  .icon{
+    margin:0 8px 0 8px;
+  }
+  .icon_zfb{
+    margin-left: -12px;
+  }
+}
+.xianjin_pay_action{
+  border: 1px solid #F4A72F !important;
+}
+.weixin_pay_action{
+  border: 1px solid #14A478 !important;
+}
+.zhifubao_pay_action{
+  border: 1px solid #35B4FD !important;
+}
+.pay{
+  display: block;
+  width: 124px;
+  height: 40px;
+  line-height: 40px;
+  margin-bottom: 7px;
+  text-align: center;
+  border-radius: 5px;
+  border:1px solid #e4e7ed;
+  cursor: pointer;
+  align-items: center;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/waterCardManage/components/report.vue

@@ -0,0 +1,237 @@
+<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
+              >
+            </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>
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import { assign, omit } from 'lodash-es';
+
+export default {
+  name:"waterManage",
+  components: { BTable},
+  data() {
+    return {
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      columns: [
+        {
+          label: '用户协议会名称',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '管理区域',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '负责人',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '电话',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created() {},
+  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) {
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/index.vue

@@ -0,0 +1,322 @@
+<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
+                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-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>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import DataReportLeft from './components/dataReportLeft.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';
+
+export default {
+  components: { BTable,DataReportLeft,AddedICCard,RechargeCard,DataDetail, DataDetail },
+  data() {
+    return {
+      dateValue:"",
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      dataDetailShow: false,
+      rechargeShow: false,
+      columns: [
+        {
+          label: 'IC卡号',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '农户号',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '农户姓名',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: 'IC卡状态',
+          prop: 'phone',
+          customRender: 'status',
+          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: '操作',
+          customRender: 'operate',
+          width: 300,
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created() {},
+  methods: {
+    addICard() {
+      this.associationManageShow = true
+    },
+    loadData(parameter) {
+      const queryform = this.form;
+      const payload = omit(assign({}, parameter, queryform, {orderByColumn:'tarcecodeapplyCreateddate',isAsc:'desc'}), []);
+      return this.getTableData(payload);
+    },
+    changeDataDetailShow() {
+      this.dataDetailShow = true
+    },
+    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)
+    },
+    recharge(row) {
+      this.rechargeShow = true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+.status{
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  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

@@ -0,0 +1,286 @@
+<template>
+  <el-dialog
+    title="协会管理"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="600px"
+  >
+    <el-form
+      ref="baseForm"
+      class="base-form"
+      label-position="right"
+      label-width="95px"
+      :model="baseForm"
+      :rules="rules"
+      size="small"
+    >
+      <el-row :gutter="10">
+        <el-col :span="24">
+          <el-form-item label="协会名称：" prop="productName">
+            <el-row :gutter="5">
+              <el-col :span="23">
+                <el-input
+                  type="input"
+                  :autosize="{ minRows: 2}"
+                  placeholder="请输入协会名称"
+                  v-model="textarea">
+                </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-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-input
+                  type="textarea"
+                  style="margin-top:10px"
+                  :autosize="{ minRows: 2}"
+                  placeholder="请选择管辖范围"
+                  disabled
+                  v-model="textarea">
+                </el-input>
+              </el-col>
+            </el-row>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="14">
+          <el-form-item label="负责人：" prop="stockAmount">
+            <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-input
+                  type="textarea"
+                  :autosize="{ minRows: 4}"
+                  placeholder="请输入协会介绍"
+                  maxlength="500"
+                  show-word-limit
+                  v-model="textarea">
+                </el-input>
+              </el-col>
+            </el-row>
+          </el-form-item>
+        </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"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { assign } from 'lodash-es';
+import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      productList: [],
+      syinfoList: [],
+      processList: [],
+      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' }
+        ]
+      }
+    };
+  },
+  computed: {
+    goodsUnitLable: function () {
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {}
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetFormData();
+      this.dialogVisible = false;
+    },
+    resetFormData() {
+      this.baseForm = {};
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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>
+.input-number {
+  width: 100%;
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/waterManage/index.vue

@@ -0,0 +1,246 @@
+<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
+              >
+            </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>
+    <association-manage :visible.sync="associationManageShow"/>
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import AssociationManage from './component/associationManage.vue'
+import { assign, omit } from 'lodash-es';
+
+export default {
+  name:"waterManage",
+  components: { BTable,AssociationManage},
+  data() {
+    return {
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      columns: [
+        {
+          label: '用户协议会名称',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '管理区域',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '负责人',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '电话',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created() {},
+  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) {
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/waterMarket/component/waterDeal.vue

@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    title="水权交易"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1200px"
+  >
+  <el-row class="tab-wea-info">
+    <el-col :span="7">
+      <el-card class="box-card">
+        <div slot="header">
+          <span>卖方信息</span>
+        </div>
+        <div>
+          用水户：<el-select></el-select>
+        </div>
+        <div class="item">
+          区域：
+        </div>
+        <div class="item">
+          已分配水权：
+        </div>
+        <div class="item">
+          可用水权：
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="7" :offset="1">
+      <el-card class="box-card">
+        <div slot="header">
+          <span>买方信息</span>
+        </div>
+        <div>
+          用水户：<el-select></el-select>
+        </div>
+        <div class="item">
+          区域：
+        </div>
+        <div class="item">
+          已分配水权：
+        </div>
+        <div class="item">
+          可用水权：
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="7" :offset="1">
+      <el-card class="box-card">
+        <div slot="header">
+          <span>交易信息</span>
+        </div>
+        <div>
+          交易水量：<el-input style="width: 75%"/>
+        </div>
+        <div class="item">
+          交易价格：<el-input style="width: 75%"/>
+        </div>
+        <div class="item">
+          交易金额：100
+        </div>
+        <div style="text-align:right;margin-top:50px">
+          <el-button type="info" plain @click="resetForm('baseForm')"
+          >取消</el-button
+        >
+          <el-button
+            size="small"
+            :underline="false"
+            type="primary"
+            style="margin-right: 10px"
+            @click="download(scope.row)"
+            >确认交易</el-button
+          >
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { assign } from 'lodash-es';
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+    };
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        if (val) {
+          assign(this.baseForm, this.data);
+          if (!this.hasFetched) {
+            this.hasFetched = true;
+          }
+        }
+      }
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    resetForm(formName) {
+      this.dialogVisible = false;
+    },
+    handleClose() {
+      this.$emit('update:visible', false);
+      this.resetForm('baseForm');
+    },
+  }
+};
+</script>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+.el-card{
+  height: 300px;
+}
+.item{
+  margin: 10px 0;
+}
+</style>

src/views/waterMarket/index.vue

@@ -0,0 +1,258 @@
+<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-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"
+                >
+                  <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>
+    <water-deal :visible.sync="associationManageShow"/>
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import { assign, omit } from 'lodash-es';
+import WaterDeal from './component/waterDeal.vue'
+
+export default {
+  components: { BTable,WaterDeal},
+  data() {
+    return {
+      dateValue:"",
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      associationManageShow: false,
+      columns: [
+        {
+          label: '卖方农户',
+          prop: 'person',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '买房农户',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '交易水量',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '交易价格（元/m³）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '成交金额（元）',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '成交时间',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created() {},
+  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) {
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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/waterSubsidy/components/newPolicy.vue

@@ -0,0 +1,260 @@
+<template>
+  <el-dialog
+    title="政策信息"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1200px"
+    height="800px"
+  >
+    <el-form
+      ref="baseForm"
+      class="base-form"
+      label-position="right"
+      label-width="130px"
+      :model="baseForm"
+      :rules="rules"
+      size="small"
+    >
+      <el-row>
+        <el-form-item label="标题：" prop="productName">
+          <el-input
+            placeholder="请输入"
+            v-model="textarea">
+          </el-input>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="图片：" prop="productName">
+           <el-upload
+             class="avatar-uploader"
+             action="https://jsonplaceholder.typicode.com/posts/"
+             :show-file-list="false"
+             :on-success="handleAvatarSuccess"
+             :before-upload="beforeAvatarUpload">
+             <img v-if="src" :src="src" class="avatar">
+             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+           </el-upload>
+        </el-form-item>
+      </el-row>
+      <el-row style="height: 200px;">
+        <el-form-item label="内容：" prop="decisionContent">
+          <Editor
+            style="height: 150px"
+            v-model="decisionContent"
+            :mode="mode"
+            @onCreated="onCreated"
+          />
+        </el-form-item>
+      </el-row>
+    </el-form>
+
+    <div style="text-align: right;margin-top:20px;">
+      <el-button type="info" plain @click="resetForm('baseForm')"
+        >取消</el-button
+      >
+      <el-button
+        type="primary"
+        @click="submitForm('baseForm')"
+        :disabled="dialogSubmitLoading"
+        :loading="dialogSubmitLoading"
+        >确定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { assign } from 'lodash-es';
+import { UPLOAD_TYPE_MAP } from '@/utils/constants';
+export default {
+  props: {
+    data: {
+      default() {
+        return {};
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      imageUrl: '',
+      editor: null,
+      decisionContent:"",
+      mode: 'default',
+      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
+      dialogSubmitLoading: false,
+      dialogVisible: false,
+      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+      baseForm: {
+        productValue: '',
+        productName: '',
+        stockAmount: '',
+        goodsUnit: '',
+        goodsSpecValue: '',
+        imageArr1: [],
+        supplierId: '',
+        imageArr2: []
+      },
+      productList: [],
+      syinfoList: [],
+      processList: [],
+      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' }
+        ]
+      }
+    };
+  },
+  computed: {
+    goodsUnitLable: function () {
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+        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: {
+    onCreated(editor) {
+      this.editor = Object.seal(editor)
+    },
+    handleAvatarSuccess() {},
+    beforeAvatarUpload() {},
+    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.$refs[formName].validate((valid) => {
+        console.log(valid)
+      })
+    },
+
+    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.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+::v-deep.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+::v-deep.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+}
+::v-deep.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+.input-number {
+  width: 100%;
+}
+.base-form {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 20px;
+}
+</style>
+<style lang="css" scoped>
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #ebeef5;
+}
+</style>

src/views/waterSubsidy/index.vue

@@ -0,0 +1,243 @@
+<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
+              >
+            </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>
+    <new-policy
+      :visible.sync="showPolicy"
+    />
+  </div>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+import newPolicy from './components/newPolicy.vue'
+import { assign, omit } from 'lodash-es';
+
+export default {
+  components: { BTable,newPolicy },
+  data() {
+    return {
+      dateValue:"",
+      imgUrl: '',
+      baseImageUrl: process.env.VUE_APP_BASE_RESOURCE_PREFIX,
+      form: {
+        productName: ''
+      },
+      loading: false,
+      showPolicy: false,
+      columns: [
+        {
+          label: '图片',
+          prop: 'person',
+          customRender: 'styleImg',
+          align: 'center'
+        },
+        {
+          label: '标题',
+          prop: 'area',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '浏览量',
+          prop: 'name',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '发布人',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },{
+          label: '发布时间',
+          prop: 'phone',
+          customRender: '',
+          align: 'center'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          align: 'center'
+        }
+      ]
+    };
+  },
+  created() {},
+  methods: {
+    addAssociation() {
+      this.showPolicy = 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: '王小虎',
+            imgPreview: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
+            phone: 1588888888,
+            address: '上海市普陀区金沙江路 1518 弄'
+          }, {
+            person:"王大虎",
+            area: '2016-05-04',
+            name: '王小虎',
+            imgPreview: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
+            phone: 1588888888,
+            address: '上海市普陀区金沙江路 1517 弄'
+          }, {
+            person:"王大虎",
+            area: '2016-05-01',
+            name: '王小虎',
+            imgPreview: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
+            phone: 1588888888,
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            person:"王大虎",
+            area: '2016-05-03',
+            name: '王小虎',
+            imgPreview: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
+            phone: 1588888888,
+            address: '上海市普陀区金沙江路 1516 弄'
+          }]
+      })
+    },
+    handleSearch() {
+      this.$refs.tableRef.refresh(true);
+    },
+    goDetail(row) {
+      this.$refs.sourceCodeDetail.open(row.tarcecodeapplyBatchno)
+    },
+    download(row) {
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.elrow-main__col-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .top-left {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    i {
+      background-color: #40d5ec;
+      height: 45%;
+      width: 5px;
+      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>