From ebf3000716609bd156efeb701dd910a717a9102a Mon Sep 17 00:00:00 2001
From: tangzy <tangzy123456>
Date: Wed, 29 Jun 2022 15:54:27 +0800
Subject: [PATCH] 首页
---
src/views/home/index.vue | 147 +--
src/views/manage/index.vue | 2132 +++++++++++++++++++++++++++--------------------------
src/api/farm/farmingrecord.js | 27
src/api/land/land.js | 69 +
4 files changed, 1,240 insertions(+), 1,135 deletions(-)
diff --git a/src/api/farm/farmingrecord.js b/src/api/farm/farmingrecord.js
index 1dabb8d..d732aa3 100644
--- a/src/api/farm/farmingrecord.js
+++ b/src/api/farm/farmingrecord.js
@@ -67,3 +67,30 @@
}
})
}
+export const pagePalnt = (current, size, params) => {
+ return request({
+ url: '/farmPlant/pagePalnt',
+ method: 'get',
+ params: {
+ ...params,
+ current,
+ size
+ }
+ })
+}
+export const SelectCount = () => {
+ return request({
+ url: '/farm/SelectCount',
+ method: 'get'
+ })
+}
+
+export const getStockCount = (deptId) => {
+ return request({
+ url: '/farmingRecord/getStockCount',
+ method: 'get',
+ params: {
+ deptId
+ }
+ })
+}
diff --git a/src/api/land/land.js b/src/api/land/land.js
new file mode 100644
index 0000000..2708ddc
--- /dev/null
+++ b/src/api/land/land.js
@@ -0,0 +1,69 @@
+import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+ return request({
+ url: '/api/land/land/page',
+ method: 'get',
+ params: {
+ ...params,
+ current,
+ size,
+ }
+ })
+}
+
+export const getDetail = (id) => {
+ return request({
+ url: '/api/land/land/details',
+ method: 'get',
+ params: {
+ id
+ }
+ })
+}
+
+export const remove = (ids) => {
+ return request({
+ url: '/api/land/land/remove',
+ method: 'post',
+ params: {
+ ids,
+ }
+ })
+}
+
+export const add = (row) => {
+ return request({
+ url: '/api/land/land/save',
+ method: 'post',
+ data: row
+ })
+}
+
+export const update = (row) => {
+ return request({
+ url: '/api/land/land/submit',
+ method: 'post',
+ data: row
+ })
+}
+
+export const getLandList = (userid) => {
+ return request({
+ url: '/api/land/land/selectLandList',
+ method: 'get',
+ params: {
+ userid
+ }
+ })
+}
+
+export const selectXCount = (deptId) => {
+ return request({
+ url: '/land/land/selectXCount',
+ method: 'get',
+ params: {
+ deptId
+ }
+ })
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f532935..188b24e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -28,7 +28,7 @@
<div class="nc-num">
<div class="text">
农场数量
- <span class="num">123</span>
+ <span class="num">{{ncnum}}</span>
</div>
<div class="t-l"></div>
<div class="b-l"></div>
@@ -38,7 +38,7 @@
<div class="pel-num">
<div class="text">
人员数量
- <span class="num">456</span>
+ <span class="num">{{rynum}}</span>
</div>
<div class="t-l"></div>
<div class="b-l"></div>
@@ -65,7 +65,7 @@
<div class="state">在使用</div>
<div class="text">
- <div class="num">1087</div>
+ <div class="num">{{ landsnum }}</div>
<div class="unit">亩</div>
</div>
</div>
@@ -75,7 +75,7 @@
<div class="state">空闲中</div>
<div class="text">
- <div class="num">1087</div>
+ <div class="num">{{ landwnum }}</div>
<div class="unit">亩</div>
</div>
</div>
@@ -86,7 +86,7 @@
<div class="icon"></div>
<div class="text">
种养品种
- <div class="num">9</div>
+ <div class="num">{{ num }}</div>
<div class="unit">种</div>
</div>
<div class="line">
@@ -96,83 +96,13 @@
</div>
<div class="content-box">
<ul>
- <li>
+ <li v-for="(item, index) in farmPlanList" :key="index">
<div class="l">
- <img src="/img/icon/list-img.png" alt/>
- <div class="text">水稻</div>
+ <img :src="item.url" class="img"/>
+ <div class="text">{{ item.strainName }}</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="num">{{ item.area }}</div>
<div class="unit">亩</div>
</div>
</li>
@@ -218,18 +148,11 @@
<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 class="num-unit">
+ <div class="num">{{ item.value }}</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">
@@ -344,20 +267,31 @@
<script>
// eslint-disable-next-line no-unused-vars
-import { getFarmingCount, getFarmingStatis } from '@/api/farm/farmingrecord'
+import { getFarmingCount, getFarmingStatis, pagePalnt, SelectCount } from '@/api/farm/farmingrecord'
+// eslint-disable-next-line no-unused-vars
+import { selectXCount } from '@/api/land/land'
export default {
data () {
return {
farmingList: [],
+ farmPlanList: [],
isFarmingDetail: false,
- total: 0
+ 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')
@@ -679,6 +613,14 @@
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'
@@ -699,6 +641,29 @@
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
+ })
}
}
diff --git a/src/views/manage/index.vue b/src/views/manage/index.vue
index 8e73464..9841b3c 100644
--- a/src/views/manage/index.vue
+++ b/src/views/manage/index.vue
@@ -1,1085 +1,1129 @@
/*
- * @Author: Morpheus
- * @Date: 2022-05-11 15:00:23
- * @Last Modified by: Morpheus
- * @Last Modified time: 2022-06-28 16:54:18
- * 经营主体监管
- */
+* @Author: Morpheus
+* @Date: 2022-05-11 15:00:23
+* @Last Modified by: Morpheus
+* @Last Modified time: 2022-06-28 16:54:18
+* 经营主体监管
+*/
<template>
- <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="'700'"
- :imgUrl="'/img/icon/mj.png'"
- :unit="'亩'"
- :title="'土地面积'"
- :subOneTitle="'使用面积'"
- :subOneNum="'300'"
- :subTwoTitle="'未使用面积'"
- :subTwoNum="'300'"
- ></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="'700'"
- :imgUrl="'/img/icon/syl.png'"
- :unit="'公斤'"
- :title="'农资年使用量'"
- :subOneTitle="'去年使用'"
- :subOneNum="'300'"
- :subTwoTitle="'本月使用'"
- :subTwoNum="'300'"
- ></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 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=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>
+import { selectXCount } from '@/api/land/land'
+// eslint-disable-next-line no-unused-vars
+import { getFarmingStatis, getStockCount } from '@/api/farm/farmingrecord'
+
export default {
- data () {
- return {
- }
- },
- 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)
-
- 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
- },
- 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: 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: [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'
- }
- ]
- )
-
- }
- }
- }
- ]
- }
-
- option && myChart.setOption(option)
- },
-
- initClSyBar (dom) {
- const chartDom = document.getElementById(dom)
- const myChart = this.$echarts.init(chartDom)
-
- var data = [
- '01',
- '02',
- '03',
- '04',
- '05',
- '06',
- '07',
- '08',
- '09',
- '10',
- '11',
- '12',
- '14',
- '15',
- '16',
- '17',
- '18',
- '19',
- '20',
- '21',
- '22',
- '23',
- '24'
- ]
- 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
- },
- 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,
- 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
- }
- ]
- }
-
- option && myChart.setOption(option)
- }
+ data () {
+ return {
+ landsnum: 0,
+ landwnum: 0,
+ znum: 0,
+ jnStock: 0,
+ qnStock: 0,
+ byStock: 0
}
+ },
+ created () {
+ this.selectXCount()
+ this.getStockCount()
+ },
+ 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)
+
+ 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
+ },
+ 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: 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: [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'
+ }
+ ]
+ )
+
+ }
+ }
+ }
+ ]
+ }
+
+ option && myChart.setOption(option)
+ },
+
+ initClSyBar (dom) {
+ const chartDom = document.getElementById(dom)
+ const myChart = this.$echarts.init(chartDom)
+
+ var data = [
+ '01',
+ '02',
+ '03',
+ '04',
+ '05',
+ '06',
+ '07',
+ '08',
+ '09',
+ '10',
+ '11',
+ '12',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19',
+ '20',
+ '21',
+ '22',
+ '23',
+ '24'
+ ]
+ 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
+ },
+ 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,
+ 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
+ }
+ ]
+ }
+
+ 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
+ })
+ }
+}
}
</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;
+ .toggle-plot {
+ text-align: left;
+ height: 36px;
+ line-height: 36px;
+ font-size: 24px;
+ font-weight: bold;
+ color: #fff;
+ }
+
+ .main-content {
+ margin-top: 10px;
+ height: calc(100% - 46px);
+ display: flex;
+ flex-direction: column;
+
+ .t {
+ display: flex;
+ justify-content: space-between;
+
+ & > div:first-child {
+ margin-left: 0;
+ }
}
- .main-content {
- margin-top: 10px;
- height: calc(100% - 46px);
+ .c {
+ margin-top: 20px;
+ display: flex;
+ 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;
display: flex;
flex-direction: column;
+ box-sizing: border-box;
- .t {
- display: flex;
- justify-content: space-between;
+ & > div:last-child {
+ border: none;
+ }
+ }
- & > div:first-child {
- margin-left: 0;
- }
+ .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;
}
- .c {
- margin-top: 20px;
- display: flex;
- justify-content: space-between;
+ .echarts-box {
+ margin-top: 16px;
+ flex: 1;
+ }
+ }
- & > div {
- margin-left: 20px;
- width: calc((100% - 80px) / 5);
- height: 346px;
- border-radius: 8px 8px 8px 8px;
- background: rgba(0, 52, 85, 0.4);
+ .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;
+
+ .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: 0;
+ margin-left: 16px;
}
& > div:last-child {
- width: calc((100% - 80px) / 5 * 2 + 20px);
+ margin-right: 18px;
+ color: #66dde9;
}
-
- .time-box {
- padding: 0 25px;
- 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 {
- 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;
- }
-
- & > 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;
-
- .on {
- position: relative;
- font-weight: bold;
- color: #7ccfd6;
-
- span {
- position: absolute;
- bottom: -8px;
- left: 0;
- width: 100%;
- height: 3px;
- border-radius: 3px;
- background: #66dde9;
- }
- }
- }
-
- & > div:nth-child(2) {
- margin-left: 60px;
- }
-
- .more {
- position: absolute;
- top: 0;
- left: auto;
- right: 0;
- bottom: 0;
- margin: auto;
- display: flex;
- align-items: center;
- font-size: 16px;
-
- img {
- margin-left: 6px;
- vertical-align: middle;
- }
- }
- }
-
- .echarts-box {
- margin-top: 16px;
- flex: 1;
- }
- }
+ }
}
+ }
- .b {
- margin-top: 20px;
- flex: 1;
+ .trp-ncp {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+
+ .title-box {
+ position: relative;
+ display: flex;
+
+ & > div {
display: flex;
- justify-content: space-between;
+ align-items: flex-start;
+ font-size: 18px;
+ color: #a9d1d7;
- & > div {
- margin-left: 20px;
- border-radius: 8px 8px 8px 8px;
- background: rgba(0, 52, 85, 0.4);
+ .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:first-child {
- margin-left: 0;
- flex: 1;
+ & > 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;
}
-
- & > 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;
- 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;
- }
- }
- }
+ }
}
+
+ .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;
+ 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>
--
Gitblit v1.9.3