首页

tangzy

2022-06-29 ebf3000716609bd156efeb701dd910a717a9102a

首页

 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
        }
    })
}

 src/api/land/land.js

New file
@@ -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
        }
    })
}

 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
      })
    }

  }

 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>