3094 lines
101 KiB
Vue
3094 lines
101 KiB
Vue
<template>
|
||
<div class="fatherDiv">
|
||
<div class="centerBox">
|
||
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||
<div id="labelText" title="点标注">别点我</div>
|
||
<div class="rightWra">
|
||
<div class="tool" @click="Back()">
|
||
<img src="@/assets/images/fh.png" />
|
||
<span>返回</span>
|
||
</div>
|
||
<div class="tabar">
|
||
<div :class="tabrFlag ? 'tabarS' : ''" @click="tabRightWra(true)">黄岛区</div>
|
||
<div :class="!tabrFlag ? 'tabarS' : ''" @click="tabRightWra(false)">行政区</div>
|
||
</div>
|
||
<div v-show="tabrFlag" class="leftTop">
|
||
<div class="title">
|
||
<div style="
|
||
width: 3px;
|
||
height: 19px;
|
||
opacity: 1;
|
||
background: rgba(100, 195, 164, 1);
|
||
margin-right: 12px;
|
||
"></div>
|
||
<span>作物产量预估</span>
|
||
<p @click="Deta()">
|
||
下载
|
||
|
||
<img src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer" />
|
||
</p>
|
||
</div>
|
||
<div ref="areaDiv" class="areaDiv"></div>
|
||
</div>
|
||
<div v-show="!tabrFlag" class="rightTop">
|
||
<div class="title">
|
||
<div style="
|
||
width: 3px;
|
||
height: 19px;
|
||
opacity: 1;
|
||
background: rgba(100, 195, 164, 1);
|
||
margin-right: 12px;
|
||
"></div>
|
||
<span>作物产量预估-高标准农田</span>
|
||
<p @click="Deta2()" v-if="limits">
|
||
下载
|
||
<img src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer" />
|
||
</p>
|
||
</div>
|
||
<div v-show="limits" ref="farmlandDiv" class="farmlandDiv"></div>
|
||
<div v-if="!limits">
|
||
<img src='@/assets/images/qx.png' />
|
||
</div>
|
||
</div>
|
||
<div v-show="!tabrFlag" class="rightbottom">
|
||
<div class="title">
|
||
<div style="
|
||
width: 3px;
|
||
height: 19px;
|
||
opacity: 1;
|
||
background: rgba(100, 195, 164, 1);
|
||
margin-right: 12px;
|
||
"></div>
|
||
<span>作物产量预估-行政区划</span>
|
||
<p @click="Deta3()">
|
||
下载
|
||
<img src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer" />
|
||
</p>
|
||
</div>
|
||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||
</div>
|
||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||
<el-tooltip :disabled="!rightWraFlag" hide-after="0" :show-arrow="false" show-after="200"
|
||
class="box-item" effect="dark" content="收起" placement="top">
|
||
<el-icon v-if="rightWraFlag"><img src="@/assets/images/shouhuis.png"></el-icon>
|
||
</el-tooltip>
|
||
<el-tooltip :disabled="rightWraFlag" hide-after="0" :show-arrow="false" show-after="200"
|
||
class="box-item" effect="dark" content="展开" placement="top">
|
||
<el-icon v-if="!rightWraFlag"><img src="@/assets/images/zhankaiss.png"></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom_center">
|
||
<TimeLine v-if="dataSource.length > 0" :dataSource="dataSource" @dataHandle="handleData"
|
||
:allCount="allCount" @getcurrentPage="getcurrentPage" />
|
||
</div>
|
||
<div class="tool">
|
||
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
|
||
<span><img src="@/assets/images/amplify.png" alt="" /></span>
|
||
<span><img src="@/assets/images/reduce.png" alt="" /></span>
|
||
<span><img src="@/assets/images/measure.png" alt="" /></span>
|
||
<span><img src="@/assets/images/face.png" alt="" /></span>
|
||
<span><img src="@/assets/images/position.png" alt="" /></span>
|
||
</div>
|
||
<div id="popup" class="ol-popup">
|
||
<div class="pophead" style="width: 100%">
|
||
<div id="popup-title" style="
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
letter-spacing: 1px;
|
||
line-height: 42px;
|
||
padding-left: 15px;
|
||
border-radius: 8px;
|
||
margin:20px;
|
||
background: rgba(100, 195, 164, 0.05);
|
||
"></div>
|
||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||
</div>
|
||
<div id="popup-content" style="padding: 30px">
|
||
<p v-for="(item, index) in alterArr" :key="index">
|
||
<div class="label">单产量：</div>
|
||
<span>{{ item.wheatUnitOutputValue }}(公斤/亩)</span>
|
||
</p>
|
||
<p v-for="(item, index) in alterArr" :key="index">
|
||
<div class="label">总产量：</div>
|
||
<span>{{ item.wheatOutput }}(吨)</span>
|
||
</p>
|
||
</div>
|
||
<div id="popup-pagination"></div>
|
||
</div>
|
||
<div id="pop">
|
||
<div>
|
||
<div class="rowWra">
|
||
<span>地区：</span>
|
||
<span>{{ regionName }}</span>
|
||
</div>
|
||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||
<span>单产量：</span>
|
||
<span>{{ item.wheatUnitOutputValue }}公斤/亩</span>
|
||
</div>
|
||
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
|
||
<span>总产量：</span>
|
||
<span>{{ item.wheatOutput }}亩</span>
|
||
</div>
|
||
</div>
|
||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||
</div>
|
||
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
|
||
</div>
|
||
<div class="tabulation">
|
||
<div class="searchDiv">
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
<el-form-item label="时间:">
|
||
<el-select popper-class="selectCity" v-model="formInline.time" placeholder="请选择">
|
||
<el-option v-for="(item, index) in timeArr" :key="index" :label="Zitem" :value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="统计方式:">
|
||
<el-select popper-class="selectCity" v-model="formInline.statistical" placeholder="请选择">
|
||
<el-option label="镇级" value="镇" />
|
||
<el-option v-if="limits" label="高标准农田" value="高标准农田" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="作物种类">
|
||
<el-select v-model="formInline.droughtRating" popper-class="selectCity" placeholder="请选择">
|
||
<el-option label="小麦" value="小麦" />
|
||
<!-- <el-option label="玉米" value="玉米" />
|
||
<el-option label="大豆" value="大豆" />
|
||
<el-option label="花生" value="花生" /> -->
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||
<el-button plain @click="resetForm" :disabled="!SwitchFlag ? true : false">
|
||
重置
|
||
</el-button>
|
||
<el-button v-if="!operate" type="primary" text @click="dowcity">
|
||
<img src="@/assets/images/dow.png" alt="" />
|
||
下载
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="modeDiv" @click="SwitchMode">
|
||
<div :class="SwitchFlag ? 'Selected' : ''">表格模式</div>
|
||
<div :class="SwitchFlag ? '' : 'Selecteds'">图表模式</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="SwitchFlag" class="tableBox">
|
||
<div class="tableBorder">
|
||
<el-table :data="amount" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%"
|
||
highlight-current-row header-row-class-name="tabth" v-if="!operate">
|
||
<el-table-column align="center" prop="合计" width="80" />
|
||
<el-table-column v-for="(item, index) in tableItemAll" :key="index" :prop="item.value"
|
||
:label="item.lable" align="center" />
|
||
</el-table>
|
||
</div>
|
||
<el-table :data="tableNewData" :header-cell-style="{ 'text-align': 'center' }" height="80%"
|
||
highlight-current-row header-row-class-name="tabth">
|
||
<el-table-column type="index" width="80" align="center" label="序号" :index="Nindex" />
|
||
<el-table-column v-for="(item, index) in tableItem" :key="index" :prop="item.value" :label="item.lable"
|
||
align="center" />
|
||
</el-table>
|
||
<div class="example-pagination-block">
|
||
共{{ insectarr.length }}条
|
||
<el-pagination background layout="prev, pager, next" :total="insectarr.length"
|
||
:current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange" />
|
||
</div>
|
||
</div>
|
||
<div v-show="!SwitchFlag" class="chartMode">
|
||
<div ref="chartModeDiv" class="chartModeDiv"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||
import * as xlsx from 'xlsx'; // Vue3 版本
|
||
import { useEcharts } from '@/hooks/useEcharts';
|
||
import {
|
||
getwheatTotalYearValue,
|
||
getwheatHeightStandardFarmland,
|
||
getwheatGetAllTowns,
|
||
getwheatGetAllVillages,
|
||
getparameterEstimationYear,
|
||
getparameterEstimation,
|
||
} from '@/api/crops/wheat.js';
|
||
import { getgarrison } from '@/api/crops/site.js';
|
||
import axios from 'axios';
|
||
import 'echarts-gl';
|
||
import { downLoadFile } from '@/utils/download.js';
|
||
import { useRouter } from 'vue-router';
|
||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||
|
||
const router = useRouter();
|
||
let viewer = ref(null);
|
||
const areaDiv = ref(null);
|
||
const farmlandDiv = ref(null);
|
||
const ASdivisionDiv = ref(null);
|
||
const value = ref('');
|
||
value.value = window.localStorage.getItem('divisions');
|
||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||
const clickInfoMap = ref({ name: '', value: '' });
|
||
const formLandRef = ref([]);
|
||
const flag = ref(false);
|
||
let leftWraFlag = ref(true);
|
||
let rightWraFlag = ref(false);
|
||
let standardArr = ref([]);
|
||
let estimate = ref({});
|
||
let administration = ref([]);
|
||
const insectarr = ref([]);
|
||
let SwitchFlag = ref(true);
|
||
let timeArr = ref([]);
|
||
let currentPage = ref(1); //当前页
|
||
let pageSize = ref(12); //每页条数
|
||
let tableNewData = ref([]);
|
||
let tableItem = ref([]);
|
||
let tableItemAll = ref([]);
|
||
const num = ref(1);
|
||
let operate = ref(true);
|
||
const chartModeDiv = ref(null);
|
||
let regionName = ref('');
|
||
let dataSource = ref([]);
|
||
let oldDatas = ref('');
|
||
let alterArr = ref([]);
|
||
let paramCode = ref('');
|
||
let allCount = ref([]);
|
||
let currentPageS = ref('');
|
||
let pageSizeS = ref(5);
|
||
let TimeArr = ref([]);
|
||
let tabrFlag = ref(true);
|
||
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
|
||
let code =
|
||
window.localStorage.getItem('deptName') == '青岛西海岸新区'
|
||
? '黄岛区'
|
||
: window.localStorage.getItem('deptName');
|
||
let amount = ref([
|
||
{
|
||
wheatUnitOutputValue: 0,
|
||
wheatOutput: 0,
|
||
},
|
||
]);
|
||
let yearTime = ref('');
|
||
//搜索
|
||
let formInline = ref({
|
||
time: '',
|
||
statistical: '镇',
|
||
droughtRating: '小麦',
|
||
area: num.value,
|
||
});
|
||
let layers = ref(null); //村
|
||
|
||
// 组件挂载完成后执行
|
||
onMounted(() => {
|
||
initonMounted();
|
||
});
|
||
|
||
function initonMounted() {
|
||
getparameterEstimationYears(); //年
|
||
getwheatTotalYearValues(); //作物产量预估
|
||
//地图
|
||
initmap();
|
||
showDaChangArea();
|
||
alter();
|
||
ASdivision();
|
||
var popups = document.querySelectorAll('.alerDiv');
|
||
for (var i = 0; i < popups.length; i++) {
|
||
var popup = popups[i];
|
||
// popup.parentNode.removeChild(popup);
|
||
popup.style.display = 'block';
|
||
}
|
||
let rightWra = document.querySelector('.rightWra');
|
||
rightWra.style.transform = 'translate(101%,0)';
|
||
localStorage.setItem(router.currentRoute.value.path, true);
|
||
}
|
||
onUpdated(() => {
|
||
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
|
||
document.querySelector('.mode').style.display = 'block';
|
||
document.querySelector('.mode').innerText = '地图模式';
|
||
} else {
|
||
document.querySelector('.mode').style.display = 'block';
|
||
document.querySelector('.mode').innerText = '列表模式';
|
||
}
|
||
});
|
||
watch(
|
||
() => oldDatas.value,
|
||
(val, oldVal) => {
|
||
value.value = window.localStorage.getItem('divisions');
|
||
getwheatHeightStandardFarmlands(value.value, oldDatas.value.name); //高标准农田
|
||
getwheatGetAllTownss(value.value, oldDatas.value.name); //镇级
|
||
}
|
||
);
|
||
/*-------------地图------------------------*/
|
||
let map = ref(null);
|
||
let container = ref(null);
|
||
let content = ref(null);
|
||
let popupCloser = ref(null);
|
||
let overlay = ref(null);
|
||
let center = [
|
||
{ 海青镇: [119.55673590487976, 35.65921960953274] },
|
||
{ 大场镇: [119.62381239722713, 35.66588089759648] },
|
||
{ 泊里镇: [119.74667707697716, 35.64649984120179] },
|
||
{ 琅琊镇: [119.87030449159289, 35.66431631585516] },
|
||
{ 大村镇: [119.69265171077753, 35.81549722988757] },
|
||
{ 藏马镇: [119.78396543008807, 35.76160172256371] },
|
||
{ 张家楼街道: [119.87512724002988, 35.80195653922014] },
|
||
{ 滨海街道: [119.97581635161251, 35.77818590595386] },
|
||
{ 隐珠街道: [120.02465043714614, 35.86822190145625] },
|
||
{ 珠海街道: [119.9054471577447, 35.868205749221545] },
|
||
{ 六汪镇: [119.76550614744232, 35.952002955399706] },
|
||
{ 铁山街道: [119.9003966708421, 35.940916580021934] },
|
||
{ 胶南街道: [119.99585866840519, 35.92909063508609] },
|
||
{ 灵山岛省级自然保护区: [120.16665402696374, 35.76466422432871] },
|
||
{ 灵山卫街道: [120.09901058402102, 35.93194068930856] },
|
||
{ 宝山镇: [119.87425420478907, 36.00930267491887] },
|
||
{ 王台街道: [119.99939657505232, 36.055865563101804] },
|
||
{ 红石崖街道: [120.09213798349893, 36.069986617313006] },
|
||
{ 辛安街道: [120.14491642202691, 36.008342604564874] },
|
||
{ 长江路街道: [120.16674794518045, 35.961185596094154] },
|
||
{ 黄岛街道: [120.19699376304628, 36.04732099123903] },
|
||
{ 灵珠山街道: [120.07050399805128, 36.00779971701293] },
|
||
{ 薛家岛街道: [120.2165772076387, 35.95291190919208] },
|
||
];
|
||
function initmap() {
|
||
// 获取父元素和地图容器
|
||
var parentElement = document.querySelector('.center');
|
||
var mapContainer = document.getElementById('cesiumContainer');
|
||
map = new ol.Map({
|
||
target: 'cesiumContainer',
|
||
controls: [],
|
||
view: new ol.View({
|
||
center: [119.86763411957472, 35.88435182141938],
|
||
zoom: 11,
|
||
// 设置最大缩放级别
|
||
maxZoom: 16.5,
|
||
projection: 'EPSG:4326',
|
||
}),
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.XYZ({
|
||
url: `${serverAPI.tiandituLayers}`,
|
||
projection: serverAPI.flag?'EPSG:4326':'EPSG:3857',
|
||
}),
|
||
preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
|
||
}),
|
||
],
|
||
});
|
||
zhen();
|
||
map.on('singleclick', function (e) {
|
||
var coodinate = e.coordinate;
|
||
if (limits) {
|
||
var lon = coodinate[0];
|
||
var lat = coodinate[1];
|
||
var view = map.getView();
|
||
view.animate({
|
||
center: [lon, lat],
|
||
duration: 1000,
|
||
});
|
||
let tabFlag = false;
|
||
let arr = ['XJQY3702112019WGS84'];
|
||
arr.forEach(item => {
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (item == ite.A.name) {
|
||
tabFlag = true;
|
||
return;
|
||
}
|
||
});
|
||
});
|
||
if (tabFlag) {
|
||
QueryData(
|
||
e,
|
||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||
`${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||
'镇'
|
||
);
|
||
} else {
|
||
let url =
|
||
`${serverAPI.geoserverUrl}/data-2019-2022gaobiaozhunnongtian/rest/data`;
|
||
let sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
|
||
queryParameter: {
|
||
name: 'T2019_2022高标准农田片区@2019-2022gaobiaozhunnongtian',
|
||
attributeFilter: `DKMC = '${paramCode.value}'`,
|
||
},
|
||
datasetNames: ['2019-2022gaobiaozhunnongtian:T2019_2022高标准农田片区'],
|
||
});
|
||
new ol.supermap.FeatureService(url).getFeaturesBySQL(
|
||
sqlParam,
|
||
function (serviceResult) {
|
||
let geojson = new ol.format.GeoJSON().readFeatures(
|
||
serviceResult.result.features
|
||
);
|
||
let selectFeatureSource = new ol.source.Vector();
|
||
selectFeatureSource.addFeatures(geojson);
|
||
let vectorQuery = new ol.layer.Vector({
|
||
source: selectFeatureSource,
|
||
});
|
||
let features = vectorQuery.getSource().getFeatures();
|
||
for (var i = 0; i < features.length; i++) {
|
||
let polygon = features[i].getGeometry();
|
||
if (polygon.intersectsCoordinate(coodinate)) {
|
||
QueryData(
|
||
e,
|
||
'T2019_2022高标准农田片区@2019-2022gaobiaozhunnongtian',
|
||
`${serverAPI.geoserverUrl}/map-2019-2022gaobiaozhunnongtian/rest/maps/T2019_2022%E9%AB%98%E6%A0%87%E5%87%86%E5%86%9C%E7%94%B0%E7%89%87%E5%8C%BA@2019-2022gaobiaozhunnongtian`,
|
||
'高标准'
|
||
);
|
||
}
|
||
}
|
||
}
|
||
);
|
||
}
|
||
} else {
|
||
let url = `${serverAPI.geoserverUrl}/data-huangdaoqu_bianjie/rest/data`;
|
||
let sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
|
||
queryParameter: {
|
||
name: 'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||
attributeFilter: `XJQYMC = '${code}'`,
|
||
},
|
||
datasetNames: ['huangdaoqu_bianjie:XJQY3702112019WGS84'],
|
||
});
|
||
new ol.supermap.FeatureService(url).getFeaturesBySQL(
|
||
sqlParam,
|
||
function (serviceResult) {
|
||
let geojson = new ol.format.GeoJSON().readFeatures(
|
||
serviceResult.result.features
|
||
);
|
||
let selectFeatureSource = new ol.source.Vector();
|
||
selectFeatureSource.addFeatures(geojson);
|
||
let vectorQuery = new ol.layer.Vector({
|
||
source: selectFeatureSource,
|
||
});
|
||
let features = vectorQuery.getSource().getFeatures();
|
||
for (var i = 0; i < features.length; i++) {
|
||
let polygon = features[i].getGeometry();
|
||
if (polygon.intersectsCoordinate(coodinate)) {
|
||
var lon = coodinate[0];
|
||
var lat = coodinate[1];
|
||
var view = map.getView();
|
||
view.animate({
|
||
center: [lon, lat],
|
||
duration: 1000,
|
||
});
|
||
let tabFlag = false;
|
||
let arr = ['XJQY3702112019WGS84'];
|
||
arr.forEach(item => {
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (item == ite.A.name) {
|
||
tabFlag = true;
|
||
return;
|
||
}
|
||
});
|
||
});
|
||
if (tabFlag) {
|
||
QueryData(
|
||
e,
|
||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||
`${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||
'镇'
|
||
);
|
||
} else {
|
||
QueryData(
|
||
e,
|
||
'T2019_2022高标准农田片区@2019-2022gaobiaozhunnongtian',
|
||
`${serverAPI.geoserverUrl}/map-2019-2022gaobiaozhunnongtian/rest/maps/T2019_2022%E9%AB%98%E6%A0%87%E5%87%86%E5%86%9C%E7%94%B0%E7%89%87%E5%8C%BA@2019-2022gaobiaozhunnongtian`,
|
||
'高标准'
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
);
|
||
}
|
||
});
|
||
// 监听父元素大小变化
|
||
var resizeObserver = new ResizeObserver(function (entries) {
|
||
entries.forEach(function (entry) {
|
||
// 获取父元素的新大小
|
||
var newWidth = entry.contentRect.width;
|
||
var newHeight = entry.contentRect.height;
|
||
|
||
// 调整地图容器的大小
|
||
mapContainer.style.width = newWidth + 'px';
|
||
mapContainer.style.height = newHeight + 'px';
|
||
|
||
// 重新渲染地图
|
||
map.updateSize();
|
||
});
|
||
});
|
||
// 开始监听父元素大小变化
|
||
resizeObserver.observe(parentElement);
|
||
SQLSearch(code);
|
||
}
|
||
function QueryData(e, name, url, item) {
|
||
let newDataZh = [];
|
||
var point = new ol.geom.Point(e.coordinate);
|
||
var param = new ol.supermap.QueryByGeometryParameters({
|
||
queryParams: {
|
||
name: name,
|
||
},
|
||
geometry: point,
|
||
});
|
||
let titleDiv = document.querySelector('#popup-title');
|
||
let layergaoliang = ref(null);
|
||
let layerzhezhao = ref(null);
|
||
new ol.supermap.QueryService(url).queryByGeometry(param, function (data) {
|
||
layerzhezhao = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'zhezhao');
|
||
map.removeLayer(layerzhezhao);
|
||
let name = '';
|
||
if (item == '镇' && data.result.recordsets[0].features.features[0].properties.XJQYDM) {
|
||
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
|
||
value.value = code;
|
||
let arr = [];
|
||
getwheatGetAllTowns({
|
||
divisions: '370211',
|
||
yearMonth: oldDatas.value.name,
|
||
type: '小麦',
|
||
}).then(res => {
|
||
res.data.forEach(item => {
|
||
if (item.subregion == code) {
|
||
name = item.subName;
|
||
arr.push(item);
|
||
}
|
||
});
|
||
alterArr.value = arr;
|
||
alter();
|
||
});
|
||
} else if (
|
||
item == '高标准' &&
|
||
data.result.recordsets[0].features.features[0].properties.DKMC
|
||
) {
|
||
let code = data.result.recordsets[0].features.features[0].properties.DKMC;
|
||
let arr = [];
|
||
getwheatHeightStandardFarmland({
|
||
yearMonth: oldDatas.value.name,
|
||
type: '小麦',
|
||
}).then(res => {
|
||
res.data.forEach(item => {
|
||
if (item.subName == code) {
|
||
arr.push(item);
|
||
}
|
||
});
|
||
name = code;
|
||
alterArr.value = arr;
|
||
alter('gao');
|
||
});
|
||
}
|
||
function alter() {
|
||
if (data.result.currentCount > 0) {
|
||
if (data.result.recordsets[0].features) {
|
||
overlay.setPosition(point.flatCoordinates);
|
||
titleDiv.innerHTML = name;
|
||
}
|
||
layergaoliang = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||
map.removeLayer(layergaoliang);
|
||
var llll = new ol.format.GeoJSON().readFeatures(data.result.recordsets[0].features);
|
||
newDataZh = data.result.recordsets[0].features.features[0].geometry.coordinates;
|
||
addConver(data.result.recordsets[0].features.features[0].geometry.coordinates);
|
||
var selectFeatureSource = new ol.source.Vector();
|
||
selectFeatureSource.addFeatures(llll);
|
||
const style = new ol.style.Style({
|
||
// fill: new ol.style.Fill({
|
||
// color: 'rgba(255, 219, 113, 0.3)',
|
||
// }),
|
||
stroke: new ol.style.Stroke({
|
||
color: 'rgba(255, 219, 113, 1.0)',
|
||
// lineDash: [10, 10],
|
||
width: 5,
|
||
}),
|
||
});
|
||
var vectorQuery = new ol.layer.Vector({
|
||
id: 'dianjigaoliang',
|
||
source: selectFeatureSource,
|
||
zIndex: 9999,
|
||
});
|
||
vectorQuery.setStyle(style);
|
||
map.addLayer(vectorQuery);
|
||
var popups = document.querySelectorAll('.alerDiv');
|
||
for (var i = 0; i < popups.length; i++) {
|
||
var popup = popups[i];
|
||
// popup.parentNode.removeChild(popup);
|
||
popup.style.display = 'none';
|
||
}
|
||
}
|
||
}
|
||
});
|
||
popupCloser.addEventListener('click', function () {
|
||
layerzhezhao = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'zhezhao');
|
||
map.removeLayer(layerzhezhao);
|
||
erase(newDataZh);
|
||
value.value = window.localStorage.getItem('divisions');
|
||
layergaoliang = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||
map.removeLayer(layergaoliang);
|
||
layergaoliang = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'gao');
|
||
map.removeLayer(layergaoliang);
|
||
overlay.setPosition(undefined);
|
||
var popups = document.querySelectorAll('.alerDiv');
|
||
for (var i = 0; i < popups.length; i++) {
|
||
var popup = popups[i];
|
||
// popup.parentNode.removeChild(popup);
|
||
popup.style.display = 'block';
|
||
}
|
||
});
|
||
}
|
||
|
||
//添加遮罩
|
||
function addConver(data, name, color, index) {
|
||
let source = new ol.source.Vector();
|
||
var converLayer = new ol.layer.Vector({
|
||
id: name ? name : 'zhezhao',
|
||
source: source,
|
||
zIndex: index ? index : 50,
|
||
style: new ol.style.Style({
|
||
fill: new ol.style.Fill({
|
||
color: color ? color : 'rgba( 105, 105, 105, 0.9)',
|
||
}),
|
||
}),
|
||
});
|
||
const converGeom = erase(data);
|
||
const convertFt = new ol.Feature({
|
||
geometry: converGeom,
|
||
});
|
||
converLayer.getSource().addFeature(convertFt);
|
||
map.addLayer(converLayer);
|
||
}
|
||
//创建蒙层，凸显黄岛区域
|
||
function showDaChangArea() {
|
||
axios.get('/json/huangdao.json').then(({ data }) => {
|
||
const fts = new ol.format.GeoJSON().readFeatures(data);
|
||
const ft = fts[0];
|
||
// addConver(ft.getGeometry().getCoordinates(), 'huandao');
|
||
});
|
||
}
|
||
//擦除操作，生产遮罩范围
|
||
function erase(data) {
|
||
const extent = [-180, -90, 180, 90];
|
||
const polygonRing = ol.geom.Polygon.fromExtent(extent);
|
||
const coords = data;
|
||
coords.forEach(coord => {
|
||
const linearRing = new ol.geom.LinearRing(coord[0]);
|
||
polygonRing.appendLinearRing(linearRing);
|
||
});
|
||
return polygonRing;
|
||
}
|
||
// 弹窗
|
||
const alter = () => {
|
||
container = document.getElementById('popup');
|
||
//拿到弹出框内容元素
|
||
content = document.getElementById('popup-content');
|
||
//拿到弹出框关闭元素
|
||
popupCloser = document.getElementById('popup-closer');
|
||
//创建弹出框容器
|
||
overlay = new ol.Overlay({
|
||
element: document.getElementById('popup'), // 弹框容器的id
|
||
positioning: 'bottom-center',
|
||
stopEvent: true,
|
||
offset: [0, -10],
|
||
});
|
||
map.addOverlay(overlay);
|
||
};
|
||
//权限地图
|
||
function SQLSearch(name) {
|
||
let names = '';
|
||
let url = '';
|
||
let setName = '';
|
||
let setOf = '';
|
||
let quyu = '';
|
||
url = `${serverAPI.geoserverUrl}/data-huangdaoqu_bianjie/rest/data`;
|
||
names = name;
|
||
|
||
setName = 'XJQY3702112019WGS84';
|
||
setOf = 'huangdaoqu_bianjie';
|
||
quyu = 'XJQYMC';
|
||
//SQL查询（模糊查询）
|
||
// var url = 'http://192.168.0.113:8090/iserver/services/data-liangquhuadingWGS84/rest/data';
|
||
var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
|
||
queryParameter: {
|
||
name: `${setName}@${setOf}`,
|
||
attributeFilter: `${quyu} like '%${names}%'`,
|
||
},
|
||
datasetNames: [`${setOf}:${setName}`],
|
||
});
|
||
|
||
new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
|
||
if (serviceResult.result.featureCount != 0) {
|
||
var layerzhezhao = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'zhezhao');
|
||
map.removeLayer(layerzhezhao);
|
||
var layergaoliang = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||
map.removeLayer(layergaoliang);
|
||
var geojson = new ol.format.GeoJSON().readFeatures(serviceResult.result.features);
|
||
addConver(
|
||
serviceResult.result.features.features[0].geometry.coordinates,
|
||
'qu',
|
||
'rgba( 105, 105, 105, 1)',
|
||
9999
|
||
);
|
||
var selectFeatureSource = new ol.source.Vector();
|
||
selectFeatureSource.addFeatures(geojson);
|
||
//设置图层高亮样式
|
||
const style = new ol.style.Style({
|
||
// fill: new ol.style.Fill({
|
||
// color: 'rgba(0, 255, 0, 0.1)',
|
||
// }),
|
||
stroke: new ol.style.Stroke({
|
||
color: 'rgba(85, 255, 255, 1.0)',
|
||
// lineDash: [10, 10],
|
||
width: 2,
|
||
}),
|
||
});
|
||
var vectorQuery = new ol.layer.Vector({
|
||
id: 'dianjigaoliang',
|
||
source: selectFeatureSource,
|
||
});
|
||
vectorQuery.setStyle(style);
|
||
map.addLayer(vectorQuery);
|
||
map.getView().fit(selectFeatureSource.getExtent());
|
||
}
|
||
});
|
||
}
|
||
const cun = () => {
|
||
layers = new ol.layer.Tile({
|
||
source: new ol.source.TileSuperMapRest({
|
||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||
cacheEnabled: false,
|
||
}),
|
||
name: 'CJQY3702112019WGS84',
|
||
projection: 'EPSG:4326', //3857
|
||
zIndex: 9999,
|
||
});
|
||
map.addLayer(layers);
|
||
};
|
||
const zhen = () => {
|
||
var layer = new ol.layer.Tile({
|
||
source: new ol.source.TileSuperMapRest({
|
||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||
cacheEnabled: false,
|
||
}),
|
||
name: 'XJQY3702112019WGS84',
|
||
projection: 'EPSG:4326', //3857
|
||
zIndex: 9999,
|
||
});
|
||
map.addLayer(layer);
|
||
};
|
||
|
||
function SQLData(name) {
|
||
let names = '';
|
||
let url = '';
|
||
let setName = '';
|
||
let setOf = '';
|
||
let quyu = '';
|
||
url = `${serverAPI.geoserverUrl}/data-2019-2022gaobiaozhunnongtian/rest/data`;
|
||
names = name;
|
||
setName = 'T2019_2022高标准农田片区';
|
||
setOf = '2019-2022gaobiaozhunnongtian';
|
||
quyu = 'DKMC';
|
||
//SQL查询（模糊查询）
|
||
// var url = 'http://192.168.0.113:8090/iserver/services/data-liangquhuadingWGS84/rest/data';
|
||
var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
|
||
queryParameter: {
|
||
name: `${setName}@${setOf}`,
|
||
attributeFilter: `${quyu} like '%${names}%'`,
|
||
},
|
||
datasetNames: [`${setOf}:${setName}`],
|
||
});
|
||
|
||
new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
|
||
if (serviceResult.result.featureCount != 0) {
|
||
var layerzhezhao = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'zhezhao');
|
||
map.removeLayer(layerzhezhao);
|
||
var layerzhezhaos = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||
map.removeLayer(layerzhezhaos);
|
||
var layerzhezhaoss = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'gbz');
|
||
map.removeLayer(layerzhezhaoss);
|
||
var layergaoliang = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'dianjigaoliangs');
|
||
map.removeLayer(layergaoliang);
|
||
var geojson = new ol.format.GeoJSON().readFeatures(serviceResult.result.features);
|
||
addConver(
|
||
serviceResult.result.features.features[0].geometry.coordinates,
|
||
'gbz',
|
||
'rgba( 105, 105, 105, 1)',
|
||
9999
|
||
);
|
||
var selectFeatureSource = new ol.source.Vector();
|
||
selectFeatureSource.addFeatures(geojson);
|
||
//设置图层高亮样式
|
||
const style = new ol.style.Style({
|
||
// fill: new ol.style.Fill({
|
||
// color: 'rgba(0, 255, 0, 0.1)',
|
||
// }),
|
||
stroke: new ol.style.Stroke({
|
||
color: 'rgba(85, 255, 255, 1.0)',
|
||
// lineDash: [10, 10],
|
||
width: 2,
|
||
}),
|
||
});
|
||
var vectorQuery = new ol.layer.Vector({
|
||
id: 'dianjigaoliang',
|
||
source: selectFeatureSource,
|
||
});
|
||
vectorQuery.setStyle(style);
|
||
map.addLayer(vectorQuery);
|
||
map.getView().fit(selectFeatureSource.getExtent());
|
||
}
|
||
});
|
||
}
|
||
let Back = () => {
|
||
document.querySelector('.tool').style.display = 'none';
|
||
cun();
|
||
layers.setVisible(false);
|
||
zhen();
|
||
let arrs = [
|
||
'2019-2022gaobiaozhunnongtian',
|
||
'gbz',
|
||
'dianjigaoliang',
|
||
'dianjigaoliangs',
|
||
'gao',
|
||
'zhezhao',
|
||
];
|
||
arrs.forEach(item => {
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (ite.A.name == item || ite.A.id == item) {
|
||
map.getLayers().removeAt(index);
|
||
}
|
||
});
|
||
});
|
||
|
||
// let layerzhezhao = map
|
||
// .getLayers()
|
||
// .getArray()
|
||
// .find(layer => layer.get('id') === 'zhezhao');
|
||
// map.removeLayer(layerzhezhao);
|
||
// let layerzhezhaos = map
|
||
// .getLayers()
|
||
// .getArray()
|
||
// .find(layer => layer.get('id') === 'gbz');
|
||
// map.removeLayer(layerzhezhaos);
|
||
// var layergaoliang = map
|
||
// .getLayers()
|
||
// .getArray()
|
||
// .find(layer => layer.get('id') === 'dianjigaoliang');
|
||
// map.removeLayer(layergaoliang);
|
||
// var layergaoliang = map
|
||
// .getLayers()
|
||
// .getArray()
|
||
// .find(layer => layer.get('id') === 'dianjigaoliangs');
|
||
// map.removeLayer(layergaoliang);
|
||
var view = map.getView();
|
||
view.animate({
|
||
center: ['119.88661841637813', '35.85667692242919'], // 设置新的地图中心点坐标
|
||
duration: 1000, // 动画过渡时间
|
||
zoom: 11, // 设置新的地图缩放级别
|
||
});
|
||
var popups = document.querySelectorAll('.alerDiv');
|
||
for (var i = 0; i < popups.length; i++) {
|
||
var popup = popups[i];
|
||
// popup.parentNode.removeChild(popup);
|
||
popup.style.display = 'block';
|
||
}
|
||
};
|
||
const tabRightWra = flag => {
|
||
tabrFlag.value = flag;
|
||
if(flag){
|
||
areachar()
|
||
}else{
|
||
farmland()
|
||
ASdivision()
|
||
}
|
||
};
|
||
//折叠
|
||
|
||
function leftFoldClick() {
|
||
leftWraFlag.value = !leftWraFlag.value;
|
||
if (leftWraFlag.value) {
|
||
let leftWra = document.querySelector('.leftWra');
|
||
leftWra ? (leftWra.style.transform = 'translate(0,0)') : '';
|
||
} else {
|
||
let leftWra = document.querySelector('.leftWra');
|
||
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
|
||
}
|
||
}
|
||
function rightFoldClick() {
|
||
rightWraFlag.value = !rightWraFlag.value;
|
||
if (rightWraFlag.value) {
|
||
let rightWra = document.querySelector('.rightWra');
|
||
rightWra.style.transform = 'translate(0,0)';
|
||
} else {
|
||
let rightWra = document.querySelector('.rightWra');
|
||
rightWra.style.transform = 'translate(101%,0)';
|
||
}
|
||
}
|
||
|
||
//列表模式模式切换
|
||
const SwitchMode = () => {
|
||
SwitchFlag.value = !SwitchFlag.value;
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = document.querySelector('.chartMode').offsetWidth + 'px'; //初始化echarts图表宽度
|
||
statInfo.style.height = document.querySelector('.chartMode').offsetHeight + 'px';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width = document.querySelector('.chartMode').offsetWidth + 'px';
|
||
statInfo.style.height = document.querySelector('.chartMode').offsetHeight + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
};
|
||
|
||
const resetForm = () => {
|
||
(formInline.value.year = yearTime.value), (formInline.value.statistical = '镇');
|
||
formInline.value.droughtRating = '小麦';
|
||
formInline.value.area = num.value;
|
||
onSubmit();
|
||
};
|
||
|
||
/*------------------接口--------------------*/
|
||
const getcurrentPage = params => {
|
||
dataSource.value = TimeArr.value.slice((params - 1) * pageSizeS.value, params * pageSizeS.value);
|
||
};
|
||
//列表模式年
|
||
const getparameterEstimationYears = () => {
|
||
getparameterEstimationYear({ type: '小麦' }).then(res => {
|
||
yearTime.value = { name: res.data[0] };
|
||
oldDatas.value = { name: res.data[res.data.length - 1] }
|
||
timeArr.value = res.data;
|
||
let arr = [];
|
||
res.data.forEach(item => {
|
||
arr.push({ name: item });
|
||
});
|
||
formInline.value.time = res.data[res.data.length - 1];
|
||
TimeArr.value = arr;
|
||
allCount.value = Math.ceil(TimeArr.value.length / 5); //总页数
|
||
currentPageS = Math.ceil(arr.length / 5); //当前页
|
||
dataSource.value = TimeArr.value.slice(
|
||
(currentPageS - 1) * pageSizeS.value,
|
||
currentPageS * pageSizeS.value
|
||
);
|
||
onSubmit();
|
||
});
|
||
};
|
||
|
||
//产量预估
|
||
const getwheatTotalYearValues = (city, time) => {
|
||
getwheatTotalYearValue({ divisions: city, type: '小麦' }).then(res => {
|
||
estimate.value = res.data;
|
||
areachar();
|
||
});
|
||
};
|
||
//高标准农田
|
||
const getwheatHeightStandardFarmlands = (city, time) => {
|
||
getwheatHeightStandardFarmland({ divisions: city, yearMonth: time, type: '小麦' }).then(res => {
|
||
standardArr.value = res.data;
|
||
if (res.data.length > 0) {
|
||
farmland();
|
||
}
|
||
});
|
||
};
|
||
//镇
|
||
const getwheatGetAllTownss = (city, time) => {
|
||
getwheatGetAllTowns({ divisions: city, yearMonth: time, type: '小麦' }).then(res => {
|
||
administration.value = res.data;
|
||
Township.brr = JSON.parse(JSON.stringify(res.data));
|
||
Township.arr = Township.brr.sort((a, b) => {
|
||
return a.subName.length - b.subName.length;
|
||
});
|
||
Township.arr.unshift({
|
||
subregion: '',
|
||
subName: '全部',
|
||
});
|
||
let crr = [];
|
||
let drr = [];
|
||
Township.arr.forEach(item => {
|
||
if (crr.indexOf(item.subName) == -1) {
|
||
crr.push(item.subName);
|
||
drr.push({
|
||
subName: item.subName,
|
||
subregion: item.subregion,
|
||
area: item.area,
|
||
type: item.type,
|
||
});
|
||
}
|
||
});
|
||
Township.arr = drr;
|
||
ASdivision();
|
||
let arr = [];
|
||
center.forEach(item => {
|
||
res.data.forEach((i, index) => {
|
||
if (item[i.subName]) {
|
||
arr.push({
|
||
weizhi: item[i.subName],
|
||
dom1: `popup${index}`,
|
||
dom2: `popup-content${index}`,
|
||
subName: i.subName,
|
||
subregion: i.subRegion,
|
||
wheatOutput: i.wheatOutput,
|
||
wheatUnitOutputValue: i.wheatUnitOutputValue,
|
||
});
|
||
}
|
||
});
|
||
});
|
||
arr.forEach((data, index) => {
|
||
// 创建一个新的div元素
|
||
var innerDiv = document.createElement('div');
|
||
innerDiv.setAttribute('class', 'alerDiv');
|
||
innerDiv.id = data.dom2;
|
||
// innerDiv.style.height = '100px';
|
||
innerDiv.style.display = 'block';
|
||
// 创建一个新的div元素
|
||
var divElement = document.createElement('div');
|
||
divElement.id = data.dom1;
|
||
// 设置宽度和高度
|
||
// divElement.style.width = '120px';
|
||
// divElement.style.height = '100px';
|
||
// divElement.style.backgroundColor = 'red'; // 设置背景颜色为红色
|
||
divElement.style.display = 'block';
|
||
// 将内层div元素添加到外层div元素中
|
||
divElement.appendChild(innerDiv);
|
||
// 将div元素添加到文档中的body元素中
|
||
document.body.appendChild(divElement);
|
||
var container = document.getElementById(data.dom1);
|
||
var content = document.getElementById(data.dom2);
|
||
content.innerHTML =
|
||
'<div class="content-children">' +
|
||
'<div>单产: ' +
|
||
'<span>' +
|
||
data.wheatUnitOutputValue +
|
||
'</span>' +
|
||
'<span class="active">' +
|
||
'公斤/亩' +
|
||
'</span>' +
|
||
'</div>' +
|
||
'<div>总产: ' +
|
||
'<span>' +
|
||
data.wheatOutput.toFixed(1) +
|
||
'</span>' +
|
||
'<span class="active">' +
|
||
'吨' +
|
||
'</span>' +
|
||
'</div>' +
|
||
'</div>';
|
||
var overlay = new ol.Overlay({
|
||
// id: 'fugai',
|
||
element: container,
|
||
autoPan: true,
|
||
positioning: 'bottom-center',
|
||
stopEvent: true,
|
||
offset: [0, -10],
|
||
autoPanAnimation: {
|
||
duration: 250,
|
||
},
|
||
});
|
||
map.addOverlay(overlay);
|
||
overlay.setPosition(data.weizhi);
|
||
});
|
||
});
|
||
};
|
||
|
||
//下载
|
||
/*---------------------------*/
|
||
const Deta = item => {
|
||
getwheatTotalYearValue({
|
||
divisions: value.value,
|
||
yearMonth: oldDatas.value.name,
|
||
whetherToDownload: true,
|
||
type: '小麦',
|
||
}).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||
});
|
||
};
|
||
const Deta2 = item => {
|
||
getwheatHeightStandardFarmland({ yearMonth: oldDatas.value.name, type: '小麦' }).then(res => {
|
||
exportExcel(res.data, `高标准农田`, 'Sheet1');
|
||
});
|
||
};
|
||
const Deta3 = item => {
|
||
if (value.value === '') {
|
||
getwheatGetAllTowns({ yearMonth: oldDatas.value.name, type: '小麦' }).then(res => {
|
||
exportExcel(res.data, `作物产量预估-行政区划`, 'Sheet1');
|
||
});
|
||
} else {
|
||
getwheatGetAllVillages({
|
||
divisions: value.value,
|
||
yearMonth: oldDatas.value.name,
|
||
type: '小麦',
|
||
}).then(res => {
|
||
exportExcel(res.data, `作物产量预估-行政区划`, 'Sheet1');
|
||
});
|
||
}
|
||
};
|
||
const dowcity = () => {
|
||
let arr = JSON.parse(JSON.stringify(amount.value[0]));
|
||
insectarr.value.push(arr);
|
||
exportExcel(insectarr.value, '小麦面积统计表', 'Sheet1');
|
||
};
|
||
|
||
const onSubmit = () => {
|
||
let arr = [];
|
||
let brr = [];
|
||
currentPage.value = 1;
|
||
getparameterEstimation({
|
||
year: formInline.value.time,
|
||
statistical: formInline.value.statistical,
|
||
type: formInline.value.droughtRating,
|
||
area: formInline.value.area,
|
||
}).then(res => {
|
||
tableItem.value = [
|
||
{
|
||
lable: '地区',
|
||
value: 'subName',
|
||
},
|
||
{
|
||
lable: '单产量(公斤/亩)',
|
||
value: 'wheatUnitOutputValue',
|
||
},
|
||
{
|
||
lable: '总产量(吨)',
|
||
value: 'wheatOutput',
|
||
},
|
||
];
|
||
tableItemAll.value = [
|
||
{
|
||
lable: '',
|
||
value: 'subName',
|
||
},
|
||
{
|
||
lable: '单产量(公斤/亩)',
|
||
value: 'wheatUnitOutputValue',
|
||
},
|
||
{
|
||
lable: '总产量(吨)',
|
||
value: 'wheatOutput',
|
||
},
|
||
];
|
||
operate.value = false;
|
||
insectarr.value = res.data;
|
||
tableNewData.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
amount.value[0]['wheatUnitOutputValue'] = 0;
|
||
amount.value[0]['wheatOutput'] = 0;
|
||
amount.value[0]['subName'] = '合计';
|
||
res.data.forEach(item => {
|
||
item.wheatUnitOutputValue
|
||
? (amount.value[0]['wheatUnitOutputValue'] +=
|
||
Number(item.wheatUnitOutputValue) !== NaN
|
||
? Number(item.wheatUnitOutputValue) / res.data.length
|
||
: 0)
|
||
: 0;
|
||
item.wheatOutput
|
||
? (amount.value[0]['wheatOutput'] +=
|
||
Number(item.wheatOutput) !== NaN ? Number(item.wheatOutput) : 0)
|
||
: 0;
|
||
});
|
||
for (const key in amount.value[0]) {
|
||
if (amount.value[0][key] !== '合计') {
|
||
amount.value[0][key] = amount.value[0][key].toFixed(2);
|
||
}
|
||
}
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = document.querySelector('.app-main').offsetWidth - 50 + 'px'; //初始化echarts图表宽度
|
||
statInfo.style.height = document.querySelector('.app-main').offsetHeight + 'px';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width = document.querySelector('.app-main').offsetWidth + 'px';
|
||
statInfo.style.height = document.querySelector('.app-main').offsetHeight + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
});
|
||
};
|
||
|
||
//表头数据切换 ----------前端生成excel
|
||
const changeTableHead = (tableData, fieldName) => {
|
||
const list = tableData.map(item => {
|
||
const obj = {};
|
||
for (const k in item) {
|
||
if (fieldName[k]) {
|
||
obj[fieldName[k]] = item[k];
|
||
}
|
||
}
|
||
return obj;
|
||
});
|
||
return list;
|
||
};
|
||
const exportExcel = (
|
||
tableData,
|
||
// tableData = [
|
||
// {
|
||
// region: '山东',
|
||
// 湿润: '张三',
|
||
// 适宜: 333,
|
||
// 轻度干旱: 22,
|
||
// 中度干旱: 22,
|
||
// 重度干旱: 33,
|
||
// area: 44,
|
||
// },
|
||
// { index: 1, username: '李四', password: 444, age: 23 },
|
||
// ],
|
||
fileName = '用户列表',
|
||
pageName = 'Sheet1'
|
||
) => {
|
||
let fieldNameObj = {
|
||
subName: '区域名称',
|
||
wheatUnitOutputValue: '单产量(公斤/亩)',
|
||
wheatOutput: '总产量(吨)',
|
||
};
|
||
const list = changeTableHead(tableData, fieldNameObj);
|
||
// 创建工作表
|
||
const data = xlsx.utils.json_to_sheet(list);
|
||
// 创建工作簿
|
||
const wb = xlsx.utils.book_new();
|
||
// 将工作表放入工作簿中
|
||
xlsx.utils.book_append_sheet(wb, data, pageName);
|
||
// 生成文件并下载
|
||
xlsx.writeFile(wb, `${fileName}.xlsx`);
|
||
};
|
||
|
||
//每页条数
|
||
const handleCurrentChange = val => {
|
||
currentPage.value = val;
|
||
tableNewData.value = insectarr.value.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
};
|
||
const Nindex = index => {
|
||
// 当前页数 - 1 * 每页数据条数 + 1
|
||
const page = currentPage.value; // 当前页码
|
||
const pagesize = pageSize.value; // 每页条数
|
||
return index + 1 + (page - 1) * pagesize;
|
||
};
|
||
|
||
const handleData = oldData => {
|
||
oldDatas.value = oldData;
|
||
};
|
||
|
||
/*-------------echarts--------------*/
|
||
function areachar() {
|
||
const areaDivIntance = echarts.init(areaDiv.value);
|
||
let data = {
|
||
xData: [],
|
||
yData: [
|
||
{
|
||
data: [],
|
||
},
|
||
{
|
||
data: [],
|
||
},
|
||
],
|
||
yData2: [
|
||
{
|
||
data: [],
|
||
},
|
||
{
|
||
data: [],
|
||
},
|
||
],
|
||
};
|
||
estimate.value.forEach(item => {
|
||
data.xData.push(item.dataTime);
|
||
data.yData[0].data.push(item.wheatUnitOutputValue);
|
||
data.yData[1].data.push(item.wheatOutput);
|
||
data.yData2[0].data.push(item.tjWheatUnitOutputValue);
|
||
data.yData2[1].data.push(item.tjWheatOutput);
|
||
});
|
||
let ends = (3 / data.xData.length) * 100;
|
||
|
||
// 绘制图表
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '2%',
|
||
right: '4%',
|
||
bottom: '14%',
|
||
top: '16%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
data: ['单产', '统计年鉴单产', '总产', '统计年鉴总产'],
|
||
left: '7%',
|
||
top: '0%',
|
||
textStyle: {
|
||
color: "#666666"
|
||
},
|
||
itemWidth: 15,
|
||
itemHeight: 10,
|
||
itemGap: 15
|
||
},
|
||
dataZoom: [
|
||
{
|
||
show: false, //隐藏或显示（true）组件
|
||
type: 'slider',
|
||
width: '40%',
|
||
zoomLock: false,
|
||
top: '90%',
|
||
start: 0,
|
||
end: ends,
|
||
showDataShadow: false,
|
||
showDetail: false,
|
||
fillerColor: 'rgba(64, 158, 255)',
|
||
borderRadius: '50%',
|
||
moveHandleSize: 0,
|
||
moveHandleStyle: {},
|
||
left: '35%',
|
||
height: 12,
|
||
handleSize: '80%',
|
||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||
handleStyle: {
|
||
borderWidth: 0,
|
||
color: 'rgba(64, 158, 255)',
|
||
},
|
||
},
|
||
{
|
||
type: 'inside',
|
||
},
|
||
],
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.xData,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: "#666666"
|
||
}
|
||
},
|
||
axisTick: {
|
||
//刻度线显示
|
||
show: false,
|
||
},
|
||
},
|
||
|
||
yAxis: [{
|
||
type: 'log',
|
||
name:'单产(公斤/亩)',
|
||
min: 1,
|
||
logBase: 3,
|
||
nameTextStyle: {
|
||
color: "#666666"
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#cdd5e2'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#666666"
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#cdd5e2'
|
||
}
|
||
},
|
||
splitLine: { // 添加虚线背景
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
name: "总产(吨)",
|
||
nameTextStyle: {
|
||
color: "#666666"
|
||
},
|
||
position: "right",
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#cdd5e2'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
formatter: "{value}", //右侧Y轴文字显示
|
||
textStyle: {
|
||
color: "#666666"
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '单产',
|
||
type: 'bar',
|
||
barWidth: '12px',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#29acff'
|
||
}, {
|
||
offset: 1,
|
||
color: '#4bdfff'
|
||
}]),
|
||
barBorderRadius: [6,6,0,0],
|
||
},
|
||
},
|
||
data: data.yData[0].data
|
||
},
|
||
{
|
||
name: '统计年鉴单产',
|
||
type: 'bar',
|
||
barWidth: '12px',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#01c871'
|
||
}, {
|
||
offset: 1,
|
||
color: '#55f49c'
|
||
}]),
|
||
barBorderRadius: [6,6,0,0],
|
||
}
|
||
|
||
},
|
||
data: data.yData2[0].data,
|
||
},
|
||
{
|
||
name: "总产",
|
||
type: "line",
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: false, //平滑曲线显示
|
||
|
||
symbol: "circle", //标记的图形为实心圆
|
||
symbolSize: 8, //标记的大小
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#00FFFF',
|
||
lineStyle: {
|
||
color: "#00FFFF",
|
||
width:1
|
||
},
|
||
}
|
||
|
||
},
|
||
lineStyle: {
|
||
color: "#00FFFF"
|
||
},
|
||
|
||
data: data.yData[1].data
|
||
},
|
||
{
|
||
name: "统计年鉴总产",
|
||
type: "line",
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: false, //平滑曲线显示
|
||
symbol: "circle", //标记的图形为实心圆
|
||
symbolSize: 8, //标记的大小
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#FF9000',
|
||
lineStyle: {
|
||
color: "#FF9000",
|
||
width:1
|
||
},
|
||
}
|
||
|
||
},
|
||
lineStyle: {
|
||
color: "#FF9000"
|
||
},
|
||
|
||
data: data.yData2[1].data
|
||
}
|
||
]
|
||
};
|
||
|
||
option && areaDivIntance.setOption(option);
|
||
|
||
// window.addEventListener('resize', function () {
|
||
// areaDivIntance.resize();
|
||
// });
|
||
let erd = elementResizeDetectorMaker();
|
||
erd.listenTo(areaDiv.value, () => {
|
||
nextTick(() => {
|
||
areaDivIntance.resize();
|
||
});
|
||
});
|
||
}
|
||
|
||
function farmland() {
|
||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||
let subNameArr = [];
|
||
let wheatUnitOutputValueArr = [];
|
||
let wheatOutputArr = [];
|
||
standardArr.value.forEach(item => {
|
||
subNameArr.push(item.subName);
|
||
wheatUnitOutputValueArr.push(item.wheatUnitOutputValue);
|
||
wheatOutputArr.push(item.wheatOutput);
|
||
});
|
||
let ends = (3 / subNameArr.length) * 100;
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params, ticket, callback) {
|
||
var res = params[0].name;
|
||
|
||
for (var i = 0, l = params.length; i < l; i++) {
|
||
if (params[i].seriesType === 'line') {
|
||
res +=
|
||
'<br/>' +
|
||
params[i].seriesName +
|
||
' : ' +
|
||
(params[i].value ? params[i].value : '-') +
|
||
'h';
|
||
} else {
|
||
res +=
|
||
'<br/>' +
|
||
params[i].seriesName +
|
||
' : ' +
|
||
(params[i].value ? params[i].value : '-') +
|
||
'';
|
||
}
|
||
}
|
||
return res;
|
||
},
|
||
},
|
||
grid: {
|
||
top: '15%',
|
||
bottom: '15%',
|
||
left: '15%',
|
||
right: '15%',
|
||
},
|
||
dataZoom: [
|
||
{
|
||
show: false, //隐藏或显示（true）组件
|
||
type: 'slider',
|
||
width: '40%',
|
||
zoomLock: false,
|
||
top: '90%',
|
||
start: 0,
|
||
end: ends,
|
||
showDataShadow: false,
|
||
showDetail: false,
|
||
fillerColor: 'rgba(64, 158, 255)',
|
||
borderRadius: '50%',
|
||
moveHandleSize: 0,
|
||
moveHandleStyle: {},
|
||
left: '35%',
|
||
height: 12,
|
||
handleSize: '80%',
|
||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||
handleStyle: {
|
||
borderWidth: 0,
|
||
color: 'rgba(64, 158, 255)',
|
||
},
|
||
},
|
||
{
|
||
type: 'inside',
|
||
},
|
||
],
|
||
legend: {
|
||
data: ['单产量', '总产量'],
|
||
textStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
fontSize: 12,
|
||
},
|
||
type: 'scroll',
|
||
top: '3%',
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
formatter: function (value) {
|
||
var ret = ''; //拼接加\n返回的类目项
|
||
var maxLength = 5; //每项显示文字个数
|
||
var valLength = value.length; //X轴类目项的文字个数
|
||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||
if (rowN > 1) {
|
||
//如果类目项的文字大于5,
|
||
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;
|
||
}
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
},
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
data: subNameArr,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '产量(吨)',
|
||
splitLine: {
|
||
show: true,
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
relativeSize: -2,
|
||
formatter: '{value}',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
//分割线样式
|
||
type: 'dashed',
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
},
|
||
},
|
||
min: 0,
|
||
position: 'top',
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '产量(公斤/亩)',
|
||
min: 0,
|
||
position: 'bottom',
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
axisLabel: {
|
||
formatter: value => {
|
||
if (value) {
|
||
value = value / 10000 + '万';
|
||
}
|
||
return value;
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '单产量',
|
||
type: 'bar',
|
||
barWidth: '10%',
|
||
yAxisIndex: 0,
|
||
data: wheatUnitOutputValueArr,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 2,
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(64, 192, 87, 0.5)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(64, 192, 87, 0.2)', // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
// borderColor:'rgba(0, 170, 255, 0.9)',
|
||
shadowColor: 'rgba(255, 255, 255, 0.5)',
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '总产量',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
barWidth: '10%',
|
||
data: wheatOutputArr,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 2,
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(143, 186, 243, 0.5)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(143, 186, 243, 0.2)', // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
// borderColor:'rgba(0, 170, 255, 0.9)',
|
||
shadowColor: 'rgba(255, 255, 255, 0.5)',
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
farmlandDivIntance.on('click', function (param) {
|
||
//验证是否是域名
|
||
var domain = window.location.host;
|
||
var rule = /^(([-\u4E00-\u9FA5a-z0-9]{1,63})\.)+([\u4E00-\u9FA5a-z]{2,63})\.?$/;
|
||
if (!rule.test(domain)) {
|
||
document.querySelector('.tool').style.display = 'block';
|
||
paramCode.value = param.name;
|
||
let arr = ['XJQY3702112019WGS84', 'CJQY3702112019WGS84'];
|
||
SQLData(param.name);
|
||
arr.forEach(item => {
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (ite.A.name == item) {
|
||
map.getLayers().removeAt(index);
|
||
}
|
||
});
|
||
});
|
||
|
||
var popups = document.querySelectorAll('.alerDiv');
|
||
for (var i = 0; i < popups.length; i++) {
|
||
var popup = popups[i];
|
||
// popup.parentNode.removeChild(popup);
|
||
popup.style.display = 'none';
|
||
}
|
||
let arrs = ['2019-2022gaobiaozhunnongtian'];
|
||
arrs.forEach(item => {
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (ite.A.name == item) {
|
||
map.getLayers().removeAt(index);
|
||
}
|
||
});
|
||
});
|
||
let layerzhezhaos = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'gbz');
|
||
map.removeLayer(layerzhezhaos);
|
||
var layergaoliang = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||
map.removeLayer(layergaoliang);
|
||
var layergaoliang = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'dianjigaoliangs');
|
||
map.removeLayer(layergaoliang);
|
||
layers = new ol.layer.Tile({
|
||
source: new ol.source.TileSuperMapRest({
|
||
url: `${serverAPI.geoserverUrl}/map-2019-2022gaobiaozhunnongtian/rest/maps/T2019_2022%E9%AB%98%E6%A0%87%E5%87%86%E5%86%9C%E7%94%B0%E7%89%87%E5%8C%BA@2019-2022gaobiaozhunnongtian`,
|
||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||
cacheEnabled: false,
|
||
}),
|
||
name: '2019-2022gaobiaozhunnongtian',
|
||
projection: 'EPSG:4326', //3857
|
||
zIndex: 9999,
|
||
});
|
||
map.addLayer(layers);
|
||
}
|
||
});
|
||
|
||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||
useEcharts(farmlandDivIntance, option);
|
||
let erd = elementResizeDetectorMaker();
|
||
erd.listenTo(farmlandDiv.value, () => {
|
||
nextTick(() => {
|
||
farmlandDivIntance.resize();
|
||
});
|
||
});
|
||
}
|
||
//返回
|
||
function back() {
|
||
deleteEntityByName('townLine');
|
||
deleteEntityByName('villageLine');
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||
duration: 2,
|
||
});
|
||
flag.value = false;
|
||
}
|
||
function ASdivision() {
|
||
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
||
administration.value.sort((a, b) => {
|
||
return a.subName.length - b.subName.length;
|
||
});
|
||
let subNameArr = [];
|
||
let wheatUnitOutputValueArr = [];
|
||
let wheatOutputArr = [];
|
||
administration.value.forEach(item => {
|
||
subNameArr.push(item.subName);
|
||
wheatUnitOutputValueArr.push(item.wheatUnitOutputValue);
|
||
wheatOutputArr.push(item.wheatOutput);
|
||
});
|
||
var yName = subNameArr.sort((a, b) => {
|
||
return a.length - b.length;
|
||
});
|
||
let ends = (3 / yName.length) * 100;
|
||
var data = [wheatUnitOutputValueArr, wheatOutputArr];
|
||
|
||
var colorArry = [
|
||
new echarts.graphic.LinearGradient(
|
||
1,
|
||
0,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(4, 247, 227, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(4, 247, 227, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
new echarts.graphic.LinearGradient(
|
||
1,
|
||
0,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(33, 187, 251, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(33, 187, 251, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
];
|
||
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params, ticket, callback) {
|
||
var res = params[0].name;
|
||
|
||
for (var i = 0, l = params.length; i < l; i++) {
|
||
if (params[i].seriesType === 'line') {
|
||
res +=
|
||
'<br/>' +
|
||
params[i].seriesName +
|
||
' : ' +
|
||
(params[i].value ? params[i].value : '-') +
|
||
'h';
|
||
} else {
|
||
res +=
|
||
'<br/>' +
|
||
params[i].seriesName +
|
||
' : ' +
|
||
(params[i].value ? params[i].value : '-') +
|
||
'';
|
||
}
|
||
}
|
||
return res;
|
||
},
|
||
},
|
||
grid: {
|
||
top: '15%',
|
||
bottom: '15%',
|
||
left: '15%',
|
||
right: '15%',
|
||
},
|
||
dataZoom: [
|
||
{
|
||
show: false, //隐藏或显示（true）组件
|
||
type: 'slider',
|
||
width: '40%',
|
||
zoomLock: false,
|
||
top: '90%',
|
||
start: 0,
|
||
end: ends,
|
||
showDataShadow: false,
|
||
showDetail: false,
|
||
fillerColor: 'rgba(64, 158, 255)',
|
||
borderRadius: '50%',
|
||
moveHandleSize: 0,
|
||
moveHandleStyle: {},
|
||
left: '35%',
|
||
height: 12,
|
||
handleSize: '80%',
|
||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||
handleStyle: {
|
||
borderWidth: 0,
|
||
color: 'rgba(64, 158, 255)',
|
||
},
|
||
},
|
||
{
|
||
type: 'inside',
|
||
},
|
||
],
|
||
legend: {
|
||
data: ['单产量', '总产量'],
|
||
textStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
fontSize: 12,
|
||
},
|
||
type: 'scroll',
|
||
top: '3%',
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
formatter: function (value) {
|
||
var ret = ''; //拼接加\n返回的类目项
|
||
var maxLength = 5; //每项显示文字个数
|
||
var valLength = value.length; //X轴类目项的文字个数
|
||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||
if (rowN > 1) {
|
||
//如果类目项的文字大于5,
|
||
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;
|
||
}
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
},
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
data: subNameArr,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '产量(吨)',
|
||
splitLine: {
|
||
show: true,
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
relativeSize: -2,
|
||
formatter: '{value}',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
//分割线样式
|
||
type: 'dashed',
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
},
|
||
},
|
||
min: 0,
|
||
position: 'top',
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '产量(公斤/亩)',
|
||
min: 0,
|
||
position: 'bottom',
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
axisLabel: {
|
||
formatter: value => {
|
||
if (value) {
|
||
value = value / 10000 + '万';
|
||
}
|
||
return value;
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '单产量',
|
||
type: 'bar',
|
||
barWidth: '10%',
|
||
yAxisIndex: 0,
|
||
data: wheatUnitOutputValueArr,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 2,
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(255, 211, 81, 0.5)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 211, 81, 0.2)', // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
// borderColor:'rgba(0, 170, 255, 0.9)',
|
||
shadowColor: 'rgba(255, 255, 255, 0.5)',
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '总产量',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
barWidth: '10%',
|
||
data: wheatOutputArr,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 2,
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(33, 187, 251, 0.5)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(33, 187, 251, 0.2)', // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
// borderColor:'rgba(0, 170, 255, 0.9)',
|
||
shadowColor: 'rgba(255, 255, 255, 0.5)',
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
useEcharts(ASdivisionDivIntance, option);
|
||
let erd = elementResizeDetectorMaker();
|
||
erd.listenTo(ASdivisionDiv.value, () => {
|
||
nextTick(() => {
|
||
ASdivisionDivIntance.resize();
|
||
});
|
||
});
|
||
}
|
||
function chartModes() {
|
||
const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
|
||
let arr = [];
|
||
let 单产量 = [];
|
||
let 总产量 = [];
|
||
insectarr.value.forEach(item => {
|
||
arr.push(item.subName);
|
||
item.wheatUnitOutputValue !== undefined
|
||
? 单产量.push(item.wheatUnitOutputValue)
|
||
: 单产量.push(0);
|
||
item.wheatOutput !== undefined ? 总产量.push(item.wheatOutput) : 总产量.push(0);
|
||
});
|
||
let ends = (10 / arr.length) * 100;
|
||
let option = {
|
||
// backgroundColor: 'rgba(5, 38, 75, 0.1)',
|
||
color: ['rgba(4, 247, 227, 1)', 'rgba(33, 187, 251, 1)'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params, ticket, callback) {
|
||
var res = params[0].name;
|
||
|
||
for (var i = 0, l = params.length; i < l; i++) {
|
||
if (params[i].seriesType === 'line') {
|
||
res +=
|
||
'<br/>' +
|
||
params[i].seriesName +
|
||
' : ' +
|
||
(params[i].value ? params[i].value : '-') +
|
||
'h';
|
||
} else {
|
||
res +=
|
||
'<br/>' +
|
||
params[i].seriesName +
|
||
' : ' +
|
||
(params[i].value ? params[i].value : '-');
|
||
}
|
||
}
|
||
return res;
|
||
},
|
||
},
|
||
grid: {
|
||
top: '5%',
|
||
bottom: '20%',
|
||
},
|
||
// legend: {
|
||
// data: ['人群数量', '基金金额'],
|
||
// textStyle: {
|
||
// color: '#fff',
|
||
// fontSize: 12,
|
||
// },
|
||
// type: 'scroll',
|
||
// },
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
width: '40%',
|
||
zoomLock: true,
|
||
top: '85%',
|
||
start: 0,
|
||
end: ends,
|
||
showDataShadow: false,
|
||
showDetail: false,
|
||
fillerColor: 'rgba(64, 158, 255)',
|
||
borderRadius: '50%',
|
||
moveHandleSize: 0,
|
||
moveHandleStyle: {},
|
||
left: '30%',
|
||
height: 12,
|
||
handleSize: '80%',
|
||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||
handleStyle: {
|
||
borderWidth: 0,
|
||
color: 'rgba(64, 158, 255)',
|
||
},
|
||
},
|
||
{
|
||
type: 'inside',
|
||
},
|
||
],
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
relativeSize: -2,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(102, 102, 102, 1)',
|
||
},
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
data: arr,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '单产量(公斤/亩)',
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
relativeSize: -2,
|
||
formatter: '{value}',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(102, 102, 102, 1)',
|
||
},
|
||
},
|
||
min: 0,
|
||
position: 'top',
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '总产量(吨)',
|
||
min: 0,
|
||
position: 'bottom',
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 12,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
relativeSize: -2,
|
||
formatter: '{value}',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(102, 102, 102, 1)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '单产量(公斤/亩)',
|
||
type: 'bar',
|
||
yAxisIndex: 0,
|
||
data: 单产量,
|
||
},
|
||
{
|
||
name: '总产量(吨)',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
data: 总产量,
|
||
},
|
||
],
|
||
};
|
||
|
||
useEcharts(ASdivisionDivIntance, option);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$height: calc(100vh - 100px);
|
||
|
||
.fatherDiv,
|
||
.tabulation,
|
||
.centerBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.imgrotate {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.title {
|
||
width: 90%;
|
||
margin: 15px;
|
||
height: 37px;
|
||
border-radius: 3px 3px, 0px, 0px;
|
||
background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
line-height: 37px;
|
||
padding-left: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
span {
|
||
width: 80%;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: rgba(51, 51, 51, 1);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
}
|
||
|
||
p {
|
||
width: 79px;
|
||
height: 25px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
background: rgba(100, 195, 164, 1);
|
||
display: flex;
|
||
color: rgba(255, 255, 255, 1);
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabulation {
|
||
display: none;
|
||
padding: 20px;
|
||
|
||
.tableBox {
|
||
padding: 0 10px;
|
||
|
||
.tableBorder {
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
|
||
.el-table--fit {
|
||
border-radius: 8px;
|
||
border: 2px solid rgba(100, 195, 164, 0.8);
|
||
box-shadow: 0px 3px 9px 0px rgba(100, 195, 164, 0.25),
|
||
0px 1px 2px 0px rgba(100, 195, 164, 0.8);
|
||
}
|
||
}
|
||
|
||
:deep(.el-table .el-table__header-wrapper th,
|
||
.el-table .el-table__fixed-header-wrapper th) {
|
||
color: rgba(0, 0, 0, 1);
|
||
}
|
||
|
||
height: 84%;
|
||
|
||
:deep(.el-table__inner-wrapper) {
|
||
height: 96% !important;
|
||
}
|
||
|
||
.example-pagination-block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
:deep(.tabth) {
|
||
background-color: rgba(247, 247, 247, 1);
|
||
}
|
||
}
|
||
|
||
.chartMode {
|
||
width: 100%;
|
||
height: 85%;
|
||
|
||
.chartModeDiv {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
.searchDiv {
|
||
display: flex;
|
||
|
||
.dow {
|
||
float: right;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
:deep(.el-input__wrapper) {
|
||
width: 100px;
|
||
}
|
||
|
||
.modeDiv {
|
||
width: 234px;
|
||
height: 26px;
|
||
opacity: 1;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
// font-weight: 400;
|
||
border: 1px solid #ccc;
|
||
cursor: pointer;
|
||
|
||
div {
|
||
flex: 1;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
line-height: 26px;
|
||
}
|
||
|
||
.Selected {
|
||
background: rgba(100, 195, 164, 1);
|
||
border-radius: 8px 0px 0px 8px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
.Selecteds {
|
||
background: rgba(100, 195, 164, 1);
|
||
border-radius: 0px 8px 8px 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.leftWra {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 20px;
|
||
height: $height;
|
||
width: 23%;
|
||
background: rgba(2, 31, 26, 0.85);
|
||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||
transition: transform 1s;
|
||
|
||
.leftFoldDiv {
|
||
width: 30px;
|
||
height: 30px;
|
||
position: absolute;
|
||
right: -14%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 30px;
|
||
color: #ccc;
|
||
}
|
||
|
||
.leftbottom {
|
||
width: 100%;
|
||
height: 455px;
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-top: 13px;
|
||
|
||
.tableDiv {
|
||
// background: rgba(255, 255, 255, 0.05);
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 85%;
|
||
flex-direction: column;
|
||
padding: 5px 10px 5px 10px;
|
||
color: rgba(255, 255, 255, 1);
|
||
|
||
.Crops {
|
||
display: flex;
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
height: 31px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
opacity: 1;
|
||
background: linear-gradient(90deg,
|
||
rgba(21, 173, 148, 0.1) 0%,
|
||
rgba(21, 173, 148, 0) 100%);
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.el-checkbox-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
:deep(.ones) {
|
||
width: 100%;
|
||
height: 171;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
--el-table-tr-bg-color: null;
|
||
--el-table-border-color: null;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rightWra {
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 0px;
|
||
width: 23%;
|
||
height: calc(100vh - 98px);
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 1);
|
||
box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
|
||
0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
|
||
transition: transform 1s;
|
||
|
||
.tabar {
|
||
width: 90%;
|
||
margin: 15px 15px 0 15px;
|
||
height: 34px;
|
||
display: flex;
|
||
padding: 0 15px;
|
||
justify-content: space-around;
|
||
|
||
div {
|
||
width: 45%;
|
||
line-height: 34px;
|
||
text-align: center;
|
||
background: rgba(255, 255, 255, 1);
|
||
border: 1px solid rgba(100, 195, 164, 1);
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
color: rgba(100, 195, 164, 1);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tabarS {
|
||
background: rgba(100, 195, 164, 1);
|
||
border: 1px solid rgba(100, 195, 164, 1);
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
|
||
.rightFoldDiv {
|
||
width: 28px;
|
||
height: 30px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translate(-100%, -50%);
|
||
font-size: 30px;
|
||
color: #ccc;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.leftTop {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.areaDiv {
|
||
width: 100%;
|
||
height: 327px;
|
||
opacity: 1;
|
||
display: flex;
|
||
padding: 1px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.ProgressBar {
|
||
width: 100%;
|
||
height: 9px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.rightTop {
|
||
width: 100%;
|
||
height: calc(50% - 25px);
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.farmlandDiv {
|
||
width: 100%;
|
||
height: calc(100% - 67px);
|
||
opacity: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.ProgressBar {
|
||
width: 100%;
|
||
height: 9px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.rightbottom {
|
||
width: 100%;
|
||
height: calc(50% - 25px);
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.el-select {
|
||
width: 80%;
|
||
font-size: 14px;
|
||
color: #333;
|
||
background: rgba(22, 94, 102, 1);
|
||
border: 1px solid rgba(4, 153, 153, 1) !important;
|
||
margin-top: 20px;
|
||
|
||
:deep(.el-input__wrapper) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
:deep(.el-input__inner) {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
|
||
.ASdivision {
|
||
width: 100%;
|
||
height: calc(100% - 67px);
|
||
opacity: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.legend {
|
||
position: absolute;
|
||
right: 25%;
|
||
bottom: 7%;
|
||
width: 129px;
|
||
border: 1px solid rgba(4, 153, 153, 1);
|
||
|
||
// height: 50px;
|
||
:deep(.el-collapse-item__header) {
|
||
background: rgba(2, 31, 26, 0.6);
|
||
color: rgba(255, 255, 255, 1);
|
||
text-align: center;
|
||
padding: 0 30px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
--el-collapse-content-bg-color {
|
||
background: rgba(2, 31, 26, 0.6);
|
||
}
|
||
|
||
:deep(.el-collapse-item__content) {
|
||
background: rgba(2, 31, 26, 0.6);
|
||
padding: 0 10px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
--el-collapse-border-color: none;
|
||
--el-collapse-content-bg-color: none;
|
||
|
||
// opacity: 1;
|
||
// border-radius: 4px;
|
||
// background: rgba(2, 31, 26, 0.6);
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// justify-content: flex-start;
|
||
// align-items: center;
|
||
// padding: 10px 10px 10px 10px;
|
||
p {
|
||
margin: 10px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
text-align: center;
|
||
}
|
||
|
||
.mt-4 {
|
||
.el-checkbox {
|
||
height: 30px;
|
||
width: 100%;
|
||
margin-bottom: 2px;
|
||
padding-left: 10px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
:deep(.el-checkbox__label) {
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
|
||
.tool {
|
||
position: absolute;
|
||
left: -95px;
|
||
top: 0;
|
||
width: 90px;
|
||
height: 28px;
|
||
opacity: 1;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
display: none;
|
||
background: url('@/assets/images/bg.png') no-repeat;
|
||
padding: 0 5px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
|
||
span {
|
||
float: right;
|
||
line-height: 28px;
|
||
margin-right: 20px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
|
||
.bottom_center {
|
||
position: absolute;
|
||
// left: calc(400px + 20px + 8vw);
|
||
left: -2%;
|
||
right: 0;
|
||
margin: auto;
|
||
width: 570px;
|
||
min-width: 380px;
|
||
bottom: 5%;
|
||
height: 75px;
|
||
opacity: 1;
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 0.6);
|
||
border: 1px solid rgba(4, 153, 153, 1);
|
||
}
|
||
|
||
:deep(.alerDiv) {
|
||
// width: 186px;
|
||
height: 62px;
|
||
opacity: 1;
|
||
background: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(34, 126, 129, 1) 100%);
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 16px;
|
||
color: rgba(255, 255, 255, 1);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
background: url('@/assets/images/bgjt.png');
|
||
background-size: 100% 110%;
|
||
background-repeat: no-repeat;
|
||
|
||
.content-children {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
div {
|
||
// display: flex;
|
||
line-height: 16px;
|
||
padding: 5px 5px;
|
||
|
||
span {
|
||
padding: 0 5px;
|
||
color: rgba(255, 235, 59, 1);
|
||
text-shadow: 0px 0px 6px rgba(255, 235, 59, 0.6);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.active {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 12px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
|
||
/*设置弹出框样式*/
|
||
.ol-popup {
|
||
position: absolute;
|
||
// background-color: #eeeeee;
|
||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
// padding: 15px;
|
||
border-radius: 10px;
|
||
// border: 1px solid #cccccc;
|
||
bottom: 12px;
|
||
left: -50px;
|
||
min-width: 280px;
|
||
}
|
||
|
||
.ol-popup:after,
|
||
.ol-popup:before {
|
||
top: 100%;
|
||
border: solid transparent;
|
||
content: ' ';
|
||
height: 0;
|
||
width: 0;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ol-popup:after {
|
||
border-top-color: #eeeeee;
|
||
border-width: 10px;
|
||
left: 48px;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
.ol-popup:before {
|
||
border-top-color: #cccccc;
|
||
border-width: 11px;
|
||
left: 48px;
|
||
margin-left: -11px;
|
||
}
|
||
|
||
.ol-popup-closer {
|
||
text-decoration: none;
|
||
position: absolute;
|
||
top: 25px;
|
||
right: 30px;
|
||
color: rgba(100, 195, 164, 1) !important;
|
||
}
|
||
|
||
.ol-popup-closer:after {
|
||
content: '✖';
|
||
font-size: 18px;
|
||
}
|
||
|
||
#popup {
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 1);
|
||
box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08),
|
||
0px 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||
|
||
.pophead {
|
||
min-width: 315px;
|
||
height: 42px;
|
||
opacity: 1;
|
||
border-radius: 8px;
|
||
color: rgba(100, 195, 164, 1);
|
||
|
||
.popup-title {
|
||
min-width: 320px;
|
||
}
|
||
}
|
||
|
||
#popup-content {
|
||
width: 100% !important;
|
||
width: max-content;
|
||
opacity: 1;
|
||
|
||
p {
|
||
width: 100%;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
font-size: 14px;
|
||
padding-left: 18px;
|
||
display: flex;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% !important;
|
||
|
||
.label {
|
||
color: rgba(63, 161, 128, 1);
|
||
}
|
||
|
||
span {
|
||
color: rgba(51, 51, 51, 1);
|
||
display: block;
|
||
min-width: 100px;
|
||
background: rgba(100, 195, 164, 0.1);
|
||
box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#pop {
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 1);
|
||
display: none;
|
||
// justify-content: flex-start;
|
||
// align-items: flex-end;
|
||
padding: 30px 8px 20px 8px;
|
||
border: 2px solid rgba(4, 153, 153, 1);
|
||
|
||
.rowWra {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
justify-content: space-between;
|
||
|
||
&>span:nth-child(1) {
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
// margin-top: 20px;
|
||
line-height: 24px;
|
||
// width: 3em;
|
||
// font-size: 14px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
&>span:nth-child(2) {
|
||
color: rgba(255, 255, 255, 1);
|
||
width: 169px;
|
||
height: 24px;
|
||
opacity: 1;
|
||
border-radius: 2px;
|
||
background: rgba(217, 231, 255, 0.2);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 2px 10px 2px 10px;
|
||
}
|
||
}
|
||
|
||
.cancel {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 5px;
|
||
color: rgba(255, 255, 255, 1);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.back_button {
|
||
position: absolute;
|
||
right: 30%;
|
||
top: 20px;
|
||
}
|
||
|
||
:deep(.el-select__popper.el-popper) {}
|
||
</style>
|
||
<style lang="scss">
|
||
.select_city {
|
||
background: #fff;
|
||
|
||
}
|
||
|
||
.el-select__popper {
|
||
border: none !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
.el-popper {
|
||
border: none !important;
|
||
background: #fff !important;
|
||
color: black !important;
|
||
}
|
||
|
||
.el-popper__arrow::before {
|
||
display: none;
|
||
}
|
||
|
||
.selectCity {
|
||
background: #fff;
|
||
border: 1px solid #ccc;
|
||
}
|
||
</style>
|