首页页面样式调整，农事统计完善

Administrator

2022-05-23 b09d2c5cd4eb6904146a3b39532ab171937538c8

首页页面样式调整，农事统计完善

 public/img/map.jpg

 public/img/map.png

 public/img/wel/fang.png

 public/img/wel/tian.png

 public/img/wel/tuo.png

 public/img/wel/ye.png

 src/api/farm/farmingrecord.js

@@ -54,4 +54,12 @@
        method: 'get',
        params: {}
    })
}

export const getFarmingStatis = () => {
    return request({
        url: '/api/farmingRecord/getFarmingStatis',
        method: 'get',
        params: {}
    })
}

 src/views/wel/index.vue

@@ -7,18 +7,49 @@
          <div class="echarts-statis">
            <el-progress
              type="circle"
              :percentage="countStatis.rate"
              :percentage="landInfo.rate"
              :stroke-width="15"
              :width="150"
              :color="customColor"
              :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>
            <p style="position: relative; top: -12px">
              <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>
            <!-- <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">
            <img src="../../../public/img/map.png" />
            <div class="title">农场地图→</div>
          </div>
        </div>
      </div>
@@ -28,10 +59,10 @@
          <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="area">种植面积：{{ item.area }}亩</div>
            <div class="btn">
              <el-button plain size="small" @click="recovery(item)"
                >采收</el-button
                ><span style="color: #5abf78">采收</span></el-button
              >
              <el-button plain size="small" @click="over(item.id)"
                >结束</el-button
@@ -40,58 +71,40 @@
          </div>
        </div>
      </div>
      <div class="farm-bottom"></div>
    </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 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="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 class="text">圈地</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 class="button" style="background-color: #f2a560" @click="plant">
            <div class="btn-img">
              <img src="../../../public/img/wel/ye.png" class="img" />
            </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 class="text">添加种养品种</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
            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>
@@ -111,13 +124,30 @@
            >
          </div>
        </div>
        <div class="farming-divider">
        <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">
            <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>
        <div class="title">
          <div class="repertory-title">农资库存</div>
          <div class="detail">
            <el-link type="success" :underline="false">明细>></el-link
            >
          </div>
        </div>
        <div class="repertory-centont">
          <div class="detail">
            <div class="detail-title">肥料</div>
            <div class="detail-number">剩余库存&nbsp;<span>1</span>公斤</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗, 采收 -->
@@ -136,7 +166,7 @@
<script>
import { mapGetters } from "vuex";
import { getList, update } from "@/api/farmplant/farmplant";
import { getFarmingCount } from "@/api/farm/farmingrecord";
import { getFarmingCount,getFarmingStatis } from "@/api/farm/farmingrecord";
import { selectCount } from "@/api/land/land";
import recovery from "./recovery.vue";
import land from "./land.vue";
@@ -154,9 +184,12 @@
  name: "wel",
  data() {
    return {
      farmingList: [],
      isFarmingDetail: false,
      landInfo: {},
      customColor: "#5ABF78",
      total: 0,
      farmingCount:0,
      countStatis: {},
      farmingCount: 0,
      farmPlanList: [],
      recoveryVisible: false,
      landVisible: false,
@@ -179,37 +212,34 @@
    this.onLoad();
    //本年农事操作记录
    this.getFarmingCount();
    //本年农事操作记录,分组
    this.getFarmingStatis();
  },
  methods: {
    //本年农事操作记录
    getFarmingCount(){
    getFarmingCount() {
      var that = this;
      getFarmingCount().then((res)=>{
      getFarmingCount().then((res) => {
        that.total = res.data.data;
      })
        // that.total = 0;
        if(that.total>0){
          that.isFarmingDetail = true;
        }
      });
    },
    //本年农事操作记录，分组统计
    getFarmingStatis() {
      var that = this;
      getFarmingStatis().then((res) => {
        that.farmingList = 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: "当前种养品种",
          }
        );
        that.landInfo = data;
      });
    },
    handleChange(val) {
@@ -333,18 +363,18 @@
        display: flex;

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

        .percentText {
          position: relative;
          left: -15.0%;
          left: -16%;
          top: 57px;
          width: 90px;
          font-size: 16px;
@@ -352,11 +382,49 @@
        }

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

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

            .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;
          }
        }
      }
    }
@@ -378,36 +446,39 @@
      }

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

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

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

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

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

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

          .area {
@@ -422,6 +493,10 @@
          }
        }
      }
    }

    .farm-bottom {
      min-height: 50px;
    }
  }

@@ -446,46 +521,49 @@
      }

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

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

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

          .button {
            margin-left: 20px;
            display: flex;
            flex-direction: row;
            width: 150px;
            height: 50px;
            line-height: 50px;
            align-content: center;
            justify-content: center;
          .btn-img {
            height: 32px;
            line-height: 32px;
            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;
              }
            }

            .text {
              font-size: 14px;
              margin-left: 5px;
              letter-spacing: 1px;
            .img {
              width: 32px;
              height: 32px;
            }
          }

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

@@ -494,7 +572,8 @@
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
      min-height: 200px;
      height: auto;
          // white-space: nowrap;

      .title {
        padding-top: 20px;
@@ -526,8 +605,9 @@
            margin-top: 10px;

            span {
              font-size: 36px;
              font-size: 38px;
              font-weight: 550;
              color: #5abf78;
            }
          }
        }
@@ -539,16 +619,62 @@
        }
      }

      .farming-divider{
      .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%;
      min-height: 80;
      height: auto;
      background-color: #fff;
      border-radius: 5px;

@@ -556,10 +682,67 @@
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        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;
            }
          }
        }
      }

      
    }
  }