From 6be9c33a7c97c9672a5d12a216d0fa0791e591d3 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 01 Jul 2022 12:00:33 +0800
Subject: [PATCH] 内容更改
---
src/views/lyout/index.vue | 2
public/img/jc.png | 0
public/img/sclt.png | 0
vue.config.js | 8
public/index.html | 2
src/views/manage/index.vue | 2174 +++++++++++++------------
src/router/axios.js | 2
src/components/map/index.vue | 94
public/img/qx.png | 0
src/views/home/index.vue | 2739 ++++++++++++++++---------------
src/views/monitor/index.vue | 23
src/views/weather/index.vue | 36
src/components/time-box/index.vue | 14
13 files changed, 2,707 insertions(+), 2,387 deletions(-)
diff --git a/public/img/jc.png b/public/img/jc.png
new file mode 100644
index 0000000..2ac84b2
--- /dev/null
+++ b/public/img/jc.png
Binary files differ
diff --git a/public/img/qx.png b/public/img/qx.png
new file mode 100644
index 0000000..a4c7205
--- /dev/null
+++ b/public/img/qx.png
Binary files differ
diff --git a/public/img/sclt.png b/public/img/sclt.png
new file mode 100644
index 0000000..1622b87
--- /dev/null
+++ b/public/img/sclt.png
Binary files differ
diff --git a/public/index.html b/public/index.html
index 2ba20a3..65cfe6e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title><%= htmlWebpackPlugin.options.title %></title>
+ <title>南城县智慧农业综合监管平台</title>
<style>
html,
body {
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 333837a..16b4d5b 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -49,6 +49,78 @@
})
)
+ // http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer
+
+ global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ layer: 'nanchengyjjddom',
+ style: 'default',
+ tileMatrixSetID: 'default028mm',
+ format: 'image/png',
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ maximumLevel: 19,
+ tileMatrixLabels: [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19'
+ ]
+ })
+ )
+
+ global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ layer: 'nanchengdom',
+ style: 'default',
+ tileMatrixSetID: 'default028mm',
+ format: 'image/png',
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ maximumLevel: 19,
+ tileMatrixLabels: [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19'
+ ]
+ })
+ )
+
// 矢量电子
// global.viewer.imageryLayers.addImageryProvider(
// new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
@@ -60,21 +132,21 @@
// })
// )
- global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
- subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
- format: 'image/jpeg',
- show: true,
- maximumLevel: 18
- })
- )
+ // global.viewer.imageryLayers.addImageryProvider(
+ // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
+ // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ // format: 'image/jpeg',
+ // show: true,
+ // maximumLevel: 18
+ // })
+ // )
global.viewer.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- 116.35381525, 27.95839468, 1950.0
+ 116.56705776, 27.42386903, 1800.0
),
orientation: {
// 指向
@@ -84,6 +156,8 @@
roll: 0.0
}
})
+
+ // global.viewer.locationBar.enable = true
}
global.DC.ready(initViewer)
diff --git a/src/components/time-box/index.vue b/src/components/time-box/index.vue
index 331e599..0535539 100644
--- a/src/components/time-box/index.vue
+++ b/src/components/time-box/index.vue
@@ -8,8 +8,11 @@
<div class="num-unit">
<div class="num">{{currentNum}}</div>
- <div class="unit decline">
- <span>⬆</span>
+ <div class="unit rise" v-if="upDown == 'up'">
+ <span>↑</span>
+ </div>
+ <div class="unit decline" v-if="upDown == 'down'">
+ <span>↓</span>
</div>
</div>
</div>
@@ -28,7 +31,8 @@
'title',
'currentNum',
'subTitle',
- 'contrast'
+ 'contrast',
+ 'upDown'
]
}
</script>
@@ -79,6 +83,10 @@
margin-left: 8px;
}
+ .unit.rise {
+ color: #27d1ec;
+ }
+
.unit.decline {
color: #ec7127;
}
diff --git a/src/router/axios.js b/src/router/axios.js
index e909ccb..f066423 100644
--- a/src/router/axios.js
+++ b/src/router/axios.js
@@ -12,7 +12,7 @@
// console.log(window.location);
// console.log(url);
// }, 3000);
-window.$apiUrls = 'http://http://182.106.212.58:8013/api'
+window.$apiUrls = 'http://182.106.212.58:8013/api'
// window.$apiUrls = 'http://192.168.0.109:82'
const service = axios.create({
// baseURL: 'http://192.168.0.107:83',
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 188b24e..c85d82c 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,268 +1,338 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
-* @Last Modified by: Morpheus
-* @Last Modified time: 2022-06-25 17:50:45
+ * @Last Modified by: Morpheus
+ * @Last Modified time: 2022-07-01 11:15:49
* 驾驶舱
*/
<template>
- <div class="container">
- <mapBox ref="modalForm"/>
+ <div class="container">
+ <mapBox ref="modalForm" />
- <div class="left-box">
- <div class="content">
- <div class="t">
- <div class="title-box">
- <div class="icon"></div>
- <div class="text">
- 企业概况
- <div class="em"></div>
- </div>
+ <div class="left-box">
+ <div class="content">
+ <div class="t">
+ <div class="title-box">
+ <div class="icon"></div>
+ <div class="text">
+ 企业概况
+ <div class="em"></div>
+ </div>
- <div class="line">
- <div class="l"></div>
- <div class="r"></div>
- </div>
- </div>
- <div class="content-box">
- <div class="nc-num">
- <div class="text">
- 农场数量
- <span class="num">{{ncnum}}</span>
- </div>
- <div class="t-l"></div>
- <div class="b-l"></div>
- <div class="log"></div>
- </div>
+ <div class="line">
+ <div class="l"></div>
+ <div class="r"></div>
+ </div>
+ </div>
+ <div class="content-box">
+ <div class="nc-num">
+ <div class="text">
+ 农场数量
+ <!-- <span class="num">{{ncnum}}</span> -->
+ <span class="num">2</span>
+ </div>
+ <div class="t-l"></div>
+ <div class="b-l"></div>
+ <div class="log"></div>
+ </div>
- <div class="pel-num">
- <div class="text">
- 人员数量
- <span class="num">{{rynum}}</span>
- </div>
- <div class="t-l"></div>
- <div class="b-l"></div>
- <div class="log"></div>
+ <div class="pel-num">
+ <div class="text">
+ 人员数量
+ <!-- <span class="num">{{rynum}}</span> -->
+ <span class="num">36</span>
+ </div>
+ <div class="t-l"></div>
+ <div class="b-l"></div>
+ <div class="log"></div>
+ </div>
+ </div>
+ </div>
+ <div class="c">
+ <div class="title-box">
+ <div class="icon"></div>
+ <div class="text">
+ 农田使用率
+ <div class="em"></div>
+ </div>
+
+ <div class="line">
+ <div class="l"></div>
+ <div class="r"></div>
+ </div>
+ </div>
+ <div class="content-box">
+ <div class="being">
+ <div id="BeingEcharts" class="echarts-box"></div>
+ <div class="state">在使用</div>
+
+ <div class="text">
+ <div class="num">545.01</div>
+ <!-- <div class="num">{{ landsnum }}</div> -->
+ <div class="unit">亩</div>
+ </div>
+ </div>
+
+ <div class="leisure">
+ <div id="LeisureEcharts" class="echarts-box"></div>
+ <div class="state">空闲中</div>
+
+ <div class="text">
+ <div class="num">{{ landwnum }}</div>
+ <div class="unit">亩</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="b">
+ <div class="title-box">
+ <div class="icon"></div>
+ <div class="text">
+ 种养品种
+ <div class="num">2</div>
+ <!-- <div class="num">{{ num }}</div> -->
+ <div class="unit">种</div>
+ </div>
+ <div class="line">
+ <div class="l"></div>
+ <div class="r"></div>
+ </div>
+ </div>
+ <div class="content-box">
+ <ul>
+ <li>
+ <div class="l">
+ <img
+ src="http://61.131.136.25:2081/zhba/upload/picture/97ae6951541f46e1bb2468adb5d69403.png"
+ class="img"
+ />
+ <div class="text">水稻</div>
+ </div>
+ <div class="r">
+ <div class="num">545.01</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>
+ <li>
+ <div class="l">
+ <img
+ src="http://61.131.136.25:2081/zhba/upload/picture/71bdf3e48b0f45009dd670010224ef00.png"
+ class="img"
+ />
+ <div class="text">玉米</div>
+ </div>
+ <div class="r">
+ <div class="num">75.12</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>
+
+ <!-- <li v-for="(item, index) in farmPlanList" :key="index">
+ <div class="l">
+ <img :src="item.url" class="img" />
+ <div class="text">{{ item.strainName }}</div>
+ </div>
+ <div class="r">
+ <div class="num">{{ item.area }}</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>-->
+ </ul>
+ </div>
+ </div>
</div>
- </div>
</div>
- <div class="c">
- <div class="title-box">
- <div class="icon"></div>
- <div class="text">
- 农田使用率
- <div class="em"></div>
- </div>
- <div class="line">
- <div class="l"></div>
- <div class="r"></div>
- </div>
- </div>
- <div class="content-box">
- <div class="being">
- <div id="BeingEcharts" class="echarts-box"></div>
- <div class="state">在使用</div>
+ <div class="right-box">
+ <div class="content">
+ <div class="t">
+ <div class="title-box">
+ <div class="icon"></div>
+ <div class="text">
+ 物联网设备在线情况
+ <div class="em"></div>
+ </div>
- <div class="text">
- <div class="num">{{ landsnum }}</div>
- <div class="unit">亩</div>
- </div>
- </div>
+ <div class="line">
+ <div class="l"></div>
+ <div class="r"></div>
+ </div>
+ </div>
+ <div class="content-box">
+ <div class="equipment" id="EquipmentEcharts"></div>
+ </div>
+ </div>
+ <div class="c">
+ <div class="title-box">
+ <div class="icon"></div>
+ <div class="text">
+ 本年农事操作
+ <!-- <div class="num">{{ total }}</div> -->
+ <div class="num">22</div>
+ <div class="unit">次</div>
+ </div>
- <div class="leisure">
- <div id="LeisureEcharts" class="echarts-box"></div>
- <div class="state">空闲中</div>
+ <div class="line">
+ <div class="l"></div>
+ <div class="r"></div>
+ </div>
+ </div>
- <div class="text">
- <div class="num">{{ landwnum }}</div>
- <div class="unit">亩</div>
- </div>
+ <!-- <div class="content-box" :v-if="isFarmingDetail">
+ <div class="detail" v-for="(item, index) in farmingList" :key="index">
+ <div class="title">{{ item.name }}</div>
+ <div class="num-unit">
+ <div class="num">{{ item.value }}</div>
+ <div class="unit">次</div>
+ </div>
+ </div>
+ </div>-->
+
+ <div class="content-box">
+ <div class="detail">
+ <div class="title">施肥</div>
+ <div class="num-unit">
+ <div class="num">2</div>
+ <div class="unit">次</div>
+ </div>
+ </div>
+
+ <div class="detail">
+ <div class="title">除草</div>
+ <div class="num-unit">
+ <div class="num">3</div>
+ <div class="unit">次</div>
+ </div>
+ </div>
+
+ <div class="detail">
+ <div class="title">移栽</div>
+ <div class="num-unit">
+ <div class="num">7</div>
+ <div class="unit">次</div>
+ </div>
+ </div>
+
+ <div class="detail">
+ <div class="title">采收</div>
+ <div class="num-unit">
+ <div class="num">10</div>
+ <div class="unit">次</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="b">
+ <div class="title-box">
+ <div class="icon"></div>
+ <div class="text">
+ 销售趋势
+ <div class="em"></div>
+ </div>
+
+ <div class="line">
+ <div class="l"></div>
+ <div class="r"></div>
+ </div>
+ </div>
+ <div class="content-box">
+ <div class="total">
+ <div class="t-l"></div>
+ <div class="t-r"></div>
+ <div class="b-l"></div>
+ <div class="b-r"></div>
+ <div class="title">全年销售总额（元）</div>
+ <div class="price">
+ <div>
+ <span>1</span>
+ </div>
+ <div>
+ <span>6</span>
+ </div>
+ <div>
+ <span>7</span>
+ </div>
+ <div>
+ <span>8</span>
+ </div>
+ <div>
+ <span>5</span>
+ </div>
+ <div>
+ <span>2</span>
+ </div>
+ <div>
+ <span>0</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="trend" id="TrendEcharts"></div>
+ </div>
+ </div>
</div>
- </div>
</div>
- <div class="b">
- <div class="title-box">
+
+ <div class="down-menu">
+ <div class="nc">
+ <span>农场</span>
+ <i class="el-icon-caret-bottom"></i>
+ </div>
+ <div class="jk">
+ <span>监控设备</span>
+ <i class="el-icon-caret-bottom"></i>
+ </div>
+ <div class="jc">
+ <span>监测设备</span>
+ <i class="el-icon-caret-bottom"></i>
+ </div>
+ </div>
+
+ <div class="city-flow" @click="cityFlowShow">
<div class="icon"></div>
- <div class="text">
- 种养品种
- <div class="num">{{ num }}</div>
- <div class="unit">种</div>
+ <span>市场流通</span>
+ </div>
+
+ <div class="layers-box">
+ <div class="sl">
+ <div class="text">标准图</div>
</div>
- <div class="line">
- <div class="l"></div>
- <div class="r"></div>
+ <div class="yx on">
+ <div class="text">卫星图</div>
</div>
- </div>
- <div class="content-box">
+ </div>
+
+ <div class="lenged-box">
<ul>
- <li v-for="(item, index) in farmPlanList" :key="index">
- <div class="l">
- <img :src="item.url" class="img"/>
- <div class="text">{{ item.strainName }}</div>
- </div>
- <div class="r">
- <div class="num">{{ item.area }}</div>
- <div class="unit">亩</div>
- </div>
- </li>
+ <li>
+ <div class="icon"></div>
+ <div class="title">农场</div>
+ </li>
+ <li>
+ <div class="icon"></div>
+ <div class="title">地块</div>
+ </li>
+ <li>
+ <div class="icon"></div>
+ <div class="title">监控设备</div>
+ </li>
+ <li>
+ <div class="icon"></div>
+ <div class="title">土壤监测</div>
+ </li>
+ <li>
+ <div class="icon"></div>
+ <div class="title">气象监测</div>
+ </li>
</ul>
- </div>
</div>
- </div>
- </div>
- <div class="right-box">
- <div class="content">
- <div class="t">
- <div class="title-box">
- <div class="icon"></div>
- <div class="text">
- 物联网设备在线情况
- <div class="em"></div>
+ <div v-if="cityShow" class="popup">
+ <div class="box">
+ <img src="/img/sclt.png" alt />
</div>
-
- <div class="line">
- <div class="l"></div>
- <div class="r"></div>
- </div>
- </div>
- <div class="content-box">
- <div class="equipment" id="EquipmentEcharts"></div>
- </div>
</div>
- <div class="c">
- <div class="title-box">
- <div class="icon"></div>
- <div class="text">
- 本年农事操作
- <div class="num">{{ total }}</div>
- <div class="unit">次</div>
- </div>
-
- <div class="line">
- <div class="l"></div>
- <div class="r"></div>
- </div>
- </div>
- <div class="content-box" :v-if="isFarmingDetail">
- <div class="detail" v-for="(item, index) in farmingList" :key="index">
- <div class="title">{{ item.name }}</div>
- <div class="num-unit">
- <div class="num">{{ item.value }}</div>
- <div class="unit">次</div>
- </div>
- </div>
- </div>
- </div>
- <div class="b">
- <div class="title-box">
- <div class="icon"></div>
- <div class="text">
- 销售趋势
- <div class="em"></div>
- </div>
-
- <div class="line">
- <div class="l"></div>
- <div class="r"></div>
- </div>
- </div>
- <div class="content-box">
- <div class="total">
- <div class="t-l"></div>
- <div class="t-r"></div>
- <div class="b-l"></div>
- <div class="b-r"></div>
- <div class="title">全年销售总额（元）</div>
- <div class="price">
- <div>
- <span>1</span>
- </div>
- <div>
- <span>1</span>
- </div>
- <div>
- <span>2</span>
- </div>
- <div>
- <span>3</span>
- </div>
- <div>
- <span>4</span>
- </div>
- <div>
- <span>5</span>
- </div>
- <div>
- <span>6</span>
- </div>
- <div>
- <span>7</span>
- </div>
- </div>
- </div>
-
- <div class="trend" id="TrendEcharts"></div>
- </div>
- </div>
- </div>
</div>
-
- <div class="down-menu">
- <div class="nc">
- <span>农场</span>
- <i class="el-icon-caret-bottom"></i>
- </div>
- <div class="jk">
- <span>监控设备</span>
- <i class="el-icon-caret-bottom"></i>
- </div>
- <div class="jc">
- <span>监测设备</span>
- <i class="el-icon-caret-bottom"></i>
- </div>
- </div>
-
- <div class="city-flow">
- <div class="icon"></div>
- <span>市场流通</span>
- </div>
-
- <div class="layers-box">
- <div class="sl">
- <div class="text">标准图</div>
- </div>
- <div class="yx on">
- <div class="text">卫星图</div>
- </div>
- </div>
-
- <div class="lenged-box">
- <ul>
- <li>
- <div class="icon"></div>
- <div class="title">农场</div>
- </li>
- <li>
- <div class="icon"></div>
- <div class="title">地块</div>
- </li>
- <li>
- <div class="icon"></div>
- <div class="title">监控设备</div>
- </li>
- <li>
- <div class="icon"></div>
- <div class="title">土壤监测</div>
- </li>
- <li>
- <div class="icon"></div>
- <div class="title">气象监测</div>
- </li>
- </ul>
- </div>
- </div>
</template>
<script>
@@ -272,1154 +342,1189 @@
import { selectXCount } from '@/api/land/land'
export default {
- data () {
- return {
- farmingList: [],
- farmPlanList: [],
- isFarmingDetail: false,
- total: 0,
- num: 0,
- landsnum: 0,
- landwnum: 0,
- ncnum: 0,
- rynum: 0
- }
- },
- created () {
- // 本年农事操作记录
- this.getFarmingStatis()
- this.getFarmingCount()
- this.pagePalnt()
- this.selectXCount()
- this.SelectCount()
- },
- mounted () {
- this.initPie('BeingEcharts')
- this.initPie('LeisureEcharts')
- this.initRightPie('EquipmentEcharts')
- this.initLine('TrendEcharts')
- },
- methods: {
- initPie (dom) {
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
+ data () {
+ return {
+ farmingList: [],
+ farmPlanList: [],
+ isFarmingDetail: false,
+ total: 0,
+ num: 0,
+ landsnum: 0,
+ landwnum: 0,
+ ncnum: 0,
+ rynum: 0,
+ cityShow: false
+ }
+ },
+ created () {
+ // 本年农事操作记录
+ this.getFarmingStatis()
+ this.getFarmingCount()
+ this.pagePalnt()
+ this.selectXCount()
+ this.SelectCount()
+ },
+ mounted () {
+ this.initPie('BeingEcharts', 100)
+ this.initPie('LeisureEcharts', 0)
+ this.initRightPie('EquipmentEcharts')
+ this.initLine('TrendEcharts')
+ },
+ methods: {
+ initPie (dom, val) {
+ const chartDom = document.getElementById(dom)
+ const myChart = this.$echarts.init(chartDom)
- const option = {
- series: [
- {
- radius: '100%',
- type: 'gauge',
- detail: {
- formatter: '{value}%\n总占比',
- color: '#A9D1D7',
- fontSize: '16px',
- fontWeight: 'bold',
- offsetCenter: [0, '60%']
- },
- data: [{ value: 50 }],
- splitNumber: 25,
- axisLine: {
- show: true,
- width: 8,
- lineStyle: {
- color: [
- [1, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ const option = {
+ series: [
{
- offset: 0.1,
- color: '#12FF90'
- },
- {
- offset: 0.6,
- color: '#00FFC2'
- },
- {
- offset: 1,
- color: '#05D4F5'
+ radius: '100%',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}%\n总占比',
+ color: '#A9D1D7',
+ fontSize: '16px',
+ fontWeight: 'bold',
+ offsetCenter: [0, '60%']
+ },
+ data: [{ value: val }],
+ splitNumber: 25,
+ axisLine: {
+ show: true,
+ width: 8,
+ lineStyle: {
+ color: [
+ [1, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ {
+ offset: 0.1,
+ color: '#12FF90'
+ },
+ {
+ offset: 0.6,
+ color: '#00FFC2'
+ },
+ {
+ offset: 1,
+ color: '#05D4F5'
+ }
+ ])
+ ]
+ ]
+
+ }
+ },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: {
+ show: true,
+ distance: -8,
+ length: 8,
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
+ }
+
}
- ])
- ]
]
-
- }
- },
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: {
- show: true,
- distance: -8,
- length: 8,
- lineStyle: {
- color: '#fff',
- width: 2
- }
}
- }
- ]
- }
-
- option && myChart.setOption(option)
- },
-
- initRightPie (dom) {
- const that = this
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
-
- const option = {
- title: {
- text: '400',
- subtext: '设备总数',
- top: '40%',
- left: 'center',
- textStyle: {
- color: '#69E2ED',
- fontSize: 34,
- fontWeight: 'bold',
- lineHeight: 12
- },
- subtextStyle: {
- color: '#A9D1D7',
- fontSize: 18,
- fontWeight: 'bold'
- }
+ option && myChart.setOption(option)
},
- series: [
- {
- type: 'pie',
- radius: ['52%', '80%'],
- center: ['50%', '50%'],
- data: [
- {
- value: 30,
- name: 'rose2',
- itemStyle: {
- color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
- offset: 0,
- color: '#F39302'
- }, {
- offset: 1,
- color: '#E5F302'
- }])
- },
- labelLine: {
- show: false
- },
- label: {
- show: false
- }
- },
- {
- value: 90,
- name: 'rose2',
- itemStyle: {
- color: '#00F0FF'
- },
- labelLine: {
- show: false
- },
- label: {
- show: false
- }
- }
- ]
- },
- { // 指示线
- // 通过value 的值 调节lableLine的位置
- type: 'pie',
- radius: ['52%', '80%'],
- data: [
- {
- value: 30,
- itemStyle: {
- color: 'transparent'
- },
- labelLine: {
- show: true,
- length: 42,
- length2: 24,
- color: '#fff',
- lineStyle: {
- color: '#fff'
- }
- },
- label: {
- color: '#A9D1D7',
- fontSize: 16,
- position: 'outside',
- formatter: '{a|52}\n离线',
- rich: {
- a: {
- color: '#EBC802',
- fontSize: 22,
- fontWeight: 'bold',
- lineHeight: 30
+
+ initRightPie (dom) {
+ const that = this
+ const chartDom = document.getElementById(dom)
+ const myChart = this.$echarts.init(chartDom)
+
+ const option = {
+ title: {
+ text: '28',
+ subtext: '设备总数',
+ top: '40%',
+ left: 'center',
+ textStyle: {
+ color: '#69E2ED',
+ fontSize: 34,
+ fontWeight: 'bold',
+ lineHeight: 12
+ },
+ subtextStyle: {
+ color: '#A9D1D7',
+ fontSize: 18,
+ fontWeight: 'bold'
}
- }
- }
-
- },
- {
- value: 90,
- itemStyle: {
- color: 'transparent'
- }
- }
- ]
- },
-
- { // 指示线
- // 通过value 的值 调节lableLine的位置
- type: 'pie',
- radius: ['52%', '80%'],
- data: [
- {
- value: 30,
- itemStyle: {
- color: 'transparent'
- }
-
- },
- {
- value: 90,
- itemStyle: {
- color: 'transparent'
},
- labelLine: {
- show: true,
- length: 42,
- length2: 24,
- color: '#fff',
- lineStyle: {
- color: '#fff'
- }
- },
- label: {
- color: '#A9D1D7',
- fontSize: 16,
- position: 'outside',
- formatter: '{a|52}\n在线',
- rich: {
- a: {
- color: '#38ADD7',
- fontSize: 22,
- fontWeight: 'bold',
- lineHeight: 30
+ series: [
+ {
+ type: 'pie',
+ radius: ['44%', '62%'],
+ center: ['50%', '50%'],
+ data: [
+ {
+ value: 2,
+ name: 'rose2',
+ itemStyle: {
+ color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#F39302'
+ }, {
+ offset: 1,
+ color: '#E5F302'
+ }])
+ },
+ labelLine: {
+ show: false
+ },
+ label: {
+ show: false
+ }
+ },
+ {
+ value: 26,
+ name: 'rose2',
+ itemStyle: {
+ color: '#00F0FF'
+ },
+ labelLine: {
+ show: false
+ },
+ label: {
+ show: false
+ }
+ }
+ ]
+ },
+ { // 指示线
+ // 通过value 的值 调节lableLine的位置
+ type: 'pie',
+ radius: ['44%', '62%'],
+ data: [
+ {
+ value: 2,
+ itemStyle: {
+ color: 'transparent'
+ },
+ labelLine: {
+ show: true,
+ length: 24,
+ length2: 16,
+ color: '#fff',
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ label: {
+ color: '#A9D1D7',
+ fontSize: 16,
+ position: 'outside',
+ formatter: '{a|52}\n离线',
+ rich: {
+ a: {
+ color: '#EBC802',
+ fontSize: 22,
+ fontWeight: 'bold',
+ lineHeight: 30
+ }
+ }
+ }
+
+ },
+ {
+ value: 26,
+ itemStyle: {
+ color: 'transparent'
+ }
+ }
+ ]
+ },
+
+ { // 指示线
+ // 通过value 的值 调节lableLine的位置
+ type: 'pie',
+ radius: ['44%', '62%'],
+ data: [
+ {
+ value: 2,
+ itemStyle: {
+ color: 'transparent'
+ }
+
+ },
+ {
+ value: 26,
+ itemStyle: {
+ color: 'transparent'
+ },
+ labelLine: {
+ show: true,
+ length: 24,
+ length2: 16,
+ color: '#fff',
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ label: {
+ color: '#A9D1D7',
+ fontSize: 16,
+ position: 'outside',
+ formatter: '{a|52}\n在线',
+ rich: {
+ a: {
+ color: '#38ADD7',
+ fontSize: 22,
+ fontWeight: 'bold',
+ lineHeight: 30
+ }
+ }
+ }
+ }
+ ]
}
- }
- }
- }
- ]
- }
- ]
- }
+ ]
+ }
- option && myChart.setOption(option)
- },
-
- initLine (dom) {
- const that = this
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
-
- const option = {
- tooltip: {},
- grid: {
- top: '16%',
- left: '6%',
- right: '6%',
- bottom: '12%',
- containLabel: true
+ option && myChart.setOption(option)
},
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- axisLine: {
- show: true,
- lineStyle: {
- color: '#697B89'
- }
- },
- axisLabel: {
- // 坐标轴刻度标签的相关设置
- textStyle: {
- color: '#A9D1D7',
- margin: 8
- }
- },
- axisTick: { show: false },
- data: ['01', '02', '03', '04', '05', '06', '07']
- }
- ],
- yAxis: [
- {
- name: '（元）',
- nameTextStyle: {
- color: '#A9D1D7'
- },
- type: 'value',
- min: 0,
- max: 40,
- splitLine: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#697B89'
- }
- },
- axisLabel: {
- margin: 8,
- textStyle: {
- color: '#A9D1D7'
- }
- },
- axisTick: { show: false }
- }
- ],
- series: [
- {
- type: 'line',
- smooth: true, // 是否平滑曲线显示
- symbolSize: 0,
- lineStyle: {
- normal: {
- color: '#66DDE9' // 线条颜色
- }
- },
- areaStyle: {
- // 区域填充样式
- normal: {
- // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
- color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#66DDE9'
- }, {
- offset: 1,
- color: 'rgba(102,221,233,0)'
- }]),
+ initLine (dom) {
+ const that = this
+ const chartDom = document.getElementById(dom)
+ const myChart = this.$echarts.init(chartDom)
- shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
- shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
- }
- },
- data: [0, 25, 24, 35, 16, 30, 15]
- }
- ]
- }
+ const option = {
+ tooltip: {},
+ grid: {
+ top: '16%',
+ left: '6%',
+ right: '6%',
+ bottom: '12%',
+ containLabel: true
+ },
+ xAxis: [
+ {
- option && myChart.setOption(option)
- },
- // 企业概况
- SelectCount () {
- var that = this
- SelectCount().then((res) => {
- that.ncnum = res.data.data.ncnum
- that.rynum = res.data.data.rynum
- })
- },
- getFarmingCount () {
- var that = this
- var deptId = '1123598813738675201'
+ type: 'category',
+ boundaryGap: false,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#697B89'
+ }
+ },
+ axisLabel: {
+ // 坐标轴刻度标签的相关设置
+ textStyle: {
+ color: '#A9D1D7',
+ margin: 8
+ }
+ },
+ axisTick: { show: false },
+ data: ['01', '02', '03', '04', '05', '06', '07']
+ }
+ ],
+ yAxis: [
+ {
+ name: '（元）',
+ nameTextStyle: {
+ color: '#A9D1D7'
+ },
+ type: 'value',
+ min: 0,
+ max: 40,
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#697B89'
+ }
+ },
+ axisLabel: {
+ margin: 8,
+ textStyle: {
+ color: '#A9D1D7'
+ }
+ },
+ axisTick: { show: false }
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ smooth: true, // 是否平滑曲线显示
+ symbolSize: 0,
+ lineStyle: {
+ normal: {
+ color: '#66DDE9' // 线条颜色
+ }
+ },
+ areaStyle: {
+ // 区域填充样式
+ normal: {
+ // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+ color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#66DDE9'
+ }, {
+ offset: 1,
+ color: 'rgba(102,221,233,0)'
+ }]),
- getFarmingCount(deptId).then((res) => {
- that.total = res.data.data
- console.log(that.total, res.data.data)
- // that.total = 0;
- if (that.total > 0) {
- that.isFarmingDetail = true
+ shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
+ shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+ }
+ },
+ data: [0, 25, 24, 35, 16, 30, 15]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option)
+ },
+ // 企业概况
+ SelectCount () {
+ var that = this
+ SelectCount().then((res) => {
+ that.ncnum = res.data.data.ncnum
+ that.rynum = res.data.data.rynum
+ })
+ },
+ getFarmingCount () {
+ var that = this
+ var deptId = '1123598813738675201'
+
+ getFarmingCount(deptId).then((res) => {
+ that.total = res.data.data
+ console.log(that.total, res.data.data)
+ // that.total = 0;
+ if (that.total > 0) {
+ that.isFarmingDetail = true
+ }
+ })
+ },
+ // 本年农事操作记录，分组统计
+ getFarmingStatis () {
+ var that = this
+ var deptId = '1123598813738675201'
+ getFarmingStatis(deptId).then((res) => {
+ that.farmingList = res.data.data
+ })
+ },
+ // 农场使用率
+ selectXCount () {
+ // eslint-disable-next-line no-unused-vars
+ var that = this
+ var deptId = '1123598813738675201'
+ selectXCount(deptId).then((res) => {
+ that.landsnum = res.data.data.snum
+ that.landwnum = res.data.data.wnum
+ })
+ },
+ pagePalnt () {
+ var that = this
+ var params = {
+ status: 1
+ }
+ params.tenantId = '000000'
+ params.deptId = '1123598813738675201'
+ pagePalnt(1, 10, Object.assign(params)).then((res) => {
+ const data = res.data.data
+ that.num = data.num
+ this.farmPlanList = data.page.records
+ })
+ },
+
+ cityFlowShow () {
+ this.cityShow = true
}
- })
- },
- // 本年农事操作记录，分组统计
- getFarmingStatis () {
- var that = this
- var deptId = '1123598813738675201'
- getFarmingStatis(deptId).then((res) => {
- that.farmingList = res.data.data
- })
- },
- // 农场使用率
- selectXCount () {
- // eslint-disable-next-line no-unused-vars
- var that = this
- var deptId = '1123598813738675201'
- selectXCount(deptId).then((res) => {
- that.landsnum = res.data.data.snum
- that.landwnum = res.data.data.wnum
- })
- },
- pagePalnt () {
- var that = this
- var params = {
- status: 1
- }
- params.tenantId = '000000'
- params.deptId = '1123598813738675201'
- pagePalnt(1, 10, Object.assign(params)).then((res) => {
- const data = res.data.data
- that.num = data.num
- this.farmPlanList = data.page.records
- })
- }
- }
+ }
}
</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');
+ 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%;
+ position: relative;
+ width: 100%;
+ height: 100%;
- .left-box {
- left: 0;
- background: linear-gradient(
+ .left-box {
+ left: 0;
+ background: linear-gradient(
270deg,
rgba(4, 41, 64, 0) 0%,
#042940 100%
- );
+ );
- .content {
- display: flex;
- flex-direction: column;
- left: 0;
-
- .t {
- height: 244px;
-
- .content-box {
- display: flex;
- align-items: center;
- flex-direction: column;
-
- .nc-num {
- margin-top: 30px;
- background: linear-gradient(
- 88deg,
- rgba(60, 118, 138, 0) 0%,
- rgba(60, 118, 138, 0.5) 100%
- );
-
- .text {
- margin-left: 46px;
-
- .num {
- margin: 30px;
- color: #66dde9;
- }
- }
-
- .log {
- left: auto;
- right: 0;
- background: url(/img/icon/nc-num.png) no-repeat;
- }
-
- .t-l,
- .b-l {
- background: linear-gradient(
- 89deg,
- rgba(102, 221, 233, 0) 0%,
- #66dde9 51%,
- rgba(102, 221, 233, 0) 100%
- );
- }
- }
-
- .pel-num {
- margin-top: 46px;
- background: linear-gradient(
- 88deg,
- rgba(38, 89, 132, 0) 0%,
- rgba(38, 89, 132, 0.5) 100%
- );
-
- .text {
- margin-left: 108px;
-
- .num {
- margin: 48px;
- color: #00b1ff;
- }
- }
-
- .log {
- left: 0;
- right: auto;
- background: url(/img/icon/pel-num.png) no-repeat;
- }
-
- .t-l,
- .b-l {
- background: linear-gradient(
- 89deg,
- rgba(51, 98, 153, 0) 0%,
- #508fd9 55%,
- rgba(51, 98, 153, 0) 100%
- );
- }
- }
-
- .pel-num,
- .nc-num {
- display: flex;
- align-items: center;
- position: relative;
-
- width: 342px;
- height: 70px;
- border-radius: 35px 35px 35px 35px;
-
- .text {
- font-size: 21px;
- color: #a9d1d7;
-
- .num {
- font-size: 24px;
- font-weight: Bold;
- }
- }
-
- .t-l {
- top: 0;
- bottom: auto;
- }
-
- .b-l {
- top: auto;
- bottom: 0;
- }
-
- .log {
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto;
- width: 88px;
- height: 88px;
- background-size: 100% 100%;
- }
-
- .t-l,
- .b-l {
- margin: auto;
- position: absolute;
- left: 0;
- right: 0;
- width: 217px;
- height: 1px;
- }
- }
- }
- }
-
- .c {
- height: 288px;
-
- .content-box {
- display: flex;
- justify-content: space-around;
-
- .being {
- margin-top: 30px;
- width: 152px;
-
- .state {
- color: #69e2ed;
- }
-
- .text {
- .num {
- color: #69e2ed;
- }
- }
- }
-
- .leisure {
- margin-top: 30px;
- width: 152px;
-
- .state {
- color: #c1c1c1;
- }
-
- .text {
- .num {
- color: #c1c1c1;
- }
- }
- }
-
- .being,
- .leisure {
+ .content {
display: flex;
flex-direction: column;
- align-items: center;
+ left: 0;
- .echarts-box {
- width: 152px;
- height: 152px;
+ .t {
+ height: 244px;
+
+ .content-box {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+
+ .nc-num {
+ margin-top: 30px;
+ background: linear-gradient(
+ 88deg,
+ rgba(60, 118, 138, 0) 0%,
+ rgba(60, 118, 138, 0.5) 100%
+ );
+
+ .text {
+ margin-left: 46px;
+
+ .num {
+ margin: 30px;
+ color: #66dde9;
+ }
+ }
+
+ .log {
+ left: auto;
+ right: 0;
+ background: url(/img/icon/nc-num.png) no-repeat;
+ }
+
+ .t-l,
+ .b-l {
+ background: linear-gradient(
+ 89deg,
+ rgba(102, 221, 233, 0) 0%,
+ #66dde9 51%,
+ rgba(102, 221, 233, 0) 100%
+ );
+ }
+ }
+
+ .pel-num {
+ margin-top: 46px;
+ background: linear-gradient(
+ 88deg,
+ rgba(38, 89, 132, 0) 0%,
+ rgba(38, 89, 132, 0.5) 100%
+ );
+
+ .text {
+ margin-left: 108px;
+
+ .num {
+ margin: 48px;
+ color: #00b1ff;
+ }
+ }
+
+ .log {
+ left: 0;
+ right: auto;
+ background: url(/img/icon/pel-num.png) no-repeat;
+ }
+
+ .t-l,
+ .b-l {
+ background: linear-gradient(
+ 89deg,
+ rgba(51, 98, 153, 0) 0%,
+ #508fd9 55%,
+ rgba(51, 98, 153, 0) 100%
+ );
+ }
+ }
+
+ .pel-num,
+ .nc-num {
+ display: flex;
+ align-items: center;
+ position: relative;
+
+ width: 342px;
+ height: 70px;
+ border-radius: 35px 35px 35px 35px;
+
+ .text {
+ font-size: 21px;
+ color: #a9d1d7;
+
+ .num {
+ font-size: 24px;
+ font-weight: Bold;
+ }
+ }
+
+ .t-l {
+ top: 0;
+ bottom: auto;
+ }
+
+ .b-l {
+ top: auto;
+ bottom: 0;
+ }
+
+ .log {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ width: 88px;
+ height: 88px;
+ background-size: 100% 100%;
+ }
+
+ .t-l,
+ .b-l {
+ margin: auto;
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 217px;
+ height: 1px;
+ }
+ }
+ }
}
- .state {
- margin-top: 15px;
- font-size: 16px;
- font-weight: 400;
+ .c {
+ height: 288px;
+
+ .content-box {
+ display: flex;
+ justify-content: space-around;
+
+ .being {
+ margin-top: 30px;
+ width: 152px;
+
+ .state {
+ color: #69e2ed;
+ }
+
+ .text {
+ .num {
+ color: #69e2ed;
+ }
+ }
+ }
+
+ .leisure {
+ margin-top: 30px;
+ width: 152px;
+
+ .state {
+ color: #c1c1c1;
+ }
+
+ .text {
+ .num {
+ color: #c1c1c1;
+ }
+ }
+ }
+
+ .being,
+ .leisure {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .echarts-box {
+ width: 152px;
+ height: 152px;
+ }
+
+ .state {
+ margin-top: 15px;
+ font-size: 16px;
+ font-weight: 400;
+ }
+
+ .text {
+ display: flex;
+ align-items: baseline;
+ margin-top: 10px;
+ display: flex;
+
+ .num {
+ font-size: 27px;
+ }
+
+ .unit {
+ margin-left: 6px;
+ font-size: 16px;
+ font-weight: 400;
+ color: #a9d1d7;
+ }
+ }
+ }
+ }
}
- .text {
- display: flex;
- align-items: baseline;
- margin-top: 10px;
- display: flex;
+ .b {
+ flex: 1;
- .num {
- font-size: 27px;
- }
+ .title-box {
+ .text {
+ display: flex;
+ }
- .unit {
- margin-left: 6px;
- font-size: 16px;
- font-weight: 400;
- color: #a9d1d7;
- }
+ .num {
+ margin-top: -3.5px;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding: 0px 6px;
+ text-align: center;
+ height: 32px;
+ font-size: 32px;
+ font-weight: bold;
+ font-family: 'DS-Digital';
+ color: #e5f302;
+ background: rgba(102, 221, 233, 0.55);
+ }
+
+ .unit {
+ font-weight: 400px;
+ color: #ced3d6;
+ }
+ }
+
+ .content-box {
+ padding: 7px 30px;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+
+ ul {
+ flex: 1;
+ height: 100%;
+ overflow-y: auto;
+ scrollbar-width: thin;
+
+ li {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 60px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+
+ & > div {
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 40px;
+ height: 40px;
+ }
+
+ .text {
+ margin-left: 16px;
+ font-size: 18px;
+ font-weight: 400;
+ color: #a9d1d7;
+ }
+
+ .num {
+ font-size: 18px;
+ color: #7ccfd6;
+ }
+
+ .unit {
+ font-size: 18px;
+ font-weight: 400;
+ color: #a9d1d7;
+ }
+ }
+ }
+
+ li:last-child {
+ border: none;
+ }
+ }
+ }
}
- }
}
- }
-
- .b {
- flex: 1;
-
- .title-box {
- .text {
- display: flex;
- }
-
- .num {
- margin-top: -3.5px;
- margin-left: 10px;
- margin-right: 10px;
- padding: 0px 6px;
- text-align: center;
- height: 32px;
- font-size: 32px;
- font-weight: bold;
- font-family: 'DS-Digital';
- color: #e5f302;
- background: rgba(102, 221, 233, 0.55);
- }
-
- .unit {
- font-weight: 400px;
- color: #ced3d6;
- }
- }
-
- .content-box {
- padding: 7px 30px;
- display: flex;
- align-items: center;
- box-sizing: border-box;
-
- ul {
- flex: 1;
- height: 100%;
- overflow-y: auto;
- scrollbar-width: thin;
-
- li {
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: 60px;
- border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-
- & > div {
- display: flex;
- align-items: center;
-
- img {
- width: 40px;
- height: 40px;
- }
-
- .text {
- margin-left: 16px;
- font-size: 18px;
- font-weight: 400;
- color: #a9d1d7;
- }
-
- .num {
- font-size: 18px;
- color: #7ccfd6;
- }
-
- .unit {
- font-size: 18px;
- font-weight: 400;
- color: #a9d1d7;
- }
- }
- }
-
- li:last-child {
- border: none;
- }
- }
- }
- }
}
- }
- .right-box {
- right: 0;
- background: linear-gradient(
+ .right-box {
+ right: 0;
+ background: linear-gradient(
-270deg,
rgba(4, 41, 64, 0) 0%,
#042940 100%
- );
+ );
- .content {
- display: flex;
- flex-direction: column;
- right: 0;
-
- .t {
- height: 310px;
-
- .content-box {
- display: flex;
- align-items: center;
- justify-content: center;
-
- .equipment {
- width: 382px;
- height: 100%;
- }
- }
- }
-
- .c {
- height: 214px;
-
- .title-box {
- .text {
+ .content {
display: flex;
- }
+ flex-direction: column;
+ right: 0;
- .num {
- margin-top: -3.5px;
- margin-left: 10px;
- margin-right: 10px;
- padding: 0px 6px;
- text-align: center;
- height: 32px;
- font-size: 32px;
- font-weight: bold;
- font-family: 'DS-Digital';
- color: #e5f302;
- background: rgba(102, 221, 233, 0.55);
- }
+ .t {
+ height: 310px;
- .unit {
- font-weight: 400px;
- color: #ced3d6;
- }
+ .content-box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .equipment {
+ width: 382px;
+ height: 100%;
+ }
+ }
+ }
+
+ .c {
+ height: 214px;
+
+ .title-box {
+ .text {
+ display: flex;
+ }
+
+ .num {
+ margin-top: -3.5px;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding: 0px 6px;
+ text-align: center;
+ height: 32px;
+ font-size: 32px;
+ font-weight: bold;
+ font-family: 'DS-Digital';
+ color: #e5f302;
+ background: rgba(102, 221, 233, 0.55);
+ }
+
+ .unit {
+ font-weight: 400px;
+ color: #ced3d6;
+ }
+ }
+
+ .content-box {
+ padding: 28px 10px 0px 10px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-content: flex-start;
+ box-sizing: border-box;
+
+ & > div {
+ padding: 0 8px;
+ margin: 4px 4px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 117px;
+ height: 40px;
+ border: 1px solid rgba(102, 221, 233, 0.6);
+ border-radius: 4px 4px 4px 4px;
+ background: rgba(102, 221, 233, 0.4);
+ box-sizing: border-box;
+ font-size: 14px;
+ font-weight: 400;
+ color: #a9d1d7;
+
+ .num-unit {
+ display: flex;
+
+ .num {
+ font-size: 18px;
+ font-weight: 500;
+ color: #69e2ed;
+ }
+ }
+ }
+ }
+ }
+
+ .b {
+ flex: 1;
+
+ .content-box {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+
+ .total {
+ position: relative;
+ margin-top: 25px;
+ width: 340px;
+ height: 96px;
+ background: rgba(42, 113, 149, 0.37);
+
+ .t-l,
+ .t-r,
+ .b-l,
+ .b-r {
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ }
+
+ .t-l {
+ top: -1px;
+ left: -1px;
+ border-top: 2px solid #7ccfd6;
+ border-left: 2px solid #7ccfd6;
+ }
+
+ .t-r {
+ top: -1px;
+ right: -1px;
+ border-top: 2px solid #7ccfd6;
+ border-right: 2px solid #7ccfd6;
+ }
+
+ .b-l {
+ bottom: -1px;
+ left: -1px;
+ border-bottom: 2px solid #7ccfd6;
+ border-left: 2px solid #7ccfd6;
+ }
+
+ .b-r {
+ bottom: -1px;
+ right: -1px;
+ border-bottom: 2px solid #7ccfd6;
+ border-right: 2px solid #7ccfd6;
+ }
+
+ .title {
+ margin-top: 10px;
+ }
+
+ .price {
+ margin-top: 10px;
+ display: flex;
+ justify-content: center;
+
+ & > div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 2px;
+ width: 32px;
+ height: 40px;
+ font-size: 32px;
+ font-weight: bold;
+ font-family: 'DS-Digital';
+ color: #e5f302;
+ background: rgba(102, 221, 233, 0.55);
+ }
+ }
+ }
+
+ .trend {
+ flex: 1;
+ margin-top: 20px;
+ width: 372px;
+ }
+ }
+ }
}
+ }
- .content-box {
- padding: 28px 10px 0px 10px;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-content: space-between;
- box-sizing: border-box;
+ .left-box,
+ .right-box {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 0;
+ width: 450px;
+ height: 100%;
- & > div {
- padding: 0 10px;
+ .content {
+ position: absolute;
+ top: 0;
+ width: 396px;
+ height: 100%;
+ font-size: 18px;
+ font-weight: bold;
+ color: #6de9f3;
+
+ & > div {
+ position: relative;
+ margin-top: 28px;
+
+ .title-box {
+ position: absolute;
+ display: flex;
+ height: 34px;
+
+ .icon {
+ margin-top: 5px;
+ margin-left: 16px;
+ width: 10px;
+ height: 14px;
+ background: url(/img/icon/l-icon.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .text {
+ margin-left: 10px;
+ }
+
+ .em {
+ position: absolute;
+ top: 3px;
+ right: -54px;
+ width: 74px;
+ height: 19px;
+ background: url(/img/icon/r-icon.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .l {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 378px;
+ height: 5px;
+ background: url(/img/icon/line.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .r {
+ position: absolute;
+ left: 378px;
+ bottom: 0;
+ width: 20px;
+ height: 3px;
+ background: url(/img/icon/r-line.png) no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+
+ .content-box {
+ position: absolute;
+ top: 34px;
+ width: 100%;
+ height: calc(100% - 34px);
+ }
+ }
+ }
+ }
+
+ .down-menu {
+ display: flex;
+ // align-items: center;
+ justify-content: space-around;
+ flex-direction: column;
+ position: absolute;
+ top: 102px;
+ left: 438px;
+ width: 146px;
+ height: 156px;
+
+ & > div {
+ padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
- width: 120px;
- height: 40px;
- border: 1px solid rgba(102, 221, 233, 0.6);
- border-radius: 4px 4px 4px 4px;
- background: rgba(102, 221, 233, 0.4);
+ height: 46px;
+ background: rgba(3, 50, 82, 0.4);
+ border-radius: 8px 8px 8px 8px;
+ border: 1px solid #69e2ed;
box-sizing: border-box;
- font-size: 14px;
- font-weight: 400;
- color: #a9d1d7;
+ font-size: 18px;
+ color: #6de9f3;
- .num-unit {
- display: flex;
-
- .num {
- font-size: 18px;
- font-weight: 500;
- color: #69e2ed;
- }
+ i {
+ font-size: 12px;
}
- }
}
- }
-
- .b {
- flex: 1;
-
- .content-box {
- display: flex;
- align-items: center;
- flex-direction: column;
-
- .total {
- position: relative;
- margin-top: 25px;
- width: 340px;
- height: 96px;
- background: rgba(42, 113, 149, 0.37);
-
- .t-l,
- .t-r,
- .b-l,
- .b-r {
- position: absolute;
- width: 8px;
- height: 8px;
- }
-
- .t-l {
- top: -1px;
- left: -1px;
- border-top: 2px solid #7ccfd6;
- border-left: 2px solid #7ccfd6;
- }
-
- .t-r {
- top: -1px;
- right: -1px;
- border-top: 2px solid #7ccfd6;
- border-right: 2px solid #7ccfd6;
- }
-
- .b-l {
- bottom: -1px;
- left: -1px;
- border-bottom: 2px solid #7ccfd6;
- border-left: 2px solid #7ccfd6;
- }
-
- .b-r {
- bottom: -1px;
- right: -1px;
- border-bottom: 2px solid #7ccfd6;
- border-right: 2px solid #7ccfd6;
- }
-
- .title {
- margin-top: 10px;
- }
-
- .price {
- margin-top: 10px;
- display: flex;
- justify-content: center;
-
- & > div {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-left: 2px;
- width: 32px;
- height: 40px;
- font-size: 32px;
- font-weight: bold;
- font-family: 'DS-Digital';
- color: #e5f302;
- background: rgba(102, 221, 233, 0.55);
- }
- }
- }
-
- .trend {
- flex: 1;
- margin-top: 20px;
- width: 372px;
- }
- }
- }
- }
- }
-
- .left-box,
- .right-box {
- display: flex;
- flex-direction: column;
- position: absolute;
- top: 0;
- width: 450px;
- height: 100%;
-
- .content {
- position: absolute;
- top: 0;
- width: 396px;
- height: 100%;
- font-size: 18px;
- font-weight: bold;
- color: #6de9f3;
-
- & > div {
- position: relative;
- margin-top: 28px;
-
- .title-box {
- position: absolute;
- display: flex;
- height: 34px;
-
- .icon {
- margin-top: 5px;
- margin-left: 16px;
- width: 10px;
- height: 14px;
- background: url(/img/icon/l-icon.png) no-repeat;
- background-size: 100% 100%;
- }
-
- .text {
- margin-left: 10px;
- }
-
- .em {
- position: absolute;
- top: 3px;
- right: -54px;
- width: 74px;
- height: 19px;
- background: url(/img/icon/r-icon.png) no-repeat;
- background-size: 100% 100%;
- }
-
- .l {
- position: absolute;
- left: 0;
- bottom: 0;
- width: 378px;
- height: 5px;
- background: url(/img/icon/line.png) no-repeat;
- background-size: 100% 100%;
- }
-
- .r {
- position: absolute;
- left: 378px;
- bottom: 0;
- width: 20px;
- height: 3px;
- background: url(/img/icon/r-line.png) no-repeat;
- background-size: 100% 100%;
- }
- }
-
- .content-box {
- position: absolute;
- top: 34px;
- width: 100%;
- height: calc(100% - 34px);
- }
- }
- }
- }
-
- .down-menu {
- display: flex;
- // align-items: center;
- justify-content: space-around;
- flex-direction: column;
- position: absolute;
- top: 102px;
- left: 438px;
- width: 146px;
- height: 156px;
-
- & > div {
- padding: 0 16px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: 46px;
- background: rgba(3, 50, 82, 0.4);
- border-radius: 8px 8px 8px 8px;
- border: 1px solid #69e2ed;
- box-sizing: border-box;
- font-size: 18px;
- color: #6de9f3;
-
- i {
- font-size: 12px;
- }
- }
- }
-
- .city-flow {
- padding: 0 12px;
- display: flex;
- align-items: center;
- position: absolute;
- top: 104px;
- right: 468px;
- width: 124px;
- height: 40px;
- background: rgba(3, 50, 82, 0.5);
- border-radius: 8px 8px 8px 8px;
- border: 1px solid #69e2ed;
- font-size: 14px;
- color: #6de9f3;
- box-sizing: border-box;
-
- .icon {
- width: 24px;
- height: 24px;
- background: url(/img/icon/city-flow.png) no-repeat;
- background-size: 100% 100%;
}
- span {
- margin-left: 8px;
- }
- }
-
- .layers-box {
- display: flex;
- position: absolute;
- left: 438px;
- bottom: 16px;
-
- .sl {
- background: url(/img/icon/SL.jpg) no-repeat;
- }
-
- .yx {
- margin-left: 16px;
- background: url(/img/icon/YX.jpg) no-repeat;
- }
-
- .sl,
- .yx {
- position: relative;
- width: 80px;
- height: 80px;
- background-size: 100% 100%;
- border-radius: 4px;
- box-sizing: border-box;
- overflow: hidden;
-
- .text {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 30px;
- background: rgba(4, 41, 64, 0.36);
- font-size: 14px;
- color: #fff;
- line-height: 30px;
- }
- }
-
- & > div.on {
- .text {
- color: #08f4ff;
- }
-
- border: 1px solid #18fefe;
- }
- }
-
- .lenged-box {
- position: absolute;
- right: 422px;
- bottom: 96px;
- width: 150px;
- height: 242px;
- background: rgba(2, 26, 38, 0.8);
-
- ul {
- display: flex;
- // align-items: center;
- justify-content: space-around;
- flex-direction: column;
- width: 100%;
- height: 100%;
-
- li {
- font-size: 18px;
- color: #6de9f3;
+ .city-flow {
+ padding: 0 12px;
display: flex;
+ align-items: center;
+ position: absolute;
+ top: 104px;
+ right: 468px;
+ width: 124px;
+ height: 40px;
+ background: rgba(3, 50, 82, 0.5);
+ border-radius: 8px 8px 8px 8px;
+ border: 1px solid #69e2ed;
+ font-size: 14px;
+ color: #6de9f3;
+ box-sizing: border-box;
.icon {
- margin-left: 20px;
- width: 24px;
- height: 24px;
+ width: 24px;
+ height: 24px;
+ background: url(/img/icon/city-flow.png) no-repeat;
+ background-size: 100% 100%;
}
- .title {
- margin-left: 20px;
+ span {
+ margin-left: 8px;
}
- }
-
- li:nth-child(1) {
- .icon {
- background: url(/img/icon/nc.png) no-repeat;
- background-size: 100% 100%;
- }
- }
-
- li:nth-child(2) {
- .icon {
- background: rgba(129, 255, 84, 0.2);
- border-radius: 4px 4px 4px 4px;
- border: 1px solid #81ff54;
- box-sizing: border-box;
- }
- }
-
- li:nth-child(3) {
- .icon {
- background: url(/img/icon/jk.png) no-repeat;
- background-size: 100% 100%;
- }
- }
-
- li:nth-child(4) {
- .icon {
- background: url(/img/icon/tr.png) no-repeat;
- background-size: 100% 100%;
- }
- }
-
- li:nth-child(5) {
- .icon {
- background: url(/img/icon/qx.png) no-repeat;
- background-size: 100% 100%;
- }
- }
}
- }
+
+ .layers-box {
+ display: flex;
+ position: absolute;
+ left: 438px;
+ bottom: 16px;
+
+ .sl {
+ background: url(/img/icon/SL.jpg) no-repeat;
+ }
+
+ .yx {
+ margin-left: 16px;
+ background: url(/img/icon/YX.jpg) no-repeat;
+ }
+
+ .sl,
+ .yx {
+ position: relative;
+ width: 80px;
+ height: 80px;
+ background-size: 100% 100%;
+ border-radius: 4px;
+ box-sizing: border-box;
+ overflow: hidden;
+
+ .text {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 30px;
+ background: rgba(4, 41, 64, 0.36);
+ font-size: 14px;
+ color: #fff;
+ line-height: 30px;
+ }
+ }
+
+ & > div.on {
+ .text {
+ color: #08f4ff;
+ }
+
+ border: 1px solid #18fefe;
+ }
+ }
+
+ .lenged-box {
+ position: absolute;
+ right: 422px;
+ bottom: 96px;
+ width: 150px;
+ height: 242px;
+ background: rgba(2, 26, 38, 0.8);
+
+ ul {
+ display: flex;
+ // align-items: center;
+ justify-content: space-around;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+
+ li {
+ font-size: 18px;
+ color: #6de9f3;
+ display: flex;
+
+ .icon {
+ margin-left: 20px;
+ width: 24px;
+ height: 24px;
+ }
+
+ .title {
+ margin-left: 20px;
+ }
+ }
+
+ li:nth-child(1) {
+ .icon {
+ background: url(/img/icon/nc.png) no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+
+ li:nth-child(2) {
+ .icon {
+ background: rgba(129, 255, 84, 0.2);
+ border-radius: 4px 4px 4px 4px;
+ border: 1px solid #81ff54;
+ box-sizing: border-box;
+ }
+ }
+
+ li:nth-child(3) {
+ .icon {
+ background: url(/img/icon/jk.png) no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+
+ li:nth-child(4) {
+ .icon {
+ background: url(/img/icon/tr.png) no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+
+ li:nth-child(5) {
+ .icon {
+ background: url(/img/icon/qx.png) no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+ }
+ }
+
+ .popup {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ background: rgba(7, 7, 7, 0.4);
+
+ .box {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ width: 1208px;
+ height: 708px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
}
</style>
diff --git a/src/views/lyout/index.vue b/src/views/lyout/index.vue
index 98bcf9b..a56b587 100644
--- a/src/views/lyout/index.vue
+++ b/src/views/lyout/index.vue
@@ -15,7 +15,7 @@
:data-path="'/lyout/monitor'"
>遥感监测</div>
</div>
- <div class="c">智慧农业数据资源管控大屏</div>
+ <div class="c">南城县智慧农业综合监管平台</div>
<div class="r">
<div
class="nav"
diff --git a/src/views/manage/index.vue b/src/views/manage/index.vue
index d7c5909..e65ac94 100644
--- a/src/views/manage/index.vue
+++ b/src/views/manage/index.vue
@@ -1,264 +1,265 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
-* @Last Modified by: Morpheus
-* @Last Modified time: 2022-06-28 16:54:18
+ * @Last Modified by: Morpheus
+ * @Last Modified time: 2022-07-01 12:00:07
* 经营主体监管
*/
<template>
- <div class="container">
- <div class="toggle-plot">
- 选择农场
- <i class="el-icon-arrow-down"></i>
+ <div class="container">
+ <div class="toggle-plot">
+ 选择农场
+ <i class="el-icon-arrow-down"></i>
+ </div>
+ <div class="main-content">
+ <div class="t">
+ <statistics-num
+ :className="'td'"
+ :totalRegion="545.01"
+ :imgUrl="'/img/icon/mj.png'"
+ :unit="'亩'"
+ :title="'土地面积'"
+ :subOneTitle="'使用面积'"
+ :subOneNum="545.01"
+ :subTwoTitle="'未使用面积'"
+ :subTwoNum="0"
+ ></statistics-num>
+ <statistics-num
+ :className="'kc'"
+ :totalRegion="652"
+ :imgUrl="'/img/icon/kc.png'"
+ :unit="'公斤'"
+ :title="'库存数量'"
+ :subOneTitle="'农产品'"
+ :subOneNum="652"
+ :subTwoTitle="'加工产品'"
+ :subTwoNum="0"
+ ></statistics-num>
+ <statistics-num
+ :className="'nz'"
+ :totalRegion="198"
+ :imgUrl="'/img/icon/syl.png'"
+ :unit="'公斤'"
+ :title="'农资年使用量'"
+ :subOneTitle="'去年使用'"
+ :subOneNum="232"
+ :subTwoTitle="'本月使用'"
+ :subTwoNum="0"
+ ></statistics-num>
+ <statistics-num
+ :className="'cl'"
+ :totalRegion="6256"
+ :imgUrl="'/img/icon/ncl.png'"
+ :unit="'公斤'"
+ :title="'年产量'"
+ :subOneTitle="'农产品'"
+ :subOneNum="4500"
+ :subTwoTitle="'加工产品'"
+ :subTwoNum="1756"
+ ></statistics-num>
+ <statistics-num
+ :className="'lt'"
+ :totalRegion="2678"
+ :imgUrl="'/img/icon/lt.png'"
+ :unit="'公斤'"
+ :title="'市场流通量'"
+ :subOneTitle="'去年流通量'"
+ :subOneNum="5280"
+ :subTwoTitle="'本月流通量'"
+ :subTwoNum="0"
+ ></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'"
+ ></time-box>
+ <time-box
+ :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'"
+ ></time-box>
+ </div>
+ <div class="task-box">
+ <div class="title">任务总数</div>
+
+ <date-select></date-select>
+
+ <div class="echarts-box" id="TaskNumEcharts"></div>
+ </div>
+ <div class="nz-ncp">
+ <div class="title-box">
+ <div>
+ <div class="item" :class="{on: nzOrNcp == 'ncp'}">
+ <div @click="nzOrNcp = 'ncp'" class="title">农产品投入</div>
+ <span></span>
+ </div>
+ </div>
+ <div>
+ <div class="item" :class="{on: nzOrNcp == 'nz'}">
+ <div @click="nzOrNcp = 'nz'" class="title">农资投入</div>
+ <span></span>
+ </div>
+ </div>
+ </div>
+ <date-select></date-select>
+ <div v-if="nzOrNcp == 'ncp'" class="lists-box">
+ <div>
+ <div>1</div>
+ <div>水稻</div>
+ <div>545.01亩</div>
+ </div>
+ <div>
+ <div>2</div>
+ <div>玉米</div>
+ <div>75.12亩</div>
+ </div>
+ </div>
+ <div v-if="nzOrNcp == 'nz'" class="lists-box">
+ <div>
+ <div>1</div>
+ <div>有机肥料</div>
+ <div>120公斤</div>
+ </div>
+ <div>
+ <div>2</div>
+ <div>复合肥料</div>
+ <div>68公斤</div>
+ </div>
+ </div>
+ </div>
+ <div class="trp-ncp">
+ <div class="title-box">
+ <div>
+ <div class="item" :class="{on: trpOrNcp == 'trp'}">
+ <div @click="trpOrNcp = 'trp'" class="title">投入品监管</div>
+ <span></span>
+ </div>
+ </div>
+ <div>
+ <div class="item" :class="{on: trpOrNcp == 'ncp'}">
+ <div @click="trpOrNcp = 'ncp'" class="title">农产品监管</div>
+ <span></span>
+ </div>
+ </div>
+
+ <div class="more">
+ 明细
+ <img src="/img/icon/more.png" alt />
+ </div>
+ </div>
+
+ <div v-if="trpOrNcp == 'trp'" class="echarts-box" id="TrpEcharts"></div>
+ <div v-if="trpOrNcp == 'ncp'" class="echarts-box" id="NcpEcharts"></div>
+ </div>
+ </div>
+ <div class="b">
+ <div class="cl-sy">
+ <div class="title-box">
+ <div>
+ <div class="item on">
+ <div class="title">产量统计</div>
+ <span></span>
+ </div>
+ </div>
+ <div>
+ <div class="item">
+ <div class="title">溯源查询趋势图</div>
+ <span></span>
+ </div>
+ </div>
+
+ <div class="date">
+ <date-select></date-select>
+ </div>
+ </div>
+
+ <div class="echarts-box" id="ClSyEcharts"></div>
+ </div>
+ <div class="ns-nz">
+ <div class="title-box">
+ <div>
+ <div class="item on">
+ <div class="title">农事记录</div>
+ <span></span>
+ </div>
+ </div>
+ <div>
+ <div class="item">
+ <div class="title">农资出入库记录</div>
+ <span></span>
+ </div>
+ </div>
+
+ <div class="more">
+ 更多
+ <img src="/img/icon/more.png" alt />
+ </div>
+ </div>
+
+ <div class="lists-box">
+ <div>
+ <div class="t-border"></div>
+ <div class="t-item">
+ <div>施肥</div>
+ <div>2022-06-31</div>
+ </div>
+ <div class="b-item">
+ <div>水稻</div>
+ <div>林术</div>
+ <div>株良镇田南村5号地块</div>
+ </div>
+ <div class="b-border"></div>
+ </div>
+
+ <div>
+ <div class="t-border"></div>
+ <div class="t-item">
+ <div>施肥</div>
+ <div>2022-06-31</div>
+ </div>
+ <div class="b-item">
+ <div>水稻</div>
+ <div>王刚</div>
+ <div>株良镇田南村3号地块</div>
+ </div>
+ <div class="b-border"></div>
+ </div>
+
+ <div>
+ <div class="t-border"></div>
+ <div class="t-item">
+ <div>施肥</div>
+ <div>2022-06-31</div>
+ </div>
+ <div class="b-item">
+ <div>玉米</div>
+ <div>李建国</div>
+ <div>株良镇田南村1号地块</div>
+ </div>
+ <div class="b-border"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- <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
- ></statistics-num>
- <statistics-num
- :className="'kc'"
- :totalRegion="'700'"
- :imgUrl="'/img/icon/kc.png'"
- :unit="'公斤'"
- :title="'库存数量'"
- :subOneTitle="'农产品'"
- :subOneNum="'300'"
- :subTwoTitle="'加工产品'"
- :subTwoNum="'300'"
- ></statistics-num>
- <statistics-num
- :className="'nz'"
- :totalRegion=jnStock
- :imgUrl="'/img/icon/syl.png'"
- :unit="'公斤'"
- :title="'农资年使用量'"
- :subOneTitle="'去年使用'"
- :subOneNum=qnStock
- :subTwoTitle="'本月使用'"
- :subTwoNum=byStock
- ></statistics-num>
- <statistics-num
- :className="'cl'"
- :totalRegion="'700'"
- :imgUrl="'/img/icon/ncl.png'"
- :unit="'公斤'"
- :title="'年产量'"
- :subOneTitle="'农产品'"
- :subOneNum="'300'"
- :subTwoTitle="'加工产品'"
- :subTwoNum="'300'"
- ></statistics-num>
- <statistics-num
- :className="'lt'"
- :totalRegion="'700'"
- :imgUrl="'/img/icon/lt.png'"
- :unit="'公斤'"
- :title="'市场流通量'"
- :subOneTitle="'去年流通量'"
- :subOneNum="'300'"
- :subTwoTitle="'本月流通量'"
- :subTwoNum="'300'"
- ></statistics-num>
- </div>
- <div class="c">
- <div class="time-box">
- <time-box
- :imgUrl="'/img/icon/current.png'"
- :title="'溯源次数'"
- :currentNum="'50'"
- :subTitle="'昨日溯源次数对比'"
- :contrast="'25'"
- ></time-box>
- <time-box
- :imgUrl="'/img/icon/week.png'"
- :title="'溯源次数'"
- :currentNum="'50'"
- :subTitle="'上周溯源次数对比'"
- :contrast="'25'"
- ></time-box>
- <time-box
- :imgUrl="'/img/icon/month.png'"
- :title="'溯源次数'"
- :currentNum="'50'"
- :subTitle="'上月溯源次数对比'"
- :contrast="'25'"
- ></time-box>
- </div>
- <div class="task-box">
- <div class="title">任务总数</div>
-
- <date-select></date-select>
-
- <div class="echarts-box" id="TaskNumEcharts"></div>
- </div>
- <div class="nz-ncp">
- <div class="title-box">
- <div>
- <div class="item on">
- <div class="title">农产品投入</div>
- <span></span>
- </div>
- </div>
- <div>
- <div class="item">
- <div class="title">农资投入</div>
- <span></span>
- </div>
- </div>
- </div>
- <date-select></date-select>
- <div class="lists-box">
- <div>
- <div>1</div>
- <div>水稻</div>
- <div>1001亩</div>
- </div>
- <div>
- <div>2</div>
- <div>水稻</div>
- <div>1001亩</div>
- </div>
- <div>
- <div>3</div>
- <div>水稻</div>
- <div>1001亩</div>
- </div>
- <div>
- <div>4</div>
- <div>水稻</div>
- <div>1001亩</div>
- </div>
- <div>
- <div>5</div>
- <div>水稻</div>
- <div>1001亩</div>
- </div>
- </div>
- </div>
- <div class="trp-ncp">
- <div class="title-box">
- <div>
- <div class="item on">
- <div class="title">投入品监管</div>
- <span></span>
- </div>
- </div>
- <div>
- <div class="item">
- <div class="title">农产品监管</div>
- <span></span>
- </div>
- </div>
-
- <div class="more">
- 明细
- <img src="/img/icon/more.png" alt/>
- </div>
- </div>
-
- <div class="echarts-box" id="TrpNcpEcharts"></div>
- </div>
- </div>
- <div class="b">
- <div class="cl-sy">
- <div class="title-box">
- <div>
- <div class="item on">
- <div class="title">产量统计</div>
- <span></span>
- </div>
- </div>
- <div>
- <div class="item">
- <div class="title">溯源查询趋势图</div>
- <span></span>
- </div>
- </div>
-
- <div class="date">
- <date-select></date-select>
- </div>
- </div>
-
- <div class="echarts-box" id="ClSyEcharts"></div>
- </div>
- <div class="ns-nz">
- <div class="title-box">
- <div>
- <div class="item on">
- <div class="title">农事记录</div>
- <span></span>
- </div>
- </div>
- <div>
- <div class="item">
- <div class="title">农资出入库记录</div>
- <span></span>
- </div>
- </div>
-
- <div class="more">
- 更多
- <img src="/img/icon/more.png" alt/>
- </div>
- </div>
-
- <div class="lists-box">
- <div>
- <div class="t-border"></div>
- <div class="t-item">
- <div>施肥</div>
- <div>2022-05-31</div>
- </div>
- <div class="b-item">
- <div>水稻</div>
- <div>某某人员</div>
- <div>某某地块</div>
- </div>
- <div class="b-border"></div>
- </div>
-
- <div>
- <div class="t-border"></div>
- <div class="t-item">
- <div>施肥</div>
- <div>2022-05-31</div>
- </div>
- <div class="b-item">
- <div>水稻</div>
- <div>某某人员</div>
- <div>某某地块</div>
- </div>
- <div class="b-border"></div>
- </div>
-
- <div>
- <div class="t-border"></div>
- <div class="t-item">
- <div>施肥</div>
- <div>2022-05-31</div>
- </div>
- <div class="b-item">
- <div>水稻</div>
- <div>某某人员</div>
- <div>某某地块</div>
- </div>
- <div class="b-border"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
</template>
<script>
@@ -267,854 +268,949 @@
import { page, getStockCount, pagePalnt } from '@/api/farm/farmingrecord'
export default {
- data () {
- return {
- landsnum: 0,
- landwnum: 0,
- znum: 0,
- jnStock: 0,
- qnStock: 0,
- byStock: 0,
- farmPlanList: []
- }
- },
- created () {
- this.selectXCount()
- this.getStockCount()
- this.page()
- },
- mounted () {
- this.initBar('TaskNumEcharts')
- this.initTrpNcpBar('TrpNcpEcharts')
- this.initClSyBar('ClSyEcharts')
- },
- methods: {
- initBar (dom) {
- const that = this
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
+ data () {
+ return {
+ landsnum: 0,
+ landwnum: 0,
+ znum: 0,
+ jnStock: 0,
+ qnStock: 0,
+ byStock: 0,
+ farmPlanList: [],
+ nzOrNcp: 'ncp',
+ trpOrNcp: 'trp'
+ }
+ },
+ created () {
+ this.selectXCount()
+ this.getStockCount()
+ this.page()
+ },
+ mounted () {
+ this.initBar('TaskNumEcharts')
+ this.initTrpBar('TrpEcharts')
+ // this.initNcpBar('NcpEcharts')
+ this.initClSyBar('ClSyEcharts')
+ },
+ methods: {
+ initBar (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: [
- '2019-06',
- '2019-07',
- '2019-08'
- ],
- axisLine: {
- lineStyle: {
- color: 'rgba(153,153,153,.4)'
- }
- },
- 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: [30, 40, 20],
- label: {
- show: true,
- position: 'top',
- textStyle: {
- color: 'rgba(255,255,255,.4)'
- }
- },
- 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]
+ const option = {
+ grid: {
+ top: '14%',
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: [
+ '2019-06',
+ '2019-07',
+ '2019-08'
+ ],
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(153,153,153,.4)'
}
- ])
+ },
+ 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: [30, 40, 20],
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: 'rgba(255,255,255,.4)'
+ }
+ },
+ 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]
+ }
+ ])
+ }
+
+ }
+ }
+ }
+ ]
}
- }
- ]
- }
- option && myChart.setOption(option)
- },
-
- initTrpNcpBar (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
+ option && myChart.setOption(option)
},
- xAxis: {
- type: 'category',
- data: [
- '化肥',
- '化肥',
- '化肥',
- '化肥',
- '化肥',
- '化肥',
- '化肥'
- ],
- axisLine: {
- lineStyle: {
- color: 'rgba(153,153,153,.4)'
+
+ initTrpBar (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
+ }
+ },
+ 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,
+ position: 'top',
+ textStyle: {
+ color: 'rgba(255,255,255,.4)'
+ }
+ },
+ 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'
+ }
+ ]
+ )
+
+ }
+ }
+ }
+ ]
}
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: 'rgba(255,255,255,.4)',
- rotate: 0
- }
+
+ option && myChart.setOption(option)
},
- yAxis: {
- max: 50,
- name: '（公斤）',
- nameTextStyle: {
- color: 'rgba(255,255,255,.4)'
- },
- axisLine: {
- lineStyle: {
- color: '#657CA8'
+
+ 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
+ }
+ },
+ 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,
+ position: 'top',
+ textStyle: {
+ color: 'rgba(255,255,255,.4)'
+ }
+ },
+ 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'
+ }
+ ]
+ )
+
+ }
+ }
+ }
+ ]
}
- },
- axisTick: {
- show: false
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(62,81,97, .5)',
- type: 'dashed'
- }
- },
- axisLabel: {
- color: 'rgba(255,255,255,.4)'
- }
+
+ option && myChart.setOption(option)
},
- series: [
- {
- type: 'bar',
- barWidth: 32,
- data: [23, 44, 34, 41, 16, 30, 40],
- label: {
- show: true,
- position: 'top',
- textStyle: {
- color: 'rgba(255,255,255,.4)'
- }
- },
- 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'
- }
- ]
- )
+ 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: 'rgba(255,255,255,0.6)'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ 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'
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '加工产品',
+ type: 'bar',
+ barWidth: 14,
+ silent: true,
+ itemStyle: {
+ normal: {
+ color: '#E29646'
+ }
+ },
+ data: data1
+ },
+ {
+ name: '农产品',
+ type: 'bar',
+ barWidth: 14,
+ silent: true,
+ itemStyle: {
+ normal: {
+ color: '#6AE081'
+ }
+ },
+ data: data2
+ }
+ ]
}
- }
- ]
- }
- option && myChart.setOption(option)
- },
-
- initClSyBar (dom) {
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
-
- var data = [
- '01',
- ]
- var data1 = [
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25',
- '25'
- ]
- var data2 = [
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30',
- '30'
- ]
-
- const option = {
- grid: {
- top: '10%',
- right: '0%',
- left: '0%',
- bottom: '0%',
- containLabel: true
+ option && myChart.setOption(option)
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
+ // 农场使用率
+ selectXCount () {
+ // eslint-disable-next-line no-unused-vars
+ var that = this
+ var deptId = '1123598813738675201'
+ selectXCount(deptId).then((res) => {
+ that.landsnum = res.data.data.snum
+ that.landwnum = res.data.data.wnum
+ that.znum = res.data.data.num
+ })
},
- legend: {
- left: 'center',
- data: ['加工产品', '农产品'],
- textStyle: {
- color: '#A9D1D7'
- }
+ // 农资使用概况
+ getStockCount () {
+ var that = this
+ var deptId = '1123598813738675201'
+ getStockCount(deptId).then((res) => {
+ that.jnStock = res.data.data.jn
+ that.qnStock = res.data.data.qn
+ that.byStock = res.data.data.by
+ })
},
- xAxis: {
- data: data,
- axisLabel: {
- interval: 0,
- show: true,
- textStyle: {
- color: 'rgba(255,255,255,0.6)'
+ // 农事记录
+ page () {
+ var params = {
}
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#697B89',
- width: 1
- }
- }
- },
- yAxis: [
- {
- min: 0,
- max: 50,
- 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'
- }
- }
- }
- ],
- series: [
- {
- name: '加工产品',
- type: 'bar',
- barWidth: 14,
- silent: true,
- itemStyle: {
- normal: {
- color: '#E29646'
- }
- },
- data: data1
- },
- {
- name: '农产品',
- type: 'bar',
- barWidth: 14,
- silent: true,
- itemStyle: {
- normal: {
- color: '#6AE081'
- }
- },
- data: data2
- }
- ]
- }
+ params.tenantId = '000000'
+ params.deptId = '1123598813738675201'
+ page(1, 10, Object.assign(params)).then((res) => {
+ this.farmPlanList = res.data.data.records
+ })
+ }
- 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
- that.landwnum = res.data.data.wnum
- that.znum = res.data.data.num
- })
- },
- // 农资使用概况
- getStockCount () {
- var that = this
- var deptId = '1123598813738675201'
- getStockCount(deptId).then((res) => {
- that.jnStock = res.data.data.jn
- that.qnStock = res.data.data.qn
- that.byStock = res.data.data.by
- })
- },
- // 农事记录
- page () {
- var params = {
- }
- params.tenantId = '000000'
- params.deptId = '1123598813738675201'
- page(1, 10, Object.assign(params)).then((res) => {
- this.farmPlanList = res.data.data.records
- })
}
-
- }
}
</script>
<style scoped lang="scss">
.container {
- padding: 20px;
- position: relative;
- width: 100%;
- height: 100%;
- background: #08192e;
- box-sizing: border-box;
+ 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;
- }
-
- .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;
- }
+ .toggle-plot {
+ text-align: left;
+ height: 36px;
+ line-height: 36px;
+ font-size: 24px;
+ font-weight: bold;
+ color: #fff;
}
- .c {
- margin-top: 20px;
- display: flex;
- justify-content: space-between;
-
- & > 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;
+ .main-content {
+ margin-top: 10px;
+ height: calc(100% - 46px);
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 {
- display: flex;
-
- & > div {
+ .t {
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;
- }
- }
-
- .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;
+ margin-left: 0;
+ }
+ }
+
+ .c {
+ margin-top: 20px;
+ display: flex;
+ justify-content: space-between;
+
+ & > 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 {
- margin-right: 18px;
- color: #66dde9;
+ width: calc((100% - 80px) / 5 * 2 + 20px);
}
- }
- }
- }
- .trp-ncp {
- padding: 20px;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
+ .time-box {
+ padding: 0 25px;
+ 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;
-
- .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:last-child {
+ border: none;
+ }
}
- }
- & > div:nth-child(2) {
- margin-left: 60px;
- }
+ .task-box {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
- .more {
- position: absolute;
- top: 0;
- left: auto;
- right: 0;
- bottom: 0;
- margin: auto;
- display: flex;
- align-items: center;
- font-size: 16px;
+ .title {
+ text-align: left;
+ font-size: 18px;
+ font-weight: bold;
+ color: #7ccfd6;
+ }
- img {
- margin-left: 6px;
- vertical-align: middle;
+ .echarts-box {
+ margin-top: 16px;
+ flex: 1;
+ }
}
- }
+
+ .nz-ncp {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+
+ .title-box {
+ 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;
+ }
+ }
+
+ .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: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;
+ }
+ }
}
- .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;
-
- .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;
+ .b {
+ margin-top: 20px;
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;
- }
+ & > div {
+ margin-left: 20px;
+ border-radius: 8px 8px 8px 8px;
+ background: rgba(0, 52, 85, 0.4);
}
- & > .b-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- & > div:first-child {
- color: #fff;
- }
+ & > div:first-child {
+ margin-left: 0;
+ flex: 1;
}
- .t-border {
- top: 0;
- bottom: auto;
+ & > div:last-child {
+ width: 444px;
}
- .b-border {
- top: auto;
- bottom: 0;
+ .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;
+ }
}
- .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%
- );
- }
- }
+ .ns-nz {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
- & > div:first-child {
- margin-top: 10px;
- }
+ .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 {
+ margin-top: 10px;
+ }
+ }
+ }
}
- }
}
- }
}
</style>
diff --git a/src/views/monitor/index.vue b/src/views/monitor/index.vue
index 881d331..e2e51a6 100644
--- a/src/views/monitor/index.vue
+++ b/src/views/monitor/index.vue
@@ -2,13 +2,16 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
- * @Last Modified time: 2022-06-27 10:45:48
+ * @Last Modified time: 2022-07-01 09:58:34
* 农产品监管
*/
<template>
<div class="container">
<mapBox ref="modalForm" />
- <div class="l-echarts">
+ <div class="popup">
+ <img src="/img/jc.png" alt />
+ </div>
+ <!-- <div class="l-echarts">
<div class="t-box">
<div class="title">
<div class="text">占位</div>
@@ -35,7 +38,7 @@
</div>
<div class="content" id="RBBOX"></div>
</div>
- </div>
+ </div>-->
</div>
</template>
@@ -51,6 +54,20 @@
width: 100%;
height: 100%;
+ .popup {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
.l-echarts {
left: 0;
}
diff --git a/src/views/weather/index.vue b/src/views/weather/index.vue
index 4d45eba..4b5f79d 100644
--- a/src/views/weather/index.vue
+++ b/src/views/weather/index.vue
@@ -2,14 +2,17 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
- * @Last Modified time: 2022-05-13 15:15:09
+ * @Last Modified time: 2022-07-01 10:04:06
* 投入品监管
*/
<template>
<div class="container">
- <div class="l-box"></div>
+ <div class="popup">
+ <img src="/img/qx.png" alt />
+ </div>
+ <!-- <div class="l-box"></div>
<div class="c-box"></div>
- <div class="r-box"></div>
+ <div class="r-box"></div>-->
</div>
</template>
@@ -28,11 +31,28 @@
height: 100%;
box-sizing: border-box;
justify-content: space-between;
- & > div {
- width: calc((100% - 52px) / 3);
- background: #074057bb;
- border: 2px solid #00d0da;
- border-radius: 10px;
+
+ .popup {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ // width: 100%;
+ // height: 100%;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
}
+
+ // & > div {
+ // width: calc((100% - 52px) / 3);
+ // background: #074057bb;
+ // border: 2px solid #00d0da;
+ // border-radius: 10px;
+ // }
}
</style>
diff --git a/vue.config.js b/vue.config.js
index 9260e30..c355e0a 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -23,11 +23,11 @@
{
from: './public/favicon.ico',
to: 'favicon.ico'
+ },
+ {
+ from: './public/DS-Digital',
+ to: 'DS-Digital'
}
- // {
- // from: './public/mx',
- // to: 'mx'
- // },
// {
// from: './public/wp',
// to: 'wp'
--
Gitblit v1.9.3