From 0d518fcfe85697544ec0d9e8991d832f13ab33f4 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Tue, 17 May 2022 20:21:10 +0800
Subject: [PATCH] 首页更新，新增采收页面
---
src/views/wel/index.vue | 501 +++++++++++++++++++++++++++++++++-----
src/main.js | 2
src/views/wel/recovery.vue | 249 +++++++++++++++++++
package.json | 1
src/views/farmplant/farmplant.vue | 25 +
5 files changed, 707 insertions(+), 71 deletions(-)
diff --git a/package.json b/package.json
index 871c1c2..5d876a0 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"ol": "^6.5.0",
"olcs": "^2.12.0",
"js-md5": "^0.7.3",
+ "echarts": "^5.0.2",
"mockjs": "^1.0.1-beta3",
"node-gyp": "^5.0.6",
"nprogress": "^0.2.0",
diff --git a/src/main.js b/src/main.js
index fd7a7ab..204273e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,6 +27,8 @@
import tenantPackage from './views/system/tenantpackage';
import Map from './components/map/main';
+import * as echarts from 'echarts';
+Vue.prototype.$echarts = echarts;
Vue.component('Map', Map);
// 注册全局crud驱动
diff --git a/src/views/farmplant/farmplant.vue b/src/views/farmplant/farmplant.vue
index 270f566..0d42e43 100644
--- a/src/views/farmplant/farmplant.vue
+++ b/src/views/farmplant/farmplant.vue
@@ -174,7 +174,7 @@
label: "种植标准",
prop: "plant",
search:true,
- searchSpan:3,
+ searchSpan:4,
labelWidth:110,
type: "select",
dicData:[
@@ -208,7 +208,7 @@
label: "种植方式",
prop: "plantingWay",
search:true,
- searchSpan:3,
+ searchSpan:4,
type: "select",
labelWidth:110,
dicData:[
@@ -234,7 +234,7 @@
label: "作业方式",
prop: "jobWay",
search:true,
- searchSpan:3,
+ searchSpan:4,
labelWidth:110,
type: "select",
dicData:[
@@ -366,6 +366,25 @@
// ],
// display:false,
// },
+ {
+ label: "种植状态",
+ prop: "status",
+ search:true,
+ searchSpan:4,
+ labelWidth:110,
+ type: "select",
+ dicData:[
+ {
+ label:"种植中",
+ value:"1"
+ },
+ {
+ label:"已结束",
+ value:"2"
+ },
+ ],
+ display:false,
+ },
],
},
data: [],
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index ee6a6c3..9a71724 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -1,101 +1,466 @@
<template>
<div class="home">
- <div class="left">
- <div class="farm-info">
- 农场概览
- </div>
- <div class="farm-variety">
- 当前种养品种
+ <div class="left">
+ <div class="farm-info">
+ <div class="farm-title">农场概览</div>
+ <div class="statis">
+ <div class="echarts-statis">
+ <div id="alarmTypeProEcharts"></div>
+ <div class="alarmTypeTotal">
+ <div class="numAlarmType">
+ <span>{{ alarmTypeTotal }}</span>
+ </div>
+ <div class="textAlarmType"><span>地块使用率</span></div>
+ </div>
+ </div>
+ <div class="avue-statis">
+ <avue-data-display :option="option"></avue-data-display>
+ </div>
</div>
</div>
- <div class="right">
- <div class="production">生成管理</div>
- <div class="statistics">生成统计</div>
- <div class="repertory">农资库存</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">种植面积：371.13亩</div>
+ <div class="btn">
+ <el-button plain size="small" @click="recovery(item)">采收</el-button>
+ <el-button plain size="small">结束</el-button>
+ </div>
+ </div>
+ </div>
</div>
-
+ </div>
+ <div class="right">
+ <div class="production">
+ <div class="title">生产管理</div>
+ <div class="btn">
+ <div class="production-button">
+ <div class="button">
+ <img src="" class="img" />
+ <div class="text">圈地</div>
+ </div>
+ <div class="button">
+ <img src="" class="img" />
+ <div class="text">添加种养品种</div>
+ </div>
+ </div>
+ <div class="production-button">
+ <div class="button">
+ <img src="" class="img" />
+ <div class="text">农事操作</div>
+ </div>
+ <div class="button">
+ <img src="" class="img" />
+ <div class="text">农资入库</div>
+ </div>
+ </div>
+ <div class="production-button">
+ <div class="button">
+ <img src="" class="img" />
+ <div class="text">销售农产品</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="statistics">
+ <div class="title">生产统计</div>
+ </div>
+ <div class="repertory">
+ <div class="title">农资库存</div>
+ </div>
+ </div>
+ <!-- 弹窗, 新增 / 修改 -->
+ <recovery v-if="recoveryVisible" ref="recovery"></recovery>
</div>
</template>
<script>
- import {mapGetters} from "vuex";
-
- export default {
- name: "wel",
- data() {
- return {
+import { mapGetters } from "vuex";
+import { getList } from "@/api/farmplant/farmplant";
+import recovery from "./recovery.vue";
+export default {
+ components: {
+ recovery,
+ },
+ name: "wel",
+ data() {
+ return {
+ farmPlanList: [],
+ recoveryVisible: 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: "当前种养品种",
+ },
+ ],
+ },
+ };
+ },
+ computed: {
+ ...mapGetters(["userInfo"]),
+ },
+ created() {
+ //地块使用率统计
+ // this.getAlarmTypeProEcharts();
+ this.onLoad();
+ },
+ methods: {
+ 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;
+ });
},
- computed: {
- ...mapGetters(["userInfo"]),
+ //采收
+ recovery(data){
+ this.recoveryVisible = true;
+ this.$nextTick(() => {
+ this.$refs.recovery.init(data);
+ });
},
- methods: {
- handleChange(val) {
- window.console.log(val);
- }
+ //预警类型占比统计
+ getAlarmTypeProEcharts(data) {
+ // selAlarmDayAveragePro(data).then((res) => {
+ // var that = this;
+ // //计算总和
+ // var data = [];
+ // var startDate = this.dateTime[0];
+ // var endDate = this.dateTime[1];
+ // data.push(
+ // { value: res.data.data[0], name: "一键求助" },
+ // { value: res.data.data[1], name: "违禁品" },
+ // { value: res.data.data[2], name: "红色健康码" },
+ // { value: res.data.data[3], name: "体温异常" }
+ // );
+ // let echarts = require("echarts");
+ // let myChart = echarts.init(
+ // document.getElementById("alarmTypeProEcharts")
+ // );
+ // myChart.on("click", function (params) {
+ // var data = [];
+ // if (params.name == "一键求助") {
+ // data.push({
+ // startTime: startDate,
+ // endTime: endDate,
+ // waringType: "紧急求救",
+ // });
+ // window.parent.handleStartAlarm(data);
+ // }
+ // if (params.name == "违禁品") {
+ // data.push({
+ // startTime: startDate,
+ // endTime: endDate,
+ // decisioDiagramResult: "contraband",
+ // });
+ // window.parent.handleStartParcelKind(data);
+ // }
+ // if (params.name == "红色健康码") {
+ // data.push({
+ // startTime: startDate,
+ // endTime: endDate,
+ // type: 3,
+ // });
+ // window.parent.handleStartHealthcode(data);
+ // }
+ // if (params.name == "体温异常") {
+ // data.push({
+ // startTime: startDate,
+ // endTime: endDate,
+ // status: 1,
+ // });
+ // window.parent.handleStartAnimalHeat(data);
+ // }
+ // });
+ // var colors = ["#FF9836", "#3fa1ff", "#F34A4A", "#8058A5"];
+ // let option = {
+ // color: colors,
+ // title: {
+ // textStyle: {
+ // fontWeight: "normal",
+ // fontSize: 16,
+ // color: "#000",
+ // },
+ // left: "1%",
+ // top: 25,
+ // textAlign: "left",
+ // text: "预警类型占比",
+ // },
+ // tooltip: {
+ // trigger: "item",
+ // },
+ // grid: {
+ // left: "1%",
+ // right: "10%",
+ // bottom: "5%",
+ // top: "25%",
+ // containLabel: true,
+ // },
+ // series: [
+ // {
+ // type: "pie",
+ // radius: ["43%", "60%"],
+ // center: ["45%", "53%"],
+ // avoidLabelOverlap: false,
+ // label: {
+ // show: false,
+ // position: "center",
+ // },
+ // labelLine: {
+ // show: false,
+ // },
+ // data: data,
+ // },
+ // ],
+ // };
+ // myChart.setOption(option);
+ // //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ // window.addEventListener("resize", function () {
+ // myChart.resize();
+ // });
+ // });
},
- };
+ },
+};
</script>
<style lang="scss" scope>
- .el-font-size {
- font-size: 14px;
- }
+.el-font-size {
+ font-size: 14px;
+}
- .home{
- width: 100%;
+.home {
+ width: 100%;
+ // height: 100%;
+ display: flex;
+ flex-direction: row;
+
+ .left {
+ margin-left: 1%;
+ width: 75%;
height: 100%;
- display: flex;
- flex-direction: row;
- .left{
- margin-left: 1%;
- width: 71%;
- 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;
}
- .farm-variety{
- margin-top: 15px;
+ .statis {
width: 100%;
- height: 65%;
- background-color:#fff ;
- border-radius: 5px;
+ display: flex;
+
+ .echarts-statis {
+ width: 25%;
+ height: 170px;
+ line-height: 170px;
+ margin: 0 auto;
+ }
+
+ .avue-statis {
+ width: 75%;
+ height: 170px;
+ padding-top: 50px;
+ text-align: center;
+ }
}
}
- .right{
- width: 26%;
- height: 100%;
- margin-left: 1%;
+ .farm-variety {
+ margin-top: 15px;
+ width: 100%;
+ min-height: 600px;
+ background-color: #fff;
+ border-radius: 5px;
- .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;
}
- .statistics{
- margin-top: 15px;
- width: 100%;
- height: 20%;
- background-color:#fff ;
- border-radius: 5px;
- }
- .repertory{
- margin-top: 15px;
- width: 100%;
- height: 20%;
- background-color:#fff ;
- border-radius: 5px;
+
+ .content {
+ width: 96%;
+ margin: 0 auto;
+ margin-top: 20px;
+ display: flex;
+ flex-direction: row;
+
+ .farm {
+ width: 150px;
+ height: 180px;
+ background-color: rgb(240, 230, 230);
+ 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;
+ background-color: aqua;
+ border-radius: 3px;
+ cursor: pointer;
+
+ .img {
+ width: 20px;
+ height: 20px;
+ background-color: antiquewhite;
+ }
+
+ .text {
+ font-size: 14px;
+ margin-left: 5px;
+ letter-spacing: 1px;
+ }
+ }
+ }
+ }
+ }
+
+ .statistics {
+ margin-top: 15px;
+ width: 100%;
+ background-color: #fff;
+ border-radius: 5px;
+ min-height: 250px;
+
+ .title {
+ padding-top: 20px;
+ height: 30px;
+ line-height: 30px;
+ font-size: 24px;
+ font-weight: 550;
+ text-align: center;
+ }
+ }
+
+ .repertory {
+ margin-top: 15px;
+ width: 100%;
+ min-height: 80;
+ background-color: #fff;
+ border-radius: 5px;
+
+ .title {
+ padding-top: 20px;
+ height: 30px;
+ line-height: 30px;
+ font-size: 24px;
+ font-weight: 550;
+ text-align: center;
+ }
+ }
+ }
+}
</style>
diff --git a/src/views/wel/recovery.vue b/src/views/wel/recovery.vue
new file mode 100644
index 0000000..81e742a
--- /dev/null
+++ b/src/views/wel/recovery.vue
@@ -0,0 +1,249 @@
+<template>
+ <el-dialog
+ :title="title"
+ :modal-append-to-body="false"
+ :append-to-body="true"
+ :close-on-click-modal="false"
+ width="60%"
+ :visible.sync="visible"
+ >
+ <avue-form ref="form" v-model="form" :option="option" @submit="submit">
+ </avue-form>
+ </el-dialog>
+</template>
+
+<script>
+
+import { mapState } from "vuex";
+import { getLandList } from "@/api/land/land";
+import { getUserList } from "@/api/system/user";
+export default {
+ data() {
+ return {
+ title:"采收/捕捞",
+ form: {},
+ option: {
+ emptyBtn: false,
+ submitText: "保存",
+ gutter: 30,
+ column: [
+ {
+ label: "采收品种",
+ prop: "farmName",
+ span: 12,
+ labelWidth: 145,
+ rules: [
+ {
+ required: true,
+ message: "请输入采收品种",
+ trigger: "blur",
+ },
+ ],
+ },
+ {
+ label: "采收地块",
+ span: 12,
+ labelWidth: 145,
+ width: 110,
+ prop: "landId",
+ type:"tree",
+ dicData: [],
+ props: {
+ label: "landName",
+ value: "id"
+ },
+ rules: [
+ {
+ required: true,
+ message: "请选择采收地块",
+ trigger: "click",
+ },
+ ],
+ },
+ {
+ label: "采收重量",
+ prop: "farmArea",
+ span: 12,
+ labelWidth: 145,
+ width: 110,
+ rules: [
+ {
+ required: true,
+ message: "请输入采收重量",
+ trigger: "click",
+ },
+ ],
+ },
+ {
+ label: "作业方式",
+ prop: "jobWay",
+ span: 12,
+ labelWidth: 145,
+ width: 110,
+ type: "select",
+ value:"0",
+ dicData:[
+ {
+ label:"人工",
+ value:"0"
+ },
+ {
+ label:"机械",
+ value:"1"
+ },
+ ],
+ rules: [
+ {
+ required: true,
+ message: "请选择作业方式",
+ trigger: "click",
+ },
+ ],
+ },
+ {
+ label: "采收时间",
+ prop: "time",
+ span: 12,
+ labelWidth: 145,
+ width: 110,
+ type: "datetime",
+ format: "yyyy-MM-dd HH:mm",
+ valueFormat: "yyyy-MM-dd HH:mm",
+ rules: [
+ {
+ required: true,
+ message: "请选择采收时间",
+ trigger: "click",
+ },
+ ],
+ },
+ {
+ label: "采收产品",
+ prop: "farmArea",
+ span: 12,
+ labelWidth: 145,
+ width: 110,
+ rules: [
+ {
+ required: true,
+ message: "请输入采收产品",
+ trigger: "click",
+ },
+ ],
+ },
+ {
+ label: "操作人",
+ prop: "operator",
+ type: "tree",
+ dicData: [],
+ props: {
+ label: "realName",
+ value: "id",
+ },
+ span: 12,
+ labelWidth: 145,
+ width: 110,
+ rules: [
+ {
+ required: true,
+ message: "请输入操作人",
+ trigger: "click",
+ },
+ ],
+ },
+ {
+ label: "产品等级",
+ prop: "leave",
+ span: 12,
+ labelWidth: 145,
+ width: 110,
+ value:"0",
+ type: "select",
+ dicData:[
+ {
+ label:"一等品",
+ value:"0"
+ },
+ {
+ label:"二等品",
+ value:"1"
+ },
+ {
+ label:"三等品",
+ value:"2"
+ },
+ {
+ label:"四等品",
+ value:"3"
+ },
+ {
+ label:"五等品",
+ value:"4"
+ },
+ ],
+ rules: [
+ {
+ required: true,
+ message: "请输入产品等级",
+ trigger: "click",
+ },
+ ],
+ },
+ {
+ label: "备注",
+ prop: "farmArea",
+ span: 24,
+ type:"textarea",
+ labelWidth: 145,
+ width: 110,
+ rules: [
+ {
+ required: false,
+ message: "请输入备注",
+ trigger: "click",
+ },
+ ],
+ },
+ ],
+ },
+ visible: false,
+ };
+ },
+ computed: {
+ ...mapState({
+ userInfo: (state) => state.user.userInfo,
+ }),
+ },
+ methods: {
+ //初始化
+ init(data) {
+ this.visible = true;
+ var that = this;
+ //获取农地数据
+ getLandList(this.userInfo.user_id).then((res) => {
+ if (res.data.code == 200) {
+ var landIdcolumn = that.findObject(that.option.column, "landId");
+ that.landList = res.data.data;
+ landIdcolumn.dicData = res.data.data;
+ }
+ });
+ //获取操作人
+ const user = {
+ tenantId: this.userInfo.tenant_id,
+ };
+ getUserList(user).then((res) => {
+ if (res.data.code == 200) {
+ var operatorcolumn = that.findObject(that.option.column, "operator");
+ operatorcolumn.dicData = res.data.data;
+ }
+ });
+ },
+ // 表单提交
+ dataFormSubmit() {
+ this.dataForm["userId"] = this.userInfo.id;
+ this.$refs["dataForm"].validate((valid) => {
+ });
+ },
+ },
+};
+</script>
--
Gitblit v1.9.3