From 7bae7846f121b3b95c5dc3c439d17e056267f589 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 08 Jul 2022 14:09:51 +0800
Subject: [PATCH] 首页修改
---
src/router/page/index.js | 9
src/views/farm/index.vue | 207 ++++
public/img/icon/1016.png | 0
src/views/home/index.vue | 65 +
public/img/icon/3666.png | 0
public/img/icon/public-close.png | 0
public/img/icon/360.png | 0
src/styles/publicBox/arc-nav-bar.scss | 141 +++
src/views/manage/index.vue | 2028 ++++++++++++++++++++++++------------------------
src/components/publicBox/index.vue | 29
src/styles/index.scss | 1
src/styles/element-ui.scss | 25
12 files changed, 1,487 insertions(+), 1,018 deletions(-)
diff --git a/public/img/icon/1016.png b/public/img/icon/1016.png
new file mode 100644
index 0000000..7e24efd
--- /dev/null
+++ b/public/img/icon/1016.png
Binary files differ
diff --git a/public/img/icon/360.png b/public/img/icon/360.png
new file mode 100644
index 0000000..6cc0d79
--- /dev/null
+++ b/public/img/icon/360.png
Binary files differ
diff --git a/public/img/icon/3666.png b/public/img/icon/3666.png
new file mode 100644
index 0000000..6d96cd8
--- /dev/null
+++ b/public/img/icon/3666.png
Binary files differ
diff --git a/public/img/icon/public-close.png b/public/img/icon/public-close.png
new file mode 100644
index 0000000..ecda3e4
--- /dev/null
+++ b/public/img/icon/public-close.png
Binary files differ
diff --git a/src/components/publicBox/index.vue b/src/components/publicBox/index.vue
new file mode 100644
index 0000000..fa56ed6
--- /dev/null
+++ b/src/components/publicBox/index.vue
@@ -0,0 +1,29 @@
+<template>
+ <div ref="publicBox">
+ <div class="header">
+ <slot name="public-box-header"></slot>
+ </div>
+ <div class="content">
+ <slot name="public-box-content"></slot>
+ </div>
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: 'PublicBox',
+ data () {
+ return {
+ }
+ },
+ created () {
+ },
+ methods: {
+
+ }
+}
+</script>
+
+<style scoped lang='scss'>
+</style>
diff --git a/src/router/page/index.js b/src/router/page/index.js
index eadc353..25448da 100644
--- a/src/router/page/index.js
+++ b/src/router/page/index.js
@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2021-04-30 14:12:09
* @Last Modified by: Morpheus
- * @Last Modified time: 2022-06-27 10:25:01
+ * @Last Modified time: 2022-07-08 10:54:29
*/
import Vue from 'vue'
@@ -58,6 +58,13 @@
}]
},
{
+ path: '/farmDetails',
+ meta: {
+ title: '农场详情'
+ },
+ component: () => import('../../views/farm/index.vue')
+ },
+ {
path: '/403',
component: () =>
import(/* webpackChunkName: "page" */ '@/components/error-page/403'),
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index cbf0fb0..9ec4a61 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -4,4 +4,29 @@
border-color: #849EAE;
color: rgba(255, 255, 255, 0.6);
}
+}
+
+
+.el-icon-my-sy {
+ background: url('/img/icon/1016.png') center no-repeat;
+ // background-size: 100% 100%;
+ /* background-size: cover;*/
+}
+
+.el-icon-my-sy:before {
+ content: "替";
+ font-size: 18px;
+ visibility: hidden;
+}
+
+.el-icon-my-sb {
+ background: url('/img/icon/3666.png') center no-repeat;
+ // background-size: 100% 100%;
+ /* background-size: cover;*/
+}
+
+.el-icon-my-sb:before {
+ content: "替";
+ font-size: 24px;
+ visibility: hidden;
}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e4d99b1..1f73ade 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,5 @@
@import "./element-ui.scss";
+@import "./publicBox/arc-nav-bar.scss";
html,
body {
diff --git a/src/styles/publicBox/arc-nav-bar.scss b/src/styles/publicBox/arc-nav-bar.scss
new file mode 100644
index 0000000..b7d6f5c
--- /dev/null
+++ b/src/styles/publicBox/arc-nav-bar.scss
@@ -0,0 +1,141 @@
+.public-org-nav-bar {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 1208px;
+
+ background-color: transparent;
+ z-index: 99;
+ font-size: 14px;
+ box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.1600);
+ border: 1px solid #69E2ED;
+ background: rgba(20, 66, 104, 0.8);
+
+ .header {
+ position: relative;
+ border-radius: 8px 8px 0 0;
+ width: 100%;
+ height: 58px;
+ line-height: 58px;
+ background: linear-gradient(96deg, #142B4B 0%, #0F1525 100%);
+ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+ .logo {
+ position: aboslute;
+ top: 0;
+ left: 0;
+ width: 8px;
+ height: 100%;
+ background: #69E2ED;
+ }
+
+ .title {
+ position: absolute;
+ top: 0;
+ left: 25px;
+ font-size: 18px;
+ font-weight: bold;
+ color: #66DDE9;
+ }
+
+ .close {
+ position: absolute;
+ right: 20px;
+ top: 0;
+ left: auto;
+ bottom: 0;
+ margin: auto;
+ width: 28px;
+ height: 28px;
+ cursor: pointer;
+ opacity: 0.6;
+ }
+ }
+
+ .content {
+ clear: both;
+ width: 100%;
+ height: 500px;
+ margin-top: 0px;
+ text-align: center;
+ overflow-y: auto;
+ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ border-radius: 0 0 8px 8px;
+
+ .farm-profiles {
+ position: relative;
+
+ .btn-grounp {
+ position: absolute;
+ top: 18px;
+ right: 20px;
+
+ .details {
+ text-align: right;
+ font-size: 18px;
+ color: #08F4FF;
+ cursor: pointer;
+ }
+
+ .scene {
+ margin-top: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100px;
+ height: 30px;
+ background: rgba(102, 221, 233, 0.16);
+ border-radius: 4px 4px 4px 4px;
+ border: 1px solid #66DDE9;
+ box-sizing: border-box;
+
+ img {
+ // width: 70px;
+ height: 24px;
+ }
+ }
+ }
+
+ .farm-content {
+
+ padding: 30px 20px;
+ font-size: 16px;
+ color: #fff;
+
+ .row {
+ display: flex;
+ justify-content: space-between;
+
+ .l {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-end;
+ width: 100px;
+ height: 50px;
+ color: #A9D1D7;
+ }
+
+ .r {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ margin-left: 24px;
+ flex: 1;
+
+ img {
+ margin-right: 16px;
+ width: 102px;
+ height: 102px;
+ border-radius: 4px 4px 4px 4px;
+ }
+ }
+ }
+
+ }
+
+ }
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/views/farm/index.vue b/src/views/farm/index.vue
new file mode 100644
index 0000000..2f74da9
--- /dev/null
+++ b/src/views/farm/index.vue
@@ -0,0 +1,207 @@
+/*
+* @Author: Morpheus
+* @Date: 2022-05-11 15:00:23
+ * @Last Modified by: Morpheus
+ * @Last Modified time: 2022-07-08 14:08:30
+* 驾驶舱
+*/
+<template>
+ <div class="container">
+ <mapBox ref="modalForm" />
+
+ <div class="header">
+ <div class="return">
+ <span @click="prev">
+ <i class="el-icon-back"></i> 返回
+ </span>
+ </div>
+ <div class="title">古田米庄</div>
+ <div class="btn-grounp">
+ <el-button type="primary" icon="el-icon-my-sb">物联网设备总览</el-button>
+ <el-button type="primary" icon="el-icon-my-sy">农产品溯源</el-button>
+ </div>
+ </div>
+
+ <div class="l-content">
+ <div class="tab-btn">
+ <div>
+ <div class="item" :class="{on: ncjscz == 'ncjs'}">
+ <div @click="ncjscz = 'ncjs'" class="title">农场介绍</div>
+ <span></span>
+ </div>
+ </div>
+
+ <div>
+ <div class="item" :class="{on: ncjscz == 'cz'}">
+ <div @click="ncjscz = 'cz'" class="title">农事操作</div>
+ <span></span>
+ </div>
+ </div>
+ </div>
+ <div class="content"></div>
+ </div>
+
+ <div class="r-content">
+ <div class="tab-btn">
+ <div>种养品种</div>
+ <div>地块</div>
+ <div>物联网设备</div>
+ </div>
+ <div class="content"></div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+export default {
+ data () {
+ return {
+ ncjscz: 'cz'
+ }
+ },
+ created () {
+
+ },
+ mounted () {
+ },
+ methods: {
+ prev () {
+ this.$router.go(-1)
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+@font-face {
+ font-family: 'DS-Digital';
+ src: url('/DS-Digital/DS-DIGI-1.ttf');
+ src: url('/DS-Digital/DS-DIGIB-2.ttf');
+ src: url('/DS-Digital/DS-DIGII-3.ttf');
+ src: url('/DS-Digital/DS-DIGIT-4.ttf');
+}
+
+.container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 80px;
+ line-height: 80px;
+ background: rgba(0, 0, 0, 0.5);
+
+ .return {
+ margin-left: 40px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #66dde9;
+
+ & > span {
+ cursor: pointer;
+
+ i {
+ margin-right: 4px;
+ }
+ }
+ }
+
+ .title {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ width: 200px;
+ font-size: 28px;
+ font-weight: bold;
+ color: #08f4ff;
+ }
+
+ .btn-grounp {
+ margin-right: 64px;
+ display: flex;
+ justify-content: space-between;
+
+ button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 150px;
+ height: 34px;
+ background: #21a3a1;
+ border-color: #21a3a1;
+ }
+ }
+ }
+
+ .l-content,
+ .r-content {
+ position: absolute;
+ top: 248px;
+ width: 440px;
+ height: 640px;
+ background: #06344e;
+ border-radius: 30px 30px 30px 30px;
+
+ .tab-btn {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ height: 60px;
+ border-bottom: 1px solid #7ccfd6;
+ box-sizing: border-box;
+
+ & > div {
+ height: 100%;
+ font-size: 18px;
+ color: #a9d1d7;
+
+ & > div {
+ display: flex;
+ align-items: center;
+ position: relative;
+ height: 100%;
+ }
+
+ .title {
+ cursor: pointer;
+ }
+
+ .on {
+ position: relative;
+ font-weight: bold;
+ color: #7ccfd6;
+
+ span {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ border-radius: 4px;
+ background: #08f4ff;
+ }
+ }
+ }
+ }
+ }
+
+ .l-content {
+ left: 68px;
+ }
+
+ .r-content {
+ right: 68px;
+ }
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 97f09d9..39e93ab 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
- * @Last Modified time: 2022-07-07 17:26:40
+ * @Last Modified time: 2022-07-08 10:58:39
* 驾驶舱
*/
<template>
@@ -190,7 +190,7 @@
</div>
<div class="down-menu">
- <div class="nc">
+ <div class="nc" @click="farmProfiles = true">
<span>农场</span>
<i class="el-icon-caret-bottom"></i>
</div>
@@ -248,6 +248,60 @@
<img @click="cityShow = false" style="cursor: pointer;" src="/img/sclt.png" alt />
</div>
</div>
+
+ <public-box v-if="farmProfiles" class="public-org-nav-bar">
+ <template slot="public-box-header">
+ <div class="logo"></div>
+ <div class="title">123</div>
+ <img
+ @click="farmProfiles = false"
+ src="/img/icon/public-close.png"
+ alt
+ class="close"
+ />
+ </template>
+ <template slot="public-box-content">
+ <div class="farm-profiles">
+ <div class="btn-grounp">
+ <div class="details" @click="goPath('/farmDetails')">
+ 进入农场
+ <i class="el-icon-arrow-right"></i>
+ </div>
+ <div class="scene">
+ <img src="/img/icon/360.png" alt />
+ </div>
+ </div>
+
+ <div class="farm-content">
+ <div class="row">
+ <div class="l">土地面积</div>
+ <div class="r">农场介绍</div>
+ </div>
+ <div class="row">
+ <div class="l">土地面积</div>
+ <div class="r">农场介绍</div>
+ </div>
+ <div class="row">
+ <div class="l">土地面积</div>
+ <div class="r">农场介绍</div>
+ </div>
+ <div class="row">
+ <div class="l">土地面积</div>
+ <div class="r">农场介绍</div>
+ </div>
+ <div class="row">
+ <div class="l">土地面积</div>
+ <div class="r">
+ <img src="/img/icon/yx.jpg" alt />
+ <img src="/img/icon/yx.jpg" alt />
+ <img src="/img/icon/yx.jpg" alt />
+ <img src="/img/icon/yx.jpg" alt />
+ </div>
+ </div>
+ </div>
+ </div>
+ </template>
+ </public-box>
</div>
</template>
@@ -273,7 +327,8 @@
// 销售总额
salaNum: [],
// 每月销售统计
- salaNumY: []
+ salaNumY: [],
+ farmProfiles: false
}
},
created () {
@@ -688,6 +743,10 @@
cityFlowShow () {
this.cityShow = true
+ },
+
+ goPath (path) {
+ this.$router.push(path)
}
}
diff --git a/src/views/manage/index.vue b/src/views/manage/index.vue
index 3a11efb..1d170a8 100644
--- a/src/views/manage/index.vue
+++ b/src/views/manage/index.vue
@@ -1,8 +1,8 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
-* @Last Modified by: Morpheus
-* @Last Modified time: 2022-07-01 12:00:07
+ * @Last Modified by: Morpheus
+ * @Last Modified time: 2022-07-08 12:02:58
* 经营主体监管
*/
<template>
@@ -14,86 +14,86 @@
<div class="main-content">
<div class="t">
<statistics-num
- :className="'td'"
- :totalRegion="znum"
- :imgUrl="'/img/icon/mj.png'"
- :unit="'亩'"
- :title="'土地面积'"
- :subOneTitle="'使用面积'"
- :subOneNum="landsnum"
- :subTwoTitle="'未使用面积'"
- :subTwoNum="landwnum"
+ :className="'td'"
+ :totalRegion="znum"
+ :imgUrl="'/img/icon/mj.png'"
+ :unit="'亩'"
+ :title="'土地面积'"
+ :subOneTitle="'使用面积'"
+ :subOneNum="landsnum"
+ :subTwoTitle="'未使用面积'"
+ :subTwoNum="landwnum"
></statistics-num>
<statistics-num
- :className="'kc'"
- :totalRegion="stockTj"
- :imgUrl="'/img/icon/kc.png'"
- :unit="'公斤'"
- :title="'库存数量'"
- :subOneTitle="'农产品'"
- :subOneNum="stockNCP"
- :subTwoTitle="'加工产品'"
- :subTwoNum="stockJG"
+ :className="'kc'"
+ :totalRegion="stockTj"
+ :imgUrl="'/img/icon/kc.png'"
+ :unit="'公斤'"
+ :title="'库存数量'"
+ :subOneTitle="'农产品'"
+ :subOneNum="stockNCP"
+ :subTwoTitle="'加工产品'"
+ :subTwoNum="stockJG"
></statistics-num>
<statistics-num
- :className="'nz'"
- :totalRegion="jnStock"
- :imgUrl="'/img/icon/syl.png'"
- :unit="'公斤'"
- :title="'农资年使用量'"
- :subOneTitle="'去年使用'"
- :subOneNum="qnStock"
- :subTwoTitle="'本月使用'"
- :subTwoNum="byStock"
+ :className="'nz'"
+ :totalRegion="jnStock"
+ :imgUrl="'/img/icon/syl.png'"
+ :unit="'公斤'"
+ :title="'农资年使用量'"
+ :subOneTitle="'去年使用'"
+ :subOneNum="qnStock"
+ :subTwoTitle="'本月使用'"
+ :subTwoNum="byStock"
></statistics-num>
<statistics-num
- :className="'cl'"
- :totalRegion="yieldTj"
- :imgUrl="'/img/icon/ncl.png'"
- :unit="'公斤'"
- :title="'年产量'"
- :subOneTitle="'农产品'"
- :subOneNum="yieldNCP"
- :subTwoTitle="'加工产品'"
- :subTwoNum="yieldJG"
+ :className="'cl'"
+ :totalRegion="yieldTj"
+ :imgUrl="'/img/icon/ncl.png'"
+ :unit="'公斤'"
+ :title="'年产量'"
+ :subOneTitle="'农产品'"
+ :subOneNum="yieldNCP"
+ :subTwoTitle="'加工产品'"
+ :subTwoNum="yieldJG"
></statistics-num>
<statistics-num
- :className="'lt'"
- :totalRegion="salaNumBN"
- :imgUrl="'/img/icon/lt.png'"
- :unit="'公斤'"
- :title="'市场流通量'"
- :subOneTitle="'去年流通量'"
- :subOneNum="salaNumQN"
- :subTwoTitle="'本月流通量'"
- :subTwoNum="salaNumBY"
+ :className="'lt'"
+ :totalRegion="salaNumBN"
+ :imgUrl="'/img/icon/lt.png'"
+ :unit="'公斤'"
+ :title="'市场流通量'"
+ :subOneTitle="'去年流通量'"
+ :subOneNum="salaNumQN"
+ :subTwoTitle="'本月流通量'"
+ :subTwoNum="salaNumBY"
></statistics-num>
</div>
<div class="c">
<div class="time-box">
<time-box
- :imgUrl="'/img/icon/current.png'"
- :title="'溯源次数'"
- :currentNum="34"
- :subTitle="'昨日溯源次数对比'"
- :contrast="28"
- :upDown="'up'"
+ :imgUrl="'/img/icon/current.png'"
+ :title="'溯源次数'"
+ :currentNum="34"
+ :subTitle="'昨日溯源次数对比'"
+ :contrast="28"
+ :upDown="'up'"
></time-box>
<time-box
- :imgUrl="'/img/icon/week.png'"
- :title="'溯源次数'"
- :currentNum="61"
- :subTitle="'上周溯源次数对比'"
- :contrast="36"
- :upDown="'up'"
+ :imgUrl="'/img/icon/week.png'"
+ :title="'溯源次数'"
+ :currentNum="61"
+ :subTitle="'上周溯源次数对比'"
+ :contrast="36"
+ :upDown="'up'"
></time-box>
<time-box
- :imgUrl="'/img/icon/month.png'"
- :title="'溯源次数'"
- :currentNum="88"
- :subTitle="'上月溯源次数对比'"
- :contrast="96"
- :upDown="'down'"
+ :imgUrl="'/img/icon/month.png'"
+ :title="'溯源次数'"
+ :currentNum="88"
+ :subTitle="'上月溯源次数对比'"
+ :contrast="96"
+ :upDown="'down'"
></time-box>
</div>
<div class="task-box">
@@ -120,7 +120,7 @@
</div>
<date-select></date-select>
<div v-if="nzOrNcp == 'ncp'" class="lists-box">
- <div v-for="(item,index) in ncptr" :key="index" >
+ <div v-for="(item,index) in ncptr" :key="index">
<div>{{index + 1}}</div>
<div>{{item.strainName}}</div>
<div>{{item.area}}亩</div>
@@ -132,16 +132,16 @@
<!-- </div>-->
</div>
<div v-if="nzOrNcp == 'nz'" class="lists-box">
- <div v-for="(item,index) in nztr" :key="index" >
+ <div v-for="(item,index) in nztr" :key="index">
<div>{{index + 1}}</div>
<div>{{item.agrname}}</div>
<div>{{item.cnum}}公斤</div>
</div>
-<!-- <div>-->
-<!-- <div>2</div>-->
-<!-- <div>复合肥料</div>-->
-<!-- <div>68公斤</div>-->
-<!-- </div>-->
+ <!-- <div>-->
+ <!-- <div>2</div>-->
+ <!-- <div>复合肥料</div>-->
+ <!-- <div>68公斤</div>-->
+ <!-- </div>-->
</div>
</div>
<div class="trp-ncp">
@@ -161,7 +161,7 @@
<div class="more">
明细
- <img src="/img/icon/more.png" alt/>
+ <img src="/img/icon/more.png" alt />
</div>
</div>
@@ -209,7 +209,7 @@
<div class="more">
更多
- <img src="/img/icon/more.png" alt/>
+ <img src="/img/icon/more.png" alt />
</div>
</div>
@@ -263,459 +263,478 @@
</template>
<script>
- import { selectXCount } from '@/api/land/land'
- // eslint-disable-next-line no-unused-vars
- import { page, getStockCount, pagePalnt, statisticsStockAndYield, pageCount, pageCountNz, selectMarketCirculate, countTaskNum, farmingRecords } from '@/api/farm/farmingrecord'
+import { selectXCount } from '@/api/land/land'
+// eslint-disable-next-line no-unused-vars
+import { page, getStockCount, pagePalnt, statisticsStockAndYield, pageCount, pageCountNz, selectMarketCirculate, countTaskNum, farmingRecords } from '@/api/farm/farmingrecord'
- export default {
- data () {
- return {
- landsnum: 0,
- landwnum: 0,
- znum: 0,
- jnStock: 0,
- qnStock: 0,
- byStock: 0,
- farmPlanList: [],
- // 库存数量统计
- stockTj: 0,
- // 农产品数量统计
- stockNCP: 0,
- // 加工产品数量统计
- stockJG: 0,
- // 年产量统计
- yieldTj: 0,
- // 农产品年产量统计
- yieldNCP: 0,
- // 加工产品年产量统计
- yieldJG: 0,
- // 农产品投入
- ncptr: [],
- nztr: [],
- // 统计市场流通/去年流通量/本月流通量
- salaNumBN: [],
- salaNumBY: [],
- salaNumQN: [],
- // 统计任务总数
- taskNum: [],
- nzOrNcp: 'ncp',
- trpOrNcp: 'trp'
- }
- },
- created () {
- this.selectXCount()
- this.getStockCount()
- this.page()
- // 年产量与库存数量
- this.statisticsStockAndYield()
+export default {
+ data () {
+ return {
+ landsnum: 0,
+ landwnum: 0,
+ znum: 0,
+ jnStock: 0,
+ qnStock: 0,
+ byStock: 0,
+ farmPlanList: [],
+ // 库存数量统计
+ stockTj: 0,
+ // 农产品数量统计
+ stockNCP: 0,
+ // 加工产品数量统计
+ stockJG: 0,
+ // 年产量统计
+ yieldTj: 0,
+ // 农产品年产量统计
+ yieldNCP: 0,
+ // 加工产品年产量统计
+ yieldJG: 0,
// 农产品投入
- this.pageCount()
- // 农资投入
- this.pageCountNz()
+ ncptr: [],
+ nztr: [],
// 统计市场流通/去年流通量/本月流通量
- this.selectMarketCirculate()
+ salaNumBN: [],
+ salaNumBY: [],
+ salaNumQN: [],
// 统计任务总数
- this.countTaskNum()
- // 农事操作
- this.farmingRecords()
- },
- mounted () {
- // this.initNcpBar('NcpEcharts')
- this.initClSyBar('ClSyEcharts')
- },
- methods: {
- initBar (dom) {
- const that = this
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
+ taskNum: [],
+ nzOrNcp: 'ncp',
+ trpOrNcp: 'trp'
+ }
+ },
+ created () {
+ this.selectXCount()
+ this.getStockCount()
+ this.page()
+ // 年产量与库存数量
+ this.statisticsStockAndYield()
+ // 农产品投入
+ this.pageCount()
+ // 农资投入
+ this.pageCountNz()
+ // 统计市场流通/去年流通量/本月流通量
+ this.selectMarketCirculate()
+ // 统计任务总数
+ this.countTaskNum()
+ // 农事操作
+ this.farmingRecords()
+ },
+ mounted () {
+ // this.initNcpBar('NcpEcharts')
+ this.initClSyBar('ClSyEcharts')
+ },
+ methods: {
+ initBar (dom) {
+ const that = this
+ const chartDom = document.getElementById(dom)
+ const myChart = this.$echarts.init(chartDom)
- var x = []
- var y = []
- for (let i = 0; i < that.taskNum.length; i++) {
- x.push(that.taskNum[i].y)
- y.push(that.taskNum[i].count)
- }
+ var x = []
+ var y = []
+ for (let i = 0; i < that.taskNum.length; i++) {
+ x.push(that.taskNum[i].y)
+ y.push(that.taskNum[i].count)
+ }
- const option = {
- grid: {
- top: '14%',
- left: '2%',
- right: '2%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: x,
- axisLine: {
- lineStyle: {
- color: 'rgba(153,153,153,.4)'
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: 'rgba(255,255,255,.4)',
- rotate: 0
+ const option = {
+ grid: {
+ top: '14%',
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: x,
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(153,153,153,.4)'
}
},
- yAxis: {
- max: 50,
- name: '（次）',
- nameTextStyle: {
- color: 'rgba(255,255,255,.4)'
- },
- axisLine: {
- lineStyle: {
- color: '#657CA8'
- }
- },
- axisTick: {
- show: false
- },
- splitLine: {
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: 'rgba(255,255,255,.4)',
+ rotate: 0
+ }
+ },
+ yAxis: {
+ max: 50,
+ name: '（次）',
+ nameTextStyle: {
+ color: 'rgba(255,255,255,.4)'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#657CA8'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(62,81,97, .5)',
+ type: 'dashed'
+ }
+ },
+ axisLabel: {
+ color: 'rgba(255,255,255,.4)'
+ }
+ },
+ series: [
+ {
+ type: 'bar',
+ barWidth: 32,
+ data: y,
+ label: {
show: true,
- lineStyle: {
- color: 'rgba(62,81,97, .5)',
- type: 'dashed'
+ position: 'top',
+ textStyle: {
+ color: 'rgba(255,255,255,.4)'
}
},
- axisLabel: {
- color: 'rgba(255,255,255,.4)'
- }
- },
- series: [
- {
- type: 'bar',
- barWidth: 32,
- data: y,
- label: {
- show: true,
- position: 'top',
- textStyle: {
- color: 'rgba(255,255,255,.4)'
- }
- },
- itemStyle: {
- normal: {
- color:
+ itemStyle: {
+ normal: {
+ color:
- function (params) {
- var colorList = [
- ['#24A5DF', '#01E2D2'],
- ['#E59438', '#FEF880 '],
- ['#E34C4C', '#E6945E']
- ]
- var index = params.dataIndex
- if (params.dataIndex >= colorList.length) {
- index = params.dataIndex - colorList.length
- }
- return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: colorList[index][0]
- },
- {
- offset: 0.5,
- color: colorList[index][0]
- },
- {
- offset: 1,
- color: colorList[index][1]
- }
- ])
+ function (params) {
+ var colorList = [
+ ['#24A5DF', '#01E2D2'],
+ ['#E59438', '#FEF880 '],
+ ['#E34C4C', '#E6945E']
+ ]
+ var index = params.dataIndex
+ if (params.dataIndex >= colorList.length) {
+ index = params.dataIndex - colorList.length
}
+ return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: colorList[index][0]
+ },
+ {
+ offset: 0.5,
+ color: colorList[index][0]
+ },
+ {
+ offset: 1,
+ color: colorList[index][1]
+ }
+ ])
+ }
- }
}
}
- ]
- }
+ }
+ ]
+ }
- option && myChart.setOption(option)
- },
+ option && myChart.setOption(option)
+ },
- initTrpBar (dom) {
- const that = this
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
- var nztrData = this.nztr
- var nztrX = []
- var nztrY = []
- for (let i = 0; i < nztrData.length; i++) {
- nztrX.push(nztrData[i].agrname)
- nztrY.push(nztrData[i].cnum)
- }
- const option = {
- grid: {
- top: '14%',
- left: '2%',
- right: '2%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: nztrX,
- axisLine: {
- lineStyle: {
- color: 'rgba(153,153,153,.4)'
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: 'rgba(255,255,255,.4)',
- rotate: 0
+ initTrpBar (dom) {
+ const that = this
+ const chartDom = document.getElementById(dom)
+ const myChart = this.$echarts.init(chartDom)
+ var nztrData = this.nztr
+ var nztrX = []
+ var nztrY = []
+ for (let i = 0; i < nztrData.length; i++) {
+ nztrX.push(nztrData[i].agrname)
+ nztrY.push(nztrData[i].cnum)
+ }
+ const option = {
+ grid: {
+ top: '14%',
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: nztrX,
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(153,153,153,.4)'
}
},
- yAxis: {
- max: 600,
- name: '（公斤）',
- nameTextStyle: {
- color: 'rgba(255,255,255,.4)'
- },
- axisLine: {
- lineStyle: {
- color: '#657CA8'
- }
- },
- axisTick: {
- show: false
- },
- splitLine: {
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: 'rgba(255,255,255,.4)',
+ rotate: 0
+ }
+ },
+ yAxis: {
+ max: 600,
+ name: '（公斤）',
+ nameTextStyle: {
+ color: 'rgba(255,255,255,.4)'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#657CA8'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(62,81,97, .5)',
+ type: 'dashed'
+ }
+ },
+ axisLabel: {
+ color: 'rgba(255,255,255,.4)'
+ }
+ },
+ series: [
+ {
+ type: 'bar',
+ barWidth: 32,
+ data: nztrY,
+ label: {
show: true,
- lineStyle: {
- color: 'rgba(62,81,97, .5)',
- type: 'dashed'
+ position: 'top',
+ textStyle: {
+ color: 'rgba(255,255,255,.4)'
}
},
- axisLabel: {
- color: 'rgba(255,255,255,.4)'
- }
- },
- series: [
- {
- type: 'bar',
- barWidth: 32,
- data: nztrY,
- label: {
- show: true,
- position: 'top',
- textStyle: {
- color: 'rgba(255,255,255,.4)'
- }
- },
- itemStyle: {
- normal: {
- color:
+ itemStyle: {
+ normal: {
+ color:
- new that.$echarts.graphic.LinearGradient(
- // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
- // 通过修改前4个参数，可以实现不同的渐变方向
- /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
- 每项为一个对象，包含offset和color两个参数
- */
- 0, 0, 0, 1, [{ // 代表渐变色从正上方开始
- offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
- color: '#24A5DF'
- }, // 柱图渐变色
- {
- offset: 1, // 指100%处的颜色
- color: '#01E2D2'
- }
- ]
- )
+ new that.$echarts.graphic.LinearGradient(
+ // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
+ // 通过修改前4个参数，可以实现不同的渐变方向
+ /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
+ 每项为一个对象，包含offset和color两个参数
+ */
+ 0, 0, 0, 1, [{ // 代表渐变色从正上方开始
+ offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
+ color: '#24A5DF'
+ }, // 柱图渐变色
+ {
+ offset: 1, // 指100%处的颜色
+ color: '#01E2D2'
+ }
+ ]
+ )
- }
}
}
- ]
- }
+ }
+ ]
+ }
- option && myChart.setOption(option)
- },
+ option && myChart.setOption(option)
+ },
- initNcpBar (dom) {
- const that = this
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
+ initNcpBar (dom) {
+ const that = this
+ const chartDom = document.getElementById(dom)
+ const myChart = this.$echarts.init(chartDom)
- const option = {
- grid: {
- top: '14%',
- left: '2%',
- right: '2%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: [
- '有机肥料',
- '复合肥料'
- ],
- axisLine: {
- lineStyle: {
- color: 'rgba(153,153,153,.4)'
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: 'rgba(255,255,255,.4)',
- rotate: 0
+ const option = {
+ grid: {
+ top: '14%',
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: [
+ '有机肥料',
+ '复合肥料'
+ ],
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(153,153,153,.4)'
}
},
- yAxis: {
- max: 600,
- name: '（公斤）',
- nameTextStyle: {
- color: 'rgba(255,255,255,.4)'
- },
- axisLine: {
- lineStyle: {
- color: '#657CA8'
- }
- },
- axisTick: {
- show: false
- },
- splitLine: {
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: 'rgba(255,255,255,.4)',
+ rotate: 0
+ }
+ },
+ yAxis: {
+ max: 600,
+ name: '（公斤）',
+ nameTextStyle: {
+ color: 'rgba(255,255,255,.4)'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#657CA8'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(62,81,97, .5)',
+ type: 'dashed'
+ }
+ },
+ axisLabel: {
+ color: 'rgba(255,255,255,.4)'
+ }
+ },
+ series: [
+ {
+ type: 'bar',
+ barWidth: 32,
+ data: [500, 60],
+ label: {
show: true,
- lineStyle: {
- color: 'rgba(62,81,97, .5)',
- type: 'dashed'
+ position: 'top',
+ textStyle: {
+ color: 'rgba(255,255,255,.4)'
}
},
- axisLabel: {
- color: 'rgba(255,255,255,.4)'
- }
- },
- series: [
- {
- type: 'bar',
- barWidth: 32,
- data: [500, 60],
- label: {
- show: true,
- position: 'top',
- textStyle: {
- color: 'rgba(255,255,255,.4)'
- }
- },
- itemStyle: {
- normal: {
- color:
+ itemStyle: {
+ normal: {
+ color:
- new that.$echarts.graphic.LinearGradient(
- // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
- // 通过修改前4个参数，可以实现不同的渐变方向
- /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
- 每项为一个对象，包含offset和color两个参数
- */
- 0, 0, 0, 1, [{ // 代表渐变色从正上方开始
- offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
- color: '#24A5DF'
- }, // 柱图渐变色
- {
- offset: 1, // 指100%处的颜色
- color: '#01E2D2'
- }
- ]
- )
+ new that.$echarts.graphic.LinearGradient(
+ // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
+ // 通过修改前4个参数，可以实现不同的渐变方向
+ /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
+ 每项为一个对象，包含offset和color两个参数
+ */
+ 0, 0, 0, 1, [{ // 代表渐变色从正上方开始
+ offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
+ color: '#24A5DF'
+ }, // 柱图渐变色
+ {
+ offset: 1, // 指100%处的颜色
+ color: '#01E2D2'
+ }
+ ]
+ )
- }
}
}
- ]
- }
-
- option && myChart.setOption(option)
- },
-
- initClSyBar (dom) {
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
-
- var data = [
- '01',
- '02',
- '03',
- '04',
- '05',
- '06',
- '07',
- '08',
- '09',
- '10',
- '11',
- '12'
+ }
]
- var data1 = [
- '180',
- '320',
- '400',
- '200',
- '110',
- '180',
- '0',
- '0',
- '0',
- '0',
- '0',
- '0'
- ]
- var data2 = [
- '0',
- '0',
- '0',
- '260',
- '0',
- '230',
- '0',
- '0',
- '0',
- '0',
- '0',
- '0'
- ]
+ }
- const option = {
- grid: {
- top: '10%',
- right: '0%',
- left: '0%',
- bottom: '0%',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- left: 'center',
- data: ['加工产品', '农产品'],
+ option && myChart.setOption(option)
+ },
+
+ initClSyBar (dom) {
+ const chartDom = document.getElementById(dom)
+ const myChart = this.$echarts.init(chartDom)
+
+ var data = [
+ '01',
+ '02',
+ '03',
+ '04',
+ '05',
+ '06',
+ '07',
+ '08',
+ '09',
+ '10',
+ '11',
+ '12'
+ ]
+ var data1 = [
+ '180',
+ '320',
+ '400',
+ '200',
+ '110',
+ '180',
+ '0',
+ '0',
+ '0',
+ '0',
+ '0',
+ '0'
+ ]
+ var data2 = [
+ '0',
+ '0',
+ '0',
+ '260',
+ '0',
+ '230',
+ '0',
+ '0',
+ '0',
+ '0',
+ '0',
+ '0'
+ ]
+
+ const option = {
+ grid: {
+ top: '10%',
+ right: '0%',
+ left: '0%',
+ bottom: '0%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ left: 'center',
+ data: ['加工产品', '农产品'],
+ textStyle: {
+ color: '#A9D1D7'
+ }
+ },
+ xAxis: {
+ data: data,
+ axisLabel: {
+ interval: 0,
+ show: true,
textStyle: {
- color: '#A9D1D7'
+ color: 'rgba(255,255,255,0.6)'
}
},
- xAxis: {
- data: data,
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#697B89',
+ width: 1
+ }
+ }
+ },
+ yAxis: [
+ {
+ min: 0,
+ type: 'value',
axisLabel: {
interval: 0,
show: true,
textStyle: {
- color: 'rgba(255,255,255,0.6)'
+ color: '#B4B5BE'
}
- },
- axisTick: {
- show: false
},
axisLine: {
show: true,
@@ -723,600 +742,581 @@
color: '#697B89',
width: 1
}
- }
- },
- yAxis: [
- {
- min: 0,
- type: 'value',
- axisLabel: {
- interval: 0,
- show: true,
- textStyle: {
- color: '#B4B5BE'
- }
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#697B89',
- width: 1
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(62,81,97, .5)',
- type: 'dashed'
- }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(62,81,97, .5)',
+ type: 'dashed'
}
}
- ],
- series: [
- {
- name: '加工产品',
- type: 'bar',
- barWidth: 14,
- silent: true,
- itemStyle: {
- normal: {
- color: '#E29646'
- }
- },
- data: data1
+ }
+ ],
+ series: [
+ {
+ name: '加工产品',
+ type: 'bar',
+ barWidth: 14,
+ silent: true,
+ itemStyle: {
+ normal: {
+ color: '#E29646'
+ }
},
- {
- name: '农产品',
- type: 'bar',
- barWidth: 14,
- silent: true,
- itemStyle: {
- normal: {
- color: '#6AE081'
- }
- },
- data: data2
- }
- ]
- }
-
- option && myChart.setOption(option)
- },
- // 农场使用率
- selectXCount () {
- // eslint-disable-next-line no-unused-vars
- var that = this
- var deptId = '1123598813738675201'
- selectXCount(deptId).then((res) => {
- that.landsnum = res.data.data.snum.toFixed(0)
- that.landwnum = res.data.data.wnum.toFixed(0)
- that.znum = res.data.data.num.toFixed(0)
- })
- },
- // 农资使用概况
- getStockCount () {
- var that = this
- var deptId = '1123598813738675201'
- getStockCount(deptId).then((res) => {
- that.jnStock = res.data.data.jn.toFixed(0)
- that.qnStock = res.data.data.qn.toFixed(0)
- that.byStock = res.data.data.by.toFixed(0)
- })
- },
- // 农事记录
- page () {
- var params = {}
- params.tenantId = '000000'
- params.deptId = '1123598813738675201'
- page(1, 10, Object.assign(params)).then((res) => {
- this.farmPlanList = res.data.data.records
- })
- },
- // 大屏经营概况库存数量与年产量
- statisticsStockAndYield () {
- var params = {}
- params.tenantId = '000000'
- params.deptId = '1123598813738675201'
- params.year = '2022'
- statisticsStockAndYield(Object.assign(params)).then((res) => {
- this.stockNCP = res.data.data.sum
- this.stockJG = res.data.data.jgsum
- this.stockTj = res.data.data.jgsum + res.data.data.sum
-
- this.yieldNCP = res.data.data.ncpNcl
- this.yieldJG = res.data.data.jgNcl
- this.yieldTj = res.data.data.ncpNcl + res.data.data.jgNcl
- })
- },
- // 农产品投入
- pageCount () {
- var params = {}
- params.tenantId = '000000'
- params.deptId = '1123598813738675201'
- params.year = '2022'
- pageCount(Object.assign(params)).then((res) => {
- this.ncptr = res.data.data
- })
- },
- // 农资投入
- pageCountNz () {
- var params = {}
- params.codes = '000000'
- params.deptId = '1123598813738675201'
- params.year = '2022'
- pageCountNz(Object.assign(params)).then((res) => {
- this.nztr = res.data.data.records
- // 投入品监管图表
- this.initTrpBar('TrpEcharts')
- })
- },
- // 统计市场流通/去年流通量/本月流通量
- selectMarketCirculate () {
- var params = {}
- params.codes = '000000'
- params.deptId = '1123598813738675201'
- params.year = '2022'
- selectMarketCirculate(Object.assign(params)).then((res) => {
- this.salaNumBN = res.data.data[0].num
- this.salaNumQN = res.data.data[1].num
- this.salaNumBY = res.data.data[2].num
- })
- },
- // 统计任务总数
- countTaskNum () {
- var params = {}
- params.codes = '000000'
- params.deptId = '1123598813738675201'
- params.year = '2022'
- countTaskNum(Object.assign(params)).then((res) => {
- this.taskNum = res.data.data
- this.initBar('TaskNumEcharts')
- })
- },
- // 农事记录
- farmingRecords () {
- var params = {}
- params.codes = '000000'
- params.deptId = '1123598813738675201'
- params.year = '2022'
- farmingRecords(Object.assign(params)).then((res) => {
-
- })
+ data: data1
+ },
+ {
+ name: '农产品',
+ type: 'bar',
+ barWidth: 14,
+ silent: true,
+ itemStyle: {
+ normal: {
+ color: '#6AE081'
+ }
+ },
+ data: data2
+ }
+ ]
}
+
+ option && myChart.setOption(option)
+ },
+ // 农场使用率
+ selectXCount () {
+ // eslint-disable-next-line no-unused-vars
+ var that = this
+ var deptId = '1123598813738675201'
+ selectXCount(deptId).then((res) => {
+ that.landsnum = res.data.data.snum.toFixed(0)
+ that.landwnum = res.data.data.wnum.toFixed(0)
+ that.znum = res.data.data.num.toFixed(0)
+ })
+ },
+ // 农资使用概况
+ getStockCount () {
+ var that = this
+ var deptId = '1123598813738675201'
+ getStockCount(deptId).then((res) => {
+ that.jnStock = res.data.data.jn.toFixed(0)
+ that.qnStock = res.data.data.qn.toFixed(0)
+ that.byStock = res.data.data.by.toFixed(0)
+ })
+ },
+ // 农事记录
+ page () {
+ var params = {}
+ params.tenantId = '000000'
+ params.deptId = '1123598813738675201'
+ page(1, 10, Object.assign(params)).then((res) => {
+ this.farmPlanList = res.data.data.records
+ })
+ },
+ // 大屏经营概况库存数量与年产量
+ statisticsStockAndYield () {
+ var params = {}
+ params.tenantId = '000000'
+ params.deptId = '1123598813738675201'
+ params.year = '2022'
+ statisticsStockAndYield(Object.assign(params)).then((res) => {
+ this.stockNCP = res.data.data.sum
+ this.stockJG = res.data.data.jgsum
+ this.stockTj = res.data.data.jgsum + res.data.data.sum
+
+ this.yieldNCP = res.data.data.ncpNcl
+ this.yieldJG = res.data.data.jgNcl
+ this.yieldTj = res.data.data.ncpNcl + res.data.data.jgNcl
+ })
+ },
+ // 农产品投入
+ pageCount () {
+ var params = {}
+ params.tenantId = '000000'
+ params.deptId = '1123598813738675201'
+ params.year = '2022'
+ pageCount(Object.assign(params)).then((res) => {
+ this.ncptr = res.data.data
+ })
+ },
+ // 农资投入
+ pageCountNz () {
+ var params = {}
+ params.codes = '000000'
+ params.deptId = '1123598813738675201'
+ params.year = '2022'
+ pageCountNz(Object.assign(params)).then((res) => {
+ this.nztr = res.data.data.records
+ // 投入品监管图表
+ this.initTrpBar('TrpEcharts')
+ })
+ },
+ // 统计市场流通/去年流通量/本月流通量
+ selectMarketCirculate () {
+ var params = {}
+ params.codes = '000000'
+ params.deptId = '1123598813738675201'
+ params.year = '2022'
+ selectMarketCirculate(Object.assign(params)).then((res) => {
+ this.salaNumBN = res.data.data[0].num
+ this.salaNumQN = res.data.data[1].num
+ this.salaNumBY = res.data.data[2].num
+ })
+ },
+ // 统计任务总数
+ countTaskNum () {
+ var params = {}
+ params.codes = '000000'
+ params.deptId = '1123598813738675201'
+ params.year = '2022'
+ countTaskNum(Object.assign(params)).then((res) => {
+ this.taskNum = res.data.data
+ this.initBar('TaskNumEcharts')
+ })
+ },
+ // 农事记录
+ farmingRecords () {
+ var params = {}
+ params.codes = '000000'
+ params.deptId = '1123598813738675201'
+ params.year = '2022'
+ farmingRecords(Object.assign(params)).then((res) => {
+
+ })
}
}
+}
</script>
<style scoped lang="scss">
- .container {
- padding: 20px;
- position: relative;
- width: 100%;
- height: 100%;
- background: #08192e;
- box-sizing: border-box;
+.container {
+ padding: 20px;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ background: #08192e;
+ box-sizing: border-box;
- .toggle-plot {
- text-align: left;
- height: 36px;
- line-height: 36px;
- font-size: 24px;
- font-weight: bold;
- color: #fff;
+ .toggle-plot {
+ text-align: left;
+ height: 36px;
+ line-height: 36px;
+ font-size: 24px;
+ font-weight: bold;
+ color: #fff;
+ }
+
+ .main-content {
+ margin-top: 10px;
+ height: calc(100% - 46px);
+ display: flex;
+ flex-direction: column;
+
+ .t {
+ display: flex;
+ justify-content: space-between;
+
+ & > div:first-child {
+ margin-left: 0;
+ }
}
- .main-content {
- margin-top: 10px;
- height: calc(100% - 46px);
+ .c {
+ margin-top: 20px;
display: flex;
- flex-direction: column;
+ justify-content: space-between;
- .t {
+ & > div {
+ margin-left: 20px;
+ width: calc((100% - 80px) / 5);
+ height: 346px;
+ border-radius: 8px 8px 8px 8px;
+ background: rgba(0, 52, 85, 0.4);
+ }
+
+ & > div:first-child {
+ margin-left: 0;
+ }
+
+ & > div:last-child {
+ width: calc((100% - 80px) / 5 * 2 + 20px);
+ }
+
+ .time-box {
+ padding: 0 25px;
display: flex;
- justify-content: space-between;
+ flex-direction: column;
+ box-sizing: border-box;
- & > div:first-child {
- margin-left: 0;
+ & > div:last-child {
+ border: none;
}
}
- .c {
- margin-top: 20px;
+ .task-box {
+ padding: 20px;
display: flex;
- justify-content: space-between;
+ flex-direction: column;
+ box-sizing: border-box;
- & > div {
- margin-left: 20px;
- width: calc((100% - 80px) / 5);
- height: 346px;
- border-radius: 8px 8px 8px 8px;
- background: rgba(0, 52, 85, 0.4);
+ .title {
+ text-align: left;
+ font-size: 18px;
+ font-weight: bold;
+ color: #7ccfd6;
}
- & > div:first-child {
- margin-left: 0;
+ .echarts-box {
+ margin-top: 16px;
+ flex: 1;
}
+ }
- & > div:last-child {
- width: calc((100% - 80px) / 5 * 2 + 20px);
- }
+ .nz-ncp {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
- .time-box {
- padding: 0 25px;
+ .title-box {
display: flex;
- flex-direction: column;
- box-sizing: border-box;
- & > div:last-child {
- border: none;
- }
- }
-
- .task-box {
- padding: 20px;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
-
- .title {
- text-align: left;
- font-size: 18px;
- font-weight: bold;
- color: #7ccfd6;
- }
-
- .echarts-box {
- margin-top: 16px;
- flex: 1;
- }
- }
-
- .nz-ncp {
- padding: 20px;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
-
- .title-box {
+ & > div {
display: flex;
+ align-items: flex-start;
+ font-size: 18px;
+ color: #a9d1d7;
- & > div {
- display: flex;
- align-items: flex-start;
- font-size: 18px;
- color: #a9d1d7;
-
- .title {
- cursor: pointer;
- }
-
- .on {
- position: relative;
- font-weight: bold;
- color: #7ccfd6;
-
- span {
- position: absolute;
- bottom: -8px;
- left: 0;
- width: 100%;
- height: 3px;
- border-radius: 3px;
- background: #66dde9;
- }
- }
+ .title {
+ cursor: pointer;
}
- & > div:nth-child(2) {
- margin-left: 60px;
+ .on {
+ position: relative;
+ font-weight: bold;
+ color: #7ccfd6;
+
+ span {
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ border-radius: 3px;
+ background: #66dde9;
+ }
}
}
- .lists-box {
- margin-top: 16px;
- flex: 1;
- overflow-y: auto;
+ & > div:nth-child(2) {
+ margin-left: 60px;
+ }
+ }
- & > div:nth-child(even) {
- background: rgba(102, 221, 233, 0.1);
+ .lists-box {
+ margin-top: 16px;
+ flex: 1;
+ overflow-y: auto;
+
+ & > div:nth-child(even) {
+ background: rgba(102, 221, 233, 0.1);
+ }
+
+ & > div {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ line-height: 48px;
+ font-size: 18px;
+ color: #a9d1d7;
+
+ & > div:first-child {
+ margin-left: 16px;
}
- & > div {
+ & > div:last-child {
+ margin-right: 18px;
+ color: #66dde9;
+ }
+ }
+ }
+ }
+
+ .trp-ncp {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+
+ .title-box {
+ position: relative;
+ display: flex;
+
+ & > div {
+ display: flex;
+ align-items: flex-start;
+ font-size: 18px;
+ color: #a9d1d7;
+
+ .title {
+ cursor: pointer;
+ }
+
+ .on {
+ position: relative;
+ font-weight: bold;
+ color: #7ccfd6;
+
+ span {
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ border-radius: 3px;
+ background: #66dde9;
+ }
+ }
+ }
+
+ & > div:nth-child(2) {
+ margin-left: 60px;
+ }
+
+ .more {
+ position: absolute;
+ top: 0;
+ left: auto;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+
+ img {
+ margin-left: 6px;
+ vertical-align: middle;
+ }
+ }
+ }
+
+ .echarts-box {
+ margin-top: 16px;
+ flex: 1;
+ }
+ }
+ }
+
+ .b {
+ margin-top: 20px;
+ flex: 1;
+ display: flex;
+ justify-content: space-between;
+
+ & > div {
+ margin-left: 20px;
+ border-radius: 8px 8px 8px 8px;
+ background: rgba(0, 52, 85, 0.4);
+ }
+
+ & > div:first-child {
+ margin-left: 0;
+ flex: 1;
+ }
+
+ & > div:last-child {
+ width: 444px;
+ }
+
+ .cl-sy {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+
+ .title-box {
+ height: 34px;
+ position: relative;
+ display: flex;
+
+ & > div {
+ display: flex;
+ align-items: flex-start;
+ font-size: 18px;
+ color: #a9d1d7;
+
+ .on {
+ position: relative;
+ font-weight: bold;
+ color: #7ccfd6;
+
+ span {
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ border-radius: 3px;
+ background: #66dde9;
+ }
+ }
+ }
+
+ & > div:nth-child(2) {
+ margin-left: 60px;
+ }
+
+ .date {
+ position: absolute;
+ top: -20px;
+ left: auto;
+ right: 0;
+ bottom: auto;
+ margin: auto;
+ width: 320px;
+ }
+ }
+
+ .echarts-box {
+ margin-top: 16px;
+ flex: 1;
+ }
+ }
+
+ .ns-nz {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+
+ .title-box {
+ position: relative;
+ display: flex;
+
+ & > div {
+ display: flex;
+ align-items: flex-start;
+ font-size: 18px;
+ color: #a9d1d7;
+
+ .title {
+ cursor: pointer;
+ }
+
+ .on {
+ position: relative;
+ font-weight: bold;
+ color: #7ccfd6;
+
+ span {
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ border-radius: 3px;
+ background: #66dde9;
+ }
+ }
+ }
+
+ & > div:nth-child(2) {
+ margin-left: 60px;
+ }
+
+ .more {
+ position: absolute;
+ top: 0;
+ left: auto;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+
+ img {
+ margin-left: 6px;
+ vertical-align: middle;
+ }
+ }
+ }
+
+ .lists-box {
+ margin-top: 16px;
+ flex: 1;
+
+ display: flex;
+ flex-direction: column;
+
+ & > div {
+ position: relative;
+ flex: 1;
+ margin-top: 10px;
+ padding: 10px 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ background: rgba(102, 221, 233, 0.1);
+ border-radius: 8px;
+ font-size: 18px;
+ color: #a9d1d7;
+
+ & > .t-item {
display: flex;
align-items: center;
justify-content: space-between;
- line-height: 48px;
- font-size: 18px;
- color: #a9d1d7;
& > div:first-child {
- margin-left: 16px;
- }
-
- & > div:last-child {
- margin-right: 18px;
+ font-weight: bold;
color: #66dde9;
}
}
- }
- }
- .trp-ncp {
- padding: 20px;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
-
- .title-box {
- position: relative;
- display: flex;
-
- & > div {
- display: flex;
- align-items: flex-start;
- font-size: 18px;
- color: #a9d1d7;
-
- .title {
- cursor: pointer;
- }
-
- .on {
- position: relative;
- font-weight: bold;
- color: #7ccfd6;
-
- span {
- position: absolute;
- bottom: -8px;
- left: 0;
- width: 100%;
- height: 3px;
- border-radius: 3px;
- background: #66dde9;
- }
- }
- }
-
- & > div:nth-child(2) {
- margin-left: 60px;
- }
-
- .more {
- position: absolute;
- top: 0;
- left: auto;
- right: 0;
- bottom: 0;
- margin: auto;
+ & > .b-item {
display: flex;
align-items: center;
- font-size: 16px;
-
- img {
- margin-left: 6px;
- vertical-align: middle;
- }
- }
- }
-
- .echarts-box {
- margin-top: 16px;
- flex: 1;
- }
- }
- }
-
- .b {
- margin-top: 20px;
- flex: 1;
- display: flex;
- justify-content: space-between;
-
- & > div {
- margin-left: 20px;
- border-radius: 8px 8px 8px 8px;
- background: rgba(0, 52, 85, 0.4);
- }
-
- & > div:first-child {
- margin-left: 0;
- flex: 1;
- }
-
- & > div:last-child {
- width: 444px;
- }
-
- .cl-sy {
- padding: 20px;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
-
- .title-box {
- height: 34px;
- position: relative;
- display: flex;
-
- & > div {
- display: flex;
- align-items: flex-start;
- font-size: 18px;
- color: #a9d1d7;
-
- .on {
- position: relative;
- font-weight: bold;
- color: #7ccfd6;
-
- span {
- position: absolute;
- bottom: -8px;
- left: 0;
- width: 100%;
- height: 3px;
- border-radius: 3px;
- background: #66dde9;
- }
- }
- }
-
- & > div:nth-child(2) {
- margin-left: 60px;
- }
-
- .date {
- position: absolute;
- top: -20px;
- left: auto;
- right: 0;
- bottom: auto;
- margin: auto;
- width: 320px;
- }
- }
-
- .echarts-box {
- margin-top: 16px;
- flex: 1;
- }
- }
-
- .ns-nz {
- padding: 20px;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
-
- .title-box {
- position: relative;
- display: flex;
-
- & > div {
- display: flex;
- align-items: flex-start;
- font-size: 18px;
- color: #a9d1d7;
-
- .title {
- cursor: pointer;
- }
-
- .on {
- position: relative;
- font-weight: bold;
- color: #7ccfd6;
-
- span {
- position: absolute;
- bottom: -8px;
- left: 0;
- width: 100%;
- height: 3px;
- border-radius: 3px;
- background: #66dde9;
- }
- }
- }
-
- & > div:nth-child(2) {
- margin-left: 60px;
- }
-
- .more {
- position: absolute;
- top: 0;
- left: auto;
- right: 0;
- bottom: 0;
- margin: auto;
- display: flex;
- align-items: center;
- font-size: 16px;
-
- img {
- margin-left: 6px;
- vertical-align: middle;
- }
- }
- }
-
- .lists-box {
- margin-top: 16px;
- flex: 1;
-
- display: flex;
- flex-direction: column;
-
- & > div {
- position: relative;
- flex: 1;
- margin-top: 10px;
- padding: 10px 20px;
- display: flex;
- flex-direction: column;
justify-content: space-between;
- background: rgba(102, 221, 233, 0.1);
- border-radius: 8px;
- font-size: 18px;
- color: #a9d1d7;
-
- & > .t-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- & > div:first-child {
- font-weight: bold;
- color: #66dde9;
- }
- }
-
- & > .b-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- & > div:first-child {
- color: #fff;
- }
- }
-
- .t-border {
- top: 0;
- bottom: auto;
- }
-
- .b-border {
- top: auto;
- bottom: 0;
- }
-
- .t-border,
- .b-border {
- position: absolute;
- left: 0;
- right: 0;
- margin: auto;
- width: 80%;
- height: 1px;
- background: linear-gradient(
- 89deg,
- rgba(102, 221, 233, 0) 0%,
- #66dde9 51%,
- rgba(102, 221, 233, 0) 100%
- );
+ & > div:first-child {
+ color: #fff;
}
}
- & > div:first-child {
- margin-top: 10px;
+ .t-border {
+ top: 0;
+ bottom: auto;
}
+
+ .b-border {
+ top: auto;
+ bottom: 0;
+ }
+
+ .t-border,
+ .b-border {
+ position: absolute;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 80%;
+ height: 1px;
+ background: linear-gradient(
+ 89deg,
+ rgba(102, 221, 233, 0) 0%,
+ #66dde9 51%,
+ rgba(102, 221, 233, 0) 100%
+ );
+ }
+ }
+
+ & > div:first-child {
+ margin-top: 10px;
}
}
}
}
}
+}
</style>
--
Gitblit v1.9.3