闲置厂房需求添加产业

jp-console/jeeplus-module/ly/src/main/java/com/jeeplus/idlefactorybuildings/controller/IdleFactoryBuildingsController.java

@@ -29,8 +29,12 @@ import com.jeeplus.idlefactorybuildings.service.IdleFactoryBuildingsService;
 import org.springframework.web.multipart.MultipartFile;
 
 import java.io.IOException;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collections;
 import java.util.HashMap;
 import java.util.List;
+import java.util.stream.Collectors;
 
 /**
  * 闲置厂房Controller
@@ -102,6 +106,7 @@ public class IdleFactoryBuildingsController {
 	@GetMapping("list2")
 	public ResponseEntity<IPage<IdleFactoryBuildingsDTO>> list2(IdleFactoryBuildingsDTO idleFactoryBuildingsDTO, Page<IdleFactoryBuildingsDTO> page) throws Exception {
 		String area=idleFactoryBuildingsDTO.getIdleArea();
+		String des1=idleFactoryBuildingsDTO.getDes1();
 		if(area!=null&&area.equals("")){
 			idleFactoryBuildingsDTO.setIdleArea("");
 		}
@@ -120,6 +125,39 @@ public class IdleFactoryBuildingsController {
 				queryWrapper.gt("idle_area",5000);
 			}
 		}
+		//添加产业的筛选
+//		if(des1!=null&&!des1.equals("")) {
+//			queryWrapper.apply("FIND_IN_SET({0}, des1)", des1);
+//		}
+
+
+
+		// 1. 拆分 des1
+		List<String> desArr = new ArrayList<>();
+		if (des1 != null && !des1.trim().isEmpty()) {   // 用 isEmpty() 代替 isBlank()
+			desArr = Arrays.stream(des1.split(","))
+					.map(String::trim)
+					.filter(s -> !s.isEmpty())
+					.collect(Collectors.toList());
+		}
+
+		// 2. 把数组变成 final，才能在 lambda 里用
+		final List<String> finalDesArr = desArr;
+
+		// 3. 拼 OR 条件
+		if (!finalDesArr.isEmpty()) {
+			queryWrapper.and(qw -> {
+				QueryWrapper<IdleFactoryBuildingsDTO> wrapper = (QueryWrapper<IdleFactoryBuildingsDTO>) qw;
+				for (int i = 0; i < finalDesArr.size(); i++) {
+					if (i == 0) {
+						wrapper.apply("FIND_IN_SET({0}, a.des1)", finalDesArr.get(i));
+					} else {
+						wrapper.or().apply("FIND_IN_SET({0}, a.des1)", finalDesArr.get(i));
+					}
+				}
+			});
+		}
+
 
 		IPage<IdleFactoryBuildingsDTO> result = idleFactoryBuildingsService.findPage (page, queryWrapper);
 		return ResponseEntity.ok (result);
@@ -147,6 +185,42 @@ public class IdleFactoryBuildingsController {
 		return ResponseEntity.ok (map);
 	}
 
+	/**
+	 *产业统计
+	 */
+	@ApiLog("产业统计")
+	@ApiOperation(value = "产业统计")
+	@GetMapping("getIndustryList")
+	public ResponseEntity<List<HashMap<String, Object>>> getIndustryList() throws Exception {
+		List<HashMap<String, Object>> map=idleFactoryBuildingsService.getIndustryList();
+		if(map!=null&&map.size()>0){
+			for (int i=0;i<map.size();i++){
+				if(map.get(i).get("content")!=null){
+					String alls=map.get(i).get("content").toString();
+					if(alls.contains(",")){
+						List<Integer> codes = Arrays.stream(alls.split(","))
+								.map(String::trim)   // 去掉前后空格（可选）
+								.map(Integer::valueOf)
+								.collect(Collectors.toList());
+						HashMap<String, Object> map2=idleFactoryBuildingsService.statByDesCodes(codes);
+						if(map2!=null){
+							map.get(i).put("building_cnt",map2.get("building_cnt").toString());
+							map.get(i).put("total_idle_area",map2.get("total_idle_area").toString());
+							map.get(i).put("total_area",map2.get("total_area").toString());
+						}
+
+
+					}
+				}
+			}
+
+		}
+
+
+
+
+		return ResponseEntity.ok (map);
+	}
 
 	/**
 	 * 根据Id获取闲置厂房数据

jp-console/jeeplus-module/ly/src/main/java/com/jeeplus/idlefactorybuildings/mapper/IdleFactoryBuildingsMapper.java

@@ -27,6 +27,8 @@ public interface IdleFactoryBuildingsMapper extends BaseMapper<IdleFactoryBuildi
     IdleFactoryBuildingsDTO findById(String id);
     List<HashMap<String, Object>> getDictList(String type);
     List<HashMap<String, Object>> getParkList();
+    List<HashMap<String, Object>> getIndustryList();
+    HashMap<String, Object> statByDesCodes(@Param("codes") List<Integer> codes);
 
 
 }

jp-console/jeeplus-module/ly/src/main/java/com/jeeplus/idlefactorybuildings/mapper/xml/IdleFactoryBuildingsMapper.xml

@@ -75,4 +75,39 @@
 		ORDER BY a.sort asc;
 	</select>
 
+	<select id="getIndustryList" resultType="map">
+		SELECT a.label,
+			   a.value AS content,
+			   COUNT(b.id)                    AS building_cnt,
+			   IFNULL(SUM(b.idle_area), 0)    AS total_idle_area,
+			   IFNULL(SUM(b.area), 0)         AS total_area
+		FROM sys_dict_value a
+				 LEFT JOIN ly_idle_factory_buildings b
+						   ON FIND_IN_SET(a.value, b.des1) > 0
+							   AND b.del_flag = 0
+							   AND b.state = 1
+		WHERE a.dict_type_id = '2008827031063937026' and a.del_flag=0
+		GROUP BY a.label
+		ORDER BY a.sort ASC;
+	</select>
+
+	<select id="statByDesCodes" resultType="map">
+		SELECT
+		COUNT(b.id)                 AS building_cnt,
+		IFNULL(SUM(b.idle_area), 0) AS total_idle_area,
+		IFNULL(SUM(b.area), 0)      AS total_area
+		FROM ly_idle_factory_buildings b
+		WHERE b.del_flag = 0
+		AND b.state = 1
+		<if test="codes != null and codes.size > 0">
+			AND (
+			<foreach collection="codes" item="c" separator=" OR ">
+				FIND_IN_SET(#{c}, b.des1)
+			</foreach>
+			)
+		</if>
+	</select>
+
+
+
 </mapper>

jp-console/jeeplus-module/ly/src/main/java/com/jeeplus/idlefactorybuildings/service/IdleFactoryBuildingsService.java

@@ -8,6 +8,7 @@ import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.jeeplus.idlefactorybuildings.service.dto.IdleFactoryBuildingsDTO;
 import com.jeeplus.question.service.dto.DzfQuestionDTO;
+import org.apache.ibatis.annotations.Param;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
@@ -44,5 +45,13 @@ public class IdleFactoryBuildingsService extends ServiceImpl<IdleFactoryBuilding
         return baseMapper.getParkList ();
     }
 
+    public List<HashMap<String, Object>> getIndustryList() {
+        return baseMapper.getIndustryList ();
+    }
+
+    public HashMap<String, Object> statByDesCodes(List<Integer> codes) {
+        return baseMapper.statByDesCodes (codes);
+    }
+
 
 }

jp-mobile/api/auth/loginService.js

@@ -66,6 +66,12 @@ export default {
 		})
 	},
 	
+	getIndustryList: function() {
+		return request({
+			url: '/idlefactorybuildings/idleFactoryBuildings/getIndustryList',
+			method: 'get',
+		})
+	},
 	
 	
 	policyList: function (params) {

jp-mobile/common/config.js

@@ -3,7 +3,7 @@ let APP_SERVER_URL = ""
 if(process.env.NODE_ENV === 'development'){
     // 开发环境    http://47.97.69.114:8088/#/login 
     //APP_SERVER_URL = 'http://47.97.69.114:8088/panhuangly/'
-	APP_SERVER_URL = 'http://192.168.139.62:8072'
+	APP_SERVER_URL = 'http://192.168.139.62:8071'
 	//APP_SERVER_URL = 'https://ydwqfw.com.cn/yd_qycpfbWeb/yd_qycpfb'
 }else{
     // 生产环境

jp-mobile/pages.json

@@ -69,6 +69,10 @@
 			"path": "pages/index/factoryindex6",
 			"style": {}
 		},
+		{
+			"path": "pages/index/factoryindex7",
+			"style": {}
+		},
 		{
 			"path": "pages/factoryBuildings/factoryBuildingsList",
 			"style": {}

jp-mobile/pages/cfInfo/cfInfo.vue

@@ -70,11 +70,11 @@
 						value: '12460m²'
 					},
 					{
-						name: '闲置层数',
+						name: '层数',
 						value: '1-4层'
 					},
 					{
-						name: '闲置面积',
+						name: '面积',
 						value: '8900m²'
 					},
 					{

jp-mobile/pages/factoryBuildings/factoryBuildingsInfo.vue

@@ -53,7 +53,7 @@
 
 			<view class="titlebg2">
 				<view class="titlet1" ></view>
-				<view class="titlet2" >闲置基本信息</view>								
+				<view class="titlet2" >基本信息</view>								
 			</view>
 			
 			
@@ -194,7 +194,7 @@
 				t1: '厂房权属',
 				t2: '占地面积',
 				t3: '单层/多层',
-				t4: '闲置面积',
+				t4: '面积',
 				t5: '层数',
 				t6: '层高',
 				text1:'',
@@ -220,7 +220,7 @@
 				  ownership: { label: '厂房权属', required: true },
 				  area: { label: '占地面积', required: true, pattern: /^\d+(\.\d{1,2})?$/ },
 				  singleLayer: { label: '单层/多层', required: true },
-				  idleArea: { label: '闲置面积', required: true, pattern: /^\d+(\.\d{1,2})?$/ },
+				  idleArea: { label: '面积', required: true, pattern: /^\d+(\.\d{1,2})?$/ },
 				  numberLayers: { label: '层数', required: true, pattern: /^\d+$/ },
 				  floorHeight: { label: '层高', required: true, pattern: /^\d+(\.\d{1,2})?$/ }
 				}

jp-mobile/pages/factoryBuildings/factoryBuildingsList.vue

@@ -14,7 +14,7 @@
 								
 			<view :style="[{top:CustomBar + 'px'}]">
 										
-				<view class="search-box1">
+				<!-- <view class="search-box1">
 					<view class="choose-box">
 																
 						<jp-picker2 class="choose-boxp" v-model="searchForm.park" empty="选择所在板块" rangeKey="label" rangeValue="value"
@@ -24,13 +24,53 @@
 					</view>
 					<view class="choose-box22">
 																					
-						<jp-picker2 class="choose-boxp" v-model="searchForm.idleArea" empty="选择闲置面积" rangeKey="label" rangeValue="value"
+						<jp-picker2 class="choose-boxp" v-model="searchForm.idleArea" empty="选择面积" rangeKey="label" rangeValue="value"
 							:range="parkList"  @change="picker2change">
 						</jp-picker2>
 						
 					</view>
 	
+				</view> -->
+				
+				
+				<view class="search-box1">
+				  <!-- 所在板块 -->
+				  <view class="choose-box">
+				    <jp-picker2
+				      v-model="searchForm.park"
+				      empty="选择所在板块"
+				      rangeKey="label"
+				      rangeValue="value"
+				      :range="parkList2"
+				      @change="picker2change">
+				    </jp-picker2>
+				  </view>			  
+				
+				  <!-- 新增：适用产业 -->
+				  <view class="choose-box22 one-line-picker">
+				    <jp-picker2
+				      v-model="searchForm.des1"
+				      empty="选择适用产业"
+				      rangeKey="label"
+				      rangeValue="value"
+				      :range="parkList3"
+				      @change="picker2change">
+				    </jp-picker2>
+				  </view>
+				  
+				  <!-- 面积 -->
+				  <view class="choose-box22">
+				    <jp-picker2
+				      v-model="searchForm.idleArea"
+				      empty="选择面积"
+				      rangeKey="label"
+				      rangeValue="value"
+				      :range="parkList"
+				      @change="picker2change">
+				    </jp-picker2>
+				  </view>
 				</view>
+				
 											
 				<view class="search-box"  >
 												
@@ -74,7 +114,7 @@
 								<view class="item-name31" v-if="item.singleLayer=='2'">多层</view>	
 							</view>
 							<view class="item-line">
-								<text class="item-name2">闲置面积：{{item.idleArea}}㎡</text>
+								<text class="item-name2">面积：{{item.idleArea}}㎡</text>
 								<view class="item-name3"></view>
 							</view>
 			
@@ -128,6 +168,7 @@
 					idleArea:"",
 					park:'',
 					name:"",
+					des1:''
 				},
 				
 				dataList: [], // 数据列表
@@ -140,6 +181,7 @@
 				{label: '龙冈',value: '13'},{label: '张庄',value: '6'},{label: '大冈',value: '2'},{label: '郭猛',value: '11'},
 				{label: '大纵湖',value: '3'},{label: '秦南',value: '10'},{label: '学富',value: '4'},{label: '楼王',value: '7'},
 				{label: '尚庄',value: '5'},{label: '台创园',value: '1'},{label: '大纵湖度假区',value: '14'}],
+				parkList3: [],
 
 			};
 		},
@@ -181,6 +223,27 @@
 		      }
 		    });
 		  }
+		  	  if (query.des1) {
+		  	     this.searchForm.des1 = query.des1 + '';
+		  	  					
+		  	  }
+		  
+		   // 1. 先清空，避免残留
+		    this.searchForm.des1 = '';		  	
+			
+			loginService.getDictListBytype('sys_industry_show').then(({data}) => {
+				this.parkList3 = data;          // 先让下拉列表有数据
+				this.$nextTick(() => {          // 再让 jp-picker2 渲染
+				  if (query.des1) {
+				     this.searchForm.des1 = query.des1 + '';
+				  }
+				});	
+				
+			}).catch(e => {
+			})
+			
+		  
+		  
 		},
 		onShow() {
 			this.isLogin=this.$auth.checkisLogin();
@@ -199,8 +262,10 @@
 		methods: {
 			...mapActions(['refreshUserInfo']),
 			
+			
 			/*获取数据列表 */
 			upCallback(page) {
+				console.log(this.searchForm.des1);
 				this.loading = true
 				loginService.factoryBuildingsList({
 					current: page.num,
@@ -700,12 +765,21 @@
 		flex-wrap: wrap;
 	}
 	
+	
+	.choose-box,
+	.choose-box22 {
+	  flex: 1;
+	  margin-right: 10rpx;
+	}
+	.choose-box:last-child,
+	.choose-box22:last-child {
+	  margin-right: 0;
+	}
+	
 	.search-box1{
 		display: flex;
 	}
 	
-	
-	
 	.input-box{
 		background: #fff;
 		height: 65rpx;
@@ -810,4 +884,10 @@
 	  color: white; /* 标题文本颜色 */
 	  font-weight: bold;
 	}
+	/* 不换行 + 省略号 */
+	.one-line-picker {
+	  overflow: hidden;          /* 超出隐藏 */
+	  white-space: nowrap;       /* 不换行 */
+	  text-overflow: ellipsis;   /* 省略号 */
+	}
 </style>

jp-mobile/pages/index/factoryindex.vue

@@ -28,6 +28,8 @@
 	
 	<view style="display: flex;width: 100%;flex-direction:row-reverse;background: white;">
 	<text class="title2" @tap="goMap">地图</text>
+	<text class="title2" @tap="goMap2">3+3+N产业体系</text>
+	
 	  <!-- <image
 	    class="map-btn2"
 	    src="/static/img/tab4.png"
@@ -59,7 +61,7 @@
 	    <!-- 上：名称 -->
 	    <text class="grid-label">{{item.label}}</text>
 	    <!-- 下：数量 -->
-	    <text class="grid-num">闲置厂房{{item.building_cnt}} 处</text>
+	    <text class="grid-num">可入驻厂房{{item.building_cnt}} 处</text>
 	  </view>
 	</view>
 	
@@ -83,7 +85,7 @@ import loginService from "@/api/auth/loginService";
 export default {
   data() {
     return {
-      title: '盐都区闲置厂房分布图',
+      title: '盐都区可入驻厂房分布图',
       picture: [
         'https://ydwqfw.com.cn/yd_qycpfbH5/bg1.jpg',
         'https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg',
@@ -137,7 +139,12 @@ export default {
 		uni.navigateTo({
 		  url: `/pages/index/factoryindex4`   // 换成你的地图页面路径
 		})
-	  }
+	  },
+    goMap2() {
+		uni.navigateTo({
+		  url: `/pages/index/factoryindex7`   // 换成你的地图页面路径
+		})
+	},
   }
 }
 </script>

jp-mobile/pages/index/factoryindex4.vue

@@ -28,7 +28,8 @@
 	
 	<view style="display: flex;width: 100%;flex-direction:row-reverse;">
 		
-	<text class="title2" @tap="goMap">列表</text>	
+	<text class="title2" @tap="goMap">板块</text>	
+	<text class="title2" @tap="goMap2">3+3+N产业体系</text>
 	  <!-- <image
 	    class="map-btn2"
 	    src="/static/img/tab4.png"
@@ -55,7 +56,7 @@ export default {
     return {
       chart: null,
 	  inited: false,   // 防止重复 init 标志
-	  title:'盐都区闲置厂房分布图',
+	  title:'盐都区可入驻厂房分布图',
       /* 轮播图示例，换成你的真实图片即可 */
       picture:["https://ydwqfw.com.cn/yd_qycpfbH5/bg1.jpg",
       "https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg",
@@ -192,6 +193,11 @@ export default {
 		  url: `/pages/index/factoryindex`   // 换成你的地图页面路径
 		})
 	},
+	goMap2() {
+		uni.navigateTo({
+		  url: `/pages/index/factoryindex7`   // 换成你的地图页面路径
+		})
+	},
 	onTouchEnd(e) {
 	  if (this.touchMoved) return
 		  

jp-mobile/pages/index/factoryindex5.vue

@@ -56,7 +56,7 @@ const qqmapsdk = new qqMap({ key: 'N4YBZ-EB2WZ-JCIXK-7G6R5-6NJNV-7OFNK' })
 export default {
   data() {
     return {
-      title: '盐都区闲置厂房分布图',
+      title: '盐都区可入驻厂房分布图',
       pictures: [
         'https://ydwqfw.com.cn/yd_qycpfbH5/bg1.jpg',
         'https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg',

jp-mobile/pages/index/factoryindex6.vue

@@ -54,7 +54,7 @@ export default {
   data() {
     return {
       chart: null,
-	  title:'盐都区闲置厂房分布图',
+	  title:'盐都区可入驻厂房分布图',
       /* 轮播图示例，换成你的真实图片即可 */
       picture:["https://ydwqfw.com.cn/yd_qycpfbH5/bg1.jpg",
       "https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg",

jp-mobile/pages/index/factoryindex7 - 副本.vue

@@ -0,0 +1,229 @@
+<template>
+  <view class="page">
+	<!-- 1. 顶部标题 -->
+	<view class="header">
+	  <text class="title">{{title}}</text>
+	  <!-- 新增地图按钮 -->
+	  <!-- <image
+	    class="map-btn"
+	    src="/static/img/map.png"
+	    mode="aspectFit"
+	    @tap="goMap"
+	  /> -->
+	</view>
+
+    <!-- 2. 轮播图 -->
+    <swiper
+      class="swiper"
+      circular
+      :indicator-dots="true"
+      :autoplay="true"
+      :interval="3000"
+      :duration="800"
+    >
+      <swiper-item v-for="(item, index) in picture" :key="index">
+        <image :src="item" class="swiper-item" mode="aspectFill" />
+      </swiper-item>
+    </swiper>
+	
+	<view style="display: flex;width: 100%;flex-direction:row-reverse;background: white;">
+		
+	<text class="title2" @tap="goMap">地图</text>
+	<text class="title2" @tap="goMap2">板块</text>
+
+	</view>
+
+	
+	<!-- 3. 九宫格导航 -->
+	<view class="grid-box">
+	  <view
+	    v-for="(item,index) in parkList2"
+	    :key="index"
+	    class="grid-card"
+	    @tap="goListByValue(item.label)"
+	  >
+	    <!-- 上：名称 -->
+	    <text class="grid-label">{{item.building_cnt}}</text>
+	    <!-- 下：数量 -->
+	    <text class="grid-num">{{item.label}}</text>
+	  </view>
+	</view>
+	
+	
+
+    <!-- 地图已注释，如需恢复直接放开即可 -->
+    <!--
+    <view class="map-box">
+      <view @touchend="onTouchEnd" class="map-wrap">
+        <canvas canvas-id="ydChart" id="ydChart" class="map-canvas" />
+      </view>
+    </view>
+    -->
+  </view>
+</template>
+
+<script>
+// import * as echarts from 'echarts'   // 如不用地图可注释
+import loginService from "@/api/auth/loginService";
+
+export default {
+  data() {
+    return {
+      title: '盐都区可入驻厂房分布图',
+      picture: [
+        'https://ydwqfw.com.cn/yd_qycpfbH5/bg1.jpg',
+        'https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg',
+        'https://ydwqfw.com.cn/yd_qycpfbH5/bg3.jpg',
+        'https://ydwqfw.com.cn/yd_qycpfbH5/bg4.jpg'
+      ],
+      parkList2: []
+    }
+  },
+
+  /* 地图相关生命周期，如不用可全部注释
+  async onReady() {
+    const json = await this.loadGeoJSON()
+    echarts.registerMap('yanduqu', json)
+    ...
+  },
+  methods: {
+    loadGeoJSON() { ... },
+    onTouchEnd(e)  { ... },
+    renderMap()    { ... }
+  }
+  */
+
+  onShow() {
+  	loginService.getIndustryList().then(({
+  		data
+  	}) => {
+		let alls=0;
+		for(var i = 0; i < data.length; i++){
+			alls=alls+data[i].building_cnt;
+		}
+		
+		this.allcount=alls;		
+		this.parkList2=data;
+		// this.parkList2.unshift({total_area: 0, total_idle_area: 0, building_cnt: alls, label: "全部"})
+		
+  	}).catch(e => {
+  		
+  	})
+  	
+  },
+
+  methods: {
+    // 九宫格跳转
+    goListByValue(val) {
+      uni.navigateTo({
+        url: `/pages/factoryBuildings/factoryBuildingsList?parkid=${val}`
+      })
+    },
+	goMap() {
+		uni.navigateTo({
+		  url: `/pages/index/factoryindex4`   // 换成你的地图页面路径
+		})
+	  },
+    goMap2() {
+		uni.navigateTo({
+		  url: `/pages/index/factoryindex`   // 换成你的地图页面路径
+		})
+	},
+  }
+}
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+/* 顶部标题 */
+.header {
+  position: relative;   /* 让子元素绝对定位参照它 */
+  padding: 20rpx 0;
+  text-align: center;
+  background: #fff;
+}
+.title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+}
+/* 右上角地图按钮 */
+.map-btn {
+  position: absolute;
+  right: 30rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 48rpx;
+  height: 48rpx;
+}
+
+/* 轮播图 */
+.swiper {
+  width: 100%;
+  height: 300rpx;
+}
+.swiper-item {
+  width: 100%;
+  height: 100%;
+}
+
+/* 九宫格区域 */
+.grid-box {
+  width: 100%;
+  padding: 30rpx;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24rpx;
+  background: #fff;
+}
+
+.grid-num {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  height: 70rpx;
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.grid-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 160rpx;
+  border-radius: 16rpx;
+  
+  transition: transform 0.15s;
+  flex-direction: column;
+}
+.grid-card:active {
+  transform: scale(0.96);
+}
+
+.grid-label {
+  font-size: 30rpx;
+  font-weight: 600;
+  padding-left: 8rpx;
+  padding-right: 8rpx;
+  text-align: center;
+  color: #00aaff;
+}
+.title2{
+	background: #1296db;
+	border-radius: 15rpx;
+	color: white;
+	margin-top: 8rpx;
+	margin-right: 30rpx;
+	padding-top: 8rpx;
+	padding-bottom: 8rpx;
+	padding-right: 40rpx;
+	padding-left: 40rpx;
+}
+</style>

jp-mobile/pages/index/factoryindex7.vue

@@ -0,0 +1,303 @@
+<template>
+  <view class="page">
+	<!-- 1. 顶部标题 -->
+	<view class="header">
+	  <text class="title">{{title}}</text>
+	  <!-- 新增地图按钮 -->
+	  <!-- <image
+	    class="map-btn"
+	    src="/static/img/map.png"
+	    mode="aspectFit"
+	    @tap="goMap"
+	  /> -->
+	</view>
+
+    <!-- 2. 轮播图 -->
+    <swiper
+      class="swiper"
+      circular
+      :indicator-dots="true"
+      :autoplay="true"
+      :interval="3000"
+      :duration="800"
+    >
+      <swiper-item v-for="(item, index) in picture" :key="index">
+        <image :src="item" class="swiper-item" mode="aspectFill" />
+      </swiper-item>
+    </swiper>
+	
+	<view style="display: flex;width: 100%;flex-direction:row-reverse;background: white;">
+		
+	<text class="title2" @tap="goMap">地图</text>
+	<text class="title2" @tap="goMap2">板块</text>
+
+	</view>
+
+	
+	<!-- 3. 九宫格导航 -->
+	<!-- <view class="grid-box">
+	  <view
+	    v-for="(item,index) in parkList2"
+	    :key="index"
+	    class="grid-card"
+	    @tap="goListByValue(item.label)"
+	  >
+
+	    <text class="grid-label">{{item.building_cnt}}</text>
+
+	    <text class="grid-num">{{item.label}}</text>
+	  </view>
+	</view> -->
+	
+	
+	<!-- 3. 九宫格导航 -->
+	<view class="grid-box">
+	  <view
+	    v-for="(item,index) in parkList2"
+	    :key="index"
+	    class="grid-card"
+	    @tap="goListByValue(item.content)"
+	  >
+	    <!-- 右上角数字 -->
+	    <text class="grid-num">{{item.building_cnt}}</text>
+	
+	    <!-- 中间图片 -->
+		<image
+		  class="grid-icon"
+		  :src="`/static/img/bt${ (index) + 1 }.png`"
+		  mode="aspectFit"
+		/>
+	
+	    <!-- 底部文字 -->
+	    <text class="grid-label">{{item.label}}</text>
+	  </view>
+	</view>
+	
+	
+
+    <!-- 地图已注释，如需恢复直接放开即可 -->
+    <!--
+    <view class="map-box">
+      <view @touchend="onTouchEnd" class="map-wrap">
+        <canvas canvas-id="ydChart" id="ydChart" class="map-canvas" />
+      </view>
+    </view>
+    -->
+  </view>
+</template>
+
+<script>
+// import * as echarts from 'echarts'   // 如不用地图可注释
+import loginService from "@/api/auth/loginService";
+
+export default {
+  data() {
+    return {
+      title: '盐都区可入驻厂房分布图',
+      picture: [
+        'https://ydwqfw.com.cn/yd_qycpfbH5/bg1.jpg',
+        'https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg',
+        'https://ydwqfw.com.cn/yd_qycpfbH5/bg3.jpg',
+        'https://ydwqfw.com.cn/yd_qycpfbH5/bg4.jpg'
+      ],
+      parkList2: []
+    }
+  },
+
+  /* 地图相关生命周期，如不用可全部注释
+  async onReady() {
+    const json = await this.loadGeoJSON()
+    echarts.registerMap('yanduqu', json)
+    ...
+  },
+  methods: {
+    loadGeoJSON() { ... },
+    onTouchEnd(e)  { ... },
+    renderMap()    { ... }
+  }
+  */
+
+  onShow() {
+  	loginService.getIndustryList().then(({
+  		data
+  	}) => {
+		let alls=0;
+		for(var i = 0; i < data.length; i++){
+			alls=alls+data[i].building_cnt;
+		}
+		
+		this.allcount=alls;		
+		this.parkList2=data;
+		// this.parkList2.unshift({total_area: 0, total_idle_area: 0, building_cnt: alls, label: "全部"})
+		
+  	}).catch(e => {
+  		
+  	})
+  	
+  },
+
+  methods: {
+    // 九宫格跳转
+    goListByValue(val) {
+      uni.navigateTo({
+        url: `/pages/factoryBuildings/factoryBuildingsList?des1=${val}`
+      })
+    },
+	goMap() {
+		uni.navigateTo({
+		  url: `/pages/index/factoryindex4`   // 换成你的地图页面路径
+		})
+	  },
+    goMap2() {
+		uni.navigateTo({
+		  url: `/pages/index/factoryindex`   // 换成你的地图页面路径
+		})
+	},
+  }
+}
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+/* 顶部标题 */
+.header {
+  position: relative;   /* 让子元素绝对定位参照它 */
+  padding: 20rpx 0;
+  text-align: center;
+  background: #fff;
+}
+.title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+}
+/* 右上角地图按钮 */
+.map-btn {
+  position: absolute;
+  right: 30rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 48rpx;
+  height: 48rpx;
+}
+
+/* 轮播图 */
+.swiper {
+  width: 100%;
+  height: 300rpx;
+}
+.swiper-item {
+  width: 100%;
+  height: 100%;
+}
+
+
+/* 九宫格区域 */
+.grid-box {
+  width: 100%;
+  padding: 30rpx;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24rpx;
+  background: #fff;
+}
+
+.grid-card {
+  position: relative;          /* 让右上角数字绝对定位 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 160rpx;
+  border-radius: 16rpx;
+  transition: transform 0.15s;
+}
+.grid-card:active {
+  transform: scale(0.96);
+}
+
+/* 右上角数字 */
+.grid-num {
+  position: absolute;
+  right: 42rpx;
+  top: 12rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #1296db;
+}
+
+/* 中间图片 */
+.grid-icon {
+  width: 60rpx;
+  height: 60rpx;
+  margin-bottom: 8rpx;
+}
+
+/* 底部文字 */
+.grid-label {
+  font-size: 26rpx;
+  color: #333;
+}
+
+
+
+/* 九宫格区域 */
+/* .grid-box {
+  width: 100%;
+  padding: 30rpx;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24rpx;
+  background: #fff;
+}
+
+.grid-num {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  height: 70rpx;
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.grid-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 160rpx;
+  border-radius: 16rpx;
+  transition: transform 0.15s;
+  flex-direction: column;
+}
+.grid-card:active {
+  transform: scale(0.96);
+}
+
+.grid-label {
+  font-size: 30rpx;
+  font-weight: 600;
+  padding-left: 8rpx;
+  padding-right: 8rpx;
+  text-align: center;
+  color: #00aaff;
+} */
+.title2{
+	background: #1296db;
+	border-radius: 15rpx;
+	color: white;
+	margin-top: 8rpx;
+	margin-right: 30rpx;
+	padding-top: 8rpx;
+	padding-bottom: 8rpx;
+	padding-right: 40rpx;
+	padding-left: 40rpx;
+}
+</style>