From 082613d446e29e4ec1c16bfaa52345106a498b23 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 08 Nov 2022 09:03:49 +0800
Subject: [PATCH] 农事操作隐藏后四个，地图模式2d改为3d
---
src/views/wel/index.vue | 1433 +++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 903 insertions(+), 530 deletions(-)
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index 1188e3a..fac1af1 100644
--- a/src/views/wel/index.vue
+++ b/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> 亩
+ </div>
+ </div>
+ <div class="land-statis">
+ <div class="land-title">当前种养面积</div>
+ <div class="land-num">
+ <span>{{ landInfo.sarea }}</span> 亩
+ </div>
+ </div>
+ <div class="land-statis">
+ <div class="land-title">当前种养品种</div>
+ <div class="land-num">
+ <span>{{ landInfo.num }}</span> 种
+ </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> 次
+ </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">
+ 剩余库存
+ <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
- > 次
- </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>
--
Gitblit v1.9.3