首页修改

shuishen

2022-07-08 7bae7846f121b3b95c5dc3c439d17e056267f589

首页修改

 public/img/icon/1016.png

 public/img/icon/360.png

 public/img/icon/3666.png

 public/img/icon/public-close.png

 src/components/publicBox/index.vue

New file
@@ -0,0 +1,29 @@
<template>
    <div ref="publicBox">
        <div class="header">
            <slot name="public-box-header"></slot>
        </div>
        <div class="content">
            <slot name="public-box-content"></slot>
        </div>
    </div>
</template>

<script>

export default {
    name: 'PublicBox',
    data () {
        return {
        }
    },
    created () {
    },
    methods: {

    }
}
</script>

<style scoped lang='scss'>
</style>

 src/router/page/index.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-06-27 10:25:01
 * @Last Modified time: 2022-07-08 10:54:29
 */

import Vue from 'vue'
@@ -58,6 +58,13 @@
            }]
    },
    {
        path: '/farmDetails',
        meta: {
            title: '农场详情'
        },
        component: () => import('../../views/farm/index.vue')
    },
    {
        path: '/403',
        component: () =>
            import(/* webpackChunkName: "page" */ '@/components/error-page/403'),

 src/styles/element-ui.scss

@@ -4,4 +4,29 @@
        border-color: #849EAE;
        color: rgba(255, 255, 255, 0.6);
    }
}


.el-icon-my-sy {
    background: url('/img/icon/1016.png') center no-repeat;
    // background-size: 100% 100%;
    /* background-size: cover;*/
}

.el-icon-my-sy:before {
    content: "替";
    font-size: 18px;
    visibility: hidden;
}

.el-icon-my-sb {
    background: url('/img/icon/3666.png') center no-repeat;
    // background-size: 100% 100%;
    /* background-size: cover;*/
}

.el-icon-my-sb:before {
    content: "替";
    font-size: 24px;
    visibility: hidden;
}

 src/styles/index.scss

@@ -1,4 +1,5 @@
@import "./element-ui.scss";
@import "./publicBox/arc-nav-bar.scss";

html,
body {

 src/styles/publicBox/arc-nav-bar.scss

New file
@@ -0,0 +1,141 @@
.public-org-nav-bar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1208px;

    background-color: transparent;
    z-index: 99;
    font-size: 14px;
    box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.1600);
    border: 1px solid #69E2ED;
    background: rgba(20, 66, 104, 0.8);

    .header {
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 58px;
        line-height: 58px;
        background: linear-gradient(96deg, #142B4B 0%, #0F1525 100%);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        .logo {
            position: aboslute;
            top: 0;
            left: 0;
            width: 8px;
            height: 100%;
            background: #69E2ED;
        }

        .title {
            position: absolute;
            top: 0;
            left: 25px;
            font-size: 18px;
            font-weight: bold;
            color: #66DDE9;
        }

        .close {
            position: absolute;
            right: 20px;
            top: 0;
            left: auto;
            bottom: 0;
            margin: auto;
            width: 28px;
            height: 28px;
            cursor: pointer;
            opacity: 0.6;
        }
    }

    .content {
        clear: both;
        width: 100%;
        height: 500px;
        margin-top: 0px;
        text-align: center;
        overflow-y: auto;
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 0 0 8px 8px;

        .farm-profiles {
            position: relative;

            .btn-grounp {
                position: absolute;
                top: 18px;
                right: 20px;

                .details {
                    text-align: right;
                    font-size: 18px;
                    color: #08F4FF;
                    cursor: pointer;
                }

                .scene {
                    margin-top: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100px;
                    height: 30px;
                    background: rgba(102, 221, 233, 0.16);
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #66DDE9;
                    box-sizing: border-box;

                    img {
                        // width: 70px;
                        height: 24px;
                    }
                }
            }

            .farm-content {

                padding: 30px 20px;
                font-size: 16px;
                color: #fff;

                .row {
                    display: flex;
                    justify-content: space-between;

                    .l {
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-end;
                        width: 100px;
                        height: 50px;
                        color: #A9D1D7;
                    }

                    .r {
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-start;
                        margin-left: 24px;
                        flex: 1;

                        img {
                            margin-right: 16px;
                            width: 102px;
                            height: 102px;
                            border-radius: 4px 4px 4px 4px;
                        }
                    }
                }

            }

        }


    }
}

 src/views/farm/index.vue

New file
@@ -0,0 +1,207 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-08 14:08:30
* 驾驶舱
*/
<template>
    <div class="container">
        <mapBox ref="modalForm" />

        <div class="header">
            <div class="return">
                <span @click="prev">
                    <i class="el-icon-back"></i> 返回
                </span>
            </div>
            <div class="title">古田米庄</div>
            <div class="btn-grounp">
                <el-button type="primary" icon="el-icon-my-sb">物联网设备总览</el-button>
                <el-button type="primary" icon="el-icon-my-sy">农产品溯源</el-button>
            </div>
        </div>

        <div class="l-content">
            <div class="tab-btn">
                <div>
                    <div class="item" :class="{on: ncjscz == 'ncjs'}">
                        <div @click="ncjscz = 'ncjs'" class="title">农场介绍</div>
                        <span></span>
                    </div>
                </div>

                <div>
                    <div class="item" :class="{on: ncjscz == 'cz'}">
                        <div @click="ncjscz = 'cz'" class="title">农事操作</div>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="content"></div>
        </div>

        <div class="r-content">
            <div class="tab-btn">
                <div>种养品种</div>
                <div>地块</div>
                <div>物联网设备</div>
            </div>
            <div class="content"></div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            ncjscz: 'cz'
        }
    },
    created () {

    },
    mounted () {
    },
    methods: {
        prev () {
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'DS-Digital';
    src: url('/DS-Digital/DS-DIGI-1.ttf');
    src: url('/DS-Digital/DS-DIGIB-2.ttf');
    src: url('/DS-Digital/DS-DIGII-3.ttf');
    src: url('/DS-Digital/DS-DIGIT-4.ttf');
}

.container {
    position: relative;
    width: 100%;
    height: 100%;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        line-height: 80px;
        background: rgba(0, 0, 0, 0.5);

        .return {
            margin-left: 40px;
            font-size: 16px;
            font-weight: bold;
            color: #66dde9;

            & > span {
                cursor: pointer;

                i {
                    margin-right: 4px;
                }
            }
        }

        .title {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 200px;
            font-size: 28px;
            font-weight: bold;
            color: #08f4ff;
        }

        .btn-grounp {
            margin-right: 64px;
            display: flex;
            justify-content: space-between;

            button {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 150px;
                height: 34px;
                background: #21a3a1;
                border-color: #21a3a1;
            }
        }
    }

    .l-content,
    .r-content {
        position: absolute;
        top: 248px;
        width: 440px;
        height: 640px;
        background: #06344e;
        border-radius: 30px 30px 30px 30px;

        .tab-btn {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 60px;
            border-bottom: 1px solid #7ccfd6;
            box-sizing: border-box;

            & > div {
                height: 100%;
                font-size: 18px;
                color: #a9d1d7;

                & > div {
                    display: flex;
                    align-items: center;
                    position: relative;
                    height: 100%;
                }

                .title {
                    cursor: pointer;
                }

                .on {
                    position: relative;
                    font-weight: bold;
                    color: #7ccfd6;

                    span {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 4px;
                        border-radius: 4px;
                        background: #08f4ff;
                    }
                }
            }
        }
    }

    .l-content {
        left: 68px;
    }

    .r-content {
        right: 68px;
    }
}
</style>

 src/views/home/index.vue

@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-07 17:26:40
 * @Last Modified time: 2022-07-08 10:58:39
* 驾驶舱
*/
<template>
@@ -190,7 +190,7 @@
        </div>

        <div class="down-menu">
            <div class="nc">
            <div class="nc" @click="farmProfiles = true">
                <span>农场</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
@@ -248,6 +248,60 @@
                <img @click="cityShow = false" style="cursor: pointer;" src="/img/sclt.png" alt />
            </div>
        </div>

        <public-box v-if="farmProfiles" class="public-org-nav-bar">
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">123</div>
                <img
                    @click="farmProfiles = false"
                    src="/img/icon/public-close.png"
                    alt
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="farm-profiles">
                    <div class="btn-grounp">
                        <div class="details" @click="goPath('/farmDetails')">
                            进入农场
                            <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="scene">
                            <img src="/img/icon/360.png" alt />
                        </div>
                    </div>

                    <div class="farm-content">
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">农场介绍</div>
                        </div>
                        <div class="row">
                            <div class="l">土地面积</div>
                            <div class="r">
                                <img src="/img/icon/yx.jpg" alt />
                                <img src="/img/icon/yx.jpg" alt />
                                <img src="/img/icon/yx.jpg" alt />
                                <img src="/img/icon/yx.jpg" alt />
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </public-box>
    </div>
</template>

@@ -273,7 +327,8 @@
            // 销售总额
            salaNum: [],
            // 每月销售统计
            salaNumY: []
            salaNumY: [],
            farmProfiles: false
        }
    },
    created () {
@@ -688,6 +743,10 @@

        cityFlowShow () {
            this.cityShow = true
        },

        goPath (path) {
            this.$router.push(path)
        }

    }

 src/views/manage/index.vue

@@ -1,8 +1,8 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
* @Last Modified time: 2022-07-01 12:00:07
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-08 12:02:58
* 经营主体监管
*/
<template>
@@ -14,86 +14,86 @@
        <div class="main-content">
            <div class="t">
                <statistics-num
                        :className="'td'"
                        :totalRegion="znum"
                        :imgUrl="'/img/icon/mj.png'"
                        :unit="'亩'"
                        :title="'土地面积'"
                        :subOneTitle="'使用面积'"
                        :subOneNum="landsnum"
                        :subTwoTitle="'未使用面积'"
                        :subTwoNum="landwnum"
                    :className="'td'"
                    :totalRegion="znum"
                    :imgUrl="'/img/icon/mj.png'"
                    :unit="'亩'"
                    :title="'土地面积'"
                    :subOneTitle="'使用面积'"
                    :subOneNum="landsnum"
                    :subTwoTitle="'未使用面积'"
                    :subTwoNum="landwnum"
                ></statistics-num>
                <statistics-num
                        :className="'kc'"
                        :totalRegion="stockTj"
                        :imgUrl="'/img/icon/kc.png'"
                        :unit="'公斤'"
                        :title="'库存数量'"
                        :subOneTitle="'农产品'"
                        :subOneNum="stockNCP"
                        :subTwoTitle="'加工产品'"
                        :subTwoNum="stockJG"
                    :className="'kc'"
                    :totalRegion="stockTj"
                    :imgUrl="'/img/icon/kc.png'"
                    :unit="'公斤'"
                    :title="'库存数量'"
                    :subOneTitle="'农产品'"
                    :subOneNum="stockNCP"
                    :subTwoTitle="'加工产品'"
                    :subTwoNum="stockJG"
                ></statistics-num>
                <statistics-num
                        :className="'nz'"
                        :totalRegion="jnStock"
                        :imgUrl="'/img/icon/syl.png'"
                        :unit="'公斤'"
                        :title="'农资年使用量'"
                        :subOneTitle="'去年使用'"
                        :subOneNum="qnStock"
                        :subTwoTitle="'本月使用'"
                        :subTwoNum="byStock"
                    :className="'nz'"
                    :totalRegion="jnStock"
                    :imgUrl="'/img/icon/syl.png'"
                    :unit="'公斤'"
                    :title="'农资年使用量'"
                    :subOneTitle="'去年使用'"
                    :subOneNum="qnStock"
                    :subTwoTitle="'本月使用'"
                    :subTwoNum="byStock"
                ></statistics-num>
                <statistics-num
                        :className="'cl'"
                        :totalRegion="yieldTj"
                        :imgUrl="'/img/icon/ncl.png'"
                        :unit="'公斤'"
                        :title="'年产量'"
                        :subOneTitle="'农产品'"
                        :subOneNum="yieldNCP"
                        :subTwoTitle="'加工产品'"
                        :subTwoNum="yieldJG"
                    :className="'cl'"
                    :totalRegion="yieldTj"
                    :imgUrl="'/img/icon/ncl.png'"
                    :unit="'公斤'"
                    :title="'年产量'"
                    :subOneTitle="'农产品'"
                    :subOneNum="yieldNCP"
                    :subTwoTitle="'加工产品'"
                    :subTwoNum="yieldJG"
                ></statistics-num>
                <statistics-num
                        :className="'lt'"
                        :totalRegion="salaNumBN"
                        :imgUrl="'/img/icon/lt.png'"
                        :unit="'公斤'"
                        :title="'市场流通量'"
                        :subOneTitle="'去年流通量'"
                        :subOneNum="salaNumQN"
                        :subTwoTitle="'本月流通量'"
                        :subTwoNum="salaNumBY"
                    :className="'lt'"
                    :totalRegion="salaNumBN"
                    :imgUrl="'/img/icon/lt.png'"
                    :unit="'公斤'"
                    :title="'市场流通量'"
                    :subOneTitle="'去年流通量'"
                    :subOneNum="salaNumQN"
                    :subTwoTitle="'本月流通量'"
                    :subTwoNum="salaNumBY"
                ></statistics-num>
            </div>
            <div class="c">
                <div class="time-box">
                    <time-box
                            :imgUrl="'/img/icon/current.png'"
                            :title="'溯源次数'"
                            :currentNum="34"
                            :subTitle="'昨日溯源次数对比'"
                            :contrast="28"
                            :upDown="'up'"
                        :imgUrl="'/img/icon/current.png'"
                        :title="'溯源次数'"
                        :currentNum="34"
                        :subTitle="'昨日溯源次数对比'"
                        :contrast="28"
                        :upDown="'up'"
                    ></time-box>
                    <time-box
                            :imgUrl="'/img/icon/week.png'"
                            :title="'溯源次数'"
                            :currentNum="61"
                            :subTitle="'上周溯源次数对比'"
                            :contrast="36"
                            :upDown="'up'"
                        :imgUrl="'/img/icon/week.png'"
                        :title="'溯源次数'"
                        :currentNum="61"
                        :subTitle="'上周溯源次数对比'"
                        :contrast="36"
                        :upDown="'up'"
                    ></time-box>
                    <time-box
                            :imgUrl="'/img/icon/month.png'"
                            :title="'溯源次数'"
                            :currentNum="88"
                            :subTitle="'上月溯源次数对比'"
                            :contrast="96"
                            :upDown="'down'"
                        :imgUrl="'/img/icon/month.png'"
                        :title="'溯源次数'"
                        :currentNum="88"
                        :subTitle="'上月溯源次数对比'"
                        :contrast="96"
                        :upDown="'down'"
                    ></time-box>
                </div>
                <div class="task-box">
@@ -120,7 +120,7 @@
                    </div>
                    <date-select></date-select>
                    <div v-if="nzOrNcp == 'ncp'" class="lists-box">
                        <div v-for="(item,index) in ncptr" :key="index" >
                        <div v-for="(item,index) in ncptr" :key="index">
                            <div>{{index + 1}}</div>
                            <div>{{item.strainName}}</div>
                            <div>{{item.area}}亩</div>
@@ -132,16 +132,16 @@
                        <!--                        </div>-->
                    </div>
                    <div v-if="nzOrNcp == 'nz'" class="lists-box">
                        <div v-for="(item,index) in nztr" :key="index" >
                        <div v-for="(item,index) in nztr" :key="index">
                            <div>{{index + 1}}</div>
                            <div>{{item.agrname}}</div>
                            <div>{{item.cnum}}公斤</div>
                        </div>
<!--                        <div>-->
<!--                            <div>2</div>-->
<!--                            <div>复合肥料</div>-->
<!--                            <div>68公斤</div>-->
<!--                        </div>-->
                        <!--                        <div>-->
                        <!--                            <div>2</div>-->
                        <!--                            <div>复合肥料</div>-->
                        <!--                            <div>68公斤</div>-->
                        <!--                        </div>-->
                    </div>
                </div>
                <div class="trp-ncp">
@@ -161,7 +161,7 @@

                        <div class="more">
                            明细
                            <img src="/img/icon/more.png" alt/>
                            <img src="/img/icon/more.png" alt />
                        </div>
                    </div>

@@ -209,7 +209,7 @@

                        <div class="more">
                            更多
                            <img src="/img/icon/more.png" alt/>
                            <img src="/img/icon/more.png" alt />
                        </div>
                    </div>

@@ -263,459 +263,478 @@
</template>

<script>
    import { selectXCount } from '@/api/land/land'
    // eslint-disable-next-line no-unused-vars
    import { page, getStockCount, pagePalnt, statisticsStockAndYield, pageCount, pageCountNz, selectMarketCirculate, countTaskNum, farmingRecords } from '@/api/farm/farmingrecord'
import { selectXCount } from '@/api/land/land'
// eslint-disable-next-line no-unused-vars
import { page, getStockCount, pagePalnt, statisticsStockAndYield, pageCount, pageCountNz, selectMarketCirculate, countTaskNum, farmingRecords } from '@/api/farm/farmingrecord'

    export default {
        data () {
            return {
                landsnum: 0,
                landwnum: 0,
                znum: 0,
                jnStock: 0,
                qnStock: 0,
                byStock: 0,
                farmPlanList: [],
                // 库存数量统计
                stockTj: 0,
                // 农产品数量统计
                stockNCP: 0,
                // 加工产品数量统计
                stockJG: 0,
                // 年产量统计
                yieldTj: 0,
                // 农产品年产量统计
                yieldNCP: 0,
                // 加工产品年产量统计
                yieldJG: 0,
                // 农产品投入
                ncptr: [],
                nztr: [],
                // 统计市场流通/去年流通量/本月流通量
                salaNumBN: [],
                salaNumBY: [],
                salaNumQN: [],
                // 统计任务总数
                taskNum: [],
                nzOrNcp: 'ncp',
                trpOrNcp: 'trp'
            }
        },
        created () {
            this.selectXCount()
            this.getStockCount()
            this.page()
            // 年产量与库存数量
            this.statisticsStockAndYield()
export default {
    data () {
        return {
            landsnum: 0,
            landwnum: 0,
            znum: 0,
            jnStock: 0,
            qnStock: 0,
            byStock: 0,
            farmPlanList: [],
            // 库存数量统计
            stockTj: 0,
            // 农产品数量统计
            stockNCP: 0,
            // 加工产品数量统计
            stockJG: 0,
            // 年产量统计
            yieldTj: 0,
            // 农产品年产量统计
            yieldNCP: 0,
            // 加工产品年产量统计
            yieldJG: 0,
            // 农产品投入
            this.pageCount()
            // 农资投入
            this.pageCountNz()
            ncptr: [],
            nztr: [],
            // 统计市场流通/去年流通量/本月流通量
            this.selectMarketCirculate()
            salaNumBN: [],
            salaNumBY: [],
            salaNumQN: [],
            // 统计任务总数
            this.countTaskNum()
            // 农事操作
            this.farmingRecords()
        },
        mounted () {
            // this.initNcpBar('NcpEcharts')
            this.initClSyBar('ClSyEcharts')
        },
        methods: {
            initBar (dom) {
                const that = this
                const chartDom = document.getElementById(dom)
                const myChart = this.$echarts.init(chartDom)
            taskNum: [],
            nzOrNcp: 'ncp',
            trpOrNcp: 'trp'
        }
    },
    created () {
        this.selectXCount()
        this.getStockCount()
        this.page()
        // 年产量与库存数量
        this.statisticsStockAndYield()
        // 农产品投入
        this.pageCount()
        // 农资投入
        this.pageCountNz()
        // 统计市场流通/去年流通量/本月流通量
        this.selectMarketCirculate()
        // 统计任务总数
        this.countTaskNum()
        // 农事操作
        this.farmingRecords()
    },
    mounted () {
        // this.initNcpBar('NcpEcharts')
        this.initClSyBar('ClSyEcharts')
    },
    methods: {
        initBar (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

               var x = []
               var y = []
                for (let i = 0; i < that.taskNum.length; i++) {
                    x.push(that.taskNum[i].y)
                    y.push(that.taskNum[i].count)
                }
            var x = []
            var y = []
            for (let i = 0; i < that.taskNum.length; i++) {
                x.push(that.taskNum[i].y)
                y.push(that.taskNum[i].count)
            }

                const option = {
                    grid: {
                        top: '14%',
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: x,
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(153,153,153,.4)'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,.4)',
                            rotate: 0
            const option = {
                grid: {
                    top: '14%',
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: x,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(153,153,153,.4)'
                        }
                    },
                    yAxis: {
                        max: 50,
                        name: '（次）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,.4)'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#657CA8'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)',
                        rotate: 0
                    }
                },
                yAxis: {
                    max: 50,
                    name: '（次）',
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.4)'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#657CA8'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(62,81,97, .5)',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)'
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 32,
                        data: y,
                        label: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(62,81,97, .5)',
                                type: 'dashed'
                            position: 'top',
                            textStyle: {
                                color: 'rgba(255,255,255,.4)'
                            }
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,.4)'
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth: 32,
                            data: y,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'rgba(255,255,255,.4)'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color:
                        itemStyle: {
                            normal: {
                                color:

                                        function (params) {
                                            var colorList = [
                                                ['#24A5DF', '#01E2D2'],
                                                ['#E59438', '#FEF880 '],
                                                ['#E34C4C', '#E6945E']
                                            ]
                                            var index = params.dataIndex
                                            if (params.dataIndex >= colorList.length) {
                                                index = params.dataIndex - colorList.length
                                            }
                                            return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: colorList[index][0]
                                                },
                                                {
                                                    offset: 0.5,
                                                    color: colorList[index][0]
                                                },
                                                {
                                                    offset: 1,
                                                    color: colorList[index][1]
                                                }
                                            ])
                                    function (params) {
                                        var colorList = [
                                            ['#24A5DF', '#01E2D2'],
                                            ['#E59438', '#FEF880 '],
                                            ['#E34C4C', '#E6945E']
                                        ]
                                        var index = params.dataIndex
                                        if (params.dataIndex >= colorList.length) {
                                            index = params.dataIndex - colorList.length
                                        }
                                        return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: colorList[index][0]
                                            },
                                            {
                                                offset: 0.5,
                                                color: colorList[index][0]
                                            },
                                            {
                                                offset: 1,
                                                color: colorList[index][1]
                                            }
                                        ])
                                    }

                                }
                            }
                        }
                    ]
                }
                    }
                ]
            }

                option && myChart.setOption(option)
            },
            option && myChart.setOption(option)
        },

            initTrpBar (dom) {
                const that = this
                const chartDom = document.getElementById(dom)
                const myChart = this.$echarts.init(chartDom)
                var nztrData = this.nztr
                var nztrX = []
                var nztrY = []
                for (let i = 0; i < nztrData.length; i++) {
                    nztrX.push(nztrData[i].agrname)
                    nztrY.push(nztrData[i].cnum)
                }
                const option = {
                    grid: {
                        top: '14%',
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: nztrX,
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(153,153,153,.4)'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,.4)',
                            rotate: 0
        initTrpBar (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)
            var nztrData = this.nztr
            var nztrX = []
            var nztrY = []
            for (let i = 0; i < nztrData.length; i++) {
                nztrX.push(nztrData[i].agrname)
                nztrY.push(nztrData[i].cnum)
            }
            const option = {
                grid: {
                    top: '14%',
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: nztrX,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(153,153,153,.4)'
                        }
                    },
                    yAxis: {
                        max: 600,
                        name: '（公斤）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,.4)'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#657CA8'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)',
                        rotate: 0
                    }
                },
                yAxis: {
                    max: 600,
                    name: '（公斤）',
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.4)'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#657CA8'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(62,81,97, .5)',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)'
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 32,
                        data: nztrY,
                        label: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(62,81,97, .5)',
                                type: 'dashed'
                            position: 'top',
                            textStyle: {
                                color: 'rgba(255,255,255,.4)'
                            }
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,.4)'
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth: 32,
                            data: nztrY,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'rgba(255,255,255,.4)'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color:
                        itemStyle: {
                            normal: {
                                color:

                                        new that.$echarts.graphic.LinearGradient(
                                            // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                                            // 通过修改前4个参数，可以实现不同的渐变方向
                                            /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
                                              每项为一个对象，包含offset和color两个参数
                                            */
                                            0, 0, 0, 1, [{ // 代表渐变色从正上方开始
                                                offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                                                color: '#24A5DF'
                                            }, // 柱图渐变色
                                                {
                                                    offset: 1, // 指100%处的颜色
                                                    color: '#01E2D2'
                                                }
                                            ]
                                        )
                                    new that.$echarts.graphic.LinearGradient(
                                        // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                                        // 通过修改前4个参数，可以实现不同的渐变方向
                                        /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
                                          每项为一个对象，包含offset和color两个参数
                                        */
                                        0, 0, 0, 1, [{ // 代表渐变色从正上方开始
                                            offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                                            color: '#24A5DF'
                                        }, // 柱图渐变色
                                        {
                                            offset: 1, // 指100%处的颜色
                                            color: '#01E2D2'
                                        }
                                    ]
                                    )

                                }
                            }
                        }
                    ]
                }
                    }
                ]
            }

                option && myChart.setOption(option)
            },
            option && myChart.setOption(option)
        },

            initNcpBar (dom) {
                const that = this
                const chartDom = document.getElementById(dom)
                const myChart = this.$echarts.init(chartDom)
        initNcpBar (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

                const option = {
                    grid: {
                        top: '14%',
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: [
                            '有机肥料',
                            '复合肥料'
                        ],
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(153,153,153,.4)'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,.4)',
                            rotate: 0
            const option = {
                grid: {
                    top: '14%',
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [
                        '有机肥料',
                        '复合肥料'
                    ],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(153,153,153,.4)'
                        }
                    },
                    yAxis: {
                        max: 600,
                        name: '（公斤）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,.4)'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#657CA8'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)',
                        rotate: 0
                    }
                },
                yAxis: {
                    max: 600,
                    name: '（公斤）',
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.4)'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#657CA8'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(62,81,97, .5)',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.4)'
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 32,
                        data: [500, 60],
                        label: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(62,81,97, .5)',
                                type: 'dashed'
                            position: 'top',
                            textStyle: {
                                color: 'rgba(255,255,255,.4)'
                            }
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,.4)'
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth: 32,
                            data: [500, 60],
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'rgba(255,255,255,.4)'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color:
                        itemStyle: {
                            normal: {
                                color:

                                        new that.$echarts.graphic.LinearGradient(
                                            // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                                            // 通过修改前4个参数，可以实现不同的渐变方向
                                            /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
                                              每项为一个对象，包含offset和color两个参数
                                            */
                                            0, 0, 0, 1, [{ // 代表渐变色从正上方开始
                                                offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                                                color: '#24A5DF'
                                            }, // 柱图渐变色
                                                {
                                                    offset: 1, // 指100%处的颜色
                                                    color: '#01E2D2'
                                                }
                                            ]
                                        )
                                    new that.$echarts.graphic.LinearGradient(
                                        // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                                        // 通过修改前4个参数，可以实现不同的渐变方向
                                        /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
                                          每项为一个对象，包含offset和color两个参数
                                        */
                                        0, 0, 0, 1, [{ // 代表渐变色从正上方开始
                                            offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                                            color: '#24A5DF'
                                        }, // 柱图渐变色
                                        {
                                            offset: 1, // 指100%处的颜色
                                            color: '#01E2D2'
                                        }
                                    ]
                                    )

                                }
                            }
                        }
                    ]
                }

                option && myChart.setOption(option)
            },

            initClSyBar (dom) {
                const chartDom = document.getElementById(dom)
                const myChart = this.$echarts.init(chartDom)

                var data = [
                    '01',
                    '02',
                    '03',
                    '04',
                    '05',
                    '06',
                    '07',
                    '08',
                    '09',
                    '10',
                    '11',
                    '12'
                    }
                ]
                var data1 = [
                    '180',
                    '320',
                    '400',
                    '200',
                    '110',
                    '180',
                    '0',
                    '0',
                    '0',
                    '0',
                    '0',
                    '0'
                ]
                var data2 = [
                    '0',
                    '0',
                    '0',
                    '260',
                    '0',
                    '230',
                    '0',
                    '0',
                    '0',
                    '0',
                    '0',
                    '0'
                ]
            }

                const option = {
                    grid: {
                        top: '10%',
                        right: '0%',
                        left: '0%',
                        bottom: '0%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        left: 'center',
                        data: ['加工产品', '农产品'],
            option && myChart.setOption(option)
        },

        initClSyBar (dom) {
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

            var data = [
                '01',
                '02',
                '03',
                '04',
                '05',
                '06',
                '07',
                '08',
                '09',
                '10',
                '11',
                '12'
            ]
            var data1 = [
                '180',
                '320',
                '400',
                '200',
                '110',
                '180',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0'
            ]
            var data2 = [
                '0',
                '0',
                '0',
                '260',
                '0',
                '230',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0'
            ]

            const option = {
                grid: {
                    top: '10%',
                    right: '0%',
                    left: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    left: 'center',
                    data: ['加工产品', '农产品'],
                    textStyle: {
                        color: '#A9D1D7'
                    }
                },
                xAxis: {
                    data: data,
                    axisLabel: {
                        interval: 0,
                        show: true,
                        textStyle: {
                            color: '#A9D1D7'
                            color: 'rgba(255,255,255,0.6)'
                        }
                    },
                    xAxis: {
                        data: data,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#697B89',
                            width: 1
                        }
                    }
                },
                yAxis: [
                    {
                        min: 0,
                        type: 'value',
                        axisLabel: {
                            interval: 0,
                            show: true,
                            textStyle: {
                                color: 'rgba(255,255,255,0.6)'
                                color: '#B4B5BE'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
@@ -723,600 +742,581 @@
                                color: '#697B89',
                                width: 1
                            }
                        }
                    },
                    yAxis: [
                        {
                            min: 0,
                            type: 'value',
                            axisLabel: {
                                interval: 0,
                                show: true,
                                textStyle: {
                                    color: '#B4B5BE'
                                }
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#697B89',
                                    width: 1
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(62,81,97, .5)',
                                    type: 'dashed'
                                }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(62,81,97, .5)',
                                type: 'dashed'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '加工产品',
                            type: 'bar',
                            barWidth: 14,
                            silent: true,
                            itemStyle: {
                                normal: {
                                    color: '#E29646'
                                }
                            },
                            data: data1
                    }
                ],
                series: [
                    {
                        name: '加工产品',
                        type: 'bar',
                        barWidth: 14,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#E29646'
                            }
                        },
                        {
                            name: '农产品',
                            type: 'bar',
                            barWidth: 14,
                            silent: true,
                            itemStyle: {
                                normal: {
                                    color: '#6AE081'
                                }
                            },
                            data: data2
                        }
                    ]
                }

                option && myChart.setOption(option)
            },
            // 农场使用率
            selectXCount () {
                // eslint-disable-next-line no-unused-vars
                var that = this
                var deptId = '1123598813738675201'
                selectXCount(deptId).then((res) => {
                    that.landsnum = res.data.data.snum.toFixed(0)
                    that.landwnum = res.data.data.wnum.toFixed(0)
                    that.znum = res.data.data.num.toFixed(0)
                })
            },
            // 农资使用概况
            getStockCount () {
                var that = this
                var deptId = '1123598813738675201'
                getStockCount(deptId).then((res) => {
                    that.jnStock = res.data.data.jn.toFixed(0)
                    that.qnStock = res.data.data.qn.toFixed(0)
                    that.byStock = res.data.data.by.toFixed(0)
                })
            },
            // 农事记录
            page () {
                var params = {}
                params.tenantId = '000000'
                params.deptId = '1123598813738675201'
                page(1, 10, Object.assign(params)).then((res) => {
                    this.farmPlanList = res.data.data.records
                })
            },
            // 大屏经营概况库存数量与年产量
            statisticsStockAndYield () {
                var params = {}
                params.tenantId = '000000'
                params.deptId = '1123598813738675201'
                params.year = '2022'
                statisticsStockAndYield(Object.assign(params)).then((res) => {
                    this.stockNCP = res.data.data.sum
                    this.stockJG = res.data.data.jgsum
                    this.stockTj = res.data.data.jgsum + res.data.data.sum

                    this.yieldNCP = res.data.data.ncpNcl
                    this.yieldJG = res.data.data.jgNcl
                    this.yieldTj = res.data.data.ncpNcl + res.data.data.jgNcl
                })
            },
            // 农产品投入
            pageCount () {
                var params = {}
                params.tenantId = '000000'
                params.deptId = '1123598813738675201'
                params.year = '2022'
                pageCount(Object.assign(params)).then((res) => {
                    this.ncptr = res.data.data
                })
            },
            // 农资投入
            pageCountNz () {
                var params = {}
                params.codes = '000000'
                params.deptId = '1123598813738675201'
                params.year = '2022'
                pageCountNz(Object.assign(params)).then((res) => {
                    this.nztr = res.data.data.records
                    // 投入品监管图表
                    this.initTrpBar('TrpEcharts')
                })
            },
            // 统计市场流通/去年流通量/本月流通量
            selectMarketCirculate () {
                var params = {}
                params.codes = '000000'
                params.deptId = '1123598813738675201'
                params.year = '2022'
                selectMarketCirculate(Object.assign(params)).then((res) => {
                    this.salaNumBN = res.data.data[0].num
                    this.salaNumQN = res.data.data[1].num
                    this.salaNumBY = res.data.data[2].num
                })
            },
            // 统计任务总数
            countTaskNum () {
                var params = {}
                params.codes = '000000'
                params.deptId = '1123598813738675201'
                params.year = '2022'
                countTaskNum(Object.assign(params)).then((res) => {
                    this.taskNum = res.data.data
                    this.initBar('TaskNumEcharts')
                })
            },
            // 农事记录
            farmingRecords () {
                var params = {}
                params.codes = '000000'
                params.deptId = '1123598813738675201'
                params.year = '2022'
                farmingRecords(Object.assign(params)).then((res) => {

                })
                        data: data1
                    },
                    {
                        name: '农产品',
                        type: 'bar',
                        barWidth: 14,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#6AE081'
                            }
                        },
                        data: data2
                    }
                ]
            }

            option && myChart.setOption(option)
        },
        // 农场使用率
        selectXCount () {
            // eslint-disable-next-line no-unused-vars
            var that = this
            var deptId = '1123598813738675201'
            selectXCount(deptId).then((res) => {
                that.landsnum = res.data.data.snum.toFixed(0)
                that.landwnum = res.data.data.wnum.toFixed(0)
                that.znum = res.data.data.num.toFixed(0)
            })
        },
        // 农资使用概况
        getStockCount () {
            var that = this
            var deptId = '1123598813738675201'
            getStockCount(deptId).then((res) => {
                that.jnStock = res.data.data.jn.toFixed(0)
                that.qnStock = res.data.data.qn.toFixed(0)
                that.byStock = res.data.data.by.toFixed(0)
            })
        },
        // 农事记录
        page () {
            var params = {}
            params.tenantId = '000000'
            params.deptId = '1123598813738675201'
            page(1, 10, Object.assign(params)).then((res) => {
                this.farmPlanList = res.data.data.records
            })
        },
        // 大屏经营概况库存数量与年产量
        statisticsStockAndYield () {
            var params = {}
            params.tenantId = '000000'
            params.deptId = '1123598813738675201'
            params.year = '2022'
            statisticsStockAndYield(Object.assign(params)).then((res) => {
                this.stockNCP = res.data.data.sum
                this.stockJG = res.data.data.jgsum
                this.stockTj = res.data.data.jgsum + res.data.data.sum

                this.yieldNCP = res.data.data.ncpNcl
                this.yieldJG = res.data.data.jgNcl
                this.yieldTj = res.data.data.ncpNcl + res.data.data.jgNcl
            })
        },
        // 农产品投入
        pageCount () {
            var params = {}
            params.tenantId = '000000'
            params.deptId = '1123598813738675201'
            params.year = '2022'
            pageCount(Object.assign(params)).then((res) => {
                this.ncptr = res.data.data
            })
        },
        // 农资投入
        pageCountNz () {
            var params = {}
            params.codes = '000000'
            params.deptId = '1123598813738675201'
            params.year = '2022'
            pageCountNz(Object.assign(params)).then((res) => {
                this.nztr = res.data.data.records
                // 投入品监管图表
                this.initTrpBar('TrpEcharts')
            })
        },
        // 统计市场流通/去年流通量/本月流通量
        selectMarketCirculate () {
            var params = {}
            params.codes = '000000'
            params.deptId = '1123598813738675201'
            params.year = '2022'
            selectMarketCirculate(Object.assign(params)).then((res) => {
                this.salaNumBN = res.data.data[0].num
                this.salaNumQN = res.data.data[1].num
                this.salaNumBY = res.data.data[2].num
            })
        },
        // 统计任务总数
        countTaskNum () {
            var params = {}
            params.codes = '000000'
            params.deptId = '1123598813738675201'
            params.year = '2022'
            countTaskNum(Object.assign(params)).then((res) => {
                this.taskNum = res.data.data
                this.initBar('TaskNumEcharts')
            })
        },
        // 农事记录
        farmingRecords () {
            var params = {}
            params.codes = '000000'
            params.deptId = '1123598813738675201'
            params.year = '2022'
            farmingRecords(Object.assign(params)).then((res) => {

            })
        }
    }
}
</script>

<style scoped lang="scss">
    .container {
        padding: 20px;
        position: relative;
        width: 100%;
        height: 100%;
        background: #08192e;
        box-sizing: border-box;
.container {
    padding: 20px;
    position: relative;
    width: 100%;
    height: 100%;
    background: #08192e;
    box-sizing: border-box;

        .toggle-plot {
            text-align: left;
            height: 36px;
            line-height: 36px;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
    .toggle-plot {
        text-align: left;
        height: 36px;
        line-height: 36px;
        font-size: 24px;
        font-weight: bold;
        color: #fff;
    }

    .main-content {
        margin-top: 10px;
        height: calc(100% - 46px);
        display: flex;
        flex-direction: column;

        .t {
            display: flex;
            justify-content: space-between;

            & > div:first-child {
                margin-left: 0;
            }
        }

        .main-content {
            margin-top: 10px;
            height: calc(100% - 46px);
        .c {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .t {
            & > div {
                margin-left: 20px;
                width: calc((100% - 80px) / 5);
                height: 346px;
                border-radius: 8px 8px 8px 8px;
                background: rgba(0, 52, 85, 0.4);
            }

            & > div:first-child {
                margin-left: 0;
            }

            & > div:last-child {
                width: calc((100% - 80px) / 5 * 2 + 20px);
            }

            .time-box {
                padding: 0 25px;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                box-sizing: border-box;

                & > div:first-child {
                    margin-left: 0;
                & > div:last-child {
                    border: none;
                }
            }

            .c {
                margin-top: 20px;
            .task-box {
                padding: 20px;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                box-sizing: border-box;

                & > div {
                    margin-left: 20px;
                    width: calc((100% - 80px) / 5);
                    height: 346px;
                    border-radius: 8px 8px 8px 8px;
                    background: rgba(0, 52, 85, 0.4);
                .title {
                    text-align: left;
                    font-size: 18px;
                    font-weight: bold;
                    color: #7ccfd6;
                }

                & > div:first-child {
                    margin-left: 0;
                .echarts-box {
                    margin-top: 16px;
                    flex: 1;
                }
            }

                & > div:last-child {
                    width: calc((100% - 80px) / 5 * 2 + 20px);
                }
            .nz-ncp {
                padding: 20px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

                .time-box {
                    padding: 0 25px;
                .title-box {
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;

                    & > div:last-child {
                        border: none;
                    }
                }

                .task-box {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;

                    .title {
                        text-align: left;
                        font-size: 18px;
                        font-weight: bold;
                        color: #7ccfd6;
                    }

                    .echarts-box {
                        margin-top: 16px;
                        flex: 1;
                    }
                }

                .nz-ncp {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;

                    .title-box {
                    & > div {
                        display: flex;
                        align-items: flex-start;
                        font-size: 18px;
                        color: #a9d1d7;

                        & > div {
                            display: flex;
                            align-items: flex-start;
                            font-size: 18px;
                            color: #a9d1d7;

                            .title {
                                cursor: pointer;
                            }

                            .on {
                                position: relative;
                                font-weight: bold;
                                color: #7ccfd6;

                                span {
                                    position: absolute;
                                    bottom: -8px;
                                    left: 0;
                                    width: 100%;
                                    height: 3px;
                                    border-radius: 3px;
                                    background: #66dde9;
                                }
                            }
                        .title {
                            cursor: pointer;
                        }

                        & > div:nth-child(2) {
                            margin-left: 60px;
                        .on {
                            position: relative;
                            font-weight: bold;
                            color: #7ccfd6;

                            span {
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                width: 100%;
                                height: 3px;
                                border-radius: 3px;
                                background: #66dde9;
                            }
                        }
                    }

                    .lists-box {
                        margin-top: 16px;
                        flex: 1;
                        overflow-y: auto;
                    & > div:nth-child(2) {
                        margin-left: 60px;
                    }
                }

                        & > div:nth-child(even) {
                            background: rgba(102, 221, 233, 0.1);
                .lists-box {
                    margin-top: 16px;
                    flex: 1;
                    overflow-y: auto;

                    & > div:nth-child(even) {
                        background: rgba(102, 221, 233, 0.1);
                    }

                    & > div {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        line-height: 48px;
                        font-size: 18px;
                        color: #a9d1d7;

                        & > div:first-child {
                            margin-left: 16px;
                        }

                        & > div {
                        & > div:last-child {
                            margin-right: 18px;
                            color: #66dde9;
                        }
                    }
                }
            }

            .trp-ncp {
                padding: 20px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

                .title-box {
                    position: relative;
                    display: flex;

                    & > div {
                        display: flex;
                        align-items: flex-start;
                        font-size: 18px;
                        color: #a9d1d7;

                        .title {
                            cursor: pointer;
                        }

                        .on {
                            position: relative;
                            font-weight: bold;
                            color: #7ccfd6;

                            span {
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                width: 100%;
                                height: 3px;
                                border-radius: 3px;
                                background: #66dde9;
                            }
                        }
                    }

                    & > div:nth-child(2) {
                        margin-left: 60px;
                    }

                    .more {
                        position: absolute;
                        top: 0;
                        left: auto;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        font-size: 16px;

                        img {
                            margin-left: 6px;
                            vertical-align: middle;
                        }
                    }
                }

                .echarts-box {
                    margin-top: 16px;
                    flex: 1;
                }
            }
        }

        .b {
            margin-top: 20px;
            flex: 1;
            display: flex;
            justify-content: space-between;

            & > div {
                margin-left: 20px;
                border-radius: 8px 8px 8px 8px;
                background: rgba(0, 52, 85, 0.4);
            }

            & > div:first-child {
                margin-left: 0;
                flex: 1;
            }

            & > div:last-child {
                width: 444px;
            }

            .cl-sy {
                padding: 20px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

                .title-box {
                    height: 34px;
                    position: relative;
                    display: flex;

                    & > div {
                        display: flex;
                        align-items: flex-start;
                        font-size: 18px;
                        color: #a9d1d7;

                        .on {
                            position: relative;
                            font-weight: bold;
                            color: #7ccfd6;

                            span {
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                width: 100%;
                                height: 3px;
                                border-radius: 3px;
                                background: #66dde9;
                            }
                        }
                    }

                    & > div:nth-child(2) {
                        margin-left: 60px;
                    }

                    .date {
                        position: absolute;
                        top: -20px;
                        left: auto;
                        right: 0;
                        bottom: auto;
                        margin: auto;
                        width: 320px;
                    }
                }

                .echarts-box {
                    margin-top: 16px;
                    flex: 1;
                }
            }

            .ns-nz {
                padding: 20px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;

                .title-box {
                    position: relative;
                    display: flex;

                    & > div {
                        display: flex;
                        align-items: flex-start;
                        font-size: 18px;
                        color: #a9d1d7;

                        .title {
                            cursor: pointer;
                        }

                        .on {
                            position: relative;
                            font-weight: bold;
                            color: #7ccfd6;

                            span {
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                width: 100%;
                                height: 3px;
                                border-radius: 3px;
                                background: #66dde9;
                            }
                        }
                    }

                    & > div:nth-child(2) {
                        margin-left: 60px;
                    }

                    .more {
                        position: absolute;
                        top: 0;
                        left: auto;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        font-size: 16px;

                        img {
                            margin-left: 6px;
                            vertical-align: middle;
                        }
                    }
                }

                .lists-box {
                    margin-top: 16px;
                    flex: 1;

                    display: flex;
                    flex-direction: column;

                    & > div {
                        position: relative;
                        flex: 1;
                        margin-top: 10px;
                        padding: 10px 20px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        background: rgba(102, 221, 233, 0.1);
                        border-radius: 8px;
                        font-size: 18px;
                        color: #a9d1d7;

                        & > .t-item {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            line-height: 48px;
                            font-size: 18px;
                            color: #a9d1d7;

                            & > div:first-child {
                                margin-left: 16px;
                            }

                            & > div:last-child {
                                margin-right: 18px;
                                font-weight: bold;
                                color: #66dde9;
                            }
                        }
                    }
                }

                .trp-ncp {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;

                    .title-box {
                        position: relative;
                        display: flex;

                        & > div {
                            display: flex;
                            align-items: flex-start;
                            font-size: 18px;
                            color: #a9d1d7;

                            .title {
                                cursor: pointer;
                            }

                            .on {
                                position: relative;
                                font-weight: bold;
                                color: #7ccfd6;

                                span {
                                    position: absolute;
                                    bottom: -8px;
                                    left: 0;
                                    width: 100%;
                                    height: 3px;
                                    border-radius: 3px;
                                    background: #66dde9;
                                }
                            }
                        }

                        & > div:nth-child(2) {
                            margin-left: 60px;
                        }

                        .more {
                            position: absolute;
                            top: 0;
                            left: auto;
                            right: 0;
                            bottom: 0;
                            margin: auto;
                        & > .b-item {
                            display: flex;
                            align-items: center;
                            font-size: 16px;

                            img {
                                margin-left: 6px;
                                vertical-align: middle;
                            }
                        }
                    }

                    .echarts-box {
                        margin-top: 16px;
                        flex: 1;
                    }
                }
            }

            .b {
                margin-top: 20px;
                flex: 1;
                display: flex;
                justify-content: space-between;

                & > div {
                    margin-left: 20px;
                    border-radius: 8px 8px 8px 8px;
                    background: rgba(0, 52, 85, 0.4);
                }

                & > div:first-child {
                    margin-left: 0;
                    flex: 1;
                }

                & > div:last-child {
                    width: 444px;
                }

                .cl-sy {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;

                    .title-box {
                        height: 34px;
                        position: relative;
                        display: flex;

                        & > div {
                            display: flex;
                            align-items: flex-start;
                            font-size: 18px;
                            color: #a9d1d7;

                            .on {
                                position: relative;
                                font-weight: bold;
                                color: #7ccfd6;

                                span {
                                    position: absolute;
                                    bottom: -8px;
                                    left: 0;
                                    width: 100%;
                                    height: 3px;
                                    border-radius: 3px;
                                    background: #66dde9;
                                }
                            }
                        }

                        & > div:nth-child(2) {
                            margin-left: 60px;
                        }

                        .date {
                            position: absolute;
                            top: -20px;
                            left: auto;
                            right: 0;
                            bottom: auto;
                            margin: auto;
                            width: 320px;
                        }
                    }

                    .echarts-box {
                        margin-top: 16px;
                        flex: 1;
                    }
                }

                .ns-nz {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;

                    .title-box {
                        position: relative;
                        display: flex;

                        & > div {
                            display: flex;
                            align-items: flex-start;
                            font-size: 18px;
                            color: #a9d1d7;

                            .title {
                                cursor: pointer;
                            }

                            .on {
                                position: relative;
                                font-weight: bold;
                                color: #7ccfd6;

                                span {
                                    position: absolute;
                                    bottom: -8px;
                                    left: 0;
                                    width: 100%;
                                    height: 3px;
                                    border-radius: 3px;
                                    background: #66dde9;
                                }
                            }
                        }

                        & > div:nth-child(2) {
                            margin-left: 60px;
                        }

                        .more {
                            position: absolute;
                            top: 0;
                            left: auto;
                            right: 0;
                            bottom: 0;
                            margin: auto;
                            display: flex;
                            align-items: center;
                            font-size: 16px;

                            img {
                                margin-left: 6px;
                                vertical-align: middle;
                            }
                        }
                    }

                    .lists-box {
                        margin-top: 16px;
                        flex: 1;

                        display: flex;
                        flex-direction: column;

                        & > div {
                            position: relative;
                            flex: 1;
                            margin-top: 10px;
                            padding: 10px 20px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            background: rgba(102, 221, 233, 0.1);
                            border-radius: 8px;
                            font-size: 18px;
                            color: #a9d1d7;

                            & > .t-item {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;

                                & > div:first-child {
                                    font-weight: bold;
                                    color: #66dde9;
                                }
                            }

                            & > .b-item {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;

                                & > div:first-child {
                                    color: #fff;
                                }
                            }

                            .t-border {
                                top: 0;
                                bottom: auto;
                            }

                            .b-border {
                                top: auto;
                                bottom: 0;
                            }

                            .t-border,
                            .b-border {
                                position: absolute;
                                left: 0;
                                right: 0;
                                margin: auto;
                                width: 80%;
                                height: 1px;
                                background: linear-gradient(
                                                89deg,
                                                rgba(102, 221, 233, 0) 0%,
                                                #66dde9 51%,
                                                rgba(102, 221, 233, 0) 100%
                                );
                            & > div:first-child {
                                color: #fff;
                            }
                        }

                        & > div:first-child {
                            margin-top: 10px;
                        .t-border {
                            top: 0;
                            bottom: auto;
                        }

                        .b-border {
                            top: auto;
                            bottom: 0;
                        }

                        .t-border,
                        .b-border {
                            position: absolute;
                            left: 0;
                            right: 0;
                            margin: auto;
                            width: 80%;
                            height: 1px;
                            background: linear-gradient(
                                89deg,
                                rgba(102, 221, 233, 0) 0%,
                                #66dde9 51%,
                                rgba(102, 221, 233, 0) 100%
                            );
                        }
                    }

                    & > div:first-child {
                        margin-top: 10px;
                    }
                }
            }
        }
    }
}
</style>