1

guanqb

2022-07-21 f9812ca20f1a34809057fdcd8564f7c495fc9693

1

 package-lock.json

Diff too large

 src/styles/element-ui.css

@@ -47,7 +47,6 @@
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}

.equipment-plot-select input {
@@ -59,24 +58,10 @@
}

.manage-select {
  background-color: #05243e;
}

.manage-option:hover {
  background-color: #0e7894 !important;
  background-color: #05243e !important;
}

.manage-option {
  background-color: #05243e !important;
  color: #a5cacc;
}

/deep/.el-input--suffix .el-input__inner {
  padding-right: 102px;
}

/deep/.el-input__inner {
  background-color: #003e00;
  color: #fff;
  border: 1px solid #e43179;
}

 src/styles/element-ui.min.css

@@ -1 +1 @@
.emit-el-date-picker input{background:#003555;border-color:#849EAE;color:rgba(255,255,255,0.6)}.el-icon-my-sy{background:url("/img/icon/1016.png") center no-repeat}.el-icon-my-sy:before{content:"替";font-size:18px;visibility:hidden}.el-icon-my-sb{background:url("/img/icon/3666.png") center no-repeat}.el-icon-my-sb:before{content:"替";font-size:24px;visibility:hidden}.dialog-fixed{margin:0 !important;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99}.equipment-plot-select .el-input{position:relative;display:flex;align-items:center;justify-content:center}.equipment-plot-select .el-input .el-input__suffix{display:flex;align-items:center;justify-content:center;background-color:red}.equipment-plot-select input{color:#fff;font-size:28px !important;font-weight:bold;background:transparent !important;border:none !important}.manage-select{background-color:#05243e}.manage-option:hover{background-color:#0e7894 !important}.manage-option{background-color:#05243e !important;color:#a5cacc}/deep/.el-input--suffix .el-input__inner{padding-right:102px}/deep/.el-input__inner{background-color:#003e00;color:#fff;border:1px solid #e43179}
.emit-el-date-picker input{background:#003555;border-color:#849EAE;color:rgba(255,255,255,0.6)}.el-icon-my-sy{background:url("/img/icon/1016.png") center no-repeat}.el-icon-my-sy:before{content:"替";font-size:18px;visibility:hidden}.el-icon-my-sb{background:url("/img/icon/3666.png") center no-repeat}.el-icon-my-sb:before{content:"替";font-size:24px;visibility:hidden}.dialog-fixed{margin:0 !important;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99}.equipment-plot-select .el-input{position:relative;display:flex;align-items:center;justify-content:center}.equipment-plot-select .el-input .el-input__suffix{display:flex;align-items:center;justify-content:center}.equipment-plot-select input{color:#fff;font-size:28px !important;font-weight:bold;background:transparent !important;border:none !important}.manage-select{background-color:#05243e !important}.manage-option{background-color:#05243e !important;color:#a5cacc}

 src/styles/element-ui.scss

@@ -52,7 +52,6 @@
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: red;
        }
    }

@@ -66,25 +65,17 @@
}

.manage-select {
    background-color: #05243e;
    background-color: #05243e!important;
}

.manage-option:hover {
    background-color: #0e7894!important;
}
// .manage-option:hover {
//     background-color: #0e7894!important;
// }
.manage-option {
    background-color: #05243e!important;
    color: #a5cacc;
}

// 设置输入框的长度为：102px;
/deep/.el-input--suffix .el-input__inner {
  padding-right: 102px;
}

// 设置输入框的背景色、字体颜色、边框属性设置；
/deep/.el-input__inner {
  background-color: #003e00;
  color: #fff;
  border: 1px solid #e43179;
}



 src/views/manage/index.vue

@@ -6,1955 +6,2017 @@
* 经营主体监管
*/
<template>
    <div class="container">
        <div class="toggle-plot">
            <el-select v-model="farmValue" @change="farmSelectChange" placeholder="请选择农场">
                <el-option
                        v-for="item in farmSelect"
                        :key="item.id"
                        :label="item.farmName"
                        :value="item.id">
                </el-option>
            </el-select>
        </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="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"
                ></statistics-num>
                <statistics-num
                    :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"
                ></statistics-num>
            </div>
            <div class="c">
                <div class="time-box">
                    <time-box
                        :imgUrl="'/img/icon/current.png'"
                        :title="'溯源次数'"
                        :currentNum="sweepList['todayNum']"
                        :subTitle="'昨日溯源次数对比'"
                        :contrast="sweepList['yesterdayNum']"
                        :upDown="sweepList['todayNum'] > sweepList['yesterdayNum'] ? 'up' : 'down'"
                    ></time-box>
                    <time-box
                        :imgUrl="'/img/icon/week.png'"
                        :title="'溯源次数'"
                        :currentNum="sweepList['thisWeekNum']"
                        :subTitle="'上周溯源次数对比'"
                        :contrast="sweepList['lastWeekNum']"
                        :upDown="sweepList['thisWeekNum'] > sweepList['lastWeekNum'] ? 'up' : 'down'"
                    ></time-box>
                    <time-box
                        :imgUrl="'/img/icon/month.png'"
                        :title="'溯源次数'"
                        :currentNum="sweepList['thisMonthNum']"
                        :subTitle="'上月溯源次数对比'"
                        :contrast="sweepList['lastMonthNum']"
                        :upDown="sweepList['thisMonthNum'] > sweepList['lastMonthNum'] ? 'up' : 'down'"
                    ></time-box>
                </div>
                <div class="task-box">
                    <div class="title">任务总数</div>

                    <date-select :type="'taskSelect'"></date-select>

                    <div class="echarts-box" id="TaskNumEcharts"></div>
                </div>
                <div class="nz-ncp">
                    <div class="title-box">
                        <div>
                            <div class="item" :class="{on: nzOrNcp == 'ncp'}">
                                <div @click="nzOrNcp = 'ncp'" class="title">农产品投入</div>
                                <span></span>
                            </div>
                        </div>
                        <div>
                            <div class="item" :class="{on: nzOrNcp == 'nz'}">
                                <div @click="nzOrNcp = 'nz'" class="title">农资投入</div>
                                <span></span>
                            </div>
                        </div>
                    </div>
                    <date-select :type="'ncptrSelect'" v-if="nzOrNcp == 'ncp'"></date-select>
                    <date-select :type="'nztrSelect'" v-if="nzOrNcp == 'nz'"></date-select>
                    <div v-if="nzOrNcp == 'ncp'" class="lists-box">
                        <div v-for="(item,index) in ncptr" :key="index">
                            <div>{{index + 1}}</div>
                            <div>{{item.strainName}}</div>
                            <div>{{item.area}}亩</div>
                        </div>
                        <!--                        <div>-->
                        <!--                            <div>2</div>-->
                        <!--                            <div>玉米</div>-->
                        <!--                            <div>75.12亩</div>-->
                        <!--                        </div>-->
                    </div>
                    <div v-if="nzOrNcp == 'nz'" class="lists-box">
                        <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>
                <div class="trp-ncp">
                    <div class="title-box">
                        <div>
                            <div class="item" :class="{on: trpOrNcp == 'trp'}">
                                <div @click="trpOrNcpChange('trp')" class="title">投入品监管</div>
                                <span></span>
                            </div>
                        </div>
                        <div>
                            <div class="item" :class="{on: trpOrNcp == 'ncp'}">
                                <div @click="trpOrNcpChange('ncp')" class="title">农产品监管</div>
                                <span></span>
                            </div>
                        </div>

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

                    <div class="echarts-box" id="TrpEcharts"></div>
                    <!--                    <div v-show="trpOrNcp == 'ncp'" class="echarts-box" id="NcpEcharts"></div>-->
                </div>
            </div>
            <div class="b">
                <div class="cl-sy">
                    <div class="title-box">
                        <div>
                            <div class="item" :class="{on : cltjOrsym == 'cltj'}">
                                <div @click="cltjOrSymChange('cltj')" class="title">产量统计</div>
                                <span></span>
                            </div>
                        </div>
                        <div>
                            <div class="item" :class="{on : cltjOrsym == 'sym'}">
                                <div @click="cltjOrSymChange('sym')" class="title">溯源查询趋势图</div>
                                <span></span>
                            </div>
                        </div>

                        <div class="date">
                            <date-select :type="'cltjSelect'" v-if="cltjOrsym == 'cltj'"></date-select>
                            <date-select :type="'symSelect'" v-if="cltjOrsym == 'sym'"></date-select>
                        </div>
                    </div>

                    <div class="echarts-box" id="ClSyEcharts"></div>
                </div>
                <div class="ns-nz">
                    <div class="title-box">
                        <div>
                            <div class="item" :class="{on : nsjlOrnz == 'nsjl'}">
                                <div @click="nsjlOrnz='nsjl'" class="title">农事记录</div>
                                <span></span>
                            </div>
                        </div>
                        <div>
                            <div class="item" :class="{on : nsjlOrnz == 'nzcr'}">
                                <div @click="nsjlOrnz='nzcr'" class="title">农资出入库记录</div>
                                <span></span>
                            </div>
                        </div>

                        <div class="more" @click="popDetailedFarming({type: '', landId: ''})">
                            更多
                            <img src="/img/icon/more.png" alt />
                        </div>
                    </div>

                    <div v-if="nsjlOrnz == 'nsjl'" class="lists-box">
                        <div v-for="(item,index) in farminList" :key="index">
                            <div class="t-border"></div>
                            <div class="t-item">
                                <div>{{item.typeName}}</div>
                                <div>{{item.time}}</div>
                            </div>
                            <div class="b-item">
                                <div>{{item.strainName}}</div>
                                <div>{{item.realName}}</div>
                                <div>{{item.landName}}</div>
                            </div>
                            <div class="b-border"></div>
                        </div>
                    </div>
                    <div v-if="nsjlOrnz == 'nzcr'" class="lists-box">
                        <div v-for="(item,index) in stockrecordList" :key="index">
                            <div class="t-border"></div>
                            <div class="t-item">
                                <div>{{item.agrname}}</div>
                                <div>{{item.time1}}</div>
                            </div>
                            <div class="b-item">
                                <div>{{item.spn}}</div>
                                <div>{{item.type1}}</div>
                                <div>{{item.czr}}</div>
                            </div>
                            <div class="b-border"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <public-box
            v-show="trpPopupFlag"
            :closeFlag="'trpPopupFlag'"
            :className="'public-farm-oper-table'"
  <div class="container">
    <div class="toggle-plot">
      <el-select
        popper-class="manage-select"
        v-model="farmValue"
        @change="farmSelectChange"
        placeholder="请选择农场"
        :popper-append-to-body="false"
      >
        <el-option
          v-for="item in farmSelect"
          :key="item.id"
          :label="item.farmName"
          :value="item.id"
          class=".manage-option"
        >
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">投入品监管明细</div>
                <img
                    @click="trpPopupFlag = false"
                    src="/img/icon/public-close.png"
                    alt
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="action-bar">
                    <div class="search">
                        <el-input
                            class="search-input"
                            size="small"
                            prefix-icon="el-icon-search"
                            placeholder="请输入农资"
                            v-model="inputTRP_nzname"
                        ></el-input>
                    </div>
                    <div class="btn-grounp">
                        <el-button
                            size="small"
                            class="search"
                            type="primary"
                            icon="el-icon-search"
                            @click="TRP_query"
                        >查询</el-button>
                        <el-button
                            size="small"
                            class="reset"
                            type="info"
                            icon="el-icon-refresh-right"
                            @click="TRP_refresh"
                        >重置</el-button>
                    </div>
                </div>
                <div class="table-list">
                    <div class="t-header">
                        <div>农资</div>
                        <div>分类</div>
                        <div>规格</div>
                        <div>库存</div>
                        <div>数量</div>
                        <div>厂家</div>
                    </div>
                    <div class="t-body">
                        <div class="table-list"  v-for="(item,index) in nztrAll" :key="index">
                            <div>{{item.agrname}}</div>
                            <div>{{item.stype}}</div>
                            <div>{{item.spn}}</div>
                            <div>{{item.amount}}{{item.dic2}}</div>
                            <div>{{item.cnum}}{{item.dic1}}</div>
                            <div>{{item.factoryName}}</div>
                        </div>
                    </div>
                </div>
            </template>
        </public-box>

        <public-box
                v-show="nzcrPopupFlag"
                :closeFlag="'nzcrPopupFlag'"
                :className="'public-farm-oper-table'"
        >
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">农资出入库记录</div>
                <img
                        @click="nzcrPopupFlag = false"
                        src="/img/icon/public-close.png"
                        alt
                        class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="action-bar">
                    <div class="search">
                        <el-input
                                class="search-input"
                                size="small"
                                prefix-icon="el-icon-search"
                                placeholder="请输入农资"
                                v-model="inputNZ_nzname"
                        ></el-input>
                    </div>
                    <div class="btn-grounp">
                        <el-button
                                size="small"
                                class="search"
                                type="primary"
                                icon="el-icon-search"
                                @click="NZCR_query"
                        >查询</el-button>
                        <el-button
                                size="small"
                                class="reset"
                                type="info"
                                icon="el-icon-refresh-right"
                                @click="NZCR_refresh"
                        >重置</el-button>
                    </div>
                </div>
                <div class="table-list">
                    <div class="t-header">
                        <div style="width: 225px">农资</div>
                        <div>分类</div>
                        <div>规格</div>
                        <div>类型</div>
                        <div>数量</div>
                        <div>操作时间</div>
                        <div>操作人</div>
                    </div>
                    <div class="t-body">
                        <div class="table-list"  v-for="(item,index) in stockrecordAll" :key="index">
                            <div style="width: 225px">{{item.agrname}}</div>
                            <div>{{item.stype == 0 ? '采购入库':'调拨入库'}}</div>
                            <div>{{item.spn}}</div>
                            <div>{{item.type1}}</div>
                            <div>{{item.count}}</div>
                            <div>{{item.createTime}}</div>
                            <div>{{item.czr}}</div>
                        </div>
                    </div>
                </div>
            </template>
        </public-box>

        <public-box
                v-show="ncpPopupFlag"
                :closeFlag="'ncpPopupFlag'"
                :className="'public-farm-oper-table'"
        >
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">农产品监管</div>
                <img
                        @click="ncpPopupFlag = false"
                        src="/img/icon/public-close.png"
                        alt
                        class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="action-bar">
                    <div class="search">
                        <el-input
                                class="search-input"
                                size="small"
                                prefix-icon="el-icon-search"
                                placeholder="请输入农资"
                                v-model="inputNCP_nzname"
                        ></el-input>
                    </div>
                    <div class="btn-grounp">
                        <el-button
                                size="small"
                                class="search"
                                type="primary"
                                icon="el-icon-search"
                                @click="NCP_query"
                        >查询</el-button>
                        <el-button
                                size="small"
                                class="reset"
                                type="info"
                                icon="el-icon-refresh-right"
                                @click="NCP_refresh"
                        >重置</el-button>
                    </div>
                </div>
                <div class="table-list">
                    <div class="t-header">
                        <div>农资</div>
                        <div>作业方式</div>
                        <div>采收地块</div>
                        <div>类型</div>
                        <div>采收数量</div>
                        <div>操作时间</div>
                        <div>操作人</div>
                    </div>
                    <div class="t-body">
                        <div class="table-list"  v-for="(item,index) in ncpAll" :key="index">
                            <div>{{item.strainName}}</div>
                            <div>{{item.jobWay == 0 ? '人工':'机械'}}</div>
                            <div>{{item.landName}}</div>
                            <div>{{Number(item.leaves) + 1}}等品</div>
                            <div>{{item.weight}}公斤</div>
                            <div>{{item.createTime}}</div>
                            <div>{{item.realName}}</div>
                        </div>
                    </div>
                </div>
            </template>
        </public-box>

        <public-box
                v-show="nsjlPopupFlag"
                :closeFlag="'nsjlPopupFlag'"
                :className="'public-farm-oper-table'"
        >
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">农事操作</div>
                <img
                        @click="nsjlPopupFlag = false"
                        src="/img/icon/public-close.png"
                        alt
                        class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="action-bar">
                    <div class="search">
                        <el-select
                                class="select-type"
                                size="small"
                                v-model="farmOperType"
                                placeholder="选择农事类型"
                        >
                            <el-option
                                    v-for="(item, index) in farmingList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.type"
                            ></el-option>
                        </el-select>

                        <el-select
                                class="select-plot"
                                size="small"
                                v-model="farmPlotId"
                                placeholder="选择地块"
                        >
                            <el-option
                                    v-for="(item, index) in plotNumArray"
                                    :key="index"
                                    :label="item.landName"
                                    :value="item.id"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="btn-grounp">
                        <el-button
                                size="small"
                                class="search"
                                type="primary"
                                icon="el-icon-search"
                                @click="farmSelectList"
                        >查询</el-button>
                        <el-button
                                size="small"
                                class="reset"
                                type="info"
                                icon="el-icon-refresh-right"
                                @click="farmResetList"
                        >重置</el-button>
                    </div>
                </div>
                <div class="table-list">
                    <div class="t-header">
                        <div>农事类型</div>
                        <div>地块</div>
                        <div>备注</div>
                        <div>农资</div>
                        <div>作业方式</div>
                        <div>农事操作时间</div>
                        <div>创建时间</div>
                        <div>操作人</div>
                    </div>
                    <div class="t-body">
                        <div class="table-list" v-for="(item, index) in farmOperList" :key="index">
                            <div>{{item.typeName}}</div>
                            <div>{{item.landName}}</div>
                            <div>{{item.remarks == '' ? '--' : item.remarks}}</div>
                            <div>{{item.agriculturalName}}</div>
                            <div>{{item.jobWay == 0 ? '人工' : '机械'}}</div>
                            <div>{{item.time}}</div>
                            <div>{{item.createTime.substr(0,10)}}</div>
                            <div>{{item.realName}}</div>
                        </div>
                    </div>
                </div>
            </template>
        </public-box>
        </el-option>
      </el-select>
    </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="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"
        ></statistics-num>
        <statistics-num
          :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"
        ></statistics-num>
      </div>
      <div class="c">
        <div class="time-box">
          <time-box
            :imgUrl="'/img/icon/current.png'"
            :title="'溯源次数'"
            :currentNum="sweepList['todayNum']"
            :subTitle="'昨日溯源次数对比'"
            :contrast="sweepList['yesterdayNum']"
            :upDown="
              sweepList['todayNum'] > sweepList['yesterdayNum'] ? 'up' : 'down'
            "
          ></time-box>
          <time-box
            :imgUrl="'/img/icon/week.png'"
            :title="'溯源次数'"
            :currentNum="sweepList['thisWeekNum']"
            :subTitle="'上周溯源次数对比'"
            :contrast="sweepList['lastWeekNum']"
            :upDown="
              sweepList['thisWeekNum'] > sweepList['lastWeekNum']
                ? 'up'
                : 'down'
            "
          ></time-box>
          <time-box
            :imgUrl="'/img/icon/month.png'"
            :title="'溯源次数'"
            :currentNum="sweepList['thisMonthNum']"
            :subTitle="'上月溯源次数对比'"
            :contrast="sweepList['lastMonthNum']"
            :upDown="
              sweepList['thisMonthNum'] > sweepList['lastMonthNum']
                ? 'up'
                : 'down'
            "
          ></time-box>
        </div>
        <div class="task-box">
          <div class="title">任务总数</div>

          <date-select :type="'taskSelect'"></date-select>

          <div class="echarts-box" id="TaskNumEcharts"></div>
        </div>
        <div class="nz-ncp">
          <div class="title-box">
            <div>
              <div class="item" :class="{ on: nzOrNcp == 'ncp' }">
                <div @click="nzOrNcp = 'ncp'" class="title">农产品投入</div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item" :class="{ on: nzOrNcp == 'nz' }">
                <div @click="nzOrNcp = 'nz'" class="title">农资投入</div>
                <span></span>
              </div>
            </div>
          </div>
          <date-select
            :type="'ncptrSelect'"
            v-if="nzOrNcp == 'ncp'"
          ></date-select>
          <date-select
            :type="'nztrSelect'"
            v-if="nzOrNcp == 'nz'"
          ></date-select>
          <div v-if="nzOrNcp == 'ncp'" class="lists-box">
            <div v-for="(item, index) in ncptr" :key="index">
              <div>{{ index + 1 }}</div>
              <div>{{ item.strainName }}</div>
              <div>{{ item.area }}亩</div>
            </div>
            <!--                        <div>-->
            <!--                            <div>2</div>-->
            <!--                            <div>玉米</div>-->
            <!--                            <div>75.12亩</div>-->
            <!--                        </div>-->
          </div>
          <div v-if="nzOrNcp == 'nz'" class="lists-box">
            <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>
        <div class="trp-ncp">
          <div class="title-box">
            <div>
              <div class="item" :class="{ on: trpOrNcp == 'trp' }">
                <div @click="trpOrNcpChange('trp')" class="title">
                  投入品监管
                </div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item" :class="{ on: trpOrNcp == 'ncp' }">
                <div @click="trpOrNcpChange('ncp')" class="title">
                  农产品监管
                </div>
                <span></span>
              </div>
            </div>

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

          <div class="echarts-box" id="TrpEcharts"></div>
          <!--                    <div v-show="trpOrNcp == 'ncp'" class="echarts-box" id="NcpEcharts"></div>-->
        </div>
      </div>
      <div class="b">
        <div class="cl-sy">
          <div class="title-box">
            <div>
              <div class="item" :class="{ on: cltjOrsym == 'cltj' }">
                <div @click="cltjOrSymChange('cltj')" class="title">
                  产量统计
                </div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item" :class="{ on: cltjOrsym == 'sym' }">
                <div @click="cltjOrSymChange('sym')" class="title">
                  溯源查询趋势图
                </div>
                <span></span>
              </div>
            </div>

            <div class="date">
              <date-select
                :type="'cltjSelect'"
                v-if="cltjOrsym == 'cltj'"
              ></date-select>
              <date-select
                :type="'symSelect'"
                v-if="cltjOrsym == 'sym'"
              ></date-select>
            </div>
          </div>

          <div class="echarts-box" id="ClSyEcharts"></div>
        </div>
        <div class="ns-nz">
          <div class="title-box">
            <div>
              <div class="item" :class="{ on: nsjlOrnz == 'nsjl' }">
                <div @click="nsjlOrnz = 'nsjl'" class="title">农事记录</div>
                <span></span>
              </div>
            </div>
            <div>
              <div class="item" :class="{ on: nsjlOrnz == 'nzcr' }">
                <div @click="nsjlOrnz = 'nzcr'" class="title">
                  农资出入库记录
                </div>
                <span></span>
              </div>
            </div>

            <div
              class="more"
              @click="popDetailedFarming({ type: '', landId: '' })"
            >
              更多
              <img src="/img/icon/more.png" alt />
            </div>
          </div>

          <div v-if="nsjlOrnz == 'nsjl'" class="lists-box">
            <div v-for="(item, index) in farminList" :key="index">
              <div class="t-border"></div>
              <div class="t-item">
                <div>{{ item.typeName }}</div>
                <div>{{ item.time }}</div>
              </div>
              <div class="b-item">
                <div>{{ item.strainName }}</div>
                <div>{{ item.realName }}</div>
                <div>{{ item.landName }}</div>
              </div>
              <div class="b-border"></div>
            </div>
          </div>
          <div v-if="nsjlOrnz == 'nzcr'" class="lists-box">
            <div v-for="(item, index) in stockrecordList" :key="index">
              <div class="t-border"></div>
              <div class="t-item">
                <div>{{ item.agrname }}</div>
                <div>{{ item.time1 }}</div>
              </div>
              <div class="b-item">
                <div>{{ item.spn }}</div>
                <div>{{ item.type1 }}</div>
                <div>{{ item.czr }}</div>
              </div>
              <div class="b-border"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <public-box
      v-show="trpPopupFlag"
      :closeFlag="'trpPopupFlag'"
      :className="'public-farm-oper-table'"
    >
      <template slot="public-box-header">
        <div class="logo"></div>
        <div class="title">投入品监管明细</div>
        <img
          @click="trpPopupFlag = false"
          src="/img/icon/public-close.png"
          alt
          class="close"
        />
      </template>
      <template slot="public-box-content">
        <div class="action-bar">
          <div class="search">
            <el-input
              class="search-input"
              size="small"
              prefix-icon="el-icon-search"
              placeholder="请输入农资"
              v-model="inputTRP_nzname"
            ></el-input>
          </div>
          <div class="btn-grounp">
            <el-button
              size="small"
              class="search"
              type="primary"
              icon="el-icon-search"
              @click="TRP_query"
              >查询</el-button
            >
            <el-button
              size="small"
              class="reset"
              type="info"
              icon="el-icon-refresh-right"
              @click="TRP_refresh"
              >重置</el-button
            >
          </div>
        </div>
        <div class="table-list">
          <div class="t-header">
            <div>农资</div>
            <div>分类</div>
            <div>规格</div>
            <div>库存</div>
            <div>数量</div>
            <div>厂家</div>
          </div>
          <div class="t-body">
            <div
              class="table-list"
              v-for="(item, index) in nztrAll"
              :key="index"
            >
              <div>{{ item.agrname }}</div>
              <div>{{ item.stype }}</div>
              <div>{{ item.spn }}</div>
              <div>{{ item.amount }}{{ item.dic2 }}</div>
              <div>{{ item.cnum }}{{ item.dic1 }}</div>
              <div>{{ item.factoryName }}</div>
            </div>
          </div>
        </div>
      </template>
    </public-box>

    <public-box
      v-show="nzcrPopupFlag"
      :closeFlag="'nzcrPopupFlag'"
      :className="'public-farm-oper-table'"
    >
      <template slot="public-box-header">
        <div class="logo"></div>
        <div class="title">农资出入库记录</div>
        <img
          @click="nzcrPopupFlag = false"
          src="/img/icon/public-close.png"
          alt
          class="close"
        />
      </template>
      <template slot="public-box-content">
        <div class="action-bar">
          <div class="search">
            <el-input
              class="search-input"
              size="small"
              prefix-icon="el-icon-search"
              placeholder="请输入农资"
              v-model="inputNZ_nzname"
            ></el-input>
          </div>
          <div class="btn-grounp">
            <el-button
              size="small"
              class="search"
              type="primary"
              icon="el-icon-search"
              @click="NZCR_query"
              >查询</el-button
            >
            <el-button
              size="small"
              class="reset"
              type="info"
              icon="el-icon-refresh-right"
              @click="NZCR_refresh"
              >重置</el-button
            >
          </div>
        </div>
        <div class="table-list">
          <div class="t-header">
            <div style="width: 225px">农资</div>
            <div>分类</div>
            <div>规格</div>
            <div>类型</div>
            <div>数量</div>
            <div>操作时间</div>
            <div>操作人</div>
          </div>
          <div class="t-body">
            <div
              class="table-list"
              v-for="(item, index) in stockrecordAll"
              :key="index"
            >
              <div style="width: 225px">{{ item.agrname }}</div>
              <div>{{ item.stype == 0 ? "采购入库" : "调拨入库" }}</div>
              <div>{{ item.spn }}</div>
              <div>{{ item.type1 }}</div>
              <div>{{ item.count }}</div>
              <div>{{ item.createTime }}</div>
              <div>{{ item.czr }}</div>
            </div>
          </div>
        </div>
      </template>
    </public-box>

    <public-box
      v-show="ncpPopupFlag"
      :closeFlag="'ncpPopupFlag'"
      :className="'public-farm-oper-table'"
    >
      <template slot="public-box-header">
        <div class="logo"></div>
        <div class="title">农产品监管</div>
        <img
          @click="ncpPopupFlag = false"
          src="/img/icon/public-close.png"
          alt
          class="close"
        />
      </template>
      <template slot="public-box-content">
        <div class="action-bar">
          <div class="search">
            <el-input
              class="search-input"
              size="small"
              prefix-icon="el-icon-search"
              placeholder="请输入农资"
              v-model="inputNCP_nzname"
            ></el-input>
          </div>
          <div class="btn-grounp">
            <el-button
              size="small"
              class="search"
              type="primary"
              icon="el-icon-search"
              @click="NCP_query"
              >查询</el-button
            >
            <el-button
              size="small"
              class="reset"
              type="info"
              icon="el-icon-refresh-right"
              @click="NCP_refresh"
              >重置</el-button
            >
          </div>
        </div>
        <div class="table-list">
          <div class="t-header">
            <div>农资</div>
            <div>作业方式</div>
            <div>采收地块</div>
            <div>类型</div>
            <div>采收数量</div>
            <div>操作时间</div>
            <div>操作人</div>
          </div>
          <div class="t-body">
            <div
              class="table-list"
              v-for="(item, index) in ncpAll"
              :key="index"
            >
              <div>{{ item.strainName }}</div>
              <div>{{ item.jobWay == 0 ? "人工" : "机械" }}</div>
              <div>{{ item.landName }}</div>
              <div>{{ Number(item.leaves) + 1 }}等品</div>
              <div>{{ item.weight }}公斤</div>
              <div>{{ item.createTime }}</div>
              <div>{{ item.realName }}</div>
            </div>
          </div>
        </div>
      </template>
    </public-box>

    <public-box
      v-show="nsjlPopupFlag"
      :closeFlag="'nsjlPopupFlag'"
      :className="'public-farm-oper-table'"
    >
      <template slot="public-box-header">
        <div class="logo"></div>
        <div class="title">农事操作</div>
        <img
          @click="nsjlPopupFlag = false"
          src="/img/icon/public-close.png"
          alt
          class="close"
        />
      </template>
      <template slot="public-box-content">
        <div class="action-bar">
          <div class="search">
            <el-select
              class="select-type"
              size="small"
              v-model="farmOperType"
              placeholder="选择农事类型"
            >
              <el-option
                v-for="(item, index) in farmingList"
                :key="index"
                :label="item.name"
                :value="item.type"
              ></el-option>
            </el-select>

            <el-select
              class="select-plot"
              size="small"
              v-model="farmPlotId"
              placeholder="选择地块"
            >
              <el-option
                v-for="(item, index) in plotNumArray"
                :key="index"
                :label="item.landName"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="btn-grounp">
            <el-button
              size="small"
              class="search"
              type="primary"
              icon="el-icon-search"
              @click="farmSelectList"
              >查询</el-button
            >
            <el-button
              size="small"
              class="reset"
              type="info"
              icon="el-icon-refresh-right"
              @click="farmResetList"
              >重置</el-button
            >
          </div>
        </div>
        <div class="table-list">
          <div class="t-header">
            <div>农事类型</div>
            <div>地块</div>
            <div>备注</div>
            <div>农资</div>
            <div>作业方式</div>
            <div>农事操作时间</div>
            <div>创建时间</div>
            <div>操作人</div>
          </div>
          <div class="t-body">
            <div
              class="table-list"
              v-for="(item, index) in farmOperList"
              :key="index"
            >
              <div>{{ item.typeName }}</div>
              <div>{{ item.landName }}</div>
              <div>{{ item.remarks == "" ? "--" : item.remarks }}</div>
              <div>{{ item.agriculturalName }}</div>
              <div>{{ item.jobWay == 0 ? "人工" : "机械" }}</div>
              <div>{{ item.time }}</div>
              <div>{{ item.createTime.substr(0, 10) }}</div>
              <div>{{ item.realName }}</div>
            </div>
          </div>
        </div>
      </template>
    </public-box>
  </div>
</template>

<script>
import { selectXCount } from '@/api/land/land'
import { selectXCount } from "@/api/land/land";
// eslint-disable-next-line no-unused-vars
import {
    getStockCount,
    statisticsStockAndYield,
    pageCount,
    pageCountNz,
    selectMarketCirculate,
    countTaskNum,
    farmingRecords,
    statisticsStockMonth,
    productsSupervise,
    pageCountNzCrk,
    getSweepRecordStatistics,
    getSweepRecordStatisticsByDayOrMonthOrYear,
    getFarmingRecordList,
    getFarmingStatis,
    getLandList,
    productsSuperviseList,
    farmSelectQuery
} from '@/api/farm/farmingrecord'
  getStockCount,
  statisticsStockAndYield,
  pageCount,
  pageCountNz,
  selectMarketCirculate,
  countTaskNum,
  farmingRecords,
  statisticsStockMonth,
  productsSupervise,
  pageCountNzCrk,
  getSweepRecordStatistics,
  getSweepRecordStatisticsByDayOrMonthOrYear,
  getFarmingRecordList,
  getFarmingStatis,
  getLandList,
  productsSuperviseList,
  farmSelectQuery,
} from "@/api/farm/farmingrecord";

export default {
    data () {
        return {
            landsnum: 0,
            landwnum: 0,
            znum: 0,
            jnStock: 0,
            qnStock: 0,
            byStock: 0,
            // 库存数量统计
            stockTj: 0,
            // 农产品数量统计
            stockNCP: 0,
            // 加工产品数量统计
            stockJG: 0,
            // 产量按月统计
            yieldMonth: [],
            // 年产量统计
            yieldTj: 0,
            // 农产品年产量统计
            yieldNCP: 0,
            // 加工产品年产量统计
            yieldJG: 0,
            // 农产品投入
            ncptr: [],
            nztr: [],
            // 统计市场流通/去年流通量/本月流通量
            salaNumBN: [],
            salaNumBY: [],
            salaNumQN: [],
            // 统计任务总数
            taskNum: [],
            // 农事记录
            farminList: [],
            // 农资出入库记录
            stockrecordList: [],
            // 农产品监管
            NcpJg: [],
            // 溯源次数
            sweepList: {},
            // 溯源趋势
            sweepTrend: [],
            nzOrNcp: 'ncp',
            trpOrNcp: 'trp',
            nsjlOrnz: 'nsjl',
            cltjOrsym: 'cltj',
            // 投入品监管窗体控制
            trpPopupFlag: false,
            // 农事记录窗体控制
            nsjlPopupFlag: false,
            // 农资出入记录窗体控制
            nzcrPopupFlag: false,
            // 农产品监管窗体控制
            ncpPopupFlag: false,
            // 农事操作记录列表
            farmOperList: [],
            // 选择的农事类型
            farmOperType: '',
            // 农场地块id
            farmPlotId: '',
            // 地块下拉
            plotNumArray: [],
            // 农事类型下拉
            farmingList: [],
            // 农资投入记录窗体
            nztrAll: [],
            // 农资出入库记录弹窗
            stockrecordAll: [],
            // 农产品监管记录弹窗
            ncpAll: [],
            // 农场下拉
            farmSelect: [],
            // 所选值
            farmValue: 1,
            inputNZ_nzname: '',
            inputTRP_nzname: '',
            inputNCP_nzname: ''
  data() {
    return {
      landsnum: 0,
      landwnum: 0,
      znum: 0,
      jnStock: 0,
      qnStock: 0,
      byStock: 0,
      // 库存数量统计
      stockTj: 0,
      // 农产品数量统计
      stockNCP: 0,
      // 加工产品数量统计
      stockJG: 0,
      // 产量按月统计
      yieldMonth: [],
      // 年产量统计
      yieldTj: 0,
      // 农产品年产量统计
      yieldNCP: 0,
      // 加工产品年产量统计
      yieldJG: 0,
      // 农产品投入
      ncptr: [],
      nztr: [],
      // 统计市场流通/去年流通量/本月流通量
      salaNumBN: [],
      salaNumBY: [],
      salaNumQN: [],
      // 统计任务总数
      taskNum: [],
      // 农事记录
      farminList: [],
      // 农资出入库记录
      stockrecordList: [],
      // 农产品监管
      NcpJg: [],
      // 溯源次数
      sweepList: {},
      // 溯源趋势
      sweepTrend: [],
      nzOrNcp: "ncp",
      trpOrNcp: "trp",
      nsjlOrnz: "nsjl",
      cltjOrsym: "cltj",
      // 投入品监管窗体控制
      trpPopupFlag: false,
      // 农事记录窗体控制
      nsjlPopupFlag: false,
      // 农资出入记录窗体控制
      nzcrPopupFlag: false,
      // 农产品监管窗体控制
      ncpPopupFlag: false,
      // 农事操作记录列表
      farmOperList: [],
      // 选择的农事类型
      farmOperType: "",
      // 农场地块id
      farmPlotId: "",
      // 地块下拉
      plotNumArray: [],
      // 农事类型下拉
      farmingList: [],
      // 农资投入记录窗体
      nztrAll: [],
      // 农资出入库记录弹窗
      stockrecordAll: [],
      // 农产品监管记录弹窗
      ncpAll: [],
      // 农场下拉
      farmSelect: [],
      // 所选值
      farmValue: 1,
      inputNZ_nzname: "",
      inputTRP_nzname: "",
      inputNCP_nzname: "",
    };
  },
  created() {
    // 农场下拉列表
    this.farmSelectQuery();

    // 默认查询第一个农场数据
    this.AllDataUpdate();
  },
  mounted() {},
  methods: {
    // 农场下拉选中事件
    farmSelectChange(e) {
      this.AllDataUpdate();
    },
    // 全局数据刷新事件
    AllDataUpdate() {
      // 获取当前时间
      var date = new Date();
      var y = date.getFullYear() + "-" + this.checkTime(date.getMonth() + 1);
      var n = date.getFullYear() + "";
      this.selectXCount();
      this.getStockCount();
      // 年产量与库存数量
      this.statisticsStockAndYield(n);
      // 按月统计产量
      this.statisticsStockMonth(y);
      // 农产品投入
      this.pageCount(y);
      // 农资投入
      this.pageCountNz(y);
      // 统计市场流通/去年流通量/本月流通量
      this.selectMarketCirculate(n);
      // 统计任务总数
      this.countTaskNum(y);
      // 溯源趋势统计
      this.getSweepRecordStatisticsByDayOrMonthOrYear(y);
      // 农事操作
      this.farmingRecords();
      // 农产品监管
      this.productsSupervise(n);
      // 农资出入库记录
      this.pageCountNzCrk();
      // 溯源次数统计
      this.getSweepRecordStatistics();
    },
    // 农场下拉列表
    farmSelectQuery() {
      var params = {};
      params.current = "1";
      params.size = "999";
      farmSelectQuery(Object.assign(params)).then((res) => {
        this.farmSelect = res.data.data.records;
      });
    },
    // 投入品监管明细弹窗
    popDetailedSupervise() {
      if (this.trpOrNcp == "trp") {
        this.trpPopupFlag = true;
      } else {
        var params = {};
        params.codes = "000000";
        params.farmId = this.farmValue;
        params.current = "1";
        params.size = "999";
        productsSuperviseList(Object.assign(params)).then((res) => {
          this.ncpPopupFlag = true;
          this.ncpAll = res.data.data.records;
        });
      }
    },
    // 农事记录明细弹窗
    popDetailedFarming(item) {
      if (this.nsjlOrnz == "nsjl") {
        this.getFarmingStatis();
        this.getLandList();
        getFarmingRecordList({ type: item.type, landId: item.landId }).then(
          (res) => {
            this.farmOperList = res.data.data;
            this.nsjlPopupFlag = true;
          }
        );
      } else {
        var params = {};
        params.codes = "000000";
        params.farmId = this.farmValue;
        params.current = "1";
        params.size = "999";
        pageCountNzCrk(Object.assign(params)).then((res) => {
          this.nzcrPopupFlag = true;
          this.stockrecordAll = res.data.data.records;
        });
      }
    },
    // 农事操作搜索
    farmSelectList() {
      this.farmOperClick({ type: this.farmOperType, landId: this.farmPlotId });
    },
    // 农事操作重置
    farmResetList() {
      this.farmOperType = "";
      this.farmPlotId = "";
      this.farmOperClick({ type: this.farmOperType, landId: this.farmPlotId });
    },
    farmOperClick(item) {
      getFarmingRecordList({ type: item.type, landId: item.landId }).then(
        (res) => {
          this.farmOperList = res.data.data;
          this.farmOperPopup = true;
        }
      );
    },
    created () {
        // 农场下拉列表
        this.farmSelectQuery()

        // 默认查询第一个农场数据
        this.AllDataUpdate()
    // 任务总数时间查询
    getTaskTime(e) {
      this.countTaskNum(e);
    },
    mounted () {

    // 农产品投入时间查询
    getNcptrTime(e) {
      this.pageCount(e);
    },
    methods: {
        // 农场下拉选中事件
        farmSelectChange (e) {
            this.AllDataUpdate()
        },
        // 全局数据刷新事件
        AllDataUpdate () {
            // 获取当前时间
            var date = new Date()
            var y = date.getFullYear() + '-' + this.checkTime(date.getMonth() + 1)
            var n = date.getFullYear() + ''
            this.selectXCount()
            this.getStockCount()
            // 年产量与库存数量
            this.statisticsStockAndYield(n)
            // 按月统计产量
            this.statisticsStockMonth(y)
            // 农产品投入
            this.pageCount(y)
            // 农资投入
            this.pageCountNz(y)
            // 统计市场流通/去年流通量/本月流通量
            this.selectMarketCirculate(n)
            // 统计任务总数
            this.countTaskNum(y)
            // 溯源趋势统计
            this.getSweepRecordStatisticsByDayOrMonthOrYear(y)
            // 农事操作
            this.farmingRecords()
            // 农产品监管
            this.productsSupervise(n)
            // 农资出入库记录
            this.pageCountNzCrk()
            // 溯源次数统计
            this.getSweepRecordStatistics()
        },
        // 农场下拉列表
        farmSelectQuery () {
            var params = {}
            params.current = '1'
            params.size = '999'
            farmSelectQuery(Object.assign(params)).then((res) => {
                this.farmSelect = res.data.data.records
            })
        },
        // 投入品监管明细弹窗
        popDetailedSupervise () {
            if (this.trpOrNcp == 'trp') {
                this.trpPopupFlag = true
            } else {
                var params = {}
                params.codes = '000000'
                params.farmId = this.farmValue
                params.current = '1'
                params.size = '999'
                productsSuperviseList(Object.assign(params)).then((res) => {
                    this.ncpPopupFlag = true
                    this.ncpAll = res.data.data.records
                })
            }
        },
        // 农事记录明细弹窗
        popDetailedFarming (item) {
            if (this.nsjlOrnz == 'nsjl') {
                this.getFarmingStatis()
                this.getLandList()
                getFarmingRecordList({ type: item.type, landId: item.landId }).then(res => {
                    this.farmOperList = res.data.data
                    this.nsjlPopupFlag = true
                })
            } else {
                    var params = {}
                    params.codes = '000000'
                    params.farmId = this.farmValue
                    params.current = '1'
                    params.size = '999'
                    pageCountNzCrk(Object.assign(params)).then((res) => {
                        this.nzcrPopupFlag = true
                        this.stockrecordAll = res.data.data.records
                    })
            }
        },
        // 农事操作搜索
        farmSelectList () {
            this.farmOperClick({ type: this.farmOperType, landId: this.farmPlotId })
        },
        // 农事操作重置
        farmResetList () {
            this.farmOperType = ''
            this.farmPlotId = ''
            this.farmOperClick({ type: this.farmOperType, landId: this.farmPlotId })
        },
        farmOperClick (item) {
            getFarmingRecordList({ type: item.type, landId: item.landId }).then(res => {
                this.farmOperList = res.data.data
                this.farmOperPopup = true
            })
        },
        // 任务总数时间查询
        getTaskTime (e) {
            this.countTaskNum(e)
        },
        // 农产品投入时间查询
        getNcptrTime (e) {
            this.pageCount(e)
        },
        // 农资投入时间查询
        getNztrTime (e) {
            this.pageCountNz(e)
        },
        // 产量统计时间查询
        getCltjTime (e) {
            this.statisticsStockMonth(e)
        },
        // 溯源趋势时间查询
        getSymTime (e) {
            this.getSweepRecordStatisticsByDayOrMonthOrYear(e)
        },
        // 农资出库记录查询按钮
        NZCR_query () {
            var params = {}
            params.codes = '000000'
            params.farmId = this.farmValue
            params.agrname = this.inputNZ_nzname
            params.current = '1'
            params.size = '999'
            pageCountNzCrk(Object.assign(params)).then((res) => {
                this.nzcrPopupFlag = true
                this.stockrecordAll = res.data.data.records
            })
        },
        // 农资出库记录重置按钮
        NZCR_refresh () {
            var params = {}
            this.inputNZ_nzname = ''
            params.codes = '000000'
            params.farmId = this.farmValue
            params.current = '1'
            params.size = '999'
            pageCountNzCrk(Object.assign(params)).then((res) => {
                this.nzcrPopupFlag = true
                this.stockrecordAll = res.data.data.records
            })
        },
        // 投入品监管查询按钮
        TRP_query () {
            var params = {}
            params.codes = '000000'
            params.agrname = this.inputTRP_nzname
            params.farmId = this.farmValue
            pageCountNz(Object.assign(params)).then((res) => {
                this.nztrAll = res.data.data.records
            })
        },
        // 投入品监管重置按钮
        TRP_refresh () {
            var params = {}
            params.codes = '000000'
            this.inputTRP_nzname = ''
            params.farmId = this.farmValue
            pageCountNz(Object.assign(params)).then((res) => {
                this.nztrAll = res.data.data.records
            })
        },
        // 农产品监管查询按钮
        NCP_query () {
            var params = {}
            params.codes = '000000'
            params.strainName = this.inputNCP_nzname
            params.farmId = this.farmValue
            params.current = '1'
            params.size = '999'
            productsSuperviseList(Object.assign(params)).then((res) => {
                this.ncpPopupFlag = true
                this.ncpAll = res.data.data.records
            })
        },
        // 农产品监管重置按钮
        NCP_refresh () {
            var params = {}
            params.codes = '000000'
            this.inputNCP_nzname = ''
            params.farmId = this.farmValue
            params.current = '1'
            params.size = '999'
            productsSuperviseList(Object.assign(params)).then((res) => {
                this.ncpPopupFlag = true
                this.ncpAll = res.data.data.records
            })
        },
        initBar (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)
            var y = []
            for (let i = 0; i < that.taskNum.length; i++) {
                y.push(that.taskNum[i].count)
            }
    // 农资投入时间查询
    getNztrTime(e) {
      this.pageCountNz(e);
    },
    // 产量统计时间查询
    getCltjTime(e) {
      this.statisticsStockMonth(e);
    },
    // 溯源趋势时间查询
    getSymTime(e) {
      this.getSweepRecordStatisticsByDayOrMonthOrYear(e);
    },
    // 农资出库记录查询按钮
    NZCR_query() {
      var params = {};
      params.codes = "000000";
      params.farmId = this.farmValue;
      params.agrname = this.inputNZ_nzname;
      params.current = "1";
      params.size = "999";
      pageCountNzCrk(Object.assign(params)).then((res) => {
        this.nzcrPopupFlag = true;
        this.stockrecordAll = res.data.data.records;
      });
    },
    // 农资出库记录重置按钮
    NZCR_refresh() {
      var params = {};
      this.inputNZ_nzname = "";
      params.codes = "000000";
      params.farmId = this.farmValue;
      params.current = "1";
      params.size = "999";
      pageCountNzCrk(Object.assign(params)).then((res) => {
        this.nzcrPopupFlag = true;
        this.stockrecordAll = res.data.data.records;
      });
    },
    // 投入品监管查询按钮
    TRP_query() {
      var params = {};
      params.codes = "000000";
      params.agrname = this.inputTRP_nzname;
      params.farmId = this.farmValue;
      pageCountNz(Object.assign(params)).then((res) => {
        this.nztrAll = res.data.data.records;
      });
    },
    // 投入品监管重置按钮
    TRP_refresh() {
      var params = {};
      params.codes = "000000";
      this.inputTRP_nzname = "";
      params.farmId = this.farmValue;
      pageCountNz(Object.assign(params)).then((res) => {
        this.nztrAll = res.data.data.records;
      });
    },
    // 农产品监管查询按钮
    NCP_query() {
      var params = {};
      params.codes = "000000";
      params.strainName = this.inputNCP_nzname;
      params.farmId = this.farmValue;
      params.current = "1";
      params.size = "999";
      productsSuperviseList(Object.assign(params)).then((res) => {
        this.ncpPopupFlag = true;
        this.ncpAll = res.data.data.records;
      });
    },
    // 农产品监管重置按钮
    NCP_refresh() {
      var params = {};
      params.codes = "000000";
      this.inputNCP_nzname = "";
      params.farmId = this.farmValue;
      params.current = "1";
      params.size = "999";
      productsSuperviseList(Object.assign(params)).then((res) => {
        this.ncpPopupFlag = true;
        this.ncpAll = res.data.data.records;
      });
    },
    initBar(dom) {
      const that = this;
      const chartDom = document.getElementById(dom);
      const myChart = this.$echarts.init(chartDom);
      var y = [];
      for (let i = 0; i < that.taskNum.length; i++) {
        y.push(that.taskNum[i].count);
      }

            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: {
                    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: [
      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: {
          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,
              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, [
                    {
                        type: 'bar',
                        barWidth: 32,
                        data: y,
                        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)
        },

        initTrpBar (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)
            myChart.clear()
            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)'
                        }
                      offset: 0,
                      color: colorList[index][0],
                    },
                    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,
                            position: 'top',
                            textStyle: {
                                color: 'rgba(255,255,255,.4)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color:
                      offset: 0.5,
                      color: colorList[index][0],
                    },
                    {
                      offset: 1,
                      color: colorList[index][1],
                    },
                  ]);
                },
              },
            },
          },
        ],
      };

                                    new that.$echarts.graphic.LinearGradient(
                                        // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                                        // 通过修改前4个参数，可以实现不同的渐变方向
                                        /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
      option && myChart.setOption(option);
    },

    initTrpBar(dom) {
      const that = this;
      const chartDom = document.getElementById(dom);
      const myChart = this.$echarts.init(chartDom);
      myChart.clear();
      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,
          },
        },
        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,
              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)
        },

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

            var data = that.NcpJg
            var dj = ['一等品', '二等品', '三等品', '四等品', '五等品']
            var echartData = []
            var sum = 0
            for (var i = 0; i < 5; i++) {
                sum += Number(data[i])
                echartData.push({
                    name: dj[i],
                    value: data[i]
                })
            }
            const option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    padding: [50, 100, 0, 0],
                    orient: 'vertical',
                    left: 'right'
                },
                series: [
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                        name: '品质',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                formatter: '产品总数\n\n' + sum,
                                position: 'center',
                                lineHight: 30
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: echartData
                    }
                ]
            }

            option && myChart.setOption(option)
        },

        initClSyBar (dom) {
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)
            myChart.clear()
            var data = []
            var data1 = [
                '0',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0',
                '0'
            ]
            var data2 = []
            var ncp = this.yieldMonth
            for (let i = 0; i < ncp.length; i++) {
                data.push(ncp[i].time)
                data2.push(ncp[i].num)
            }

            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)'
                        }
                      // 代表渐变色从正上方开始
                      offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                      color: "#24A5DF",
                    }, // 柱图渐变色
                    {
                      offset: 1, // 指100%处的颜色
                      color: "#01E2D2",
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#697B89',
                            width: 1
                        }
                    }
                },
                yAxis: [
                    {
                        min: 0,
                        type: 'value',
                        axisLabel: {
                            interval: 0,
                            show: true,
                            textStyle: {
                                color: '#B4B5BE'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89',
                                width: 1
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(62,81,97, .5)',
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '加工产品',
                        type: 'bar',
                        barWidth: 14,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#E29646'
                            }
                        },
                        data: data1
                    },
                    {
                        name: '农产品',
                        type: 'bar',
                        barWidth: 14,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#6AE081'
                            }
                        },
                        data: data2
                    }
                ]
            }
                  ]
                ),
              },
            },
          },
        ],
      };

            option && myChart.setOption(option)
        },
        initSymyBar (dom) {
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)
            myChart.clear()
      option && myChart.setOption(option);
    },

            var data = this.sweepTrend
            var x = []
            var y = []
            for (var i = 0; i < data.length; i++) {
                y.push(data[i].num)
                x.push(data[i].time)
            }
    initNcpBar(dom) {
      const that = this;
      const chartDom = document.getElementById(dom);
      const myChart = this.$echarts.init(chartDom);
      myChart.clear();

            var option = {
                grid: {
                    top: '10%',
                    right: '0%',
                    left: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: x
                },
                yAxis: [
                    {
                        min: 0,
                        type: 'value',
                        axisLabel: {
                            interval: 0,
                            show: true,
                            textStyle: {
                                color: '#B4B5BE'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89',
                                width: 1
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(62,81,97, .5)',
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        data: y,
                        type: 'line',
                        smooth: true,
                        areaStyle: {}
                    }
                ]
            }
            option && myChart.setOption(option)
      var data = that.NcpJg;
      var dj = ["一等品", "二等品", "三等品", "四等品", "五等品"];
      var echartData = [];
      var sum = 0;
      for (var i = 0; i < 5; i++) {
        sum += Number(data[i]);
        echartData.push({
          name: dj[i],
          value: data[i],
        });
      }
      const option = {
        tooltip: {
          trigger: "item",
        },
        // 农场使用率
        selectXCount () {
            // eslint-disable-next-line no-unused-vars
            var that = this
            var farmId = that.farmValue
            selectXCount(farmId).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)
            })
        legend: {
          top: "5%",
          padding: [50, 100, 0, 0],
          orient: "vertical",
          left: "right",
        },
        // 农资使用概况
        getStockCount () {
            var that = this
            var farmId = that.farmValue
            getStockCount(farmId).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)
            })
        },
        // 大屏经营概况库存数量与年产量
        statisticsStockAndYield (year) {
            var params = {}
            params.tenantId = '000000'
            params.farmId = this.farmValue
            params.year = year
            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
        series: [
          {
            name: "品质",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "产品总数\n\n" + sum,
                position: "center",
                lineHight: 30,
              },
            },
            labelLine: {
              show: false,
            },
            data: echartData,
          },
        ],
      };

                this.yieldNCP = res.data.data.ncpNcl
                this.yieldJG = res.data.data.jgNcl
                this.yieldTj = res.data.data.ncpNcl + res.data.data.jgNcl
            })
      option && myChart.setOption(option);
    },

    initClSyBar(dom) {
      const chartDom = document.getElementById(dom);
      const myChart = this.$echarts.init(chartDom);
      myChart.clear();
      var data = [];
      var data1 = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
      var data2 = [];
      var ncp = this.yieldMonth;
      for (let i = 0; i < ncp.length; i++) {
        data.push(ncp[i].time);
        data2.push(ncp[i].num);
      }

      const option = {
        grid: {
          top: "10%",
          right: "0%",
          left: "0%",
          bottom: "0%",
          containLabel: true,
        },
        // 按月统计产量
        statisticsStockMonth (e) {
            var params = {}
            params.tenantId = '000000'
            params.farmId = this.farmValue
            params.year = e
            statisticsStockMonth(Object.assign(params)).then((res) => {
                this.yieldMonth = res.data.data
                this.initClSyBar('ClSyEcharts')
            })
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 农产品监管
        productsSupervise (year) {
            var params = {}
            params.tenantId = '000000'
            params.farmId = this.farmValue
            params.year = year
            productsSupervise(Object.assign(params)).then((res) => {
                this.NcpJg = res.data.data
            })
        legend: {
          left: "center",
          data: ["加工产品", "农产品"],
          textStyle: {
            color: "#A9D1D7",
          },
        },
        // 农产品投入
        pageCount (e) {
            var params = {}
            params.tenantId = '000000'
            params.farmId = this.farmValue
            params.year = e
            params.status = '1'
            pageCount(Object.assign(params)).then((res) => {
                this.ncptr = res.data.data
            })
        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,
            },
          },
        },
        // 农资投入
        pageCountNz (e) {
            var params = {}
            params.codes = '000000'
            params.farmId = this.farmValue
            params.year = e
            pageCountNz(Object.assign(params)).then((res) => {
                this.nztr = res.data.data.records
                this.nztrAll = res.data.data.records
                // 投入品监管图表
                this.initTrpBar('TrpEcharts')
            })
        yAxis: [
          {
            min: 0,
            type: "value",
            axisLabel: {
              interval: 0,
              show: true,
              textStyle: {
                color: "#B4B5BE",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#697B89",
                width: 1,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(62,81,97, .5)",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "加工产品",
            type: "bar",
            barWidth: 14,
            silent: true,
            itemStyle: {
              normal: {
                color: "#E29646",
              },
            },
            data: data1,
          },
          {
            name: "农产品",
            type: "bar",
            barWidth: 14,
            silent: true,
            itemStyle: {
              normal: {
                color: "#6AE081",
              },
            },
            data: data2,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initSymyBar(dom) {
      const chartDom = document.getElementById(dom);
      const myChart = this.$echarts.init(chartDom);
      myChart.clear();

      var data = this.sweepTrend;
      var x = [];
      var y = [];
      for (var i = 0; i < data.length; i++) {
        y.push(data[i].num);
        x.push(data[i].time);
      }

      var option = {
        grid: {
          top: "10%",
          right: "0%",
          left: "0%",
          bottom: "0%",
          containLabel: true,
        },
        // 统计市场流通/去年流通量/本月流通量
        selectMarketCirculate (year) {
            var params = {}
            params.codes = '000000'
            params.farmId = this.farmValue
            params.year = year
            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
            })
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: x,
        },
        // 统计任务总数
        countTaskNum (year) {
            var params = {}
            params.codes = '000000'
            params.farmId = this.farmValue
            params.year = year
            countTaskNum(Object.assign(params)).then((res) => {
                this.taskNum = res.data.data
                this.initBar('TaskNumEcharts')
            })
        },
        // 农事记录
        farmingRecords () {
            var params = {}
            params.tenantId = '000000'
            params.farmId = this.farmValue
            params.current = '1'
            params.size = '3'
            farmingRecords(Object.assign(params)).then((res) => {
                var data = []
                for (var i = 0; i < res.data.data.length; i++) {
                    data.push(res.data.data[i])
                    if (i == 3) {
                        break
                    }
                }
                this.farminList = data
            })
        },
        // 农资出入库记录
        pageCountNzCrk () {
            var params = {}
            params.codes = '000000'
            params.farmId = this.farmValue
            params.current = '1'
            params.size = '3'
            pageCountNzCrk(Object.assign(params)).then((res) => {
                this.stockrecordList = res.data.data.records
            })
        },
        // 溯源次数统计
        getSweepRecordStatistics () {
            var params = {}
            // 农场id
            params.farmId = this.farmValue
            getSweepRecordStatistics(Object.assign(params)).then((res) => {
                this.sweepList = res.data.data
            })
        },
        // 溯源趋势统计
        getSweepRecordStatisticsByDayOrMonthOrYear (year) {
            var params = {}
            // 农场id
            params.farmId = this.farmValue
            params.time = year
            getSweepRecordStatisticsByDayOrMonthOrYear(Object.assign(params)).then((res) => {
                this.sweepTrend = res.data.data
                if (this.cltjOrsym == 'sym') {
                    this.initSymyBar('ClSyEcharts')
                }
            })
        },
        // 监管图表切换
        trpOrNcpChange (item) {
            var that = this
            that.trpOrNcp = item
            if (item == 'trp') {
                that.initTrpBar('TrpEcharts')
            } else {
                // 农产品监管
                that.initNcpBar('TrpEcharts')
            }
        },
        // 产量统计图表切换
        cltjOrSymChange (item) {
            var that = this
            that.cltjOrsym = item
            if (item == 'cltj') {
                this.initClSyBar('ClSyEcharts')
            } else {
                // 溯源码
                this.initSymyBar('ClSyEcharts')
            }
        },
        // 本年农事操作记录，分组统计
        getFarmingStatis () {
            var that = this
            var farmId = that.farmValue
            getFarmingStatis(farmId).then((res) => {
                that.farmingList = res.data.data
            })
        },
        // 地块下拉
        getLandList () {
            var params = {}
            // 农场id
            params.farmId = this.farmValue
            getLandList(Object.assign(params)).then(res => {
                this.plotNumArray = res.data.data
            })
        },
        checkTime (i) {
            if (i < 10) {
                i = '0' + i
            }
            return i
        yAxis: [
          {
            min: 0,
            type: "value",
            axisLabel: {
              interval: 0,
              show: true,
              textStyle: {
                color: "#B4B5BE",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#697B89",
                width: 1,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(62,81,97, .5)",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            data: y,
            type: "line",
            smooth: true,
            areaStyle: {},
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 农场使用率
    selectXCount() {
      // eslint-disable-next-line no-unused-vars
      var that = this;
      var farmId = that.farmValue;
      selectXCount(farmId).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 farmId = that.farmValue;
      getStockCount(farmId).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);
      });
    },
    // 大屏经营概况库存数量与年产量
    statisticsStockAndYield(year) {
      var params = {};
      params.tenantId = "000000";
      params.farmId = this.farmValue;
      params.year = year;
      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;
      });
    },
    // 按月统计产量
    statisticsStockMonth(e) {
      var params = {};
      params.tenantId = "000000";
      params.farmId = this.farmValue;
      params.year = e;
      statisticsStockMonth(Object.assign(params)).then((res) => {
        this.yieldMonth = res.data.data;
        this.initClSyBar("ClSyEcharts");
      });
    },
    // 农产品监管
    productsSupervise(year) {
      var params = {};
      params.tenantId = "000000";
      params.farmId = this.farmValue;
      params.year = year;
      productsSupervise(Object.assign(params)).then((res) => {
        this.NcpJg = res.data.data;
      });
    },
    // 农产品投入
    pageCount(e) {
      var params = {};
      params.tenantId = "000000";
      params.farmId = this.farmValue;
      params.year = e;
      params.status = "1";
      pageCount(Object.assign(params)).then((res) => {
        this.ncptr = res.data.data;
      });
    },
    // 农资投入
    pageCountNz(e) {
      var params = {};
      params.codes = "000000";
      params.farmId = this.farmValue;
      params.year = e;
      pageCountNz(Object.assign(params)).then((res) => {
        this.nztr = res.data.data.records;
        this.nztrAll = res.data.data.records;
        // 投入品监管图表
        this.initTrpBar("TrpEcharts");
      });
    },
    // 统计市场流通/去年流通量/本月流通量
    selectMarketCirculate(year) {
      var params = {};
      params.codes = "000000";
      params.farmId = this.farmValue;
      params.year = year;
      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(year) {
      var params = {};
      params.codes = "000000";
      params.farmId = this.farmValue;
      params.year = year;
      countTaskNum(Object.assign(params)).then((res) => {
        this.taskNum = res.data.data;
        this.initBar("TaskNumEcharts");
      });
    },
    // 农事记录
    farmingRecords() {
      var params = {};
      params.tenantId = "000000";
      params.farmId = this.farmValue;
      params.current = "1";
      params.size = "3";
      farmingRecords(Object.assign(params)).then((res) => {
        var data = [];
        for (var i = 0; i < res.data.data.length; i++) {
          data.push(res.data.data[i]);
          if (i == 3) {
            break;
          }
        }
    }
}
        this.farminList = data;
      });
    },
    // 农资出入库记录
    pageCountNzCrk() {
      var params = {};
      params.codes = "000000";
      params.farmId = this.farmValue;
      params.current = "1";
      params.size = "3";
      pageCountNzCrk(Object.assign(params)).then((res) => {
        this.stockrecordList = res.data.data.records;
      });
    },
    // 溯源次数统计
    getSweepRecordStatistics() {
      var params = {};
      // 农场id
      params.farmId = this.farmValue;
      getSweepRecordStatistics(Object.assign(params)).then((res) => {
        this.sweepList = res.data.data;
      });
    },
    // 溯源趋势统计
    getSweepRecordStatisticsByDayOrMonthOrYear(year) {
      var params = {};
      // 农场id
      params.farmId = this.farmValue;
      params.time = year;
      getSweepRecordStatisticsByDayOrMonthOrYear(Object.assign(params)).then(
        (res) => {
          this.sweepTrend = res.data.data;
          if (this.cltjOrsym == "sym") {
            this.initSymyBar("ClSyEcharts");
          }
        }
      );
    },
    // 监管图表切换
    trpOrNcpChange(item) {
      var that = this;
      that.trpOrNcp = item;
      if (item == "trp") {
        that.initTrpBar("TrpEcharts");
      } else {
        // 农产品监管
        that.initNcpBar("TrpEcharts");
      }
    },
    // 产量统计图表切换
    cltjOrSymChange(item) {
      var that = this;
      that.cltjOrsym = item;
      if (item == "cltj") {
        this.initClSyBar("ClSyEcharts");
      } else {
        // 溯源码
        this.initSymyBar("ClSyEcharts");
      }
    },
    // 本年农事操作记录，分组统计
    getFarmingStatis() {
      var that = this;
      var farmId = that.farmValue;
      getFarmingStatis(farmId).then((res) => {
        that.farmingList = res.data.data;
      });
    },
    // 地块下拉
    getLandList() {
      var params = {};
      // 农场id
      params.farmId = this.farmValue;
      getLandList(Object.assign(params)).then((res) => {
        this.plotNumArray = res.data.data;
      });
    },
    checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    },
  },
};
</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;

        /deep/.el-input__inner {
            background-color: #0e3960;
            color: #66dde9;
            border: 1px solid #00f5fe;
        }

        /deep/.popper__arrow::after {
            border-bottom-color: #00f5fe;
            top:0px;
        }
        /deep/.el-select-dropdown {
            //   background-color: transparent;
            border: 1px solid #00f5fe;
        }
        /deep/.el-icon-arrow-up:before{
            color: #00f5fe;
        }
    /deep/.el-input__inner {
      background-color: #0e3960;
      color: #66dde9;
      border: 1px solid #00f5fe;
    }

    .main-content {
        margin-top: 10px;
        height: calc(100% - 46px);
    /deep/.popper__arrow::after {
      border-bottom-color: #00f5fe;
      top: 0px;
    }
    /deep/.el-select-dropdown {
      //   background-color: transparent;
      border: 1px solid #00f5fe;
    }
    /deep/.el-icon-arrow-up:before {
      color: #00f5fe;
    }
    .el-select-dropdown__item:hover,
    .el-select-dropdown__item.hover {
      background-color: #00f5fe;
    }
  }

  .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;
      }
    }

    .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;

            .title {
              cursor: pointer;
            }

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

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

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

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

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

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

            & > div:first-child {
                margin-left: 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;

                        .title {
                            cursor: pointer;
                        }

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

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

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

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

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

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

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

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

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

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

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

                        .title {
                            cursor: pointer;
                        }

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

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

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

                    .more {
                        position: absolute;
                        top: 0;
                        left: auto;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        font-size: 16px;
                        cursor:pointer;
                        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);
            .title {
              cursor: pointer;
            }

            & > div:first-child {
                margin-left: 0;
                flex: 1;
            .on {
              position: relative;
              font-weight: bold;
              color: #7ccfd6;

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

            & > div:last-child {
                width: 444px;
          & > 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;
            cursor: pointer;
            img {
              margin-left: 6px;
              vertical-align: middle;
            }

            .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;
                        cursor:pointer;
                        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;

            .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;
            cursor: pointer;
            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>