yd_qycpfb/jp-mobile/pages/index/factoryindex.vue

<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>

    <!-- 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.label}}</text>
      </view>
    </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.label}}</text>
	    <!-- 下：数量 -->
	    <text class="grid-num">闲置厂房{{item.building_cnt}} 处</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.getParkList().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`   // 换成你的地图页面路径
		})
	  }
  }
}
</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-num {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: rgba(255,255,255,.85);
}

.grid-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160rpx;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 16rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.15s;
  flex-direction: column;
}
.grid-card:active {
  transform: scale(0.96);
}

.grid-label {
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
}
</style>