智慧农业后台管理页面
Administrator
2022-05-20 8c5575286f048ca592b857141e637f9f0ea2d6b4
首页修改,操作记录修改
4 files modified
210 ■■■■■ changed files
src/api/farm/farmingrecord.js 9 ●●●●● patch | view | raw | blame | history
src/api/land/land.js 8 ●●●●● patch | view | raw | blame | history
src/views/wel/farmDetail.vue 8 ●●●●● patch | view | raw | blame | history
src/views/wel/index.vue 185 ●●●●● patch | view | raw | blame | history
src/api/farm/farmingrecord.js
@@ -45,4 +45,13 @@
            id
        }
    })
}
export const getFarmingCount = () => {
    return request({
        url: '/api/farmingRecord/getFarmingCount',
        method: 'get',
        params: {}
    })
}
src/api/land/land.js
@@ -57,3 +57,11 @@
        }
    })
}
export const selectCount = () => {
    return request({
        url: '/api/land/land/selectCount',
        method: 'get',
        params: {}
    })
}
src/views/wel/farmDetail.vue
@@ -12,8 +12,8 @@
      </el-tab-pane>
      <!-- 采收记录 -->
      <el-tab-pane label="采收记录" name="tab3">
        <farming
        ></farming>
        <recovery
        ></recovery>
      </el-tab-pane>
    </el-tabs>
</template>
@@ -21,12 +21,14 @@
<script>
import farmplant from "@/views/farmplant/farmplant.vue";
import farming from "@/views/farm/farmingrecord.vue";
import recovery from "@/views/recovery/recovery.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    farmplant,
    farming
    farming,
    recovery
  },
  data() {
    return {
src/views/wel/index.vue
@@ -7,10 +7,15 @@
          <div class="echarts-statis">
            <el-progress
              type="circle"
              :percentage="100"
              :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>
@@ -23,7 +28,7 @@
          <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
@@ -42,27 +47,39 @@
        <div class="btn">
          <div class="production-button">
            <div class="button" style="background-color: #f1fae6" @click="land">
              <div class="btn-img" style="background-color: #91CD4D">
              <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">
            <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">
            <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">
            <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>
@@ -70,7 +87,7 @@
          </div>
          <div class="production-button">
            <div class="button" style="background-color: #eefaf1">
              <div class="btn-img" style="background-color: #96DBAA">
              <div class="btn-img" style="background-color: #96dbaa">
                <img src="../../../public/img/wel/xiaosou.png" class="img" />
              </div>
              <div class="text">销售农产品</div>
@@ -83,12 +100,21 @@
        <div class="farming-statis">
          <div class="left">
            <div class="farm-text">本年农事操作</div>
            <div class="num"><span>{{total}}</span>&nbsp;次</div>
            <div class="num">
              <span>{{ total }}</span
              >&nbsp;次
            </div>
          </div>
          <div class="right">
            <el-link type="success" :underline="false" @click="farmPlantDetail">明细>></el-link>
            <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>
@@ -110,6 +136,8 @@
<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";
@@ -121,12 +149,14 @@
    land,
    plant,
    farming,
    stock
    stock,
  },
  name: "wel",
  data() {
    return {
      total:0,
      total: 0,
      farmingCount:0,
      countStatis: {},
      farmPlanList: [],
      recoveryVisible: false,
      landVisible: false,
@@ -135,31 +165,7 @@
      stockVisible: false,
      option: {
        span: 8,
        data: [
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: 100,
            decimals: 2,
            title: "地块总面积",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: "3,000",
            decimals: 2,
            title: "当前种养面积",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: "40,000",
            title: "当前种养品种",
          },
        ],
        data: [],
      },
    };
  },
@@ -168,9 +174,53 @@
  },
  created() {
    //地块使用率统计
    this.getCountStatis();
    //采收列表
    this.onLoad();
    //本年农事操作记录
    this.getFarmingCount();
  },
  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(
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: data.zarea + "亩",
            decimals: 2,
            title: "地块总面积",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: data.sarea + "亩",
            decimals: 2,
            title: "当前种养面积",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: data.num + "种",
            title: "当前种养品种",
          }
        );
      });
    },
    handleChange(val) {
      window.console.log(val);
    },
@@ -244,12 +294,12 @@
    },
    //本年农事操作明细
    farmPlantDetail() {
      const data ={
        activeName:"tab2"
      }
      const data = {
        activeName: "tab2",
      };
      this.$router.push({
        path: `/farmDetail`,
        query: data
        query: data,
      });
    },
  },
@@ -296,9 +346,18 @@
          height: 170px;
          line-height: 170px;
          margin: 0 auto;
          margin-left: 50px;
          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 {
@@ -306,6 +365,7 @@
          height: 170px;
          padding-top: 50px;
          text-align: center;
          margin-left: -80px;
        }
      }
    }
@@ -336,7 +396,7 @@
        .farm {
          width: 150px;
          height: 180px;
          background-color: #F7F9FB;
          background-color: #f7f9fb;
          border-radius: 5px;
          margin-left: 20px;
@@ -415,12 +475,11 @@
            border-radius: 3px;
            cursor: pointer;
            .btn-img{
            .btn-img {
              height: 25px;
              line-height: 25px;
              margin-top: 12px;
              border-radius: 3px;
              .img {
                width: 25px;
@@ -428,8 +487,6 @@
                z-index: 999;
              }
            }
            .text {
              font-size: 14px;
@@ -446,7 +503,7 @@
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
      min-height: 250px;
      min-height: 200px;
      .title {
        padding-top: 20px;
@@ -457,7 +514,7 @@
        text-align: center;
      }
      .farming-statis{
      .farming-statis {
        width: 94%;
        margin: 0 auto;
        height: 100px;
@@ -465,32 +522,36 @@
        flex-direction: row;
        // background-color: aqua;
        .left{
          width: 60%;
        .left {
          width: 60%;
          height: 100px;
          .farm-text{
          .farm-text {
            font-size: 20px;
            margin-top: 20px;
          }
          .num{
          .num {
            font-size: 16px;
            margin-top: 10px;
            span{
            span {
              font-size: 36px;
              font-weight: 550;
            }
          }
        }
        .right{
           margin-left:60px;
           line-height: 100px;
           height: 100px;
        .right {
          margin-left: 60px;
          line-height: 100px;
          height: 100px;
        }
      }
      .farming-divider{
        width: 94%;
        margin: 0 auto;
      }
    }
    .repertory {