/*
|
* @Author: Morpheus
|
* @Date: 2022-05-11 15:00:23
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2022-07-13 16:16:41
|
* 经营主体监管
|
*/
|
<template>
|
<div class="container">
|
<div class="toggle-plot">
|
<el-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"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="main-content">
|
<div class="t">
|
<statistics-num
|
:className="'td'"
|
:totalRegion="znum"
|
:imgUrl="'../../../zhny-dp/img/icon/mj.png'"
|
:unit="'亩'"
|
:title="'土地面积'"
|
:subOneTitle="'使用面积'"
|
:subOneNum="landsnum"
|
:subTwoTitle="'未使用面积'"
|
:subTwoNum="landwnum"
|
></statistics-num>
|
<statistics-num
|
:className="'kc'"
|
:totalRegion="stockTj"
|
:imgUrl="'../../../zhny-dp/img/icon/kc.png'"
|
:unit="'公斤'"
|
:title="'库存数量'"
|
:subOneTitle="'农产品'"
|
:subOneNum="stockNCP"
|
:subTwoTitle="'加工产品'"
|
:subTwoNum="stockJG"
|
></statistics-num>
|
<statistics-num
|
:className="'nz'"
|
:totalRegion="jnStock"
|
:imgUrl="'../../../zhny-dp/img/icon/syl.png'"
|
:unit="'公斤'"
|
:title="'农资年使用量'"
|
:subOneTitle="'去年使用'"
|
:subOneNum="qnStock"
|
:subTwoTitle="'本月使用'"
|
:subTwoNum="byStock"
|
></statistics-num>
|
<statistics-num
|
:className="'cl'"
|
:totalRegion="yieldTj"
|
:imgUrl="'../../../zhny-dp/img/icon/ncl.png'"
|
:unit="'公斤'"
|
:title="'年产量'"
|
:subOneTitle="'农产品'"
|
:subOneNum="yieldNCP"
|
:subTwoTitle="'加工产品'"
|
:subTwoNum="yieldJG"
|
></statistics-num>
|
<statistics-num
|
:className="'lt'"
|
:totalRegion="salaNumBN"
|
:imgUrl="'../../../zhny-dp/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="'../../../zhny-dp/img/icon/current.png'"
|
:title="'溯源次数'"
|
:currentNum="sweepList['todayNum']"
|
:subTitle="'昨日溯源次数对比'"
|
:contrast="sweepList['yesterdayNum']"
|
:upDown="
|
sweepList['todayNum'] > sweepList['yesterdayNum'] ? 'up' : 'down'
|
"
|
></time-box>
|
<time-box
|
:imgUrl="'../../../zhny-dp/img/icon/week.png'"
|
:title="'溯源次数'"
|
:currentNum="sweepList['thisWeekNum']"
|
:subTitle="'上周溯源次数对比'"
|
:contrast="sweepList['lastWeekNum']"
|
:upDown="
|
sweepList['thisWeekNum'] > sweepList['lastWeekNum']
|
? 'up'
|
: 'down'
|
"
|
></time-box>
|
<time-box
|
:imgUrl="'../../../zhny-dp/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 ref="taskDate" :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="dataChoose">
|
<date-select :type="'ncpjgSelect'" v-if="trpOrNcp == 'ncp'"></date-select>
|
</div>
|
<div class="more" @click="popDetailedSupervise">
|
明细
|
<img src="../../../public/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="../../../public/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="../../../public/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="../../../public/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="date">
|
<el-date-picker
|
v-model="nzSelectTime"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
></el-date-picker>
|
</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="../../../public/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="../../../public/img/icon/public-close.png"
|
alt
|
class="close"
|
/>
|
</template>
|
<template slot="public-box-content">
|
<div class="action-bar">
|
<div class="search elestyle">
|
<el-select
|
class="select-type"
|
size="small"
|
v-model="farmOperType"
|
placeholder="选择农事类型"
|
:popper-append-to-body="false"
|
clearable
|
>
|
<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="选择地块"
|
:popper-append-to-body="false"
|
clearable
|
>
|
<el-option
|
v-for="(item, index) in plotNumArray"
|
:key="index"
|
:label="item.landName"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="date">
|
<el-date-picker
|
v-model="nsSelectTime"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
></el-date-picker>
|
</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"
|
// 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"
|
|
import publicjs, { deepClone, unitConversion } from '@/utils/public'
|
import dateUtilsJs from '@/utils/dateUtils'
|
|
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: "",
|
nsSelectTime: [dateUtilsJs.getSpecifyDayDate(30),dateUtilsJs.getDayLast()],
|
nzSelectTime: [dateUtilsJs.getSpecifyDayDate(30),dateUtilsJs.getDayLast()]
|
}
|
},
|
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(y)
|
// 农资出入库记录
|
this.pageCountNzCrk()
|
// 溯源次数统计
|
this.getSweepRecordStatistics()
|
|
this.$refs.taskDate.select()
|
},
|
// 基地下拉列表
|
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()
|
var params = { type: item.type, landId: item.landId,farmId:this.farmValue }
|
if (this.nsSelectTime) {
|
params.startTime = this.nsSelectTime[0]
|
params.endTime = this.nsSelectTime[1]
|
}
|
getFarmingRecordList(params).then(
|
(res) => {
|
this.farmOperList = res.data.data
|
this.nsjlPopupFlag = true
|
}
|
)
|
} else {
|
var params = {}
|
params.codes = "000000"
|
params.deptId = this.farmValue
|
params.current = "1"
|
params.size = "999"
|
if (this.nzSelectTime) {
|
params.startTime = this.nzSelectTime[0]
|
params.endTime = this.nzSelectTime[1]
|
}
|
pageCountNzCrk(Object.assign(params)).then((res) => {
|
this.nzcrPopupFlag = true
|
this.stockrecordAll = res.data.data.records
|
})
|
}
|
},
|
// 农事操作搜索
|
farmSelectList () {
|
var params = {
|
type: this.farmOperType,
|
landId: this.farmPlotId,
|
farmId:this.farmValue
|
}
|
if (this.nsSelectTime) {
|
params.startTime = this.nsSelectTime[0]
|
params.endTime = this.nsSelectTime[1]
|
}
|
this.farmOperClick(params)
|
},
|
// 农事操作重置
|
farmResetList () {
|
var params = {
|
type: '',
|
landId: '',
|
}
|
this.nsSelectTime = []
|
this.farmOperType = ""
|
this.farmPlotId = ""
|
params.startTime = ''
|
params.endTime = ''
|
this.farmOperClick({ type: this.farmOperType, landId: this.farmPlotId,farmId:this.farmValue})
|
},
|
farmOperClick (item) {
|
getFarmingRecordList(item).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.deptId = this.farmValue
|
params.agrname = this.inputNZ_nzname
|
params.current = "1"
|
params.size = "999"
|
if (this.nzSelectTime) {
|
params.startTime = this.nzSelectTime[0]
|
params.endTime = this.nzSelectTime[1]
|
}
|
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.deptId = this.farmValue
|
params.current = "1"
|
params.size = "999"
|
this.nzSelectTime = []
|
params.startTime = ''
|
params.endTime = ''
|
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.deptId = 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.deptId = 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 myChart1 = 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,
|
interval: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"],
|
["#FF0000","#FF8000"]
|
]
|
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 && myChart1.setOption(option)
|
window.addEventListener("resize", function () {
|
myChart1.resize()
|
})
|
},
|
initTrpBar (dom) {
|
const that = this
|
const chartDom = document.getElementById(dom)
|
const myChart = this.$echarts.init(chartDom)
|
myChart.clear()
|
var temp = deepClone(this.nztr)
|
let idArr = [] //相同id放在同一数组中
|
let resultArr = [] //最终结果数组
|
for(let i = 0;i < temp.length; i++){
|
let index = idArr.indexOf(temp[i].agrname)
|
if(index > -1){ //有相同id存在的话,获取index索引位置
|
resultArr[index].cnum += temp[i].cnum //cnum
|
}else{
|
idArr.push(temp[i].agrname)
|
resultArr.push(temp[i])
|
}
|
}
|
|
var nztrData = resultArr
|
var nztrX = []
|
var nztrY = []
|
for (let i = 0; i < nztrData.length; i++) {
|
nztrX.push(nztrData[i].agrname)
|
nztrY.push(nztrData[i].cnum)
|
}
|
if (nztrData.length == 0) {
|
nztrY = [0]
|
}
|
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,
|
interval: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] + '(' + data[i] + '公斤)',
|
value: data[i],
|
})
|
}
|
const option = {
|
tooltip: {
|
trigger: "item",
|
},
|
legend: {
|
top: "-1%",
|
padding: [50, 100, 0, 0],
|
orient: "vertical",
|
left: "60%",
|
textStyle: {
|
color: "rgba(255,255,255,0.6)",
|
},
|
itemGap: 23,
|
icon: 'circle',
|
itemHeight: 5
|
},
|
series: [
|
{
|
name: "品质",
|
type: "pie",
|
radius: ["40%", "70%"],
|
center: ["23%", "50%"],
|
avoidLabelOverlap: false,
|
label: {
|
normal: {
|
show: true,
|
formatter: ['{a|产品总数}', `${sum}`].join('\n'),
|
position: "center",
|
color: '#66ddec',
|
fontSize: 30,
|
fontWeight: 'bolder',
|
rich: {
|
a: {
|
fontSize: 14,
|
height: 40
|
}
|
}
|
}
|
|
},
|
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 = []
|
var data2 = []
|
var ncp = this.yieldMonth.csssum
|
var jgcp = this.yieldMonth.jgsum
|
for (let i = 0; i < ncp.length; i++) {
|
data.push(ncp[i].time)
|
data2.push(ncp[i].num)
|
}
|
for (let i = 0; i < jgcp.length; i++) {
|
data1.push(jgcp[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)",
|
},
|
},
|
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)
|
window.addEventListener("resize", function () {
|
myChart.resize()
|
})
|
},
|
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,
|
},
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
type: "shadow",
|
},
|
},
|
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)
|
},
|
// 基地使用率
|
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)
|
that.landsnum = publicjs.numUnitConversion(res.data.data.snum)
|
that.landwnum = publicjs.numUnitConversion(res.data.data.wnum)
|
that.znum = publicjs.numUnitConversion(res.data.data.num)
|
})
|
},
|
// 农资使用概况
|
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)
|
// that.jnStock = publicjs.numUnitConversion(res.data.data.jn)
|
// that.qnStock = publicjs.numUnitConversion(res.data.data.qn)
|
// that.byStock = publicjs.numUnitConversion(res.data.data.by)
|
})
|
},
|
// 大屏经营概况库存数量与年产量
|
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
|
|
this.stockNCP = publicjs.numUnitConversion(this.stockNCP)
|
this.stockJG = publicjs.numUnitConversion(this.stockJG)
|
this.stockTj = publicjs.numUnitConversion(this.stockTj)
|
|
this.yieldNCP = publicjs.numUnitConversion(this.yieldNCP)
|
this.yieldJG = publicjs.numUnitConversion(this.yieldJG)
|
this.yieldTj = publicjs.numUnitConversion(this.yieldTj)
|
})
|
},
|
// 统计市场流通/去年流通量/本月流通量
|
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
|
|
this.salaNumBN = publicjs.numUnitConversion(this.salaNumBN)
|
this.salaNumQN = publicjs.numUnitConversion(this.salaNumQN)
|
this.salaNumBY = publicjs.numUnitConversion(this.salaNumBY)
|
})
|
},
|
// 按月统计产量
|
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
|
if (this.trpOrNcp == 'ncp') {
|
this.initNcpBar("TrpEcharts")
|
}
|
})
|
},
|
// 农产品投入
|
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.deptId = this.farmValue
|
params.year = e
|
pageCountNz(Object.assign(params)).then((res) => {
|
this.nztr = res.data.data.records
|
this.nztr.forEach(e=>{
|
e.cnum = unitConversion(e.cnum,e.specsValue1)
|
})
|
this.nztrAll = res.data.data.records
|
// 投入品监管图表
|
// this.initTrpBar("TrpEcharts")
|
if (this.trpOrNcp == "trp") {
|
this.initTrpBar("TrpEcharts")
|
}
|
})
|
},
|
// 统计任务总数
|
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.deptId = 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 == 2) {
|
break
|
}
|
}
|
this.farminList = data
|
})
|
},
|
// 农资出入库记录
|
pageCountNzCrk () {
|
var params = {}
|
params.codes = "000000"
|
params.deptId = this.farmValue
|
params.current = "1"
|
params.size = "3"
|
if (this.nzSelectTime) {
|
params.startTime = this.nzSelectTime[0]
|
params.endTime = this.nzSelectTime[1]
|
}
|
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;
|
|
.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: #05243e;
|
border: 1px solid #00f5fe;
|
}
|
/deep/.el-icon-arrow-up:before {
|
color: #00f5fe;
|
}
|
/deep/.el-select-dropdown__item:hover,
|
/deep/.el-select-dropdown__item.hover {
|
background-color: #00f5fe;
|
color: #fff;
|
}
|
/deep/.el-select-dropdown__item {
|
background-color: #05243e;
|
}
|
}
|
|
.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;
|
|
& > 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;
|
width: 300px;
|
height: 600px;
|
}
|
}
|
|
.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;
|
}
|
.dataChoose {
|
margin-left: 40px;
|
width: 320px;
|
margin-top: -20px;
|
}
|
|
.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;
|
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;
|
}
|
}
|
}
|
}
|
}
|
|
.action-bar {
|
.elestyle {
|
/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: #05243e;
|
border: 1px solid #00f5fe;
|
}
|
/deep/.el-icon-arrow-up:before {
|
color: #00f5fe;
|
}
|
/deep/.el-select-dropdown__item:hover,
|
/deep/.el-select-dropdown__item.hover {
|
color: #fff;
|
background-color: #00f5fe !important;
|
}
|
/deep/.el-select-dropdown__item {
|
background-color: #05243e !important;
|
color: rgb(134, 134, 117);
|
}
|
/deep/.el-popper[x-placement^='bottom'] {
|
margin-top: -128px;
|
margin-left: -571px;
|
}
|
}
|
}
|
}
|
</style>
|
