From 0dbeac89f7688ea4d7fbad17ce7cc684250be517 Mon Sep 17 00:00:00 2001
From: tangzy <tangzy123456>
Date: Wed, 29 Jun 2022 10:46:28 +0800
Subject: [PATCH] 首页
---
src/views/home/index.vue | 2775 ++++++++++++++++++++++++++++----------------------------
src/api/farm/farmingrecord.js | 69 +
2 files changed, 1,458 insertions(+), 1,386 deletions(-)
diff --git a/src/api/farm/farmingrecord.js b/src/api/farm/farmingrecord.js
new file mode 100644
index 0000000..1dabb8d
--- /dev/null
+++ b/src/api/farm/farmingrecord.js
@@ -0,0 +1,69 @@
+import request from '@/router/axios'
+
+export const getList = (current, size, params) => {
+ return request({
+ url: '/api/farmingRecord/page',
+ method: 'get',
+ params: {
+ ...params,
+ current,
+ size,
+ }
+ })
+}
+export const remove = (ids) => {
+ return request({
+ url: '/api/farmingRecord/remove',
+ method: 'post',
+ params: {
+ ids,
+ }
+ })
+}
+
+export const save = (row) => {
+ return request({
+ url: '/api/farmingRecord/save',
+ method: 'post',
+ data: row
+ })
+}
+
+export const update = (row) => {
+ return request({
+ url: '/api/farmingRecord/update',
+ method: 'post',
+ data: row
+ })
+}
+
+export const getDetail = (id) => {
+ return request({
+ url: '/api/farmingRecord/detail',
+ method: 'get',
+ params: {
+ id
+ }
+ })
+}
+
+
+export const getFarmingCount = (deptId) => {
+ return request({
+ url: '/farmingRecord/getFarmingCount',
+ method: 'get',
+ params: {
+ deptId
+ }
+ })
+}
+
+export const getFarmingStatis = (deptId) => {
+ return request({
+ url: '/farmingRecord/getFarmingStatis',
+ method: 'get',
+ params: {
+ deptId
+ }
+ })
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 834fffa..f532935 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,1457 +1,1460 @@
/*
- * @Author: Morpheus
- * @Date: 2022-05-11 15:00:23
- * @Last Modified by: Morpheus
- * @Last Modified time: 2022-06-25 17:50:45
- * 驾驶舱
- */
+* @Author: Morpheus
+* @Date: 2022-05-11 15:00:23
+* @Last Modified by: Morpheus
+* @Last Modified time: 2022-06-25 17:50:45
+* 驾驶舱
+*/
<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="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">123</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">456</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">1087</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">1087</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">9</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="/img/icon/list-img.png" alt />
- <div class="text">水稻</div>
- </div>
- <div class="r">
- <div class="num">100.98</div>
- <div class="unit">亩</div>
- </div>
- </li>
- <li>
- <div class="l">
- <img src="/img/icon/list-img.png" alt />
- <div class="text">水稻</div>
- </div>
- <div class="r">
- <div class="num">100.98</div>
- <div class="unit">亩</div>
- </div>
- </li>
- <li>
- <div class="l">
- <img src="/img/icon/list-img.png" alt />
- <div class="text">水稻</div>
- </div>
- <div class="r">
- <div class="num">100.98</div>
- <div class="unit">亩</div>
- </div>
- </li>
- <li>
- <div class="l">
- <img src="/img/icon/list-img.png" alt />
- <div class="text">水稻</div>
- </div>
- <div class="r">
- <div class="num">100.98</div>
- <div class="unit">亩</div>
- </div>
- </li>
- <li>
- <div class="l">
- <img src="/img/icon/list-img.png" alt />
- <div class="text">水稻</div>
- </div>
- <div class="r">
- <div class="num">100.98</div>
- <div class="unit">亩</div>
- </div>
- </li>
- <li>
- <div class="l">
- <img src="/img/icon/list-img.png" alt />
- <div class="text">水稻</div>
- </div>
- <div class="r">
- <div class="num">100.98</div>
- <div class="unit">亩</div>
- </div>
- </li>
- <li>
- <div class="l">
- <img src="/img/icon/list-img.png" alt />
- <div class="text">水稻</div>
- </div>
- <div class="r">
- <div class="num">100.98</div>
- <div class="unit">亩</div>
- </div>
- </li>
- <li>
- <div class="l">
- <img src="/img/icon/list-img.png" alt />
- <div class="text">水稻</div>
- </div>
- <div class="r">
- <div class="num">100.98</div>
- <div class="unit">亩</div>
- </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>
-
- <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">9</div>
- <div class="unit">次</div>
- </div>
-
- <div class="line">
- <div class="l"></div>
- <div class="r"></div>
- </div>
- </div>
- <div class="content-box">
- <div>
- <div class="title">施肥</div>
- <div class="num-unit">
- <div class="num">2</div>
- <div class="unit">次</div>
- </div>
- </div>
- <div>
- <div class="title">翻耕</div>
- <div class="num-unit">
- <div class="num">2</div>
- <div class="unit">次</div>
- </div>
- </div>
- <div>
- <div class="title">灌溉</div>
- <div class="num-unit">
- <div class="num">2</div>
- <div class="unit">次</div>
- </div>
- </div>
- <div>
- <div class="title">除草</div>
- <div class="num-unit">
- <div class="num">2</div>
- <div class="unit">次</div>
- </div>
- </div>
- <div>
- <div class="title">移栽</div>
- <div class="num-unit">
- <div class="num">2</div>
- <div class="unit">次</div>
- </div>
- </div>
- <div>
- <div class="title">采收</div>
- <div class="num-unit">
- <div class="num">2</div>
- <div class="unit">次</div>
- </div>
- </div>
- <div>
- <div class="title">销售</div>
- <div class="num-unit">
- <div class="num">2</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="left-box">
+ <div class="content">
+ <div class="t">
+ <div class="title-box">
<div class="icon"></div>
- <span>市场流通</span>
- </div>
-
- <div class="layers-box">
- <div class="sl">
- <div class="text">标准图</div>
+ <div class="text">
+ 企业概况
+ <div class="em"></div>
</div>
- <div class="yx on">
- <div class="text">卫星图</div>
- </div>
- </div>
- <div class="lenged-box">
+ <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">123</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">456</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">1087</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">1087</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">9</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="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>
+ <li>
+ <div class="l">
+ <img src="/img/icon/list-img.png" alt/>
+ <div class="text">水稻</div>
+ </div>
+ <div class="r">
+ <div class="num">100.98</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>
+ <li>
+ <div class="l">
+ <img src="/img/icon/list-img.png" alt/>
+ <div class="text">水稻</div>
+ </div>
+ <div class="r">
+ <div class="num">100.98</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>
+ <li>
+ <div class="l">
+ <img src="/img/icon/list-img.png" alt/>
+ <div class="text">水稻</div>
+ </div>
+ <div class="r">
+ <div class="num">100.98</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>
+ <li>
+ <div class="l">
+ <img src="/img/icon/list-img.png" alt/>
+ <div class="text">水稻</div>
+ </div>
+ <div class="r">
+ <div class="num">100.98</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>
+ <li>
+ <div class="l">
+ <img src="/img/icon/list-img.png" alt/>
+ <div class="text">水稻</div>
+ </div>
+ <div class="r">
+ <div class="num">100.98</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>
+ <li>
+ <div class="l">
+ <img src="/img/icon/list-img.png" alt/>
+ <div class="text">水稻</div>
+ </div>
+ <div class="r">
+ <div class="num">100.98</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>
+ <li>
+ <div class="l">
+ <img src="/img/icon/list-img.png" alt/>
+ <div class="text">水稻</div>
+ </div>
+ <div class="r">
+ <div class="num">100.98</div>
+ <div class="unit">亩</div>
+ </div>
+ </li>
+ <li>
+ <div class="l">
+ <img src="/img/icon/list-img.png" alt/>
+ <div class="text">水稻</div>
+ </div>
+ <div class="r">
+ <div class="num">100.98</div>
+ <div class="unit">亩</div>
+ </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>
+
+ <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">
+ <span>{{ item.value }}</span
+ >次
+ </div>
+ </div>
+ <!-- <div>-->
+ <!-- <div class="title">施肥</div>-->
+ <!-- <div class="num-unit">-->
+ <!-- <div class="num">2</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>
+// eslint-disable-next-line no-unused-vars
+import { getFarmingCount, getFarmingStatis } from '@/api/farm/farmingrecord'
+
export default {
- 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)
-
- 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, [
- {
- 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
- }
- }
-
- }
- ]
- }
-
- 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'
- }
- },
- 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
- }
- }
- }
-
- },
- {
- 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
- }
- }
- }
- }
- ]
- }
- ]
- }
-
- 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
- },
- 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)'
- }]),
-
- 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)
- }
-
+ data () {
+ return {
+ farmingList: [],
+ isFarmingDetail: false,
+ total: 0
}
+ },
+ created () {
+ // 本年农事操作记录
+ this.getFarmingStatis()
+ this.getFarmingCount()
+ },
+ 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)
+
+ 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, [
+ {
+ 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
+ }
+ }
+
+ }
+ ]
+ }
+
+ 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'
+ }
+ },
+ 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
+ }
+ }
+ }
+
+ },
+ {
+ 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
+ }
+ }
+ }
+ }
+ ]
+ }
+ ]
+ }
+
+ 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
+ },
+ 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)'
+ }]),
+
+ 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)
+ },
+ 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
+ })
+ }
+
+ }
}
</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 {
+ .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 {
display: flex;
flex-direction: column;
- left: 0;
+ align-items: center;
- .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;
- }
- }
- }
+ .echarts-box {
+ width: 152px;
+ height: 152px;
}
- .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;
- }
- }
- }
- }
+ .state {
+ margin-top: 15px;
+ font-size: 16px;
+ font-weight: 400;
}
- .b {
- flex: 1;
+ .text {
+ display: flex;
+ align-items: baseline;
+ margin-top: 10px;
+ display: flex;
- .title-box {
- .text {
- display: flex;
- }
+ .num {
+ font-size: 27px;
+ }
- .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;
- }
- }
- }
+ .unit {
+ margin-left: 6px;
+ font-size: 16px;
+ font-weight: 400;
+ color: #a9d1d7;
+ }
}
+ }
}
- }
+ }
- .right-box {
- right: 0;
- background: linear-gradient(
+ .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(
-270deg,
rgba(4, 41, 64, 0) 0%,
#042940 100%
- );
+ );
- .content {
- display: flex;
- flex-direction: column;
- right: 0;
+ .content {
+ display: flex;
+ flex-direction: column;
+ right: 0;
- .t {
- height: 310px;
+ .t {
+ height: 310px;
- .content-box {
- display: flex;
- align-items: center;
- justify-content: center;
+ .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: space-between;
- align-content: space-between;
- box-sizing: border-box;
-
- & > div {
- padding: 0 10px;
- 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);
- 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;
- }
- }
- }
- }
- }
-
- .left-box,
- .right-box {
- display: flex;
- flex-direction: column;
- position: absolute;
- top: 0;
- width: 450px;
- height: 100%;
-
- .content {
- position: absolute;
- top: 0;
- width: 396px;
+ .equipment {
+ width: 382px;
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;
+ .c {
+ height: 214px;
- & > div {
- padding: 0 16px;
+ .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: space-between;
+ align-content: space-between;
+ box-sizing: border-box;
+
+ & > div {
+ padding: 0 10px;
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;
+ 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);
box-sizing: border-box;
- font-size: 18px;
- color: #6de9f3;
+ font-size: 14px;
+ font-weight: 400;
+ color: #a9d1d7;
- i {
- font-size: 12px;
+ .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;
+ }
+ }
+ }
+ }
+ }
+
+ .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%;
}
- .city-flow {
- padding: 0 12px;
- display: flex;
- align-items: center;
+ 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;
- 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;
+ 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;
- box-sizing: border-box;
+ display: flex;
.icon {
- width: 24px;
- height: 24px;
- background: url(/img/icon/city-flow.png) no-repeat;
- background-size: 100% 100%;
+ margin-left: 20px;
+ width: 24px;
+ height: 24px;
}
- span {
- margin-left: 8px;
+ .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%;
+ }
+ }
}
-
- .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%;
- }
- }
- }
- }
+ }
}
</style>
--
Gitblit v1.9.3