农业生产现状

package-lock.json

@@ -2063,6 +2063,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2227,47 +2270,6 @@
         }
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",

src/echarts/options.js

@@ -180,6 +180,183 @@ export function setJyzt(ele, dataIn) {
 	jyzt = setOptions(ele, option)
 }
 
+let jyztRange = null
+export function setJyztRange(ele, dataIn) {
+	if (jyztRange) {
+    jyztRange.dispose()
+	}
+
+	let name = []; let area = []; let count = []
+	dataIn.forEach(i => {
+		name.push(i.name)
+		area.push(i.area)
+		count.push(i.count)
+	})
+
+	let option = {
+		backgroundColor: "transparent",
+		grid: {
+			containLabel: true,
+			left: "0%",
+			right: "0%",
+			top: "15%",
+			bottom: "0%",
+		},
+		tooltip: {
+			trigger: 'axis',
+			borderColor: "#092B46",
+			backgroundColor: "#092B46",
+			textStyle: {
+				color: "#eee",
+				fontSize: nowSize(28),
+				align: 'left'
+			},
+			axisPointer: {
+				type: 'shadow'
+			},
+		},
+		legend: {
+			right: '0',
+			top: '0',
+			itemWidth: nowSize(20), // 设置宽度
+			itemHeight: nowSize(20), // 设置高度
+			itemGap: nowSize(38),
+			textStyle: {
+				color: '#DDD',
+				fontSize: nowSize(28),
+			}
+		},
+		xAxis: [
+			{
+				type: 'category',
+				axisLine: { show: false },
+				splitLine: { show: false },
+				axisTick: { show: false },
+				axisLabel: {
+					color: 'rgba(255, 255, 255, 1)',
+					fontSize: nowSize(20),
+					interval: 0,
+				},
+				data: name
+			}
+		],
+		yAxis: [
+			{
+				type: 'value',
+				axisLine: { show: false },
+				axisTick: { show: false },
+				splitLine: {
+					show: true,
+					lineStyle: {
+						type: 'dashed',
+						color: 'rgba(151, 169, 217, 0.5)'
+					}
+				},
+				axisLabel: {
+					color: 'rgba(255, 255, 255, 0.7)',
+					fontSize: nowSize(20),
+				}
+			},
+			{
+				type: 'value',
+				position: 'right',
+				axisLine: { show: false },
+				axisTick: { show: false },
+				splitLine: {
+					show: false,
+				},
+				axisLabel: {
+					color: 'rgba(255, 255, 255, 0.8)',
+					fontSize: nowSize(20),
+				}
+			}
+		],
+		series: [
+			{
+				name: '面积(亩)',
+				silent: false,
+				type: 'bar',
+				barWidth: nowSize(16),
+				barGap: 0.5,
+				itemStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+						offset: 0.5,
+						color: 'rgba(0, 185, 123, 1)'
+					}, {
+						offset: 1,
+						color: 'rgba(0, 185, 123, 0.1)'
+					}]),
+					opacity: 1,
+				},
+				yAxisIndex: 0,
+				data: area,
+			},
+			{
+				name: "面积(亩)",
+				type: "scatter",
+				silent: true,
+				tooltip: {
+					show: false
+				},
+				emphasis: {
+					scale: false,
+				},
+				symbol: "rect",
+				symbolSize: [nowSize(16), nowSize(5)],
+				symbolOffset: [0, 0],
+				itemStyle: {
+					color: '#00FEAA',
+					opacity: 1,
+				},
+				data: area,
+				yAxisIndex: 0,
+				animationDelay: 500,
+			},
+			// {
+			// 	name: '数量(个)',
+			// 	silent: false,
+			// 	type: 'bar',
+			// 	barWidth: nowSize(16),
+			// 	itemStyle: {
+			// 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+			// 			offset: 0.5,
+			// 			color: 'rgba(0, 169, 189, 1)'
+			// 		}, {
+			// 			offset: 1,
+			// 			color: 'rgba(0, 169, 189, 0.1)'
+			// 		}]),
+			// 		opacity: 1,
+			// 	},
+			// 	yAxisIndex: 1,
+			// 	data: count,
+			// },
+			// {
+			// 	name: "数量(个)",
+			// 	type: "scatter",
+			// 	silent: true,
+			// 	tooltip: {
+			// 		show: false
+			// 	},
+			// 	emphasis: {
+			// 		scale: false,
+			// 	},
+			// 	symbol: "rect",
+			// 	symbolSize: [nowSize(16), nowSize(5)],
+			// 	symbolOffset: ['75%', 0],
+			// 	itemStyle: {
+			// 		color: '#00E2FD',
+			// 		opacity: 1,
+			// 	},
+			// 	data: count,
+			// 	yAxisIndex: 1,
+			// 	animationDelay: 500,
+			// }
+		]
+	}
+
+  jyztRange = setOptions(ele, option)
+}
+
 let tdfbqk = null
 export function setTdfbqk(ele, dataIn) {
 	if (tdfbqk) {

src/services/znfx.js

@@ -20,3 +20,56 @@ export function GetLandSta(is_all, town, village) {
   })
 }
 
+// 镇村列表
+export function GetTownList(level, town) {
+  return request({
+    url: `/nydstat/get_town_and_village_info`,
+    method: "get",
+    params: {
+      level,town
+    }
+  })
+}
+
+export function GetLandStatistics(is_all, town, village) {
+  return request({
+    url: `/nyd/get_land_statistics`,
+    method: "get",
+    params: {
+      is_all, town, village
+    }
+  })
+}
+
+export function GetLandStatisticsExport(is_all, town, village) {
+  return request({
+    url: `/nyd/export`,
+    method: "get",
+    params: {
+      is_all, town, village
+    }
+  })
+}
+
+export function GetAreaRangeStatistics(is_all, town, village) {
+  return request({
+    url: `/nyd/get_area_distri_info`,
+    method: "get",
+    params: {
+      is_all, town, village
+    }
+  })
+}
+
+export function GetZhutiList(page_num, page_size, town, village, zt_name, zt_type) {
+  return request({
+    url: `/nydstat/get_zhuti_list`,
+    method: "get",
+    params: {
+      page_num, page_size, town, village, zt_name, zt_type
+    }
+  })
+}
+
+
+

src/views/deck/pages/Page_nyxz.vue

@@ -82,7 +82,7 @@ import { setTdfbqk } from '@/echarts/options'
 import { addPointMapQuery, addPointMapSingle } from "@/utils/map/AddLayer";
 import { searchAddress } from "@/services/ny";
 import { GetAgriculturalLand } from '@/services/ztgl'
-import { GetLandSta } from '@/services/znfx'
+// import { GetLandSta } from '@/services/znfx'
 
 export default {
   name: 'PageNyxz',
@@ -103,20 +103,20 @@ export default {
         { title: '地块总数', value: '0', unit: '块', updateTime: '', img: require('@/assets/imgs/deck/page_nygh/icon-dkzs.png') },
       ],
       chartData_tdfb: [
-        { name: '粮田', value: '0' },
-        { name: '果园', value: '0' },
-        { name: '菜田', value: '0' },
-        { name: '经作田', value: '0' },
-        { name: '养殖(畜牧)', value: '0' },
-        { name: '养殖(水产)', value: '0' },
+        { name: '粮田', value: '0', key: 'N0101' },
+        { name: '果园', value: '0', key: 'N0102' },
+        { name: '菜田', value: '0', key: 'N0103' },
+        { name: '经作田', value: '0', key: 'N0201' },
+        { name: '养殖(畜牧)', value: '0', key: 'N0901' },
+        { name: '养殖(水产)', value: '0', key: 'N0902' },
       ],
       data_tdlxtj: [
-        { type: '粮田', typeColor: '#D97E00', count: '0', area: '0' },
-        { type: '果园', typeColor: '#969600', count: '0', area: '0' },
-        { type: '菜田', typeColor: '#D5848B', count: '0',  area: '0' },
-        { type: '经作田', typeColor: '#980220', count: '0', area: '0' },
-        { type: '养殖(畜牧)', typeColor: '#E8B707', count: '0', area: '0' },
-        { type: '养殖(水产)', typeColor: '#6697FE', count: '0', area: '0' },
+        { type: '粮田', typeColor: '#D97E00', count: '0', area: '0', key: 'N0101' },
+        { type: '果园', typeColor: '#969600', count: '0', area: '0', key: 'N0102' },
+        { type: '菜田', typeColor: '#D5848B', count: '0',  area: '0', key: 'N0103' },
+        { type: '经作田', typeColor: '#980220', count: '0', area: '0', key: 'N0201' },
+        { type: '养殖(畜牧)', typeColor: '#E8B707', count: '0', area: '0', key: 'N0901' },
+        { type: '养殖(水产)', typeColor: '#6697FE', count: '0', area: '0', key: 'N0902' },
       ],
       currentSearchI:'dmdz',
       currentSearchKeyWord:'',
@@ -139,27 +139,31 @@ export default {
           GetAgriculturalLand().then(res => {
             let areaTotal = 0
             let count = 0
-            res.data.Result.forEach(i => {
-              areaTotal += i.areamu
-              count += i.count
+            let arr = ["N0101","N0102","N0103","N0201","N0901","N0902"]
+            let data = res.data.Result
+            data.forEach(i => {
+              if(arr.includes(i.landtype)){
+                areaTotal += i.areamu
+                count += i.count
+              }
             })
+            // console.log(res);
             areaTotal = (areaTotal/10000).toFixed(2)
             this.data_nyscyd[0].value = areaTotal
             this.data_nyscyd[1].value = count
-          })
-          GetLandSta().then(res => {
+
             this.data_tdlxtj.forEach(i => {
-              res.data.find(j => {
-                if(i.type===j.landType) {
-                  i.count = j.landCnt
-                  i.area = j.landAreaMu.toFixed(2)
+              data.find(j => {
+                if(i.key===j.landtype) {
+                  i.count = j.count
+                  i.area = (j.areamu/10000).toFixed(2)
                 }
               })
             })
             this.chartData_tdfb.forEach(i => {
-              res.data.find(j => {
-                if(i.name===j.landType) {
-                  i.value = Math.round(j.landAreaMu*10000)
+              data.find(j => {
+                if(i.key===j.landtype) {
+                  i.value = (j.areamu/10000).toFixed(2)
                 }
               })
             })
@@ -167,6 +171,27 @@ export default {
               setTdfbqk(document.getElementById('chart-crb2'), this.chartData_tdfb)
             })
           })
+          // GetLandSta().then(res => {
+          //   console.log(res);
+          //   this.data_tdlxtj.forEach(i => {
+          //     res.data.find(j => {
+          //       if(i.type===j.landType) {
+          //         i.count = j.landCnt
+          //         i.area = j.landAreaMu.toFixed(2)
+          //       }
+          //     })
+          //   })
+          //   this.chartData_tdfb.forEach(i => {
+          //     res.data.find(j => {
+          //       if(i.name===j.landType) {
+          //         i.value = Math.round(j.landAreaMu*10000)
+          //       }
+          //     })
+          //   })
+          //   this.$nextTick(()=> {
+          //     setTdfbqk(document.getElementById('chart-crb2'), this.chartData_tdfb)
+          //   })
+          // })
         }
       },
       immediate: true

src/views/deck/pages/Page_znfx.vue

@@ -15,7 +15,7 @@
           <img :src="item.img" alt="">
           <div>
             <span>{{ item.title }}</span>
-            <span v-if="item.updateTime">{{ '(更新时间'+item.updateTime+')' }}</span>
+<!--            <span v-if="item.updateTime">{{ '(更新时间'+item.updateTime+')' }}</span>-->
             <div><span>{{ item.value }}</span><span>{{ item.unit }}</span></div>
           </div>
         </li>
@@ -24,19 +24,21 @@
       <div class="cl-b2">
         <div class="clb2-btns">
           <el-select v-model="form_sta1.town" placeholder="请选择镇" class="select-default" popper-class="select-default-popper">
-            <el-option v-for="item,index in 3" :key="index" :value="item">{{ item }}</el-option>
+            <el-option value="">全部镇</el-option>
+            <el-option v-for="item,index in townList" :key="index" :value="item">{{ item }}</el-option>
           </el-select>
           <el-select v-model="form_sta1.village" placeholder="请选择村" class="select-default" popper-class="select-default-popper">
-            <el-option v-for="item,index in 3" :key="index" :value="item">{{ item }}</el-option>
+            <el-option value="">全部村</el-option>
+            <el-option v-for="item,index in villageList" :key="index" :value="item">{{ item }}</el-option>
           </el-select>
-          <div class="button-default">查看全部</div>
-          <div class="button-default">导出</div>
+          <div class="button-default" @click="handleIsAllClick">查看全部</div>
+          <div class="button-default" @click="exportLand">导出</div>
         </div>
-        <el-table :data="data_tdlxtj" class="table-default" @row-click="handleRowClick">
+        <el-table :data="isAll?data_tdlxtj:data_tdlxtj.slice(0,6)" class="table-default" @row-click="handleRowClick">
           <el-table-column label="土地类型" min-width="120" show-overflow-tooltip>
             <template #default="scope">
               <i class="color-dot" :style="'background:'+ scope.row.typeColor+';'"></i>
-              <span>{{ scope.row.type }}</span>
+              <span :class="{'isClick':subStatisticsRow === scope.row.type}">{{ scope.row.type }}</span>
             </template>
           </el-table-column>
           <el-table-column label="地块数量(块)" min-width="100" show-overflow-tooltip>
@@ -51,56 +53,60 @@
           </el-table-column>
         </el-table>
       </div>
-      <span class="box-title2">各街镇土地分布</span>
-      <div>
-        <el-table :data="data_tdfb" class="table-default" height="30vh">
-          <el-table-column label="名称" :min-width="table2MinWidth" prop="townName" show-overflow-tooltip/>
-          <el-table-column label="总计" :min-width="table2MinWidth" show-overflow-tooltip>
-            <template #default="scope">
-              <span class="td-emphasis">{{ scope.row.total }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="粮田" :min-width="table2MinWidth" show-overflow-tooltip>
-            <template #default="scope">
-              <span class="td-emphasis">{{ scope.row.liangtian }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="果园" :min-width="table2MinWidth" show-overflow-tooltip>
-            <template #default="scope">
-              <span class="td-emphasis">{{ scope.row.guoyuan }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="菜田" :min-width="table2MinWidth" show-overflow-tooltip>
-            <template #default="scope">
-              <span class="td-emphasis">{{ scope.row.caitian }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="经作田" :min-width="table2MinWidth" show-overflow-tooltip>
-            <template #default="scope">
-              <span class="td-emphasis">{{ scope.row.jingzuotian }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="养殖(畜牧)" :min-width="table2MinWidth" show-overflow-tooltip>
-            <template #default="scope">
-              <span class="td-emphasis">{{ scope.row.xumu }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="养殖(水产)" :min-width="table2MinWidth" show-overflow-tooltip>
-            <template #default="scope">
-              <span class="td-emphasis">{{ scope.row.shuichan }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
+      <span class="box-title2">土地面积分布</span>
+      <div class="cr-b1">
+        <div id="crb1-chart-tdmjfb"></div>
       </div>
+<!--      <span class="box-title2">各街镇土地分布</span>-->
+<!--      <div>-->
+<!--        <el-table :data="data_tdfb" class="table-default" height="30vh">-->
+<!--          <el-table-column label="名称" :min-width="table2MinWidth" prop="townName" show-overflow-tooltip/>-->
+<!--          <el-table-column label="总计" :min-width="table2MinWidth" show-overflow-tooltip>-->
+<!--            <template #default="scope">-->
+<!--              <span class="td-emphasis">{{ scope.row.total }}</span>-->
+<!--            </template>-->
+<!--          </el-table-column>-->
+<!--          <el-table-column label="粮田" :min-width="table2MinWidth" show-overflow-tooltip>-->
+<!--            <template #default="scope">-->
+<!--              <span class="td-emphasis">{{ scope.row.liangtian }}</span>-->
+<!--            </template>-->
+<!--          </el-table-column>-->
+<!--          <el-table-column label="果园" :min-width="table2MinWidth" show-overflow-tooltip>-->
+<!--            <template #default="scope">-->
+<!--              <span class="td-emphasis">{{ scope.row.guoyuan }}</span>-->
+<!--            </template>-->
+<!--          </el-table-column>-->
+<!--          <el-table-column label="菜田" :min-width="table2MinWidth" show-overflow-tooltip>-->
+<!--            <template #default="scope">-->
+<!--              <span class="td-emphasis">{{ scope.row.caitian }}</span>-->
+<!--            </template>-->
+<!--          </el-table-column>-->
+<!--          <el-table-column label="经作田" :min-width="table2MinWidth" show-overflow-tooltip>-->
+<!--            <template #default="scope">-->
+<!--              <span class="td-emphasis">{{ scope.row.jingzuotian }}</span>-->
+<!--            </template>-->
+<!--          </el-table-column>-->
+<!--          <el-table-column label="养殖(畜牧)" :min-width="table2MinWidth" show-overflow-tooltip>-->
+<!--            <template #default="scope">-->
+<!--              <span class="td-emphasis">{{ scope.row.xumu }}</span>-->
+<!--            </template>-->
+<!--          </el-table-column>-->
+<!--          <el-table-column label="养殖(水产)" :min-width="table2MinWidth" show-overflow-tooltip>-->
+<!--            <template #default="scope">-->
+<!--              <span class="td-emphasis">{{ scope.row.shuichan }}</span>-->
+<!--            </template>-->
+<!--          </el-table-column>-->
+<!--        </el-table>-->
+<!--      </div>-->
     </div>
-    <div class="sub-sta" v-if="subStatisticsShow">
-      <el-select v-model="subStatisticsCurrent" class="select-default" popper-class="select-default-popper">
-        <el-option v-for="item in subStatisticsData" :key="item.type" :value="item.type">{{ item.type }}</el-option>
-      </el-select>
-      <span>{{ subStatisticsCurrent }}</span>
-      <div><span>在田主体数</span><span>{{ subStatisticsData.find(i=>i.type===subStatisticsCurrent).count }}</span><span>个</span></div>
-      <div><span>在田面积</span><span>{{ subStatisticsData.find(i=>i.type===subStatisticsCurrent).area }}</span><span>万亩</span></div>
-    </div>
+<!--    <div class="sub-sta" v-if="subStatisticsShow">-->
+<!--      <el-select v-model="subStatisticsCurrent" class="select-default" popper-class="select-default-popper">-->
+<!--        <el-option v-for="item in subStatisticsData" :key="item.type" :value="item.type">{{ item.type }}</el-option>-->
+<!--      </el-select>-->
+<!--      <span>{{ subStatisticsCurrent }}</span>-->
+<!--      <div><span>在田主体数</span><span>{{ subStatisticsData.find(i=>i.type===subStatisticsCurrent).count }}</span><span>个</span></div>-->
+<!--      <div><span>在田面积</span><span>{{ subStatisticsData.find(i=>i.type===subStatisticsCurrent).area }}</span><span>万亩</span></div>-->
+<!--    </div>-->
     <div class="c-right">
       <div>
         <span class="box-title1">经营主体</span>
@@ -118,44 +124,50 @@
         </div>
         <div id="crb1-chart"></div>
       </div>
-      <span class="box-title2">数据统计</span>
-      <div class="cr-b2">
-        <div class="crb2-row1">
-          <span>总计</span>
-          <el-radio-group v-model="sta2Current" class="radio-default">
-            <el-radio label="lt">粮田</el-radio>
-            <el-radio label="ct">菜田</el-radio>
-            <el-radio label="sc">水产</el-radio>
-          </el-radio-group>
-        </div>
-        <div class="crb2-row2">
-          <div><span>{{ data_sta2[sta2Current].total }}</span><span>万亩</span></div>
-          <span>单位(个)</span>
-        </div>
-        <ul class="crb2-row3">
-          <li v-for="item in data_sta2[sta2Current].cata" :key="item.label">
-            <span>{{ item.value }}</span><span>{{ item.label }}</span>
-          </li>
-        </ul>
-      </div>
+<!--      <span class="box-title2">数据统计</span>-->
+<!--      <div class="cr-b2">-->
+<!--        <div class="crb2-row1">-->
+<!--          <span>总计</span>-->
+<!--          <el-radio-group v-model="sta2Current" class="radio-default">-->
+<!--            <el-radio label="lt">粮田</el-radio>-->
+<!--            <el-radio label="ct">菜田</el-radio>-->
+<!--            <el-radio label="sc">水产</el-radio>-->
+<!--          </el-radio-group>-->
+<!--        </div>-->
+<!--        <div class="crb2-row2">-->
+<!--          <div><span>{{ data_sta2[sta2Current].total }}</span><span>万亩</span></div>-->
+<!--          <span>单位(个)</span>-->
+<!--        </div>-->
+<!--        <ul class="crb2-row3">-->
+<!--          <li v-for="item in data_sta2[sta2Current].cata" :key="item.label">-->
+<!--            <span>{{ item.value }}</span><span>{{ item.label }}</span>-->
+<!--          </li>-->
+<!--        </ul>-->
+<!--      </div>-->
       <span class="box-title2">数据统计</span>
       <div class="cr-b3">
         <div class="crb3-form">
           <el-select v-model="form_sta3.town" placeholder="请选择镇" class="select-default" popper-class="select-default-popper">
-            <el-option v-for="item,index in 3" :key="index" :value="item">{{ item }}</el-option>
+            <el-option value="">全部镇</el-option>
+            <el-option v-for="item,index in townList" :key="index" :value="item">{{ item }}</el-option>
           </el-select>
-          <el-select v-model="form_sta3.type" placeholder="请选择主体类型" class="select-default" popper-class="select-default-popper">
-            <el-option v-for="item,index in 3" :key="index" :value="item">{{ item }}</el-option>
+          <el-select v-model="form_sta3.village" placeholder="请选择镇" class="select-default" popper-class="select-default-popper">
+            <el-option value="">全部村</el-option>
+            <el-option v-for="item,index in villageList2" :key="index" :value="item">{{ item }}</el-option>
           </el-select>
-          <el-select v-model="form_sta3.name" placeholder="请输入经营主体名称" class="select-default" popper-class="select-default-popper">
-            <el-option v-for="item,index in 3" :key="index" :value="item">{{ item }}</el-option>
+          <el-select v-model="form_sta3.type" placeholder="请选择主体类型" class="select-default" popper-class="select-default-popper">
+            <el-option value="">全部</el-option>
+            <el-option v-for="item,index in zhutiTypeList" :key="index" :value="item">{{ item }}</el-option>
           </el-select>
+          <el-input v-model="form_sta3.name" placeholder="请输入经营主体名称" class="select-default" popper-class="select-default-popper" @keyup.enter.native="getZhutiData">
+
+          </el-input>
           <span class="button-default">导出</span>
         </div>
-        <el-table :data="data_sta3" class="table-default" height="19vh">
+        <el-table :data="data_sta3" class="table-default" height="32vh">
           <el-table-column label="区" min-width="50" show-overflow-tooltip>
             <template #default="scope">
-              <span>{{ scope.row.region }}</span>
+              <span>{{ scope.row.town }}</span>
             </template>
           </el-table-column>
           <el-table-column label="镇" min-width="50" show-overflow-tooltip>
@@ -165,17 +177,17 @@
           </el-table-column>
           <el-table-column label="主体类型" min-width="60" show-overflow-tooltip>
             <template #default="scope">
-              <span>{{ scope.row.type }}</span>
+              <span>{{ scope.row.ztType }}</span>
             </template>
           </el-table-column>
           <el-table-column label="经营主体名称" min-width="85" show-overflow-tooltip>
             <template #default="scope">
-              <span>{{ scope.row.name }}</span>
+              <span>{{ scope.row.ztName }}</span>
             </template>
           </el-table-column>
           <el-table-column label="面积(亩)" min-width="60" show-overflow-tooltip>
             <template #default="scope">
-              <span class="td-emphasis">{{ scope.row.area }}</span>
+              <span class="td-emphasis">{{ scope.row.areaMu.toFixed(2) }}</span>
             </template>
           </el-table-column>
         </el-table>
@@ -185,9 +197,17 @@
 </template>
 
 <script>
-import { setJyzt } from '@/echarts/options'
-import { GetJyztSta } from '../../../services/znfx'
+import {setJyzt, setJyztRange} from '@/echarts/options'
+import {
+  GetAreaRangeStatistics,
+  GetJyztSta,
+  GetLandStatistics,
+  GetLandStatisticsExport,
+  GetTownList, GetZhutiList
+} from '../../../services/znfx'
 import { zhutiTypeMap } from '../../../utils/data/fieldsMapper'
+import {GetAgriculturalLand} from "@/services/ztgl";
+import {bridge} from "@/views/map/Map";
 
 export default {
   name: 'PageZnfx',
@@ -217,6 +237,10 @@ export default {
         { type: '经作田', typeColor: '#980220', count: '20170', area: '20170' },
         { type: '养殖(畜牧)', typeColor: '#E8B707', count: '270', area: '270' },
         { type: '养殖(水产)', typeColor: '#6697FE', count: '13401', area: '13401' },
+        { type: '林地', typeColor: '#55efc4', count: '13401', area: '13401' },
+        { type: '零星用地(其他)', typeColor: '#6c5ce7', count: '13401', area: '13401' },
+        { type: '零星用地(已征地)', typeColor: '#3ae374', count: '13401', area: '13401' },
+        { type: '零星用地(自留地/集体地)', typeColor: '#18dcff', count: '13401', area: '13401' },
       ],
       data_tdfb: [
         { townName: '陈家镇', total: '1099', liangtian: '256', guoyuan: '256', caitian: '256', jingzuotian: '256', xumu: '256', shuichan: '256' },
@@ -268,6 +292,7 @@ export default {
       },
       form_sta3: {
         town: '',
+        village: '',
         type: '',
         name: ''
       },
@@ -282,10 +307,33 @@ export default {
       subStatisticsShow: false,
       subStatisticsData: [],
       subStatisticsCurrent: '',
-      subStatisticsRow: ''
+      subStatisticsRow: '',
+
+      townList: [],
+      villageList: [],
+      villageList2: [],
+      isAll: false,
+
+      currentLandType: "",
+      zhutiTypeList: ["合作社","家庭农场","农业企业","农户（散户）","农户（大户）","村集体","其他"]
     }
   },
   mounted() {
+    this.initMap()
+    let params = {
+      ActionName: "AddLayer",
+      Parameters: {
+        id: "nydxz",
+        title: "nydxz",
+        visible: true,
+        opacity:1,
+        url: "http://10.121.226.95:8081/OneMapServer/rest/services/Agri_land_CM/MapServer",
+        type:"shc_map",
+        token_type:"token_nw"
+      },
+    };
+    console.log('添加图层---',params)
+    bridge.Invoke(params);
     GetJyztSta().then(res => {
       let totalCount = 0
       res.data.Result.forEach(i => {
@@ -299,8 +347,32 @@ export default {
         }
       })
       this.data_sta1.total = totalCount.toString()
-      setJyzt(document.getElementById('crb1-chart'), this.data_sta1.chartData) 
+      setJyzt(document.getElementById('crb1-chart'), this.data_sta1.chartData)
     })
+
+    GetAgriculturalLand().then(res => {
+      let areaTotal = 0
+      let count = 0
+      let arr = ["N0101","N0102","N0103","N0201","N0901","N0902"]
+      let data = res.data.Result
+      data.forEach(i => {
+        if(arr.includes(i.landtype)){
+          areaTotal += i.areamu
+          count += i.count
+        }
+      })
+      // console.log(res);
+      areaTotal = (areaTotal/10000).toFixed(2)
+      this.data_nyscyd[0].value = areaTotal
+      this.data_nyscyd[1].value = count
+    })
+
+    GetTownList(1,"").then(res => {
+      this.townList = res.data
+    })
+
+    this.getLandData()
+    this.getZhutiData()
   },
   computed: {
     table2MinWidth() {
@@ -308,6 +380,40 @@ export default {
     },
   },
   methods: {
+    initMap(){
+      let params1 = {
+        ActionName: "ClearMapLayers",
+        Parameters: {
+
+        },
+      };
+      bridge.Invoke(params1);
+      this.locateCM()
+    },
+    locateCM() {
+      const params32 = {
+        "minx": -31227.356231616784,
+        "miny": 19268.786635562752,
+        "maxx": 47546.66798309832,
+        "maxy": 75148.89839578628
+      }
+      const params16 = {
+        "minx": -90405,
+        "miny": -9789,
+        "maxx": 109738,
+        "maxy": 102790
+      }
+      const screenRatio = document.body.clientWidth / document.body.clientHeight
+      let action = {
+        ActionName: "SetExtent",
+      };
+      if(screenRatio>2) {
+        action['Parameters'] = params32
+      } else {
+        action['Parameters'] = params16
+      }
+      bridge.Invoke(action);
+    },
     handleChangePage(item) {
       // if(item.disabled) return
       this.currentPage = item.id
@@ -326,8 +432,106 @@ export default {
         this.subStatisticsCurrent = row.type+'-1'
         this.subStatisticsRow = row.type
         this.subStatisticsShow = true
+
+        this.getLandType2Data()
       }
+
+      this.getAreaRangeData(this.subStatisticsRow)
+    },
+    getLandType2Data(){
+
+    },
+    changeLeftTown(){
+      GetTownList(2,this.form_sta1.town).then(res => {
+        this.villageList = res.data
+        this.form_sta1.village = ""
+      })
+
+      this.getLandData()
+    },
+    getLandData(){
+      GetLandStatistics("",this.form_sta1.town,this.form_sta1.village).then(res => {
+        console.log(res);
+        this.data_tdlxtj.forEach(i => {
+          res.data.find(j => {
+            if(i.type===j.landType) {
+              i.count = j.landCnt
+              i.area = j.landAreaMu.toFixed(2)
+            }
+          })
+        })
+      })
+      this.getAreaRangeData(this.subStatisticsRow)
+    },
+    getAreaRangeData(val){
+      GetAreaRangeStatistics(val,this.form_sta1.town,this.form_sta1.village).then(res => {
+        console.log(res);
+        let data = []
+        res.data.forEach(i => {
+          data.push({
+            name: i.areaType,
+            area: i.areaCnt
+          })
+        })
+        setJyztRange(document.getElementById('crb1-chart-tdmjfb'), data)
+      })
+    },
+    handleIsAllClick(){
+      this.isAll = !this.isAll
+    },
+    exportLand(){
+      GetLandStatisticsExport("",this.form_sta1.town,this.form_sta1.village).then(res => {
+        console.log(res);
+      })
+    },
+    changeRightTown(){
+      GetTownList(2,this.form_sta3.town).then(res => {
+        this.villageList2 = res.data
+        this.form_sta3.village = ""
+      })
+
+      this.getZhutiData()
+    },
+    getZhutiData(){
+      console.log(111);
+      GetZhutiList(
+          1,20,
+          this.form_sta3.town,
+          this.form_sta3.village,
+          this.form_sta3.name,
+          this.form_sta3.type,
+      ).then(res => {
+        console.log(res);
+        this.data_sta3 = res.data.list
+      })
     }
+  },
+  watch: {
+    'form_sta1.town':{
+      handler(){
+        this.changeLeftTown()
+      }
+    },
+    'form_sta1.village':{
+      handler(){
+        this.getLandData()
+      }
+    },
+    'form_sta3.town':{
+      handler(){
+        this.changeRightTown()
+      }
+    },
+    'form_sta3.village':{
+      handler(){
+        this.getZhutiData()
+      }
+    },
+    'form_sta3.type':{
+      handler(){
+        this.getZhutiData()
+      }
+    },
   }
 }
 </script>
@@ -386,8 +590,8 @@ export default {
       display: flex;
       align-items: center;
       &>img {
-        width: 192px;
-        height: 165px;
+        width: 162px;
+        height: 145px;
       }
       &>div {
         height: 110px;
@@ -518,7 +722,7 @@ export default {
       }
     }
 
-    #crb1-chart {
+    #crb1-chart,#crb1-chart-tdmjfb {
       width: 100%;
       height: 22vh;
       margin-top: 1vh;
@@ -605,11 +809,11 @@ export default {
       justify-content: space-between;
       margin-bottom: 20px;
       .select-default {
-        &:nth-child(1), &:nth-child(2) {
-          width: calc(50% - 10px);
+        &:nth-child(1), &:nth-child(2), &:nth-child(3) {
+          width: calc(33% - 10px);
           margin-bottom: 12px;
         }
-        &:nth-child(3) {
+        &:nth-child(4) {
           width: calc(100% - 150px);
         }
       }
@@ -618,4 +822,20 @@ export default {
       }
     }
   }
+
+  .isClick{
+    color: orange;
+  }
+
+  ::v-deep{
+    .el-table th.el-table__cell>.cell{
+      padding-right: 0;
+    }
+
+    td{
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
 </style>

src/views/map/Map.vue

@@ -10,7 +10,7 @@ import { myBridge } from "@/utils/map/map";
 import { mapMapMutations } from "@/utils/store-map-unit";
 
 let bridge
-
+export {bridge}
 export default {
   name: 'MyMap',
   mounted() {