/*
|
* @Author: Morpheus
|
* @Date: 2022-05-11 15:00:23
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2022-07-14 17:40:20
|
* 驾驶舱
|
*/
|
<template>
|
<div class="container">
|
<mapBox ref="modalForm" />
|
|
<div class="left-box">
|
<div class="content">
|
<div class="t">
|
<div class="title-box">
|
<div class="icon"></div>
|
<div class="text">
|
企业概况
|
<div class="em"></div>
|
</div>
|
|
<div class="line">
|
<div class="l"></div>
|
<div class="r"></div>
|
</div>
|
</div>
|
<div class="content-box">
|
<div class="nc-num">
|
<div class="text">
|
基地数量
|
<span class="num">{{ncnum}}</span>
|
</div>
|
<div class="t-l"></div>
|
<div class="b-l"></div>
|
<div class="log"></div>
|
</div>
|
|
<div class="pel-num">
|
<div class="text">
|
人员数量
|
<span class="num">{{rynum}}</span>
|
</div>
|
<div class="t-l"></div>
|
<div class="b-l"></div>
|
<div class="log"></div>
|
</div>
|
</div>
|
</div>
|
<div class="c">
|
<div class="title-box">
|
<div class="icon"></div>
|
<div class="text">
|
农田使用率
|
<div class="em"></div>
|
</div>
|
|
<div class="line">
|
<div class="l"></div>
|
<div class="r"></div>
|
</div>
|
</div>
|
<div class="content-box">
|
<div class="being">
|
<div id="BeingEcharts" class="echarts-box"></div>
|
<div class="state">在使用</div>
|
|
<div class="text">
|
<div class="num">{{ landsnum.toFixed(0) }}</div>
|
<div class="unit">亩</div>
|
</div>
|
</div>
|
|
<div class="leisure">
|
<div id="LeisureEcharts" class="echarts-box"></div>
|
<div class="state">空闲中</div>
|
|
<div class="text">
|
<div class="num">{{ landwnum.toFixed(0) }}</div>
|
<div class="unit">亩</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="b">
|
<div class="title-box">
|
<div class="icon"></div>
|
<div class="text">
|
种养品种
|
<div class="num">{{ num }}</div>
|
<div class="unit">种</div>
|
</div>
|
<div class="line">
|
<div class="l"></div>
|
<div class="r"></div>
|
</div>
|
</div>
|
<div class="content-box">
|
<ul>
|
<li v-for="(item, index) in farmPlanList" :key="index">
|
<div class="l">
|
<img :src="item.url" class="img" />
|
<div class="text">{{ item.strainName }}</div>
|
</div>
|
<div class="r">
|
<div class="num">{{ item.area }}</div>
|
<div class="unit">亩</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="right-box">
|
<div class="content">
|
<div class="t">
|
<div class="title-box">
|
<div class="icon"></div>
|
<div class="text">
|
物联网设备在线情况
|
<div class="em"></div>
|
</div>
|
|
<div class="line">
|
<div class="l"></div>
|
<div class="r"></div>
|
</div>
|
</div>
|
<div class="content-box">
|
<div class="equipment" id="EquipmentEcharts"></div>
|
</div>
|
</div>
|
<div class="c">
|
<div class="farm-more-btn" @click="farmOperClick({type: '', landId: ''})">
|
更多
|
<i class="el-icon-d-arrow-right"></i>
|
</div>
|
|
<div class="title-box">
|
<div class="icon"></div>
|
<div class="text">
|
本年农事操作
|
<div class="num">{{ total }}</div>
|
<div class="unit">次</div>
|
</div>
|
|
<div class="line">
|
<div class="l"></div>
|
<div class="r"></div>
|
</div>
|
</div>
|
|
<div class="content-box" :v-if="isFarmingDetail">
|
<div class="detail" v-for="(item, index) in farmingList" :key="index">
|
<div class="title">{{ item.name }}</div>
|
<div class="num-unit">
|
<div class="num">{{ item.value }}</div>
|
<div class="unit">次</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="b">
|
<div class="title-box">
|
<div class="icon"></div>
|
<div class="text">
|
销售趋势
|
<div class="em"></div>
|
</div>
|
|
<div class="line">
|
<div class="l"></div>
|
<div class="r"></div>
|
</div>
|
</div>
|
<div class="content-box">
|
<div class="total">
|
<div class="t-l"></div>
|
<div class="t-r"></div>
|
<div class="b-l"></div>
|
<div class="b-r"></div>
|
<div class="title">全年销售总额（万元）</div>
|
<div class="price">
|
<div v-for="(item,index) in salaNum" :key="index">
|
<span>{{item}}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="trend" id="TrendEcharts"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="down-menu">
|
<div>
|
<div
|
class="nc down-menu-item"
|
@click="
|
ncListShow = !ncListShow;
|
jkListShow = false;
|
jcListShow = false;
|
"
|
>
|
<div class="l">
|
<i class="el-icon-my-nc-menu"></i>
|
<span :class="{'checked': ncListShow}">基地</span>
|
</div>
|
|
<i :class="{'el-icon-arrow-down': !ncListShow, 'el-icon-arrow-up': ncListShow}"></i>
|
</div>
|
|
<div v-show="ncListShow" class="nc-list">
|
<div
|
v-for="(item, index) in farmNumArray"
|
:key="index"
|
class="box"
|
:class="{ first: index == 0 }"
|
@click="setCenter(item)"
|
:title="item.farmName"
|
>{{ item.farmName }}</div>
|
</div>
|
</div>
|
|
<div>
|
<div
|
class="jk down-menu-item"
|
@click="
|
jkListShow = !jkListShow;
|
ncListShow = false;
|
jcListShow = false;
|
"
|
>
|
<div class="l">
|
<i class="el-icon-my-jksb-menu"></i>
|
<span :class="{'checked': jkListShow}">监控设备</span>
|
</div>
|
|
<i :class="{'el-icon-arrow-down': !jkListShow, 'el-icon-arrow-up': jkListShow}"></i>
|
</div>
|
|
<div v-show="jkListShow" class="jk-list">
|
<div
|
v-for="(item, index) in equipmentList.vidList"
|
:key="index"
|
class="box"
|
:class="{ first: index == 0 }"
|
:title="item.name"
|
@click="setSiteCenter(item, 'jkListShow')"
|
>{{ item.name }}</div>
|
</div>
|
</div>
|
|
<div>
|
<div
|
class="jc down-menu-item"
|
@click="
|
jcListShow = !jcListShow;
|
ncListShow = false;
|
jkListShow = false;
|
"
|
>
|
<div class="l">
|
<i class="el-icon-my-jcsb-menu"></i>
|
<span :class="{'checked': jcListShow}">监测设备</span>
|
</div>
|
|
<i :class="{'el-icon-arrow-down': !jcListShow, 'el-icon-arrow-up': jcListShow}"></i>
|
</div>
|
|
<div v-show="jcListShow" class="jc-list">
|
<div
|
v-for="(item, index) in equipmentList.staList"
|
:key="index"
|
class="box"
|
:class="{ first: index == 0 }"
|
:title="item.name"
|
@click="setSiteCenter(item, 'jcListShow')"
|
>{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="city-flow" @click="cityFlowShow">
|
<div class="icon"></div>
|
<span>市场流通</span>
|
</div>
|
|
<!-- <div class="layers-box">
|
<div class="sl">
|
<div class="text">标准图</div>
|
</div>
|
<div class="yx on">
|
<div class="text">卫星图</div>
|
</div>
|
</div>-->
|
|
<div class="lenged-box">
|
<ul>
|
<li>
|
<input type="checkbox" v-model="showIconNC" />
|
<div class="icon"></div>
|
<div class="title">基地</div>
|
</li>
|
<li>
|
<input type="checkbox" v-model="showIconDK" />
|
<div class="icon"></div>
|
<div class="title">地块</div>
|
</li>
|
<li>
|
<input type="checkbox" v-model="showIconJK" />
|
<div class="icon"></div>
|
<div class="title">监控设备</div>
|
</li>
|
<li>
|
<input type="checkbox" v-model="showIconTR" />
|
<div class="icon"></div>
|
<div class="title">土壤监测</div>
|
</li>
|
<li>
|
<input type="checkbox" v-model="showIconQX" />
|
<div class="icon"></div>
|
<div class="title">气象监测</div>
|
</li>
|
<li>
|
<input type="checkbox" v-model="showIconSZ" />
|
<div class="icon"></div>
|
<div class="title">水质监测</div>
|
</li>
|
</ul>
|
</div>
|
|
<public-box v-show="cityShow" :closeFlag="'cityShow'" :className="'public-org-market-bar'">
|
<template slot="public-box-header">
|
<div class="logo"></div>
|
<div class="title">市场流通</div>
|
<img
|
@click="cityShow = false"
|
src="../../../public/img/icon/public-close.png"
|
alt
|
class="close"
|
/>
|
</template>
|
<template slot="public-box-content">
|
<div class="market-title">
|
<el-select v-model="farm.id" placeholder="请选择基地" @change="scFarmChange">
|
<el-option
|
v-for="item in farmNumArray"
|
:key="item.id"
|
:label="item.farmName"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
<div class="date">
|
<el-date-picker
|
v-model="scSelectTime"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
></el-date-picker>
|
</div>
|
<div class="query-button">
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
@click="searchMarketDistrict"
|
>查询</el-button>
|
<el-button type="info" icon="el-icon-refresh-right" @click="scltReset">重置</el-button>
|
</div>
|
</div>
|
|
<div class="market-content">
|
<div id="marketChartQx" class="market-chart"></div>
|
<div class="market-list">
|
<div
|
class="market-list-item"
|
v-for="(item,index) in marketDistrict"
|
:key="index"
|
>
|
<div>
|
<div class="t-border"></div>
|
<div class="t-item">
|
<div>{{item.name}}</div>
|
<div>{{item.num}}公斤</div>
|
</div>
|
<div class="b-border"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</public-box>
|
|
<public-box
|
v-if="farmProfiles"
|
:closeFlag="'farmProfiles'"
|
:className="'public-org-nav-bar'"
|
>
|
<template slot="public-box-header">
|
<div class="logo"></div>
|
<div class="title">{{this.farmDetails.farmName}}</div>
|
<img
|
@click="farmProfiles = false"
|
src="../../../public/img/icon/public-close.png"
|
alt
|
class="close"
|
/>
|
</template>
|
<template slot="public-box-content">
|
<div class="farm-profiles">
|
<div class="btn-grounp">
|
<div class="details" @click="goPath">
|
进入基地
|
<i class="el-icon-arrow-right"></i>
|
</div>
|
<div v-if="farmDetails.panoramic" class="scene">
|
<a :href="farmDetails.panoramic" target="_blank">
|
<img src="../../../public/img/icon/360.png" alt />
|
</a>
|
</div>
|
</div>
|
|
<div class="farm-content">
|
<div class="row">
|
<div class="l">地址</div>
|
<div class="r">{{this.farmDetails.farmAddress}}</div>
|
</div>
|
<div class="row">
|
<div class="l">土地流转面积</div>
|
<div class="r">{{this.farmDetails.farmArea}}</div>
|
</div>
|
<div class="row">
|
<div class="l">口号</div>
|
<div class="r">{{this.farmDetails.slogan}}</div>
|
</div>
|
<div class="row">
|
<div class="l">基地介绍</div>
|
<div class="r" style="line-height: 32px;">{{this.farmDetails.introduce}}</div>
|
</div>
|
<div class="row" v-if="farmPicList.length>0">
|
<div class="l" >环境图片</div>
|
<div class="r">
|
<img v-for="pic in farmPicList" :src="pic" alt />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</public-box>
|
|
<public-box
|
v-show="farmOperPopup"
|
:closeFlag="'farmOperPopup'"
|
:className="'public-farm-oper-table'"
|
>
|
<template slot="public-box-header">
|
<div class="logo"></div>
|
<div class="title">农事操作</div>
|
<img
|
@click="farmOperPopup = 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 || '--'}}</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>
|
<public-box
|
v-show="staionDetail"
|
:closeFlag="'staionDetail'"
|
:className="'public-equirment-station-details'"
|
>
|
<template slot="public-box-header">
|
<div>{{staInfo.name}}</div>
|
<img
|
@click="staionDetail = false"
|
src="../../../public/img/icon/close.png"
|
class="close"
|
/>
|
</template>
|
<template slot="public-box-content">
|
<div class="publicStaBox">
|
<!-- 气象监测 -->
|
<div
|
class="item"
|
v-for="(item, staListIndex) in stationData.weatherList"
|
:key="'weatherList' + staListIndex"
|
>
|
<div class="itemTitle">
|
<img
|
v-if="item.name == '水隔离子'"
|
src="../../../public/img/staListIcon/NH4.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量累计'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气湿度'"
|
src="../../../public/img/staListIcon/soli-water.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风向'"
|
src="../../../public/img/staListIcon/wind.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'EC'"
|
src="../../../public/img/staListIcon/EC.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '钾离子'"
|
src="../../../public/img/staListIcon/K.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '酸碱度'"
|
src="../../../public/img/staListIcon/PH.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '硝酸银'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铜离子'"
|
src="../../../public/img/staListIcon/CU2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铅离子'"
|
src="../../../public/img/staListIcon/PB2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水镉离子'"
|
src="../../../public/img/staListIcon/CD2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'PM2.5'"
|
src="../../../public/img/staListIcon/PM25.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '气压'"
|
src="../../../public/img/staListIcon/pressure.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '光照度'"
|
src="../../../public/img/staListIcon/light.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风速'"
|
src="../../../public/img/staListIcon/windSpeed.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'CO2'"
|
src="../../../public/img/staListIcon/CO2.png"
|
alt
|
/>
|
<img v-else src="../../../public/img/icon/wd-icon.png" alt />
|
<div class="type">
|
<h1>{{item.name}}</h1>
|
<span>单位：{{item.unit}}</span>
|
</div>
|
<div
|
class="data"
|
>{{item.valueDataList[item.valueDataList.length-1].value}}</div>
|
<img
|
src="../../../public/img/icon/up_menu.png"
|
class="openMenuIcon"
|
@click="showEchart(staListIndex,null)"
|
v-if="echartIsShow && jcIndex == staListIndex"
|
alt
|
/>
|
<img
|
src="../../../public/img/icon/down_menu.png"
|
class="openMenuIcon"
|
@click="showEchart(staListIndex,item)"
|
v-else
|
alt
|
/>
|
</div>
|
<div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
|
<div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
|
</div>
|
</div>
|
<!-- 土壤监测 -->
|
<div
|
class="item"
|
v-for="(item, staListIndex) in stationData.soilList"
|
:key="'soilList' + staListIndex"
|
>
|
<div class="itemTitle">
|
<img
|
v-if="item.name == '水隔离子'"
|
src="../../../public/img/staListIcon/NH4.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量累计'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气湿度'"
|
src="../../../public/img/staListIcon/soli-water.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风向'"
|
src="../../../public/img/staListIcon/wind.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'EC'"
|
src="../../../public/img/staListIcon/EC.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '钾离子'"
|
src="../../../public/img/staListIcon/K.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '酸碱度'"
|
src="../../../public/img/staListIcon/PH.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '硝酸银'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铜离子'"
|
src="../../../public/img/staListIcon/CU2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铅离子'"
|
src="../../../public/img/staListIcon/PB2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水镉离子'"
|
src="../../../public/img/staListIcon/CD2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'PM2.5'"
|
src="../../../public/img/staListIcon/PM25.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '气压'"
|
src="../../../public/img/staListIcon/pressure.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '光照度'"
|
src="../../../public/img/staListIcon/light.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风速'"
|
src="../../../public/img/staListIcon/windSpeed.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'CO2'"
|
src="../../../public/img/staListIcon/CO2.png"
|
alt
|
/>
|
<img v-else src="../../../public/img/icon/wd-icon.png" alt />
|
<div class="type">
|
<h1>{{item.name}}</h1>
|
<span>单位：{{item.unit}}</span>
|
</div>
|
<div
|
class="data"
|
>{{item.valueDataList[item.valueDataList.length-1].value}}</div>
|
<img
|
src="../../../public/img/icon/up_menu.png"
|
class="openMenuIcon"
|
@click="showEchart(staListIndex,null)"
|
v-if="echartIsShow && jcIndex == staListIndex"
|
alt
|
/>
|
<img
|
src="../../../public/img/icon/down_menu.png"
|
class="openMenuIcon"
|
@click="showEchart(staListIndex,item)"
|
v-else
|
alt
|
/>
|
</div>
|
<div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
|
<div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
|
</div>
|
</div>
|
<!-- 空气监测 -->
|
<div
|
class="item"
|
v-for="(item, staListIndex) in stationData.airList"
|
:key="'airList' + staListIndex"
|
>
|
<div class="itemTitle">
|
<img
|
v-if="item.name == '水隔离子'"
|
src="../../../public/img/staListIcon/NH4.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量累计'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气湿度'"
|
src="../../../public/img/staListIcon/soli-water.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风向'"
|
src="../../../public/img/staListIcon/wind.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'EC'"
|
src="../../../public/img/staListIcon/EC.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '钾离子'"
|
src="../../../public/img/staListIcon/K.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '酸碱度'"
|
src="../../../public/img/staListIcon/PH.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '硝酸银'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铜离子'"
|
src="../../../public/img/staListIcon/CU2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铅离子'"
|
src="../../../public/img/staListIcon/PB2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水镉离子'"
|
src="../../../public/img/staListIcon/CD2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'PM2.5'"
|
src="../../../public/img/staListIcon/PM25.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '气压'"
|
src="../../../public/img/staListIcon/pressure.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '光照度'"
|
src="../../../public/img/staListIcon/light.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风速'"
|
src="../../../public/img/staListIcon/windSpeed.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'CO2'"
|
src="../../../public/img/staListIcon/CO2.png"
|
alt
|
/>
|
<img v-else src="../../../public/img/icon/wd-icon.png" alt />
|
<div class="type">
|
<h1>{{item.name}}</h1>
|
<span>单位：{{item.unit}}</span>
|
</div>
|
<div
|
class="data"
|
>{{item.valueDataList[item.valueDataList.length-1].value}}</div>
|
<img
|
src="../../../public/img/icon/up_menu.png"
|
class="openMenuIcon"
|
@click="showEchart(staListIndex,null)"
|
v-if="echartIsShow && jcIndex == staListIndex"
|
alt
|
/>
|
<img
|
src="../../../public/img/icon/down_menu.png"
|
class="openMenuIcon"
|
@click="showEchart(staListIndex,item)"
|
v-else
|
alt
|
/>
|
</div>
|
<div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
|
<div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
|
</div>
|
</div>
|
<!-- 水质监测 -->
|
<div
|
class="item"
|
v-for="(item, staListIndex) in stationData.waterList"
|
:key="'waterList' + staListIndex"
|
>
|
<div class="itemTitle">
|
<img
|
v-if="item.name == '水隔离子'"
|
src="../../../public/img/staListIcon/NH4.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水电导率'"
|
src="../../../public/img/staListIcon/soli-ele.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '雨量累计'"
|
src="../../../public/img/staListIcon/rain.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气湿度'"
|
src="../../../public/img/staListIcon/soli-water.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风向'"
|
src="../../../public/img/staListIcon/wind.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'EC'"
|
src="../../../public/img/staListIcon/EC.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '钾离子'"
|
src="../../../public/img/staListIcon/K.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '酸碱度'"
|
src="../../../public/img/staListIcon/PH.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '土壤温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '空气温度'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '硝酸银'"
|
src="../../../public/img/staListIcon/soil-temperature.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铜离子'"
|
src="../../../public/img/staListIcon/CU2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水铅离子'"
|
src="../../../public/img/staListIcon/PB2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '水镉离子'"
|
src="../../../public/img/staListIcon/CD2.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'PM2.5'"
|
src="../../../public/img/staListIcon/PM25.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '气压'"
|
src="../../../public/img/staListIcon/pressure.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '光照度'"
|
src="../../../public/img/staListIcon/light.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == '风速'"
|
src="../../../public/img/staListIcon/windSpeed.png"
|
alt
|
/>
|
<img
|
v-else-if="item.name == 'CO2'"
|
src="../../../public/img/staListIcon/CO2.png"
|
alt
|
/>
|
<img v-else src="../../../public/img/icon/wd-icon.png" alt />
|
<div class="type">
|
<h1>{{item.name}}</h1>
|
<span>单位：{{item.unit}}</span>
|
</div>
|
<div
|
class="data"
|
>{{item.valueDataList[item.valueDataList.length-1].value}}</div>
|
<img
|
src="../../../public/img/icon/up_menu.png"
|
class="openMenuIcon"
|
@click="showEchart(staListIndex,null)"
|
v-if="echartIsShow && jcIndex == staListIndex"
|
alt
|
/>
|
<img
|
src="../../../public/img/icon/down_menu.png"
|
class="openMenuIcon"
|
@click="showEchart(staListIndex,item)"
|
v-else
|
alt
|
/>
|
</div>
|
<div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
|
<div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</public-box>
|
|
<public-box
|
v-show="JkDetail"
|
:closeFlag="'JkDetail'"
|
:className="'public-equirment-vid-details'"
|
>
|
<template slot="public-box-header">
|
<div>{{vidInfo.name}}</div>
|
<img
|
@click="JkDetail = false"
|
src="../../../public/img/icon/close.png"
|
class="close"
|
/>
|
</template>
|
<template slot="public-box-content">
|
<div class="video">
|
<video id="videoElement" autoplay muted controls width="100%" height="100%"></video>
|
</div>
|
</template>
|
</public-box>
|
|
<public-nape-box
|
v-show="napePlotPopupFlag"
|
:closeFlag="'napePlotPopupFlag'"
|
:className="'public-nape-plot-details'"
|
>
|
<template slot="public-box-header">
|
<div
|
@click="plotDetailsClick('zypz')"
|
:class="{on: plotDetailsNape == 'zypz'}"
|
class="nav"
|
>种养品种</div>
|
<div
|
@click="plotDetailsClick('nscz')"
|
:class="{on: plotDetailsNape == 'nscz'}"
|
class="nav"
|
>农事操作</div>
|
<div
|
@click="plotDetailsClick('base')"
|
:class="{on: plotDetailsNape == 'base'}"
|
class="nav"
|
>基础信息</div>
|
</template>
|
<template slot="public-box-content">
|
<div v-show="plotDetailsNape == 'zypz'" class="box zypz-box">
|
<div
|
v-for="(item, index) in plotDetailsPlantList"
|
:key="'plotDetailsPlantList'+index"
|
>
|
<img class="logo" :src="item.url" alt />
|
<div class="titles-box">
|
<div class="title">{{item.strainName}}</div>
|
<div
|
class="time"
|
>{{item.createTime}} {{item.plantingWay == 0 ? '移栽' : item.plantingWay == 1 ? '直播' : '秧苗'}}</div>
|
</div>
|
</div>
|
</div>
|
<div v-show="plotDetailsNape == 'nscz'" class="box nscz-box">
|
<div
|
v-for="(item, index) in plotDetailsRecordList"
|
:key="'plotDetailsRecordList'+index"
|
>
|
<div class="t-border"></div>
|
<div class="t-item">
|
<div class="type">{{item.typeName}}</div>
|
<div class="manure" v-show="item.type == 0">{{item.agriculturalName}}</div>
|
<div class="date">{{item.time}}</div>
|
</div>
|
<div class="b-item">
|
<div class="variety">{{item.strainName}}</div>
|
<div class="pel">{{item.realName}}</div>
|
<div class="plot">{{item.landName}}</div>
|
</div>
|
</div>
|
</div>
|
<div v-show="plotDetailsNape == 'base'" class="box base-box">
|
<div class="plot-name">
|
<div class="sub-title">地块名称</div>
|
<div class="current-val">{{currentClickPlot.landName}}</div>
|
</div>
|
<div class="plot-area">
|
<div class="sub-title">地块面积</div>
|
<div
|
class="current-val"
|
>{{currentClickPlot.landArea}} {{currentClickPlot.landUnit}}</div>
|
</div>
|
<div class="plot-type">
|
<div class="sub-title">地块类型</div>
|
<div class="current-val">{{currentClickPlot.landType}}</div>
|
</div>
|
</div>
|
</template>
|
</public-nape-box>
|
</div>
|
</template>
|
|
<script>
|
// eslint-disable-next-line no-unused-vars
|
import {
|
getStationAndVideoCount,
|
getStationAndVideoList
|
} from '@/api/equipment/equipment'
|
import {
|
getFarmingCount,
|
getFarmingStatis,
|
pagePalnt,
|
SelectCount,
|
selctSaletCount,
|
selctSaletZ,
|
selectMarketDistrict,
|
getFarmList,
|
getLandList,
|
getFarmingRecordList,
|
getFarmPlantList
|
} from '@/api/farm/farmingrecord'
|
// eslint-disable-next-line no-unused-vars
|
import { selectXCount } from '@/api/land/land'
|
import chinaJSON from '@/assets/china.json'
|
import dateUtils from '@/utils/dateUtils'
|
import { getStationDateByStcd } from '@/api/equipment/equipment'
|
import flvjs from 'flv.js'
|
import dateUtilsJs from '@/utils/dateUtils'
|
import { Loading } from 'element-ui'
|
|
export default {
|
data () {
|
return {
|
farmingList: [],
|
farmPlanList: [],
|
isFarmingDetail: false,
|
total: 0,
|
num: 0,
|
landsnum: 0,
|
landwnum: 0,
|
ncnum: 0,
|
rynum: 0,
|
cityShow: false,
|
// 销售总额
|
salaNum: [],
|
// 每月销售统计
|
salaNumY: [],
|
// 市场流通
|
marketDistrict: [],
|
farm: {},
|
scSelectTime: '',
|
nsSelectTime: [dateUtilsJs.getSpecifyDayDate(30), dateUtilsJs.getToDay()],
|
scStartTime: '',
|
scEndTime: '',
|
ncListShow: false,
|
jkListShow: false,
|
jcListShow: false,
|
farmProfiles: false,
|
farmNumArray: [],
|
plotNumArray: [],
|
farmDetails: null,
|
farmPicList:[],
|
// 农事操作记录显示
|
farmOperPopup: false,
|
// 农事操作记录列表
|
farmOperList: [],
|
// 选择的农事类型
|
farmOperType: '',
|
// 基地地块id
|
farmPlotId: '',
|
// 全局基地参数
|
farmID: '',
|
// 设备
|
mTotalObj: {},
|
// 设备列表
|
equipmentList: {},
|
// 地图标记显示与隐藏
|
showIconNC: true,
|
showIconDK: true,
|
showIconJK: true,
|
showIconTR: true,
|
showIconQX: true,
|
showIconSZ: true,
|
staionDetail: false,
|
JkDetail: false,
|
// 视频数据
|
vidInfo: {},
|
// 监测数据
|
staInfo: {},
|
// 监测详细数据
|
stationData: {},
|
// 监测设备echart展示
|
echartIsShow: false,
|
// 监测列表index
|
jcIndex: 0,
|
flvPlayer: null,
|
// 地块详情弹框默认选中
|
plotDetailsNape: 'zypz',
|
// 地块详情中的种养品种
|
plotDetailsPlantList: [],
|
// 地块详情中的农事操作
|
plotDetailsRecordList: [],
|
currentClickPlot: {},
|
napePlotPopupFlag: false,
|
}
|
},
|
created () {
|
// 数据刷新
|
this.getFarmList()
|
this.getLandList()
|
},
|
mounted () {
|
// this.initRightPie('EquipmentEcharts')
|
this.AllDataUpdate()
|
},
|
updated () {
|
this.showIcon()
|
},
|
methods: {
|
// 全局数据刷新事件
|
AllDataUpdate () {
|
this.getFarmingStatis()
|
this.getFarmingCount()
|
this.pagePalnt()
|
this.selectXCount()
|
this.SelectCount()
|
this.selctSaletCount()
|
this.selctSaletZ()
|
this.selectMarketDistrict()
|
this.getStationAndVideoCount()
|
this.getStationAndVideoList()
|
},
|
// 农事操作搜索
|
farmSelectList () {
|
this.farmOperClick({ type: this.farmOperType, landId: this.farmPlotId })
|
},
|
|
// 农事操作重置
|
farmResetList () {
|
this.farmOperType = ''
|
this.farmPlotId = ''
|
this.nsSelectTime = []
|
this.farmOperClick({ type: this.farmOperType, landId: this.farmPlotId })
|
},
|
|
farmOperClick (item) {
|
var params = { type: item.type, landId: item.landId }
|
if (this.nsSelectTime) {
|
params.startTime = this.nsSelectTime[0]
|
params.endTime = this.nsSelectTime[1]
|
}
|
getFarmingRecordList(params).then(res => {
|
this.farmOperList = res.data.data
|
this.farmOperPopup = true
|
})
|
},
|
|
showDetailPopup (params) {
|
this.farmDetails = params
|
this.farmPicList = []
|
if (params.picture){
|
this.farmPicList = params.picture.split(",")
|
}
|
this.farmProfiles = true
|
},
|
|
setCenter (item) {
|
this.ncListShow = false
|
// this.farmId = item.id
|
// this.AllDataUpdate()
|
this.$refs.modalForm.setCenter(item)
|
},
|
|
setSiteCenter (item, show) {
|
this[show] = false
|
this.$refs.modalForm.setSiteCenter(item.name)
|
},
|
|
getFarmList () {
|
getFarmList().then(res => {
|
res.data.data.forEach(item => {
|
// item.position = item.position.replace(/POLYGON\(\(/g, '')
|
// item.position = item.position.replace(/\)\)/g, '')
|
//
|
// const arr = item.position.split(',')
|
// var brr = []
|
// arr.forEach(it => {
|
// brr.push(it.split(' '))
|
// })
|
this.$refs.modalForm.addPolygon(item)
|
})
|
|
this.farmNumArray = res.data.data
|
// this.farmNumArray.unshift({
|
// id:"",
|
// farmName:"全农场"
|
// })
|
})
|
},
|
|
getLandList () {
|
getLandList().then(res => {
|
res.data.data.forEach(item => {
|
if (item.landRange != '' || item.landRange != null) {
|
item.landRange = item.landRange.replace(/POLYGON\(\(/g, '')
|
item.landRange = item.landRange.replace(/\)\)/g, '')
|
|
const arr = item.landRange.split(',')
|
var brr = []
|
arr.forEach(it => {
|
brr.push(it.split(' '))
|
})
|
|
console.log(brr, 5555)
|
this.$refs.modalForm.addPlotPolygon(brr, item)
|
}
|
})
|
this.plotNumArray = res.data.data
|
})
|
},
|
|
initPie (dom, val) {
|
const chartDom = document.getElementById(dom)
|
const myChart = this.$echarts.init(chartDom)
|
|
const option = {
|
series: [
|
{
|
radius: '100%',
|
type: 'gauge',
|
detail: {
|
formatter: '{value}%\n总占比',
|
color: '#A9D1D7',
|
fontSize: '16px',
|
fontWeight: 'bold',
|
offsetCenter: [0, '60%']
|
},
|
data: [{ value: val }],
|
splitNumber: 25,
|
axisLine: {
|
show: true,
|
width: 8,
|
lineStyle: {
|
color: [
|
[1, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
{
|
offset: 0.1,
|
color: '#12FF90'
|
},
|
{
|
offset: 0.6,
|
color: '#00FFC2'
|
},
|
{
|
offset: 1,
|
color: '#05D4F5'
|
}
|
])
|
]
|
]
|
|
}
|
},
|
axisTick: { show: false },
|
axisLabel: { show: false },
|
splitLine: {
|
show: true,
|
distance: -8,
|
length: 8,
|
lineStyle: {
|
color: '#fff',
|
width: 2
|
}
|
}
|
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
},
|
|
initRightPie (dom) {
|
const that = this
|
const chartDom = document.getElementById(dom)
|
const myChart = this.$echarts.init(chartDom)
|
|
const option = {
|
title: {
|
text: that.mTotalObj.mTotal,
|
subtext: '设备总数',
|
top: '38%',
|
left: 'center',
|
textStyle: {
|
color: '#69E2ED',
|
fontSize: 34,
|
fontWeight: 'bold',
|
lineHeight: 12
|
},
|
subtextStyle: {
|
color: '#A9D1D7',
|
fontSize: 18,
|
fontWeight: 'bold'
|
}
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: ['44%', '62%'],
|
center: ['50%', '50%'],
|
data: [
|
{
|
value:
|
that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
|
name: '离线',
|
itemStyle: {
|
color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
{
|
offset: 0,
|
color: '#F39302'
|
},
|
{
|
offset: 1,
|
color: '#E5F302'
|
}
|
])
|
},
|
labelLine: {
|
show: false
|
},
|
label: {
|
show: false
|
}
|
},
|
{
|
value:
|
that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
|
name: '在线',
|
itemStyle: {
|
color: '#00F0FF'
|
},
|
labelLine: {
|
show: false
|
},
|
label: {
|
show: false
|
}
|
}
|
]
|
},
|
{
|
// 指示线
|
// 通过value 的值 调节lableLine的位置
|
type: 'pie',
|
radius: ['44%', '62%'],
|
data: [
|
{
|
value:
|
that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
|
itemStyle: {
|
color: 'transparent'
|
},
|
labelLine: {
|
show: true,
|
length: 24,
|
length2: 16,
|
color: '#fff',
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
label: {
|
color: '#A9D1D7',
|
fontSize: 16,
|
position: 'outside',
|
formatter: `{a|${that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine
|
}}\n离线`,
|
rich: {
|
a: {
|
color: '#EBC802',
|
fontSize: 22,
|
fontWeight: 'bold',
|
lineHeight: 30
|
}
|
}
|
}
|
},
|
{
|
value:
|
that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
|
itemStyle: {
|
color: 'transparent'
|
}
|
}
|
]
|
},
|
|
{
|
// 指示线
|
// 通过value 的值 调节lableLine的位置
|
type: 'pie',
|
radius: ['44%', '62%'],
|
data: [
|
{
|
value:
|
that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
|
itemStyle: {
|
color: 'transparent'
|
}
|
},
|
{
|
value:
|
that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
|
itemStyle: {
|
color: 'transparent'
|
},
|
labelLine: {
|
show: true,
|
length: 24,
|
length2: 16,
|
color: '#fff',
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
label: {
|
color: '#A9D1D7',
|
fontSize: 16,
|
position: 'outside',
|
formatter: `{a|${that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine
|
}}\n在线`,
|
rich: {
|
a: {
|
color: '#38ADD7',
|
fontSize: 22,
|
fontWeight: 'bold',
|
lineHeight: 30
|
}
|
}
|
}
|
}
|
]
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
},
|
// 企业概况
|
SelectCount () {
|
var that = this
|
var farmId = this.farmId
|
SelectCount(farmId).then((res) => {
|
that.ncnum = res.data.data.ncnum
|
that.rynum = res.data.data.rynum
|
})
|
},
|
// 大屏销售统计
|
selctSaletCount () {
|
var that = this
|
var params = {}
|
params.farmId = this.farmId
|
selctSaletCount(Object.assign(params)).then((res) => {
|
that.salaNumY = res.data.data
|
this.initSaleLine('TrendEcharts')
|
})
|
},
|
// 按行政区统计市场流通
|
selectMarketDistrict () {
|
var that = this
|
var params = {}
|
params.farmId = this.farmId
|
selectMarketDistrict(Object.assign(params)).then((res) => {
|
that.marketDistrict = res.data.data
|
})
|
},
|
// 市场流通条件筛选
|
searchMarketDistrict () {
|
var that = this
|
var params = {}
|
params.farmId = this.farm.id
|
if (that.scSelectTime) {
|
params.startTime = that.scSelectTime[0]
|
params.endTime = that.scSelectTime[1]
|
}
|
selectMarketDistrict(Object.assign(params)).then((res) => {
|
that.marketDistrict = res.data.data
|
this.setMarketChart('marketChartQx')
|
})
|
},
|
// 统计今年和去年的销售总额
|
selctSaletZ () {
|
var that = this
|
var params = {}
|
params.farmId = this.farmId
|
selctSaletZ(Object.assign(params)).then((res) => {
|
var num = res.data.data[0].num/10000
|
that.salaNum = num.toString().split('')
|
})
|
},
|
getFarmingCount () {
|
var that = this
|
var farmId = this.farmId
|
|
getFarmingCount(farmId).then((res) => {
|
that.total = res.data.data
|
// that.total = 0;
|
if (that.total > 0) {
|
that.isFarmingDetail = true
|
}
|
})
|
},
|
// 本年农事操作记录，分组统计
|
getFarmingStatis () {
|
var that = this
|
var farmId = this.farmId
|
getFarmingStatis(farmId).then((res) => {
|
that.farmingList = res.data.data
|
})
|
},
|
// 基地使用率
|
selectXCount () {
|
// eslint-disable-next-line no-unused-vars
|
var that = this
|
var farmId = this.farmId
|
selectXCount(farmId).then((res) => {
|
that.landsnum = res.data.data.snum
|
that.landwnum = res.data.data.wnum
|
|
var znum = res.data.data.num
|
// 使用率
|
var syl = 0
|
// 未使用率
|
var wsyl = 0
|
if (znum != 0) {
|
// 使用率
|
syl = (that.landsnum / znum * 100).toFixed(1)
|
// 未使用率
|
wsyl = (that.landwnum / znum * 100).toFixed(1)
|
}
|
|
this.initPie('BeingEcharts', syl)
|
this.initPie('LeisureEcharts', wsyl)
|
})
|
},
|
pagePalnt () {
|
var that = this
|
var params = {
|
status: 1
|
}
|
params.tenantId = '000000'
|
params.farmId = this.farmId
|
pagePalnt(1, 10000, Object.assign(params)).then((res) => {
|
const data = res.data.data
|
that.num = data.num
|
this.farmPlanList = data.page
|
})
|
},
|
|
cityFlowShow () {
|
this.cityShow = true
|
this.setMarketChart('marketChartQx')
|
},
|
goPath () {
|
this.$router.push({
|
path: '/farmDetails',
|
query: {
|
...this.farmDetails
|
}
|
})
|
},
|
setMarketChart (dom) {
|
const chartDom = document.getElementById(dom)
|
const myChart = this.$echarts.init(chartDom)
|
var marketData = this.marketDistrict
|
var geoCoordMap = {}
|
var GZData = []
|
geoCoordMap['出发地'] = [115.17473025869447, 27.407869370774904]
|
for (let i = 0; i < marketData.length; i++) {
|
var xy = []
|
var xs = {}
|
var fram = {}
|
var framList = []
|
xy.push(marketData[i].lat)
|
xy.push(marketData[i].lng)
|
xs = {
|
name: marketData[i].name,
|
value: marketData[i].num
|
}
|
fram = {
|
name: '出发地'
|
}
|
framList.push(fram)
|
framList.push(xs)
|
GZData.push(framList)
|
geoCoordMap[marketData[i].name] = xy
|
}
|
|
var seriesMap = [['出发地', GZData]]
|
|
// 初始化数据
|
// var geoCoordMap = data.result.geoCoordMap;
|
//
|
// var seriesMap = data.result.seriesMap;
|
var convertData = function (data) {
|
var res = []
|
for (var i = 0; i < data.length; i++) {
|
var dataItem = data[i]
|
var fromCoord = geoCoordMap[dataItem[0].name]
|
var toCoord = geoCoordMap[dataItem[1].name]
|
if (fromCoord && toCoord) {
|
// cnt定义数量，这里面随意增加自定义属性
|
res.push({
|
fromName: dataItem[0].name,
|
toName: dataItem[1].name,
|
cnt: dataItem[1].value,
|
coords: [fromCoord, toCoord]
|
})
|
}
|
}
|
return res
|
}
|
// 初始化series
|
var color = ['#a6c84c', '#ffa022', '#46bee9']
|
var series = []
|
|
seriesMap.forEach(function (item, i) {
|
series.push({
|
name: item[0],
|
type: 'lines',
|
zlevel: 1,
|
effect: {
|
show: true,
|
period: 6,
|
trailLength: 0,
|
symbol: 'triangle', // 箭头方式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
symbolSize: 20
|
// loop: false
|
},
|
tooltip: {
|
formatter: function (params, ticket, callback) {
|
// 鼠标悬浮提示信息获取自定义的结果
|
// var htm = `<div><span>出发地：${params.data.fromName}</span>
|
// <br><span>目的地：${params.data.toName}</span>
|
// <br><span>订单量：${params.data.cnt}</span>
|
// </div>`
|
// return htm
|
}
|
},
|
lineStyle: {
|
normal: {
|
color: color[i],
|
width: 1,
|
opacity: 0.4,
|
curveness: 0.2
|
}
|
},
|
data: convertData(item[1])
|
},
|
{
|
name: item[0],
|
type: 'effectScatter',
|
coordinateSystem: 'geo',
|
zlevel: 2,
|
rippleEffect: {
|
brushType: 'stroke'
|
},
|
tooltip: {
|
formatter: function (params, ticket, callback) {
|
return params.data.name
|
}
|
},
|
label: {
|
normal: {
|
show: true,
|
position: 'right',
|
formatter: '{b}'
|
}
|
},
|
symbolSize: function (val) {
|
return 16
|
},
|
itemStyle: {
|
normal: {
|
color: color[i]
|
}
|
},
|
data: item[1].map(function (dataItem) {
|
return {
|
name: dataItem[1].name,
|
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
|
}
|
})
|
})
|
})
|
|
var option = {
|
backgroundColor: '#404a59',
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'vertical',
|
top: 'bottom',
|
left: 'right',
|
data: [''],
|
textStyle: {
|
color: '#fff'
|
},
|
selectedMode: 'single'
|
},
|
geo: {
|
map: 'china',
|
center: [109.525404, 32.949728],
|
label: {
|
normal: {
|
show: true,
|
formatter: '{a}',
|
// position: 'inside',
|
backgroundColor: '#fff',
|
padding: [3, 5],
|
borderRadius: 3,
|
borderWidth: 1,
|
borderColor: 'rgba(0,0,0,0.5)',
|
color: '#777'
|
},
|
emphasis: {}
|
},
|
selectedMode: 'single',
|
zoom: 1.5,
|
roam: true,
|
itemStyle: {
|
normal: {
|
areaColor: '#323c48',
|
borderColor: '#404a59'
|
},
|
emphasis: {
|
areaColor: '#2a333d'
|
}
|
}
|
},
|
series: series
|
}
|
this.$echarts.registerMap('china', chinaJSON)
|
myChart.setOption(option)
|
},
|
// 获取在线设备数量
|
getStationAndVideoCount () {
|
var that = this
|
getStationAndVideoCount().then((res) => {
|
if (JSON.stringify(res.data) != '{}' && res.data.data) {
|
that.mTotalObj = res.data.data
|
}
|
that.initRightPie('EquipmentEcharts')
|
})
|
},
|
// 获取监控/监测设备列表
|
getStationAndVideoList () {
|
var that = this
|
getStationAndVideoList({ type: 'ALL' }).then((res) => {
|
if (JSON.stringify(res.data) != '{}' && res.data.data) {
|
that.equipmentList = res.data.data
|
that.equipmentList.staList.forEach(item => {
|
// 气象
|
if (item.dictTypeNum == 1) {
|
that.$refs.modalForm.addSiteEntity(item, '../../../zhny-dp/img/icon/map-qx.png')
|
} else if (item.dictTypeNum == 2) {
|
// 空气
|
that.$refs.modalForm.addSiteEntity(item, '../../../zhny-dp/img/icon/map-qx.png')
|
} else if (item.dictTypeNum == 3) {
|
// 水质
|
that.$refs.modalForm.addSiteEntity(item, '../../../zhny-dp/img/icon/map-sz.png')
|
} else if (item.dictTypeNum == 4) {
|
// 土壤
|
that.$refs.modalForm.addSiteEntity(item, '../../../zhny-dp/img/icon/map-tr.png')
|
}
|
})
|
that.equipmentList.vidList.forEach(item => {
|
that.$refs.modalForm.addSiteEntity(item, '../../../zhny-dp/img/icon/map-jk.png')
|
})
|
}
|
})
|
},
|
scFarmChange (data) {
|
this.farm.id = data
|
},
|
scltReset () {
|
this.farm.id = ''
|
this.scSelectTime = ''
|
},
|
// 地图图标的展示与隐藏
|
showIcon () {
|
if (this.showIconNC == false) {
|
this.$refs.modalForm.hiddenFarmLayer()
|
} else {
|
this.$refs.modalForm.showFarmLayer()
|
}
|
if (this.showIconDK == false) {
|
this.$refs.modalForm.hiddenPlotLayer()
|
} else {
|
this.$refs.modalForm.showPlotLayer()
|
}
|
if (this.showIconJK == false) {
|
this.$refs.modalForm.hiddenJKLayer()
|
} else {
|
this.$refs.modalForm.showJKLayer()
|
}
|
if (this.showIconTR == false) {
|
this.$refs.modalForm.hiddenTRLayer()
|
} else {
|
this.$refs.modalForm.showTRLayer()
|
}
|
if (this.showIconQX == false) {
|
this.$refs.modalForm.hiddenQXLayer()
|
} else {
|
this.$refs.modalForm.showQXLayer()
|
}
|
if (this.showIconSZ == false) {
|
this.$refs.modalForm.hiddenSZLayer()
|
} else {
|
this.$refs.modalForm.showSZLayer()
|
}
|
},
|
// 跳转 监控 设备详情窗口
|
goToJkDetail (item) {
|
this.vidInfo = item
|
this.JkDetail = true
|
this.$nextTick(() => {
|
if (item.flv) {
|
this.playFlvVideo(item.flv)
|
}
|
})
|
},
|
// 跳转 监测 设备详情窗口
|
goToDetail (item) {
|
this.jcIndex = 0
|
this.echartIsShow = false
|
this.staInfo = item
|
this.stationData = {}
|
this.staionDetail = true
|
const loadingInstance = Loading.service({ fullscreen: false, target: '.publicStaBox', text: '正在加载数据...', background: 'rgba(25, 67, 94,0.5)' })
|
this.$nextTick(() => {
|
setTimeout(() => {
|
loadingInstance.close()
|
}, 300)
|
})
|
setTimeout(() => {
|
this.getStationDateByStcd(item.stcd)
|
}, 400)
|
},
|
// 根据设备号获取监测数据
|
getStationDateByStcd (stcd) {
|
// const startTime = dateUtils.getSpecifyMonthDate(3)// 获取3个月前时间
|
const startTime = dateUtils.getSpecifyDayDate(10)// 获取10天前时间
|
const endTime = dateUtils.getDayLast()// 获取今天最后日期
|
getStationDateByStcd(stcd, startTime, endTime).then((res) => {
|
// 遍历气象大集合
|
res.data.data.weatherList.forEach(function (item, index) {
|
// 把气象无效数据过滤掉
|
var list = item.valueDataList.filter(vaItem => {
|
return vaItem.value != '0.0'
|
})
|
// 如果没有找到就不做操作
|
if (list.length > 0) {
|
item.valueDataList = list
|
}
|
})
|
// 遍历水质
|
res.data.data.waterList.forEach(function (item, index) {
|
// 把水质无效数据过滤掉
|
var list = item.valueDataList.filter(vaItem => {
|
return vaItem.value != '0.0'
|
})
|
// 如果没有找到就不做操作
|
if (list.length > 0) {
|
item.valueDataList = list
|
}
|
})
|
// 遍历土壤
|
res.data.data.soilList.forEach(function (item, index) {
|
// 把水质无效数据过滤掉
|
var list = item.valueDataList.filter(vaItem => {
|
return vaItem.value != '0.0'
|
})
|
// 如果没有找到就不做操作
|
if (list.length > 0) {
|
item.valueDataList = list
|
}
|
})
|
// 遍历空气
|
res.data.data.airList.forEach(function (item, index) {
|
// 把水质无效数据过滤掉
|
var list = item.valueDataList.filter(vaItem => {
|
return vaItem.value != '0.0'
|
})
|
// 如果没有找到就不做操作
|
if (list.length > 0) {
|
item.valueDataList = list
|
}
|
})
|
|
this.stationData = res.data.data
|
})
|
},
|
// 点击展示监测设备echart图
|
showEchart (index, item) {
|
if (this.jcIndex == index) {
|
this.echartIsShow = !this.echartIsShow
|
} else {
|
this.jcIndex = index
|
this.echartIsShow = true
|
}
|
if (item) {
|
const valueDataList = item.valueDataList
|
const values = []
|
const names = []
|
valueDataList.forEach(item => {
|
values.push(item.value)
|
names.push(item.startTime.substring(5, 10) + ' ' + item.startTime.substring(11) + ':00')
|
})
|
this.initLine('EchartsBox' + index, '单位' + item.unit, names, values)
|
}
|
},
|
// echart
|
initLine (dom, yName, x, y) {
|
const that = this
|
const chartDom = document.getElementById(dom)
|
const myChart = this.$echarts.init(chartDom)
|
|
const option = {
|
tooltip: {},
|
grid: {
|
top: '30px',
|
left: '28px',
|
right: '28px',
|
bottom: '0px',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#697B89'
|
}
|
},
|
axisLabel: {
|
// 坐标轴刻度标签的相关设置
|
lineHeight: 18,
|
textStyle: {
|
color: '#A9D1D7',
|
margin: 8
|
},
|
formatter: function (value) {
|
var ret = ''// 拼接加\n返回的类目项
|
var maxLength = 5// 每项显示文字个数
|
value = value.replace(/\s*/g, '')
|
var valLength = value.length// X轴类目项的文字个数
|
|
var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
|
// 如果类目项的文字大于5,
|
if (rowN > 1) {
|
for (var i = 0; i < rowN; i++) {
|
var temp = ''// 每次截取的字符串
|
var start = i * maxLength// 开始截取的位置
|
var end = start + maxLength// 结束截取的位置
|
// 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
temp = value.substring(start, end) + '\n'
|
ret += temp // 凭借最终的字符串
|
}
|
return ret
|
} else {
|
return value
|
}
|
}
|
},
|
axisTick: { show: false },
|
data: x
|
}
|
],
|
yAxis: [
|
{
|
name: yName,
|
nameTextStyle: {
|
color: '#A9D1D7'
|
},
|
type: 'value',
|
min: 0,
|
splitLine: {
|
show: false
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#697B89'
|
}
|
},
|
axisLabel: {
|
margin: 8,
|
textStyle: {
|
color: '#A9D1D7'
|
}
|
},
|
axisTick: { show: false }
|
}
|
],
|
series: [
|
{
|
type: 'line',
|
smooth: true, // 是否平滑曲线显示
|
symbolSize: 0,
|
lineStyle: {
|
normal: {
|
color: '#5ABF78' // 线条颜色
|
}
|
},
|
areaStyle: {
|
// 区域填充样式
|
normal: {
|
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: 'rgba(90, 191, 120, 0.5000)'
|
}, {
|
offset: 1,
|
color: 'rgba(90, 191, 120, 0)'
|
}]),
|
|
shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
|
shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
}
|
},
|
data: y
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
},
|
initSaleLine (dom) {
|
const that = this
|
const chartDom = document.getElementById(dom)
|
const myChart = this.$echarts.init(chartDom)
|
|
var x = []
|
var y = []
|
for (let i = 1; i <= 12; i++) {
|
x.push(i)
|
y.push(that.salaNumY[i])
|
}
|
|
const option = {
|
tooltip: {},
|
grid: {
|
top: '16%',
|
left: '6%',
|
right: '6%',
|
bottom: '12%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
|
type: 'category',
|
boundaryGap: false,
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#697B89'
|
}
|
},
|
axisLabel: {
|
// 坐标轴刻度标签的相关设置
|
textStyle: {
|
color: '#A9D1D7',
|
margin: 8
|
}
|
},
|
axisTick: { show: false },
|
data: x
|
}
|
],
|
yAxis: [
|
{
|
name: '（元）',
|
nameTextStyle: {
|
color: '#A9D1D7'
|
},
|
type: 'value',
|
min: 0,
|
splitLine: {
|
show: false
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#697B89'
|
}
|
},
|
axisLabel: {
|
margin: 8,
|
textStyle: {
|
color: '#A9D1D7'
|
}
|
},
|
axisTick: { show: false }
|
}
|
],
|
series: [
|
{
|
type: 'line',
|
smooth: true, // 是否平滑曲线显示
|
symbolSize: 0,
|
lineStyle: {
|
normal: {
|
color: '#66DDE9' // 线条颜色
|
}
|
},
|
areaStyle: {
|
// 区域填充样式
|
normal: {
|
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: '#66DDE9'
|
}, {
|
offset: 1,
|
color: 'rgba(102,221,233,0)'
|
}]),
|
|
shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
|
shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
}
|
},
|
data: y
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
window.addEventListener("resize", function () {
|
myChart.resize()
|
})
|
},
|
// flv视频播放
|
playFlvVideo (url) {
|
// 先销毁
|
if (this.flvPlayer) {
|
this.flvPlayer.pause()
|
this.flvPlayer.unload()
|
this.flvPlayer.detachMediaElement()
|
this.flvPlayer.destroy()
|
this.flvPlayer = null
|
}
|
if (flvjs.isSupported()) {
|
var videoElement = document.getElementById('videoElement')
|
this.flvPlayer = flvjs.createPlayer({
|
type: 'flv',
|
isLive: true,
|
hasAudio: false,
|
stashInitialSize: 128,
|
url: url
|
}, {
|
enableStashBuffer: false,
|
fixAudioTimestampGap: false
|
})
|
this.flvPlayer.attachMediaElement(videoElement)
|
this.flvPlayer.load()
|
this.flvPlayer.play()
|
}
|
},
|
// 地图地块点击
|
plotDetailsPopupShow (params) {
|
this.plotDetailsNape = 'zypz'
|
this.currentClickPlot = params
|
this.plotDetailsPlantList = []
|
this.plotDetailsRecordList = []
|
getFarmPlantList({ landId: params.id }).then(res => {
|
this.plotDetailsPlantList = res.data.data
|
})
|
|
getFarmingRecordList({ landId: params.id }).then(res => {
|
this.plotDetailsRecordList = res.data.data
|
})
|
this.napePlotPopupFlag = true
|
},
|
getFarmingRecordList () {
|
getFarmingRecordList({ farmId: this.currentDetails.id }).then(res => {
|
this.farmRecordList = res.data.data
|
})
|
},
|
|
getFarmPlantList () {
|
getFarmPlantList({ farmId: this.currentDetails.id, status: 1 }).then(res => {
|
this.farmPlantList = res.data.data
|
})
|
},
|
// 地块详情弹框中切换
|
plotDetailsClick (type) {
|
this.plotDetailsNape = type
|
},
|
|
|
|
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@font-face {
|
font-family: 'DS-Digital';
|
src: url('../../../public/DS-Digital/DS-DIGI-1.ttf');
|
src: url('../../../public/DS-Digital/DS-DIGIB-2.ttf');
|
src: url('../../../public/DS-Digital/DS-DIGII-3.ttf');
|
src: url('../../../public/DS-Digital/DS-DIGIT-4.ttf');
|
}
|
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.left-box {
|
left: 0;
|
background: linear-gradient(
|
270deg,
|
rgba(4, 41, 64, 0) 0%,
|
#042940 100%
|
);
|
|
.content {
|
display: flex;
|
flex-direction: column;
|
left: 0;
|
|
.t {
|
height: 244px;
|
|
.content-box {
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
|
.nc-num {
|
margin-top: 30px;
|
background: linear-gradient(
|
88deg,
|
rgba(60, 118, 138, 0) 0%,
|
rgba(60, 118, 138, 0.5) 100%
|
);
|
|
.text {
|
margin-left: 46px;
|
|
.num {
|
margin: 30px;
|
color: #66dde9;
|
}
|
}
|
|
.log {
|
left: auto;
|
right: 0;
|
background: url(../../../public/img/icon/nc-num.png)
|
no-repeat;
|
}
|
|
.t-l,
|
.b-l {
|
background: linear-gradient(
|
89deg,
|
rgba(102, 221, 233, 0) 0%,
|
#66dde9 51%,
|
rgba(102, 221, 233, 0) 100%
|
);
|
}
|
}
|
|
.pel-num {
|
margin-top: 46px;
|
background: linear-gradient(
|
88deg,
|
rgba(38, 89, 132, 0) 0%,
|
rgba(38, 89, 132, 0.5) 100%
|
);
|
|
.text {
|
margin-left: 108px;
|
|
.num {
|
margin: 48px;
|
color: #00b1ff;
|
}
|
}
|
|
.log {
|
left: 0;
|
right: auto;
|
background: url(../../../public/img/icon/pel-num.png)
|
no-repeat;
|
}
|
|
.t-l,
|
.b-l {
|
background: linear-gradient(
|
89deg,
|
rgba(51, 98, 153, 0) 0%,
|
#508fd9 55%,
|
rgba(51, 98, 153, 0) 100%
|
);
|
}
|
}
|
|
.pel-num,
|
.nc-num {
|
display: flex;
|
align-items: center;
|
position: relative;
|
|
width: 342px;
|
height: 70px;
|
border-radius: 35px 35px 35px 35px;
|
|
.text {
|
font-size: 21px;
|
color: #a9d1d7;
|
|
.num {
|
font-size: 24px;
|
font-weight: Bold;
|
}
|
}
|
|
.t-l {
|
top: 0;
|
bottom: auto;
|
}
|
|
.b-l {
|
top: auto;
|
bottom: 0;
|
}
|
|
.log {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
margin: auto;
|
width: 88px;
|
height: 88px;
|
background-size: 100% 100%;
|
}
|
|
.t-l,
|
.b-l {
|
margin: auto;
|
position: absolute;
|
left: 0;
|
right: 0;
|
width: 217px;
|
height: 1px;
|
}
|
}
|
}
|
}
|
|
.c {
|
height: 288px;
|
|
.content-box {
|
display: flex;
|
justify-content: space-around;
|
|
.being {
|
margin-top: 30px;
|
width: 152px;
|
|
.state {
|
color: #69e2ed;
|
}
|
|
.text {
|
.num {
|
color: #69e2ed;
|
}
|
}
|
}
|
|
.leisure {
|
margin-top: 30px;
|
width: 152px;
|
|
.state {
|
color: #c1c1c1;
|
}
|
|
.text {
|
.num {
|
color: #c1c1c1;
|
}
|
}
|
}
|
|
.being,
|
.leisure {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.echarts-box {
|
width: 152px;
|
height: 152px;
|
}
|
|
.state {
|
margin-top: 15px;
|
font-size: 16px;
|
font-weight: 400;
|
}
|
|
.text {
|
display: flex;
|
align-items: baseline;
|
margin-top: 10px;
|
display: flex;
|
|
.num {
|
font-size: 27px;
|
}
|
|
.unit {
|
margin-left: 6px;
|
font-size: 16px;
|
font-weight: 400;
|
color: #a9d1d7;
|
}
|
}
|
}
|
}
|
}
|
|
.b {
|
flex: 1;
|
|
.title-box {
|
.text {
|
display: flex;
|
}
|
|
.num {
|
margin-top: -3.5px;
|
margin-left: 10px;
|
margin-right: 10px;
|
padding: 0px 6px;
|
text-align: center;
|
height: 32px;
|
font-size: 32px;
|
font-weight: bold;
|
font-family: 'DS-Digital';
|
color: #e5f302;
|
background: rgba(102, 221, 233, 0.55);
|
}
|
|
.unit {
|
font-weight: 400px;
|
color: #ced3d6;
|
}
|
}
|
|
.content-box {
|
padding: 7px 30px;
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
|
ul {
|
flex: 1;
|
height: 100%;
|
overflow-y: auto;
|
scrollbar-width: thin;
|
|
li {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 60px;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
& > div {
|
display: flex;
|
align-items: center;
|
|
img {
|
width: 40px;
|
height: 40px;
|
}
|
|
.text {
|
margin-left: 16px;
|
font-size: 18px;
|
font-weight: 400;
|
color: #a9d1d7;
|
}
|
|
.num {
|
font-size: 18px;
|
color: #7ccfd6;
|
}
|
|
.unit {
|
font-size: 18px;
|
font-weight: 400;
|
color: #a9d1d7;
|
}
|
}
|
}
|
|
li:last-child {
|
border: none;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.right-box {
|
right: 0;
|
background: linear-gradient(
|
-270deg,
|
rgba(4, 41, 64, 0) 0%,
|
#042940 100%
|
);
|
|
.content {
|
display: flex;
|
flex-direction: column;
|
right: 0;
|
|
.t {
|
height: 284px;
|
|
.content-box {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.equipment {
|
width: 382px;
|
height: 100%;
|
}
|
}
|
}
|
|
.c {
|
height: 185px;
|
margin-top: 10px;
|
|
.title-box {
|
.text {
|
display: flex;
|
}
|
|
.num {
|
margin-top: -3.5px;
|
margin-left: 10px;
|
margin-right: 10px;
|
padding: 0px 6px;
|
text-align: center;
|
height: 32px;
|
font-size: 32px;
|
font-weight: bold;
|
font-family: 'DS-Digital';
|
color: #e5f302;
|
background: rgba(102, 221, 233, 0.55);
|
}
|
|
.unit {
|
font-weight: 400px;
|
color: #ced3d6;
|
}
|
}
|
|
.content-box {
|
padding: 28px 10px 0px 10px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: flex-start;
|
align-content: flex-start;
|
box-sizing: border-box;
|
|
& > div {
|
padding: 0 8px;
|
margin: 4px 4px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 117px;
|
height: 40px;
|
border: 1px solid rgba(102, 221, 233, 0.6);
|
border-radius: 4px 4px 4px 4px;
|
background: rgba(102, 221, 233, 0.4);
|
box-sizing: border-box;
|
font-size: 14px;
|
font-weight: 400;
|
color: #a9d1d7;
|
|
.num-unit {
|
display: flex;
|
|
.num {
|
font-size: 18px;
|
font-weight: 500;
|
color: #69e2ed;
|
}
|
}
|
}
|
}
|
}
|
|
.b {
|
flex: 1;
|
|
.content-box {
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
|
.total {
|
position: relative;
|
margin-top: 10px;
|
width: 340px;
|
height: 96px;
|
background: rgba(42, 113, 149, 0.37);
|
|
.t-l,
|
.t-r,
|
.b-l,
|
.b-r {
|
position: absolute;
|
width: 8px;
|
height: 8px;
|
}
|
|
.t-l {
|
top: -1px;
|
left: -1px;
|
border-top: 2px solid #7ccfd6;
|
border-left: 2px solid #7ccfd6;
|
}
|
|
.t-r {
|
top: -1px;
|
right: -1px;
|
border-top: 2px solid #7ccfd6;
|
border-right: 2px solid #7ccfd6;
|
}
|
|
.b-l {
|
bottom: -1px;
|
left: -1px;
|
border-bottom: 2px solid #7ccfd6;
|
border-left: 2px solid #7ccfd6;
|
}
|
|
.b-r {
|
bottom: -1px;
|
right: -1px;
|
border-bottom: 2px solid #7ccfd6;
|
border-right: 2px solid #7ccfd6;
|
}
|
|
.title {
|
margin-top: 10px;
|
}
|
|
.price {
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
|
& > div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: 2px;
|
width: 32px;
|
height: 40px;
|
font-size: 32px;
|
font-weight: bold;
|
font-family: 'DS-Digital';
|
color: #e5f302;
|
background: rgba(102, 221, 233, 0.55);
|
}
|
}
|
}
|
|
.trend {
|
flex: 1;
|
margin-top: 20px;
|
width: 372px;
|
}
|
}
|
}
|
}
|
}
|
|
.left-box,
|
.right-box {
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
top: 0;
|
width: 450px;
|
height: 100%;
|
|
.content {
|
position: absolute;
|
top: 0;
|
width: 396px;
|
height: 100%;
|
font-size: 18px;
|
font-weight: bold;
|
color: #6de9f3;
|
|
& > div {
|
position: relative;
|
margin-top: 28px;
|
|
.title-box {
|
position: absolute;
|
display: flex;
|
height: 34px;
|
|
.icon {
|
margin-top: 5px;
|
margin-left: 16px;
|
width: 10px;
|
height: 14px;
|
background: url(../../../public/img/icon/l-icon.png)
|
no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.text {
|
margin-left: 10px;
|
}
|
|
.em {
|
position: absolute;
|
top: 3px;
|
right: -54px;
|
width: 74px;
|
height: 19px;
|
background: url(../../../public/img/icon/r-icon.png)
|
no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.l {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
width: 378px;
|
height: 5px;
|
background: url(../../../public/img/icon/line.png)
|
no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.r {
|
position: absolute;
|
left: 378px;
|
bottom: 0;
|
width: 20px;
|
height: 3px;
|
background: url(../../../public/img/icon/r-line.png)
|
no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
.content-box {
|
position: absolute;
|
top: 34px;
|
width: 100%;
|
height: calc(100% - 34px);
|
}
|
}
|
}
|
}
|
.down-menu {
|
// align-items: center;
|
position: absolute;
|
top: 102px;
|
left: 438px;
|
width: 282px;
|
|
& > div {
|
margin-top: 8px;
|
border-radius: 4px 4px 4px 4px;
|
overflow: hidden;
|
}
|
|
& > div:first-child {
|
margin-top: 0px;
|
}
|
|
.down-menu-item {
|
padding: 0 8px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 46px;
|
background: rgba(15, 58, 78, 0.8);
|
|
box-sizing: border-box;
|
font-size: 18px;
|
color: #d8ebee;
|
cursor: pointer;
|
|
.l {
|
display: flex;
|
align-items: center;
|
|
span {
|
margin-left: 8px;
|
}
|
|
.checked {
|
color: #6de9f3;
|
}
|
}
|
|
i {
|
font-size: 12px;
|
}
|
}
|
|
.nc-list,
|
.jk-list,
|
.jc-list {
|
padding: 4px 15px 4px 40px;
|
max-height: 200px;
|
|
background: rgba(15, 58, 78, 0.8);
|
box-sizing: border-box;
|
|
color: #d8ebee;
|
|
overflow-x: hidden;
|
overflow-y: auto;
|
|
.box {
|
padding: 0 5px;
|
height: 36px;
|
line-height: 36px;
|
text-align: left;
|
box-sizing: border-box;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
cursor: pointer;
|
}
|
|
.box:hover {
|
background: rgba(105, 226, 237, 0.5);
|
}
|
}
|
}
|
|
.city-flow {
|
padding: 0 12px;
|
display: flex;
|
align-items: center;
|
position: absolute;
|
top: 104px;
|
right: 468px;
|
width: 124px;
|
height: 40px;
|
background: rgba(3, 50, 82, 0.5);
|
border-radius: 8px 8px 8px 8px;
|
border: 1px solid #69e2ed;
|
font-size: 14px;
|
color: #6de9f3;
|
box-sizing: border-box;
|
cursor: pointer;
|
|
.icon {
|
width: 24px;
|
height: 24px;
|
background: url(../../../public/img/icon/city-flow.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
|
span {
|
margin-left: 8px;
|
}
|
}
|
|
.layers-box {
|
display: flex;
|
position: absolute;
|
left: 438px;
|
bottom: 16px;
|
|
.sl {
|
background: url(../../../public/img/icon/SL.jpg) no-repeat;
|
}
|
|
.yx {
|
margin-left: 16px;
|
background: url(../../../public/img/icon/YX.jpg) no-repeat;
|
}
|
|
.sl,
|
.yx {
|
position: relative;
|
width: 80px;
|
height: 80px;
|
background-size: 100% 100%;
|
border-radius: 4px;
|
box-sizing: border-box;
|
overflow: hidden;
|
|
.text {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 30px;
|
background: rgba(4, 41, 64, 0.36);
|
font-size: 14px;
|
color: #fff;
|
line-height: 30px;
|
}
|
}
|
|
& > div.on {
|
.text {
|
color: #08f4ff;
|
}
|
|
border: 1px solid #18fefe;
|
}
|
}
|
|
.lenged-box {
|
position: absolute;
|
right: 422px;
|
bottom: 96px;
|
width: 150px;
|
height: 242px;
|
background: rgba(2, 26, 38, 0.8);
|
|
ul {
|
display: flex;
|
// align-items: center;
|
justify-content: space-around;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
|
li {
|
font-size: 18px;
|
color: #6de9f3;
|
display: flex;
|
|
.icon {
|
margin-left: 10px;
|
width: 24px;
|
height: 24px;
|
}
|
|
.title {
|
margin-left: 10px;
|
}
|
input[type='checkbox'] {
|
-webkit-appearance: none;
|
-moz-appearance: none;
|
width: 24px;
|
height: 24px;
|
background-color: transparent;
|
border: 1px solid #1bba79;
|
display: inline-block;
|
text-align: center;
|
vertical-align: middle;
|
line-height: 24px;
|
background: #fff;
|
border-radius: 4px;
|
margin-left: 5px;
|
cursor: pointer;
|
}
|
input[type='checkbox']:checked {
|
border: 1px solid #fff;
|
background-color: #20cf55;
|
}
|
input[type='checkbox']::before {
|
content: '';
|
}
|
input[type='checkbox']:checked::before {
|
content: '\2713';
|
background-color: transparent;
|
color: #fff;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
}
|
|
li:nth-child(1) {
|
.icon {
|
background: url(../../../public/img/icon/nc.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
li:nth-child(2) {
|
.icon {
|
background: rgba(129, 255, 84, 0.2);
|
border-radius: 4px 4px 4px 4px;
|
border: 1px solid #81ff54;
|
box-sizing: border-box;
|
}
|
}
|
|
li:nth-child(3) {
|
.icon {
|
background: url(../../../public/img/icon/jk.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
li:nth-child(4) {
|
.icon {
|
background: url(../../../public/img/icon/tr.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
li:nth-child(5) {
|
.icon {
|
background: url(../../../public/img/icon/qx.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
li:nth-child(6) {
|
.icon {
|
background: url(../../../public/img/icon/sz.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
}
|
.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;
|
}
|
}
|
}
|
.popup {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
background: rgba(7, 7, 7, 0.4);
|
|
.box {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 1208px;
|
height: 708px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.farm-more-btn {
|
position: absolute;
|
top: 4px;
|
right: 0;
|
font-size: 14px;
|
color: #a9d1d7;
|
cursor: pointer;
|
}
|
}
|
</style>
|
