农事操作隐藏后四个，地图模式2d改为3d

guoshilong

2022-11-08 082613d446e29e4ec1c16bfaa52345106a498b23

 src/views/wel/index.vue

@@ -1,572 +1,945 @@
<template>
  <div class="home">
    <div class="left">
      <div class="farm-info">
        <div class="farm-title">农场概览</div>
        <div class="statis">
          <div class="echarts-statis">
            <el-progress
              type="circle"
              :percentage="countStatis.rate"
              :stroke-width="15"
              :width="150"
              :show-text="false"
            ></el-progress>
          </div>
          <div class="percentText">
            <p>地块使用率</p>
            <p style="position: relative;top:-12px;"><span style="font-size:32px;font-weight: 550;margin-top:-10px">{{ countStatis.rate || 0 }}</span>%</p>
          </div>
          <div class="avue-statis">
            <avue-data-display :option="option"></avue-data-display>
          </div>
        </div>
      </div>
      <div class="farm-variety">
        <div class="title">当前种养品种</div>
        <div class="content">
          <div class="farm" v-for="(item, index) in farmPlanList" :key="index">
            <div class="farm-img"><img :src="item.url" class="img" /></div>
            <div class="cai">{{ item.strainName }}</div>
            <div class="area">种植面积：{{ item.area }}</div>
            <div class="btn">
              <el-button plain size="small" @click="recovery(item)"
                >采收</el-button
              >
              <el-button plain size="small" @click="over(item.id)"
                >结束</el-button
              >
    <div class="home">
        <div class="left">
            <div class="farm-info">
              <div class="farm-title">农场概览</div>
<!--              <div class="statis" style="padding-left: 50px">-->
<!--                <el-select v-model="farm.id" placeholder="请选择所属农场" filterable @change="farmChange">-->
<!--                  <el-option-->
<!--                    v-for="item in farmList"-->
<!--                    :key="item.id"-->
<!--                    :label="item.farmName"-->
<!--                    :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </div>-->
              <div class="statis">
                    <div class="echarts-statis">
                        <el-progress
                            type="circle"
                            :percentage="landInfo.rate"
                            :stroke-width="15"
                            :width="150"
                            :color="customColor"
                            :show-text="false"
                        ></el-progress>
                    </div>
                    <div class="percentText">
                        <p>地块使用率</p>
                        <p>
                            <span
                                style="font-size: 32px; font-weight: 550; margin-top: -10px"
                            >{{ landInfo.rate || 0 }}</span>%
                        </p>
                    </div>
                    <div class="avue-statis">
                        <!-- <avue-data-display :option="option"></avue-data-display> -->
                        <div class="land-statis">
                            <div class="land-title">地块总面积</div>
                            <div class="land-num">
                                <span>{{  landInfo.zarea }}</span>&nbsp;亩
                            </div>
                        </div>
                        <div class="land-statis">
                            <div class="land-title">当前种养面积</div>
                            <div class="land-num">
                                <span>{{ landInfo.sarea }}</span>&nbsp;亩
                            </div>
                        </div>
                        <div class="land-statis">
                            <div class="land-title">当前种养品种</div>
                            <div class="land-num">
                                <span>{{ landInfo.num }}</span>&nbsp;种
                            </div>
                        </div>
                    </div>
                    <div class="map-view" @click="goToMapModel">
                        <img src="../../../public/img/map.png"  />
                        <div class="title">农场地图→</div>
                    </div>
                </div>
            </div>
          </div>
            <div class="farm-variety">
                <div class="title">当前种养品种</div>
                <div class="content">
                    <div class="farm" v-for="(item, index) in farmPlanList" :key="index">
                        <div class="farm-img" @click="recoveryDetail(item)">
                            <img :src="item.url" class="img" />
                        </div>
                        <div class="cai">{{ item.strainName }}</div>
                        <div class="area">
                            种植面积：
                            <span>{{ item.area }}</span>亩
                        </div>
                        <div class="btn">
                            <el-button plain size="small" @click="recovery(item)">
                                <span style="color: #5abf78">采收</span>
                            </el-button>
                            <!-- <el-button plain size="small" @click="over(item.id)">结束</el-button> -->
                            <el-button plain size="small" @click="over(item)">结束</el-button>
                        </div>
                    </div>
                    <!-- 秧苗 -->
                    <div class="farm" v-for="(item, index) in farmPlanListYM" :key="index">
                        <div class="farm-img" @click="recoveryDetail(item)">
                            <img :src="item.url" class="img" />
                        </div>
                        <div class="cai">{{ item.strainName }}(秧苗)</div>
                        <div class="area">
                            种植面积：
                            <span>{{ item.area }}</span>亩
                        </div>
                        <div class="btn">
                            <el-button plain size="small" @click="plant(item)">
                                <span style="color: #5abf78">移栽</span>
                            </el-button>
                            <!-- <el-button plain size="small" @click="over(item.id)">结束</el-button> -->
                            <el-button plain size="small" @click="over(item)">结束</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="farm-bottom"></div>
        </div>
      </div>
        <div class="right">
            <div class="production">
                <div class="title">生产管理</div>
                <div class="btn">
                    <!-- <div class="production-button"> -->
                    <div class="button" @click="land" style="background-color: #6991f4">
                        <div class="btn-img">
                            <img src="../../../public/img/wel/tian.png" class="img" />
                        </div>
                        <div class="text">圈地</div>
                    </div>
                    <div class="button" style="background-color: #f2a560" @click="plant">
                        <div class="btn-img">
                            <img src="../../../public/img/wel/ye.png" class="img" />
                        </div>
                        <div class="text">添加种养品种</div>
                    </div>
                    <div class="button" style="background-color: #f37ba1" @click="farming">
                        <div class="btn-img">
                            <img src="../../../public/img/wel/tuo.png" class="img" />
                        </div>
                        <div class="text">农事操作</div>
                    </div>
                    <div class="button" style="background-color: #9d82f6" @click="stock">
                        <div class="btn-img">
                            <img src="../../../public/img/wel/fang.png" class="img" />
                        </div>
                        <div class="text">农资入库</div>
                    </div>
                </div>
            </div>
            <div class="statistics">
                <div class="title">生产统计</div>
                <div class="farming-statis">
                    <div class="left">
                        <div class="farm-text">本年农事操作</div>
                        <div class="num">
                            <span>{{ total }}</span>&nbsp;次
                        </div>
                    </div>
                    <div class="right">
                        <el-link type="success" :underline="false" @click="farmPlantDetail">明细>></el-link>
                    </div>
                </div>
                <div class="farming-divider" v-if="isFarmingDetail">
                    <el-divider></el-divider>
                </div>
                <div class="farming-details" :v-if="isFarmingDetail">
                    <div
                        class="detail"
                        v-for="(item, index) in farmingList"
                        :key="index"
                        @click="farmPlantDetails(item)"
                    >
                        <div class="detail-title">{{ item.name }}</div>
                        <div class="detail-number">
                            <span>{{ item.value }}</span>次
                        </div>
                    </div>
                </div>
            </div>
            <div class="repertory">
                <div class="title">
                    <div class="repertory-title">农资库存</div>
                    <div class="detail">
                        <el-link type="success" :underline="false " @click="stockDetail">明细>></el-link>
                    </div>
                </div>
                <div class="repertory-centont">
                    <div
                        class="detail"
                        v-for="(item, index) in stockList"
                        :key="index"
                        @click="stockDetails(item)"
                    >
                        <div class="detail-title">{{ item.name}}</div>
                        <div class="detail-number">
                            剩余库存&nbsp;
                            <span>{{ item.val}}</span>公斤
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹窗, 采收 -->
        <recovery v-if="recoveryVisible" ref="recovery" :farmDetail="farm"></recovery>
        <!-- 弹窗，结束种养-->
        <over v-if="overVisible" ref="over" @refreshOnLoad="refreshAll"></over>
        <!-- 圈地 -->
        <land v-if="landVisible" ref="land" @refreshOnLoad="refreshAll"></land>
        <!-- 种养品 -->
        <plant v-if="plantVisible" ref="plant" @refreshOnLoad="refreshAll"></plant>
        <!-- 农事操作 -->
        <farming v-if="farmingVisible" ref="farming" @refreshOnLoad="refreshAll"></farming>
        <!-- 农资入库 -->
        <stock v-if="stockVisible" ref="stock" @refreshOnLoad="refreshAll"></stock>
    </div>
    <div class="right">
      <div class="production">
        <div class="title">生产管理</div>
        <div class="btn">
          <div class="production-button">
            <div class="button" style="background-color: #f1fae6" @click="land">
              <div class="btn-img" style="background-color: #91cd4d">
                <img src="../../../public/img/wel/land.png" class="img" />
              </div>
              <div class="text">圈地</div>
            </div>
            <div
              class="button"
              style="background-color: #edf9fe"
              @click="plant"
            >
              <div class="btn-img" style="background-color: #40c4ff">
                <img src="../../../public/img/wel/plant.png" class="img" />
              </div>
              <div class="text">添加种养品种</div>
            </div>
          </div>
          <div class="production-button">
            <div
              class="button"
              style="background-color: #fbf0e9"
              @click="farming"
            >
              <div class="btn-img" style="background-color: #ffac92">
                <img src="../../../public/img/wel/farming.png" class="img" />
              </div>
              <div class="text">农事操作</div>
            </div>
            <div
              class="button"
              style="background-color: #ebf1fd"
              @click="stock"
            >
              <div class="btn-img" style="background-color: #80a6fa">
                <img src="../../../public/img/wel/nongzi.png" class="img" />
              </div>
              <div class="text">农资入库</div>
            </div>
          </div>
          <div class="production-button">
            <div class="button" style="background-color: #eefaf1">
              <div class="btn-img" style="background-color: #96dbaa">
                <img src="../../../public/img/wel/xiaosou.png" class="img" />
              </div>
              <div class="text">销售农产品</div>
            </div>
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="title">生产统计</div>
        <div class="farming-statis">
          <div class="left">
            <div class="farm-text">本年农事操作</div>
            <div class="num">
              <span>{{ total }}</span
              >&nbsp;次
            </div>
          </div>
          <div class="right">
            <el-link type="success" :underline="false" @click="farmPlantDetail"
              >明细>></el-link
            >
          </div>
        </div>
        <div class="farming-divider">
          <el-divider></el-divider>
        </div>
        
      </div>
      <div class="repertory">
        <div class="title">农资库存</div>
      </div>
    </div>
    <!-- 弹窗, 采收 -->
    <recovery v-if="recoveryVisible" ref="recovery"></recovery>
    <!-- 圈地 -->
    <land v-if="landVisible" ref="land"></land>
    <!-- 种养品 -->
    <plant v-if="plantVisible" ref="plant" @refreshOnLoad="onLoad"></plant>
    <!-- 农事操作 -->
    <farming v-if="farmingVisible" ref="farming"></farming>
    <!-- 农资入库 -->
    <stock v-if="stockVisible" ref="stock"></stock>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getList, update } from "@/api/farmplant/farmplant";
import { getFarmingCount } from "@/api/farm/farmingrecord";
import { selectCount } from "@/api/land/land";
import recovery from "./recovery.vue";
import land from "./land.vue";
import plant from "./plant.vue";
import farming from "./farming.vue";
import stock from "./stock.vue";
import { mapGetters } from "vuex"
import { getList, update,getStrainCount,getStrainCountYM } from "@/api/farmplant/farmplant"
import { getFarmingCount, getFarmingStatis } from "@/api/farm/farmingrecord"
import { selectCount } from "@/api/land/land"
import { StockCount } from "@/api/stock/stock"
import {getFarmList} from "@/api/farm/farm";
import recovery from "./recovery.vue"
import over from "./over.vue"
import land from "./land.vue"
import plant from "./plant.vue"
import farming from "./farming.vue"
import stock from "./stock.vue"
import fixed from "@/util/mathHandler"
export default {
  components: {
    recovery,
    land,
    plant,
    farming,
    stock,
  },
  name: "wel",
  data() {
    return {
      total: 0,
      farmingCount:0,
      countStatis: {},
      farmPlanList: [],
      recoveryVisible: false,
      landVisible: false,
      plantVisible: false,
      farmingVisible: false,
      stockVisible: false,
      option: {
        span: 8,
        data: [],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    //地块使用率统计
    this.getCountStatis();
    //采收列表
    this.onLoad();
    //本年农事操作记录
    this.getFarmingCount();
    components: {
        recovery,
        over,
        land,
        plant,
        farming,
        stock,
    },
    name: "wel",
    data () {
        return {
            farmingList: [],
            stockList: [],
            isFarmingDetail: false,
            isStockDetail: false,
            landInfo: {},
            farm:{},
            farmList:[],
            customColor: "#5ABF78",
            total: 0,
            farmingCount: 0,
            farmPlanList: [],
            farmPlanListYM:[],
            recoveryVisible: false,
            overVisible:false,
            landVisible: false,
            plantVisible: false,
            farmingVisible: false,
            stockVisible: false,
            option: {
                span: 8,
                data: [],
            },
        }
    },
    computed: {
        ...mapGetters(["userInfo","$farmId"]),
    },
  created () {

        this.$EventBus.$on('getFarmObj', (farmObj)=>{
            // this.$nextTick(() => {
            //     this.$EventBus.$emit("setFarmId", farmObj.id);
            // });
            setTimeout(() => {
                this.$EventBus.$emit("setFarmId", farmObj.id);
            }, 100);
        })


        //初始化农场信息
        // let farmId = this.userInfo.$farmId
        this.farm.id = this.$farmId
        this.initData(this.userInfo.tenant_id);
        //地块使用率统计
        this.getCountStatis()
        //采收列表
        this.onLoad()
        //本年农事操作记录
        this.getFarmingCount()
        //本年农事操作记录,分组
        this.getFarmingStatis()
        this.StockCount()

    },
  watch: {
    '$farmId':{
      handler (newName, oldName) {
        this.farm.id = newName

        setTimeout(() => {
        //农场概览 地块使用率
        this.getCountStatis ()
        //本年农事操作记录
        this.getFarmingCount()
        //本年农事操作记录,分组
        this.getFarmingStatis()
        this.StockCount()
        //当前农场种养品种
        this.onLoad()
        }, 100);

      }
    }
  },
  methods: {
    //本年农事操作记录
    getFarmingCount(){
      var that = this;
      getFarmingCount().then((res)=>{
        that.total = res.data.data;
      })
    },
    //地块使用率统计
    getCountStatis() {
      var that = this;
      selectCount().then((res) => {
        var data = res.data.data;
        that.countStatis = data;
        that.option.data.push(
          {
            count: data.zarea + "亩",
            decimals: 2,
            title: "地块总面积",
          },
          {
            count: data.sarea + "亩",
            decimals: 2,
            title: "当前种养面积",
          },
          {
            count: data.num + "种",
            title: "当前种养品种",
          }
        );
      });
    },
    handleChange(val) {
      window.console.log(val);
    },
    //获取种植中的种养品
    onLoad() {
      var params = {
        status: 1,
      };
      getList(1, 10, Object.assign(params)).then((res) => {
        const data = res.data.data;
        this.farmPlanList = data.records;
      });
    },
    //采收
    recovery(data) {
      this.recoveryVisible = true;
      this.$nextTick(() => {
        this.$refs.recovery.init(data);
      });
    },
    //结束种植
    over(id) {
      var that = this;
      this.$confirm("确定结束当前种植的农产品?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
      //获取农场信息
        initData(tenantId) {
          const data = {
            id: id,
            status: 2,
          };
          return update(data);
        })
        .then(() => {
          that.onLoad();
          this.$message({
            type: "success",
            message: "操作成功!",
            deptId:this.userInfo.dept_id
          }
          getFarmList(data).then(res => {
            this.farmList = this.farmList.concat(res.data.data)
          });
        });
        },
        refreshAll(){
            this.getCountStatis ()
            //本年农事操作记录
            this.getFarmingCount()
            //本年农事操作记录,分组
            this.getFarmingStatis()
            this.StockCount()
            //当前农场种养品种
            this.onLoad()
        },
        //农场下拉框change事件
        farmChange(data) {
          this.farm.id = data
          //更新农场数据
          //农场概览 地块使用率
          this.getCountStatis ()
          //当前农场种养品种
          this.onLoad()
          //本年农事操作记录
          // this.getFarmingCount()
          //农资库存
          // this.StockCount()

        },
        //本年农事操作记录
        getFarmingCount () {
            var that = this
            getFarmingCount(this.$farmId).then((res) => {
                that.total = res.data.data
                // that.total = 0;
                if (that.total > 0) {
                    that.isFarmingDetail = true
                }
            })
        },
        //本年农事操作记录，分组统计
        getFarmingStatis () {
            var that = this
            getFarmingStatis(this.$farmId).then((res) => {
                that.farmingList = res.data.data
            })
        },
        //农资库存
        StockCount () {
            var that = this
            StockCount(this.$farmId).then((res) => {
                that.stockList = res.data.data.filter((e)=>{
                    return e.val != 0
                })
                that.stockList.forEach((e)=>{
                    e.val = fixed.fixedNum(e.val)
                })
            })
        },
        //地块使用率统计
        getCountStatis () {
            var that = this
            selectCount(this.farm.id).then((res) => {
                var data = res.data.data
                that.landInfo = data
                that.landInfo.zarea = fixed.fixedNum(that.landInfo.zarea)
                that.landInfo.sarea = fixed.fixedNum(that.landInfo.sarea)
            })
        },
        handleChange (val) {
            window.console.log(val)
        },
        //获取种植中的种养品
        onLoad () {
            var params = {
                status: 1,
            }
            params['tenantId'] = this.userInfo.tenant_id
            params['farmId'] = this.farm.id
            getStrainCount(1, 100, Object.assign(params)).then((res) => {
                const data = res.data.data.records
                this.farmPlanList = data
                this.farmPlanList.forEach((e)=>{
                    e.area = fixed.fixedNum(e.area)
                })
            })

            getStrainCountYM(1, 100, Object.assign(params)).then((res) => {
                const data = res.data.data.records
                this.farmPlanListYM = data
                this.farmPlanListYM.forEach((e)=>{
                    e.area = fixed.fixedNum(e.area)
                })
            })
        },
        //采收
        recovery (data) {
            this.recoveryVisible = true
            this.$nextTick(() => {
                this.$refs.recovery.init(data)
            })
        },
        //结束种养
        over(data) {
            this.overVisible = true
            this.$nextTick(() => {
                this.$refs.over.initData(data,this.farm.id)
            })
        },
        land () {
            this.landVisible = true
            this.$nextTick(() => {
                this.$refs.land.init()
            })
        },
        //种植
        plant (item) {
            this.plantVisible = true
            this.$nextTick(() => {
                this.$refs.plant.init(item)
            })
        },
        //农事操作
        farming () {
            this.farmingVisible = true
            this.$nextTick(() => {
                this.$refs.farming.init()
            })
        },
        //农资入库
        stock () {
            this.stockVisible = true
            this.$nextTick(() => {
                this.$refs.stock.init()
            })
        },
        //本年农事操作明细
        farmPlantDetail () {
            const data = {
                activeName: "tab2",
            }
            this.$router.push({
                path: `/farmDetail`,
                query: data,
            })
        },
        stockDetail () {
            this.$router.push({
                path: `/stockmanage`,
            })
        },
        //本年农事操作明细--有参
        farmPlantDetails (item) {
            const data = {
                type: item.value,
                activeName: "tab2",
            }
            this.$router.push({
                path: `/farmDetail`,
                query: data,
            })
        },
        //农资库存点击事件
        stockDetails (item) {
            var type
            if (item.name == "化肥") {
                type = 0
            }
            if (item.name == "有机肥") {
                type = 1
            }
            if (item.name == "杀虫剂") {
                type = 2
            }
            if (item.name == "杀菌剂") {
                type = 3
            }
            if (item.name == "饲料") {
                type = 4
            }
            const data = {
                type: type,
            }
            this.$router.push({
                path: `/stockmanage`,
                query: data,
            })
        },
        //采收记录
        recoveryDetail () {
            const data = {
                activeName: "tab1",
            }
            this.$router.push({
                path: `/farmDetail`,
                query: data,
            })
        },
        //进入地图模式
        goToMapModel () {
            this.$router.push({
                path: `/mapPattern`,
                // query: row,
            })
        }
    },
    //圈地
    land() {
      this.landVisible = true;
      this.$nextTick(() => {
        this.$refs.land.init();
      });
    },
    //种植
    plant() {
      this.plantVisible = true;
      this.$nextTick(() => {
        this.$refs.plant.init();
      });
    },
    //农事操作
    farming() {
      this.farmingVisible = true;
      this.$nextTick(() => {
        this.$refs.farming.init();
      });
    },
    //农资入库
    stock() {
      this.stockVisible = true;
      this.$nextTick(() => {
        this.$refs.stock.init();
      });
    },
    //本年农事操作明细
    farmPlantDetail() {
      const data = {
        activeName: "tab2",
      };
      this.$router.push({
        path: `/farmDetail`,
        query: data,
      });
    },
  },
};
</script>

<style lang="scss" scope>
.el-font-size {
  font-size: 14px;
    font-size: 14px;
}

.home {
  width: 100%;
  // height: 100%;
  display: flex;
  flex-direction: row;
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: row;

  .left {
    margin-left: 1%;
    width: 75%;
    height: 100%;
    .left {
        margin-left: 1%;
        width: 75%;
        height: 100%;

    .farm-info {
      width: 100%;
      height: 30%;
      background-color: #fff;
      border-radius: 5px;
        .farm-info {
            width: 100%;
            height: 30%;
            background-color: #fff;
            border-radius: 5px;

      .farm-title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }

      .statis {
        width: 100%;
        display: flex;

        .echarts-statis {
          width: 25%;
          height: 170px;
          line-height: 170px;
          margin: 0 auto;
          margin-left: 90px;
          text-align: center;
          padding-top: 30px;
        }

        .percentText {
          position: relative;
          left: -15.0%;
          top: 57px;
          width: 90px;
          font-size: 16px;
          text-align: center;
        }

        .avue-statis {
          width: 75%;
          height: 170px;
          padding-top: 50px;
          text-align: center;
          margin-left: -80px;
        }
      }
    }

    .farm-variety {
      margin-top: 15px;
      width: 100%;
      min-height: 600px;
      background-color: #fff;
      border-radius: 5px;

      .title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }

      .content {
        width: 96%;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        flex-direction: row;

        .farm {
          width: 150px;
          height: 180px;
          background-color: #f7f9fb;
          border-radius: 5px;
          margin-left: 20px;

          .farm-img {
            width: 100px;
            height: 86px;
            margin: 0 auto;
            text-align: center;

            .img {
              width: 50px;
              height: 50px;
              border-radius: 100px;
              margin-top: 20px;
            }
          }

          .cai {
            text-align: center;
            font-size: 16px;
          }

          .area {
            text-align: center;
            font-size: 14px;
            margin-top: 5px;
          }

          .btn {
            text-align: center;
            margin-top: 8px;
          }
        }
      }
    }
  }

  .right {
    width: 22%;
    height: 100%;
    margin-left: 1%;

    .production {
      width: 100%;
      height: 30%;
      background-color: #fff;
      border-radius: 5px;

      .title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }

      .btn {
        padding-top: 20px;
        height: 200px;

        .production-button {
          display: flex;
          padding-top: 12px;
          height: 50px;

          .button {
            margin-left: 20px;
            display: flex;
            flex-direction: row;
            width: 150px;
            height: 50px;
            line-height: 50px;
            align-content: center;
            justify-content: center;
            border-radius: 3px;
            cursor: pointer;

            .btn-img {
              height: 25px;
              line-height: 25px;
              margin-top: 12px;
              border-radius: 3px;

              .img {
                width: 25px;
                height: 25px;
                z-index: 999;
              }
            .farm-title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                font-size: 24px;
                font-weight: 550;
                text-align: center;
            }

            .text {
              font-size: 14px;
              margin-left: 5px;
              letter-spacing: 1px;
            .statis {
                width: 100%;
                display: flex;

                .echarts-statis {
                    width: 20%;
                    height: 170px;
                    line-height: 170px;
                    margin: 0 auto;
                    margin-left: 90px;
                    // text-align: center;
                    padding-top: 30px;
                }

                .percentText {
                    position: relative;
                    left: -15.8%;
                    top: 77px;
                    width: 90px;
                    font-size: 16px;
                    text-align: center;
                }

                .avue-statis {
                    width: 60%;
                    height: 170px;
                    padding-top: 50px;
                    margin-left: -80px;
                    display: flex;
                    flex-direction: row;

                    .land-statis {
                        width: 33%;
                        margin: 3% 3%;

                        .land-num {
                            margin-top: 20px;

                            span {
                                font-size: 30px;
                                font-weight: 550;
                                color: #5abf78;
                            }
                        }
                    }
                }

                .map-view {
                    width: 20%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;

                    img {
                        width: 90px;
                        height: 66px;
                    }

                    .title {
                        font-size: 13px;
                        color: #fff;
                        z-index: 999;
                        position: relative;
                        left: -70px;
                        top: 15px;
                    }
                }
            }
          }
        }
      }
    }

    .statistics {
      margin-top: 15px;
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
      min-height: 200px;
        .farm-variety {
            margin-top: 15px;
            width: 100%;
            min-height: 600px;
            background-color: #fff;
            border-radius: 5px;

      .title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }

      .farming-statis {
        width: 94%;
        margin: 0 auto;
        height: 100px;
        display: flex;
        flex-direction: row;
        // background-color: aqua;

        .left {
          width: 60%;
          height: 100px;

          .farm-text {
            font-size: 20px;
            margin-top: 20px;
          }
          .num {
            font-size: 16px;
            margin-top: 10px;

            span {
              font-size: 36px;
              font-weight: 550;
            .title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                font-size: 24px;
                font-weight: 550;
                text-align: center;
            }
          }

            .content {
                width: 99%;
                height: 630px;
                margin: 0 auto;

                word-wrap: break-word;
                word-break: break-all;

                .farm {
                    width: 168px;
                    height: 277px;
                    background-color: #f7f9fb;
                    border-radius: 5px;
                    margin-left: 30px;
                    margin-top: 30px;
                    float: left;

                    .farm-img {
                        width: 168px;
                        height: 168px;

                        .img {
                            width: 168px;
                            height: 168px;
                            border-radius: 8px 8px 0px 0px;
                        }
                    }

                    .cai {
                        text-align: center;
                        font-size: 18px;
                        font-weight: 550;
                        margin-top: 8px;
                        color: #5abf78;
                    }

                    .area {
                        text-align: center;
                        font-size: 14px;
                        margin-top: 5px;
                        color: #333333;

                        span {
                            font-size: 15px;
                            color: #333333;
                        }
                    }

                    .btn {
                        text-align: center;
                        margin-top: 8px;
                    }
                }
            }
        }

        .right {
          margin-left: 60px;
          line-height: 100px;
          height: 100px;
        .farm-bottom {
            min-height: 50px;
        }
      }

      .farming-divider{
        width: 94%;
        margin: 0 auto;
      }
    }

    .repertory {
      margin-top: 15px;
      width: 100%;
      min-height: 80;
      background-color: #fff;
      border-radius: 5px;
    .right {
        width: 22%;
        height: 100%;
        margin-left: 1%;

      .title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }
        .production {
            width: 100%;
            height: 30%;
            background-color: #fff;
            border-radius: 5px;

            .title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                font-size: 24px;
                font-weight: 550;
                text-align: center;
            }

            .btn {
                width: 88%;
                margin-left: 7%;
                padding-top: 20px;
                height: 200px;
                word-wrap: break-word;
                word-break: break-all;

                // .production-button {
                //   display: flex;
                //   padding-top: 12px;
                //   height: 100px;

                .button {
                    margin-left: 10px;
                    margin-top: 10px;
                    display: flex;
                    flex-direction: column;
                    float: left;
                    width: 140px;
                    height: 80px;
                    align-content: center;
                    justify-content: center;
                    border-radius: 3px;
                    cursor: pointer;
                    align-items: center;

                    .btn-img {
                        height: 32px;
                        line-height: 32px;
                        border-radius: 3px;

                        .img {
                            width: 32px;
                            height: 32px;
                        }
                    }

                    .text {
                        font-size: 18px;
                        color: #fff;
                    }
                }
                // }
            }
        }

        .statistics {
            margin-top: 15px;
            width: 100%;
            background-color: #fff;
            border-radius: 5px;
            height: auto;
            // white-space: nowrap;

            .title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                font-size: 24px;
                font-weight: 550;
                text-align: center;
            }

            .farming-statis {
                width: 94%;
                margin: 0 auto;
                height: 100px;
                display: flex;
                flex-direction: row;
                // background-color: aqua;

                .left {
                    width: 60%;
                    height: 100px;

                    .farm-text {
                        font-size: 20px;
                        margin-top: 20px;
                    }
                    .num {
                        font-size: 16px;
                        margin-top: 10px;

                        span {
                            font-size: 38px;
                            font-weight: 550;
                            color: #5abf78;
                        }
                    }
                }

                .right {
                    margin-left: 60px;
                    line-height: 100px;
                    height: 100px;
                }
            }

            .farming-divider {
                width: 94%;
                margin: 0 auto;
            }

            .farming-details {
                margin-top: -10px;
                width: 100%;
                height: auto;
                word-wrap: break-word;
                word-break: break-all;
                //自适应高度
                display: inline-block;

                .detail {
                    background-color: #eff3f8;
                    cursor: pointer;
                    float: left;
                    width: 45%;
                    border-radius: 4px;
                    margin-left: 3%;
                    margin-top: 10px;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                    height: 40px;
                    line-height: 40px;

                    .detail-title {
                        color: #707070;
                        font-size: 14px;
                        margin-left: 10px;
                    }

                    .detail-number {
                        color: #707070;
                        font-size: 14px;
                        margin-right: 15px;

                        span {
                            font-size: 18px;
                            font-weight: 550;
                        }
                    }
                }

                .detail:hover {
                    background: #e3f0ff;
                }
            }
        }

        .repertory {
            margin-top: 15px;
            width: 100%;
            height: auto;
            background-color: #fff;
            border-radius: 5px;

            .title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                text-align: center;

                .repertory-title {
                    font-size: 24px;
                    font-weight: 550;
                    float: left;
                    padding-left: 35%;
                }

                .detail {
                }
            }

            .repertory-centont {
                width: 94%;
                margin: 0 auto;
                height: auto;
                word-wrap: break-word;
                word-break: break-all;
                //自适应高度
                display: inline-block;

                .detail:hover {
                    background: #e3f0ff;
                }

                .detail {
                    background-color: #eff3f8;
                    cursor: pointer;
                    float: left;
                    border-radius: 4px;
                    margin-left: 3%;
                    margin-top: 10px;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                    height: 50px;
                    line-height: 50px;
                    width: 100%;

                    .detail-title {
                        color: #707070;
                        font-size: 16px;
                        margin-left: 10px;
                    }

                    .detail-number {
                        color: #707070;
                        font-size: 14px;
                        margin-right: 15px;

                        span {
                            font-size: 18px;
                            font-weight: 550;
                        }
                    }
                }
            }
        }
    }
  }

  .avue-data-display .count {
    color: #000 !important;
    font-size: 28px !important;
  }
    .avue-data-display .count {
        color: #000 !important;
        font-size: 28px !important;
    }
}
</style>