4777 lines
162 KiB
Vue
4777 lines
162 KiB
Vue
<template>
|
||
<div class="fatherDiv">
|
||
<div class="centerBox">
|
||
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||
<div class="rightWra">
|
||
<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="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="Deta()">
|
||
下载
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div ref="areaDiv" class="areaDiv"></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="Deta2()">
|
||
下载
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div ref="typesofDiv" class="typesofDiv"></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="Deta3()" 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="Deta4()">
|
||
下载
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div class="el_select_div">
|
||
<el-select
|
||
v-if="limits"
|
||
popper-class="select_citys"
|
||
style="width: 300px"
|
||
v-model="value"
|
||
placeholder="全部"
|
||
:disabled="values == '高标准农田' ? true : false"
|
||
teleported="“false”"
|
||
>
|
||
<el-option
|
||
v-for="item in Township.arr"
|
||
:key="item.tomeCode"
|
||
:label="item.tomeName"
|
||
:value="item.tomeCode"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
|
||
<div v-show="values == '行政区划'" 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 class="tool" @click="Back()">
|
||
<img src="@/assets/images/fh.png" />
|
||
<span>返回</span>
|
||
</div>
|
||
</div>
|
||
<el-collapse class="legend" accordion>
|
||
<el-collapse-item name="1">
|
||
<template #title>图例</template>
|
||
<div class="mt-4">
|
||
<el-checkbox-group v-model="checkList" @change="change">
|
||
<el-checkbox
|
||
v-for="(value, item, key) in dic"
|
||
:key="key"
|
||
:v-model="value.disabled"
|
||
:disabled="value.disabled"
|
||
:label="item"
|
||
>
|
||
<span
|
||
:style="{
|
||
background: value.color,
|
||
border: `1px solid ${value.color}`,
|
||
width: `10px`,
|
||
height: `10px`,
|
||
display: `flex`,
|
||
'margin-right': `5px`,
|
||
}"
|
||
></span>
|
||
{{ item }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<div class="bottom_center">
|
||
<TimeLine
|
||
v-if="dataSource.length > 0"
|
||
:dataSource="dataSource"
|
||
:allCount="allCount"
|
||
@getcurrentPage="getcurrentPage"
|
||
@dataHandle="handleData"
|
||
/>
|
||
</div>
|
||
<div id="pop"></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: 20px;
|
||
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">{{ item.name }}：</div>
|
||
<span>{{ item.area }}（亩）</span>
|
||
</p>
|
||
</div>
|
||
<div id="popup-pagination"></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.yearMonth"
|
||
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.flag"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option label="行政区划" value="2" />
|
||
<el-option v-if="limits" label="高标准农田" value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="镇:">
|
||
<el-select
|
||
v-model="formInline.divisions"
|
||
:disabled="formInline.flag == '2' ? false : true"
|
||
:placeholder="formInline.flag == '2' ? '全部' : '请选择'"
|
||
popper-class="selectCity"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in selectOption"
|
||
:key="index"
|
||
:label="item.tomeName"
|
||
:value="item.tomeCode"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||
<el-button plain @click="resetForm">重置</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 tableItem"
|
||
:key="index"
|
||
:prop="item.value"
|
||
:label="index == 0 ? item.lable : item.lable + '(亩)'"
|
||
align="center"
|
||
/>
|
||
<el-table-column prop="address" v-if="operate" align="center" label="操作">
|
||
<template #default="scope">
|
||
<span
|
||
style="color: rgba(67, 181, 143, 1); cursor: pointer"
|
||
@click="download(scope.row)"
|
||
>
|
||
下载
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<el-table
|
||
:data="tableNewData"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
height="90%"
|
||
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="index == 0 ? item.lable : item.lable + '(亩)'"
|
||
align="center"
|
||
/>
|
||
<el-table-column prop="address" v-if="operate" align="center" label="操作">
|
||
<template #default="scope">
|
||
<span
|
||
style="color: rgba(67, 181, 143, 1); cursor: pointer"
|
||
@click="download(scope.row)"
|
||
>
|
||
下载
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</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, reactive, watch } from 'vue';
|
||
import { downLoadFile } from '@/utils/download.js';
|
||
import * as echarts from 'echarts';
|
||
import 'echarts-gl';
|
||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||
import { useEcharts } from '@/hooks/useEcharts';
|
||
import {
|
||
getTownship,
|
||
getvillage,
|
||
getcropper,
|
||
getcropTypeStatistics,
|
||
gethighStandard,
|
||
gettheTime,
|
||
getlistMode,
|
||
getgarrison,
|
||
getAdministrativeChun,
|
||
} from '@/api/crops/classify.js';
|
||
import axios from 'axios';
|
||
import * as xlsx from 'xlsx'; // Vue3 版本
|
||
import { ElMessage } from 'element-plus';
|
||
// import townJson from './town.json';
|
||
import { useRouter } from 'vue-router';
|
||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||
import moment from 'Moment';
|
||
// import {}
|
||
|
||
const router = useRouter();
|
||
let viewer = ref(null);
|
||
const areaDiv = ref(null);
|
||
const typesofDiv = ref(null);
|
||
const farmlandDiv = ref(null);
|
||
const chartModeDiv = ref(null);
|
||
const ASdivisionDiv = ref(null);
|
||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||
let selectOption = ref([]);
|
||
const value = ref('');
|
||
value.value = window.localStorage.getItem('divisions');
|
||
let values = ref('行政区划');
|
||
let typesofdata = ref([]);
|
||
const flag = ref(false);
|
||
let rightWraFlag = ref(false);
|
||
let operate = ref(true);
|
||
let currentPage = ref(1); //当前页
|
||
let pageSize = ref(14); //每页条数
|
||
const insectarr = ref([]);
|
||
let checkListdata = ref([]);
|
||
let timeArr = ref([]); //年数组
|
||
let SwitchFlag = ref(true);
|
||
let layers = ref(null); //村
|
||
let alterArr = ref([]);
|
||
let dataSource = ref([]);
|
||
let allCount = ref([]);
|
||
let oldDatas = ref('');
|
||
let paramCode = ref('');
|
||
let currentPageS = ref('');
|
||
let TimeArr = ref([]);
|
||
let pageSizeS = ref(5);
|
||
let tabrFlag = ref(true);
|
||
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
|
||
let highStandard = [
|
||
'2019年高标准农田片区1',
|
||
'2019年高标准农田片区2',
|
||
'2019年高标准农田片区3',
|
||
'2019年高标准农田片区4',
|
||
'2020年高标准农田片区',
|
||
'2021年高标准农田片区',
|
||
'2022年高标准农田片区1',
|
||
'2022年高标准农田片区2',
|
||
'2022年高标准农田片区3',
|
||
'2022年高标准农田片区4',
|
||
'2022年高标准农田片区5',
|
||
'2022年高标准农田片区6',
|
||
'2022年高标准农田片区7',
|
||
];
|
||
let highStandarditem = {
|
||
小麦: [],
|
||
玉米: [],
|
||
大豆: [],
|
||
地瓜: [],
|
||
花生: [],
|
||
蓝莓: [],
|
||
茶叶: [],
|
||
马铃薯: [],
|
||
白菜和萝卜: [],
|
||
其他: [],
|
||
};
|
||
//搜索
|
||
let formInline = ref({
|
||
yearMonth: '',
|
||
flag: '2',
|
||
divisions: '',
|
||
});
|
||
|
||
let amount = ref([]);
|
||
watch(
|
||
() => values.value,
|
||
(val, oldVal) => {
|
||
ASdivision();
|
||
farmland();
|
||
}
|
||
);
|
||
|
||
watch(
|
||
() => operate.value,
|
||
(val, oldVal) => {
|
||
if (!val) {
|
||
window.document.querySelector('.tableBox').style.height = '83%';
|
||
} else {
|
||
window.document.querySelector('.tableBox').style.height = '90%';
|
||
}
|
||
}
|
||
);
|
||
watch(
|
||
() => oldDatas.value,
|
||
(val, oldVal) => {
|
||
value.value = window.localStorage.getItem('divisions');
|
||
getcroppers(value.value, oldDatas.value.name); //作物分类面积请求
|
||
getcropTypeStatisticss(value.value, oldDatas.value.name); //作物类型统计百分比
|
||
if (limits) {
|
||
getTownships(value.value, oldDatas.value.name);
|
||
} else {
|
||
getvillages(value.value, oldDatas.value.name);
|
||
}
|
||
gethighStandards(oldDatas.value.name); //高标准农田
|
||
let str = oldDatas.value.name;
|
||
let str1 = str && str.replace(/-/g, '_');
|
||
var numArr = str.match(/\d+/g);
|
||
var numArr = str.match(/\d+/g);
|
||
var num3 = numArr.join('');
|
||
layersDic = {
|
||
小麦: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_xiaomai`,
|
||
time: `T${num3}xiaomai${num3}nongzuowufenlei`,
|
||
},
|
||
玉米: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_yumi`,
|
||
time: `T${num3}yumi${num3}nongzuowufenlei`,
|
||
},
|
||
大豆: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_dadou`,
|
||
time: `T${num3}dadou${num3}nongzuowufenlei`,
|
||
},
|
||
地瓜: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_digua`,
|
||
time: `T${num3}digua${num3}nongzuowufenlei`,
|
||
},
|
||
花生: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_huasheng`,
|
||
time: `T${num3}huasheng${num3}nongzuowufenlei`,
|
||
},
|
||
蓝莓: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_lanmei`,
|
||
time: `T${num3}lanmei${num3}nongzuowufenlei`,
|
||
},
|
||
茶叶: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_chaye`,
|
||
time: `T${num3}chaye${num3}nongzuowufenlei`,
|
||
},
|
||
马铃薯: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_malingshu`,
|
||
time: `T${num3}malingshu${num3}nongzuowufenlei`,
|
||
},
|
||
白菜和萝卜: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_baicai_luobo`,
|
||
time: `T${num3}baicai_luobo${num3}nongzuowufenlei`,
|
||
},
|
||
其他: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_qitanongzuowu`,
|
||
time: `T${num3}qitanongzuowu${num3}nongzuowufenlei`,
|
||
},
|
||
};
|
||
}
|
||
);
|
||
|
||
const onSubmit = () => {
|
||
if (!formInline.value.yearMonth) {
|
||
ElMessage.error('请选择时间');
|
||
return;
|
||
}
|
||
let arr = [];
|
||
let brr = [];
|
||
getlistMode({
|
||
yearMonth: formInline.value.yearMonth,
|
||
flag: formInline.value.flag === '' ? 0 : formInline.value.flag,
|
||
divisions: formInline.value.flag==1?"370211": formInline.value.divisions,
|
||
}).then(res => {
|
||
amount.value = [
|
||
{
|
||
region: '高标准农田',
|
||
其他: res.data[res.data.length - 1].otherSum,
|
||
地瓜: res.data[res.data.length - 1].sweetPotatoSum,
|
||
大豆: res.data[res.data.length - 1].soyBeanSum,
|
||
小麦: res.data[res.data.length - 1].wheatSum,
|
||
花生: res.data[res.data.length - 1].peanutSum,
|
||
茶叶: res.data[res.data.length - 1].teaSum,
|
||
蓝莓: res.data[res.data.length - 1].blueberrySum,
|
||
玉米: res.data[res.data.length - 1].cronSum,
|
||
马铃薯: res.data[res.data.length - 1].potatoSum,
|
||
白菜和萝卜: res.data[res.data.length - 1].turnipSum,
|
||
合计: '合计',
|
||
},
|
||
];
|
||
if (formInline.value.flag == '1') {
|
||
formInline.value.divisions = '';
|
||
tableItem.value = [
|
||
{
|
||
lable: '区域名称',
|
||
value: 'region',
|
||
},
|
||
{
|
||
lable: '小麦',
|
||
value: '小麦',
|
||
},
|
||
{
|
||
lable: '玉米',
|
||
value: '玉米',
|
||
},
|
||
{
|
||
lable: '大豆',
|
||
value: '大豆',
|
||
},
|
||
{
|
||
lable: '地瓜',
|
||
value: '地瓜',
|
||
},
|
||
{
|
||
lable: '花生',
|
||
value: '花生',
|
||
},
|
||
{
|
||
lable: '蓝莓',
|
||
value: '蓝莓',
|
||
},
|
||
{
|
||
lable: '茶叶',
|
||
value: '茶叶',
|
||
},
|
||
{
|
||
lable: '马铃薯',
|
||
value: '马铃薯',
|
||
},
|
||
{
|
||
lable: '白菜和萝卜',
|
||
value: '白菜和萝卜',
|
||
},
|
||
{
|
||
lable: '其他',
|
||
value: '其他',
|
||
},
|
||
];
|
||
res.data.forEach(item => {
|
||
if (arr.indexOf(item.region) == -1) {
|
||
arr.push(item.region);
|
||
}
|
||
});
|
||
arr.forEach(item => {
|
||
brr.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: item,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
brr.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.region) {
|
||
item['region'] = i.region;
|
||
item[i.name] = i.area;
|
||
}
|
||
});
|
||
});
|
||
operate.value = false;
|
||
} else if (formInline.value.flag == '2') {
|
||
let data = [];
|
||
let newData = [];
|
||
getcropper({
|
||
divisions: formInline.value.divisions
|
||
? formInline.value.divisions
|
||
: window.localStorage.getItem('divisions'),
|
||
yearMonth: formInline.value.yearMonth,
|
||
}).then(res => {
|
||
res.data.forEach(item => {
|
||
if (data.indexOf(item.tomeName) == -1) {
|
||
data.push(item.tomeName);
|
||
}
|
||
});
|
||
data.forEach(item => {
|
||
newData.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: item,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
newData.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.tomeName) {
|
||
item['region'] = i.tomeName;
|
||
item[i.name] = i.area;
|
||
}
|
||
});
|
||
});
|
||
Township.arr.forEach(item => {
|
||
if (formInline.value.divisions == item.tomeCode) {
|
||
newData[0]['region'] = item.tomeName;
|
||
newData[0]['合计'] = '合计';
|
||
return;
|
||
} else if (item.tomeCode == '370211') {
|
||
newData[0]['region'] = '黄岛区';
|
||
newData[0]['合计'] = '合计';
|
||
}
|
||
});
|
||
amount.value = newData;
|
||
});
|
||
tableItem.value = [
|
||
{
|
||
lable: '区域名称',
|
||
value: 'region',
|
||
},
|
||
{
|
||
lable: '小麦',
|
||
value: '小麦',
|
||
},
|
||
{
|
||
lable: '玉米',
|
||
value: '玉米',
|
||
},
|
||
{
|
||
lable: '大豆',
|
||
value: '大豆',
|
||
},
|
||
{
|
||
lable: '地瓜',
|
||
value: '地瓜',
|
||
},
|
||
{
|
||
lable: '花生',
|
||
value: '花生',
|
||
},
|
||
{
|
||
lable: '蓝莓',
|
||
value: '蓝莓',
|
||
},
|
||
{
|
||
lable: '茶叶',
|
||
value: '茶叶',
|
||
},
|
||
{
|
||
lable: '马铃薯',
|
||
value: '马铃薯',
|
||
},
|
||
{
|
||
lable: '白菜和萝卜',
|
||
value: '白菜和萝卜',
|
||
},
|
||
{
|
||
lable: '其他',
|
||
value: '其他',
|
||
},
|
||
];
|
||
res.data.forEach(item => {
|
||
if (arr.indexOf(item.tomeName) == -1) {
|
||
arr.push(item.tomeName);
|
||
}
|
||
});
|
||
arr.forEach(item => {
|
||
brr.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: item,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
brr.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.tomeName) {
|
||
item['region'] = i.tomeName;
|
||
item[i.name] = i.area;
|
||
}
|
||
});
|
||
});
|
||
operate.value = false;
|
||
} else if (formInline.value.flag == 0) {
|
||
operate.value = true;
|
||
brr = res.data;
|
||
tableItem = ref([
|
||
{
|
||
lable: '时间',
|
||
value: 'dateTime',
|
||
},
|
||
{
|
||
lable: '数据名称',
|
||
value: 'excelName',
|
||
},
|
||
]);
|
||
}
|
||
insectarr.value = brr;
|
||
tableNewData.value = brr.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
|
||
statInfo.style.height = window.innerHeight - 100 + 'px';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width = window.innerWidth - 200 + 'px';
|
||
statInfo.style.height = window.innerHeight - 200 + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
});
|
||
};
|
||
const resetForm = () => {
|
||
formInline.value.yearMonth = timeArr.value[timeArr.value.length-1];
|
||
formInline.value.flag = '2';
|
||
formInline.value.divisions = '';
|
||
operate.value = true;
|
||
onSubmit();
|
||
};
|
||
|
||
let tableItem = ref([
|
||
{
|
||
lable: '时间',
|
||
value: 'dateTime',
|
||
},
|
||
{
|
||
lable: '数据名称',
|
||
value: 'excelName',
|
||
},
|
||
]);
|
||
let tableNewData = ref([]);
|
||
//重置
|
||
|
||
//下载
|
||
/*---------------------------*/
|
||
const Deta = item => {
|
||
getcropper({
|
||
divisions: value.value,
|
||
yearMonth: oldDatas.value.name,
|
||
whetherToDownload: true,
|
||
}).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||
});
|
||
};
|
||
const Deta2 = item => {
|
||
getcropTypeStatistics({
|
||
divisions: value.value,
|
||
yearMonth: oldDatas.value.name,
|
||
whetherToDownload: true,
|
||
}).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||
});
|
||
};
|
||
const Deta3 = item => {
|
||
gethighStandard({
|
||
divisions: value.value,
|
||
yearMonth: oldDatas.value.name,
|
||
whetherToDownload: false,
|
||
}).then(res => {
|
||
let arr = [];
|
||
let brr = [];
|
||
res.data.forEach(item => {
|
||
if (arr.indexOf(item.region) == -1) {
|
||
arr.push(item.region);
|
||
}
|
||
});
|
||
arr.forEach(item => {
|
||
brr.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: item,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
brr.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.region) {
|
||
item['region'] = i.region;
|
||
item[i.name] = i.area;
|
||
}
|
||
});
|
||
});
|
||
exportExcel(brr, '作物类型统计-高标准农田', 'Sheet1');
|
||
});
|
||
};
|
||
const Deta4 = item => {
|
||
if (values.value == '行政区划') {
|
||
let region = '';
|
||
Township.arr.forEach(item => {
|
||
if (item.subregion == value.value) {
|
||
region = item.subregionName == '全部' ? '黄岛区' : item.subregionName;
|
||
}
|
||
});
|
||
if (value.value === '370211') {
|
||
getTownship({
|
||
divisions: value.value,
|
||
yearMonth: oldDatas.value.name,
|
||
whetherToDownload: false,
|
||
}).then(res => {
|
||
let arr = [];
|
||
let brr = [];
|
||
res.data.forEach(item => {
|
||
if (arr.indexOf(item.tomeName) == -1) {
|
||
arr.push(item.tomeName);
|
||
}
|
||
});
|
||
arr.forEach(ite => {
|
||
brr.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: ite,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
brr.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.tomeName) {
|
||
item['region'] = i.tomeName;
|
||
item[i.name] = i.area;
|
||
}
|
||
});
|
||
});
|
||
|
||
exportExcel(brr, `${region}作物类型统计-行政区划`, 'Sheet1');
|
||
});
|
||
} else {
|
||
getvillage({
|
||
divisions: value.value,
|
||
yearMonth: oldDatas.value.name,
|
||
whetherToDownload: false,
|
||
}).then(res => {
|
||
let arr = [];
|
||
let brr = [];
|
||
res.data.forEach(item => {
|
||
if (arr.indexOf(item.tomeName) == -1) {
|
||
arr.push(item.tomeName);
|
||
}
|
||
});
|
||
arr.forEach(item => {
|
||
brr.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: item,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
brr.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.tomeName) {
|
||
item['region'] = i.tomeName;
|
||
item[i.name] = i.area;
|
||
}
|
||
});
|
||
});
|
||
exportExcel(brr, `${region}作物类型统计-行政区划`, 'Sheet1');
|
||
});
|
||
}
|
||
} else if (values.value == '高标准农田') {
|
||
gethighStandard({
|
||
divisions: value.value,
|
||
yearMonth: oldDatas.value.name,
|
||
whetherToDownload: false,
|
||
}).then(res => {
|
||
let arr = [];
|
||
let brr = [];
|
||
res.data.forEach(item => {
|
||
if (arr.indexOf(item.region) == -1) {
|
||
arr.push(item.region);
|
||
}
|
||
});
|
||
arr.forEach(item => {
|
||
brr.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: item,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
brr.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.region) {
|
||
item['region'] = i.region;
|
||
item[i.name] = i.area;
|
||
}
|
||
});
|
||
});
|
||
exportExcel(brr, '作物类型统计-高标准农田', 'Sheet1');
|
||
});
|
||
}
|
||
};
|
||
|
||
const download = item => {
|
||
downLoadFile(item.download);
|
||
};
|
||
const dowcity = () => {
|
||
let arr = JSON.parse(JSON.stringify(amount.value[0]));
|
||
arr.region = '合计';
|
||
insectarr.value.push(arr);
|
||
exportExcel(insectarr.value, '农作物种植面积统计表', 'Sheet1');
|
||
};
|
||
//表头数据切换 ----------前端生成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, fileName = '用户列表', pageName = 'Sheet1') => {
|
||
let fieldNameObj = {
|
||
region: '区域名称',
|
||
小麦: '小麦(亩)',
|
||
玉米: '玉米(亩)',
|
||
大豆: '大豆(亩)',
|
||
地瓜: '地瓜(亩)',
|
||
花生: '花生(亩)',
|
||
蓝莓: '蓝莓(亩)',
|
||
茶叶: '茶叶(亩)',
|
||
马铃薯: '马铃薯(亩)',
|
||
白菜和萝卜: '白菜和萝卜(亩)',
|
||
其他: '其他(亩)',
|
||
};
|
||
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`);
|
||
};
|
||
let dd = {
|
||
小麦: [],
|
||
玉米: [],
|
||
大豆: [],
|
||
地瓜: [],
|
||
花生: [],
|
||
蓝莓: [],
|
||
茶叶: [],
|
||
马铃薯: [],
|
||
白菜和萝卜: [],
|
||
其他: [],
|
||
};
|
||
let time = ref(0);
|
||
let dic = ref({
|
||
小麦: { color: 'rgba(119, 255, 51, 1)', disabled: false },
|
||
玉米: { color: 'rgba(97, 184, 51, 1)', disabled: false },
|
||
大豆: { color: 'rgba(217, 254, 140, 1)', disabled: false },
|
||
地瓜: { color: 'rgba(227, 60, 100, 1)', disabled: false },
|
||
花生: { color: 'rgba(255, 152, 153, 1)', disabled: false },
|
||
蓝莓: { color: 'rgba(50, 140, 254, 1)', disabled: false },
|
||
茶叶: { color: 'rgba(255, 204, 59, 1)', disabled: false },
|
||
马铃薯: { color: 'rgba(152, 255, 254, 1)', disabled: false },
|
||
白菜和萝卜: { color: 'rgba(255, 152, 153, 1)', disabled: false },
|
||
其他: { color: 'rgba(176, 161, 255, 1)', disabled: false },
|
||
});
|
||
// 图层字典
|
||
let layersDic = {
|
||
};
|
||
|
||
let dictionaryArr = [
|
||
{
|
||
name: '小麦',
|
||
value: 0,
|
||
itemStyle: {
|
||
opacity: 0.8,
|
||
color: 'rgba(254, 181, 98, 1)',
|
||
},
|
||
area: '',
|
||
},
|
||
{
|
||
name: '玉米',
|
||
value: 0,
|
||
itemStyle: {
|
||
opacity: 0.8,
|
||
color: 'rgba(142, 212, 200, 1)',
|
||
},
|
||
area: '',
|
||
},
|
||
{
|
||
// 数据项名称
|
||
name: '花生',
|
||
area: '',
|
||
value: 0,
|
||
itemStyle: {
|
||
// 透明度
|
||
opacity: 0.8,
|
||
// 扇形颜色
|
||
color: 'rgba(255, 156, 145, 1)',
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
// 数据项名称
|
||
name: '大豆',
|
||
area: '',
|
||
value: 156,
|
||
itemStyle: {
|
||
// 透明度
|
||
opacity: 0.8,
|
||
// 扇形颜色
|
||
color: 'rgba(255, 238, 112, 1)',
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
// 数据项名称
|
||
name: '地瓜',
|
||
area: '',
|
||
value: 156,
|
||
itemStyle: {
|
||
// 透明度
|
||
opacity: 0.8,
|
||
// 扇形颜色
|
||
color: 'rgba(192, 187, 220, 1)',
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
// 数据项名称
|
||
name: '蓝莓',
|
||
area: '',
|
||
value: 56,
|
||
itemStyle: {
|
||
// 透明度
|
||
opacity: 0.8,
|
||
// 扇形颜色
|
||
color: 'rgba(129, 179, 212, 1)',
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
// 数据项名称
|
||
name: '茶叶',
|
||
area: '',
|
||
value: 56,
|
||
itemStyle: {
|
||
// 透明度
|
||
opacity: 0.8,
|
||
// 扇形颜色
|
||
color: 'rgba(179, 224, 104, 1)',
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
// 数据项名称
|
||
name: '马铃薯',
|
||
area: '',
|
||
value: 56,
|
||
itemStyle: {
|
||
// 透明度
|
||
opacity: 0.8,
|
||
// 扇形颜色
|
||
color: 'rgba(253, 205, 230, 1)',
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
// 数据项名称
|
||
name: '白菜和萝卜',
|
||
area: '',
|
||
value: 56,
|
||
itemStyle: {
|
||
// 透明度
|
||
opacity: 0.8,
|
||
// 扇形颜色
|
||
color: 'rgba(205, 236, 198, 1)',
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
// 数据项名称
|
||
name: '其他',
|
||
area: '',
|
||
value: 56,
|
||
itemStyle: {
|
||
// 透明度
|
||
opacity: 0.8,
|
||
// 扇形颜色
|
||
color: 'rgba(255, 218, 44, 1)',
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
];
|
||
let Pie3D = reactive({
|
||
arr: [],
|
||
});
|
||
var data = {
|
||
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
|
||
};
|
||
let classData = ref([]);
|
||
let namedata = ref([]);
|
||
let code =
|
||
window.localStorage.getItem('deptName') == '青岛西海岸新区'
|
||
? '黄岛区'
|
||
: window.localStorage.getItem('deptName');
|
||
const options = [
|
||
{
|
||
value: 'Option1',
|
||
label: 'Option1',
|
||
},
|
||
{
|
||
value: 'Option2',
|
||
label: 'Option2',
|
||
},
|
||
];
|
||
|
||
// 组件挂载完成后执行
|
||
onMounted(() => {
|
||
initonMounted();
|
||
});
|
||
// 初始化
|
||
function initonMounted() {
|
||
theTimes(); //年
|
||
//地图
|
||
initmap();
|
||
showDaChangArea();
|
||
areachar(); //图表
|
||
// getFarmland();
|
||
alter();
|
||
for (const key in dic.value) {
|
||
if (dic.value[key].disabled !== true) {
|
||
checkListdata.value.push(key);
|
||
}
|
||
}
|
||
checkList.value = checkListdata.value;
|
||
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 = '地图模式';
|
||
window.document.querySelector('#screenfull').style.display = 'none';
|
||
} else {
|
||
document.querySelector('.mode').style.display = 'block';
|
||
document.querySelector('.mode').innerText = '列表模式';
|
||
window.document.querySelector('#screenfull').style.display = 'block';
|
||
}
|
||
});
|
||
/*-------------地图------------------------*/
|
||
let map = ref(null);
|
||
let container = ref(null);
|
||
let content = ref(null);
|
||
let popupCloser = ref(null);
|
||
let overlay = ref(null);
|
||
function initmap() {
|
||
// 获取父元素和地图容器
|
||
var parentElement = document.querySelector('.centerBox');
|
||
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.tiandituLayers == 'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'?'EPSG:4326':'EPSG:3857',
|
||
}),
|
||
preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
|
||
}),
|
||
//注记
|
||
// new ol.layer.Tile({
|
||
// source: new ol.source.Tianditu({
|
||
// layerType: 'img',
|
||
// isLabel: true,
|
||
// key: '1d109683f4d84198e37a38c442d68311',
|
||
// }),
|
||
// }),
|
||
],
|
||
});
|
||
//滚轮控制村级矢量
|
||
map.on('moveend', function (e) {
|
||
var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
|
||
var view = map.getView();
|
||
if (zoom >= 13) {
|
||
layers.setVisible(true); //显示图层
|
||
} else {
|
||
layers.setVisible(false);
|
||
}
|
||
});
|
||
map.on('singleclick', function (e) {
|
||
var coodinate = e.coordinate;
|
||
if (limits) {
|
||
var lon = coodinate[0];
|
||
var lat = coodinate[1];
|
||
var view = map.getView();
|
||
var zoom = map.getView().getZoom();
|
||
view.animate({
|
||
center: [lon, lat],
|
||
duration: 1000,
|
||
});
|
||
let tabFlag = false;
|
||
let arr = ['CJQY3702112019WGS84', 'XJQY3702112019WGS84'];
|
||
arr.forEach(item => {
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (item == ite.A.name) {
|
||
tabFlag = true;
|
||
return;
|
||
}
|
||
});
|
||
});
|
||
if (tabFlag) {
|
||
if (zoom >= 13) {
|
||
QueryData(
|
||
e,
|
||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||
`${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||
'村'
|
||
);
|
||
} else {
|
||
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();
|
||
var zoom = map.getView().getZoom();
|
||
view.animate({
|
||
center: [lon, lat],
|
||
duration: 1000,
|
||
});
|
||
let tabFlag = false;
|
||
let arr = ['CJQY3702112019WGS84', 'XJQY3702112019WGS84'];
|
||
arr.forEach(item => {
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (item == ite.A.name) {
|
||
tabFlag = true;
|
||
return;
|
||
}
|
||
});
|
||
});
|
||
if (tabFlag) {
|
||
if (zoom >= 13) {
|
||
QueryData(
|
||
e,
|
||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||
`${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||
'村'
|
||
);
|
||
} else {
|
||
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 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 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 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 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);
|
||
};
|
||
|
||
// const addwms = name => {
|
||
// let layer = new ol.layer.Tile({
|
||
// source: new ol.source.TileSuperMapRest({
|
||
// // url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_village/rest/maps/huangdaoqu_village@huangdaoqu_village',
|
||
// url: serverAPI.geoserverUrl + `/map-${name.setOf}/rest/maps/${name.name}@${name.setOf}`,
|
||
// //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||
// cacheEnabled: false,
|
||
// }),
|
||
// name: name.name,
|
||
// projection: 'EPSG:4326', //3857
|
||
// });
|
||
// map.addLayer(layer);
|
||
// };
|
||
const addwms = name => {
|
||
if (!name.time) {
|
||
return;
|
||
}
|
||
let layer = new ol.layer.Tile({
|
||
source: new ol.source.TileSuperMapRest({
|
||
// url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_village/rest/maps/huangdaoqu_village@huangdaoqu_village',
|
||
url:
|
||
serverAPI.geoserverUrl +
|
||
`/map-ugcv5-${name.time}/rest/maps/${name.name}@${name.setOf}`,
|
||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||
cacheEnabled: false,
|
||
}),
|
||
name: name.name,
|
||
projection: 'EPSG:4326', //3857
|
||
});
|
||
map.addLayer(layer);
|
||
};
|
||
|
||
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 = [];
|
||
getTownship({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
|
||
res.data.forEach(item => {
|
||
if (item.tomeCode == code) {
|
||
name = item.tomeName;
|
||
arr.push(item);
|
||
}
|
||
});
|
||
alterArr.value = arr;
|
||
alter();
|
||
});
|
||
} else if (
|
||
item == '村' &&
|
||
data.result.recordsets[0].features.features[0].properties.CJQYDM
|
||
) {
|
||
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
|
||
let arr = [];
|
||
getAdministrativeChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
|
||
res.data.forEach(item => {
|
||
arr.push(item);
|
||
});
|
||
name = res.data[0].tomeName;
|
||
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 = [];
|
||
gethighStandard({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
|
||
res.data.forEach(item => {
|
||
if (item.region == code) {
|
||
arr.push(item);
|
||
}
|
||
});
|
||
name = code;
|
||
alterArr.value = arr;
|
||
alter('gao');
|
||
});
|
||
}
|
||
function alter(converName) {
|
||
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,
|
||
converName
|
||
);
|
||
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);
|
||
}
|
||
}
|
||
});
|
||
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);
|
||
});
|
||
}
|
||
// 弹窗
|
||
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);
|
||
};
|
||
|
||
const checkList = ref(['false']);
|
||
|
||
let num = 0;
|
||
watch(
|
||
() => value.value,
|
||
() => {
|
||
selectTab();
|
||
}
|
||
);
|
||
const change = () => {
|
||
time.value = 0;
|
||
};
|
||
// 农作物
|
||
watch(
|
||
() => checkList.value,
|
||
(val, oldVal) => {
|
||
if (val.length > oldVal.length && time.value < 1) {
|
||
// 挑选出增多的数据
|
||
const newData = val.filter(item => {
|
||
const index = oldVal.findIndex(it => it === item);
|
||
if (index < 0) {
|
||
return item;
|
||
}
|
||
});
|
||
newData.forEach(item => {
|
||
if (layersDic[item]) {
|
||
addwms(layersDic[item]);
|
||
}
|
||
});
|
||
// 添加镇级矢量
|
||
// }
|
||
} else if (val.length < oldVal.length) {
|
||
// 挑选出减少的数据
|
||
const newData = oldVal.filter(item => {
|
||
const index = val.findIndex(it => it === item);
|
||
if (index < 0) {
|
||
return item;
|
||
}
|
||
});
|
||
newData.forEach(item => {
|
||
if (layersDic[item]) {
|
||
// 假设要删除的图层为 layerToRemove
|
||
var index = map.getLayers().getArray().indexOf(layersDic[item].name);
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (ite.A.name) {
|
||
if (ite.A.name == layersDic[item].name) {
|
||
map.getLayers().removeAt(index);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
num++;
|
||
if (num == 1) {
|
||
cun(); //添加村
|
||
zhen(); //添加镇
|
||
}
|
||
}
|
||
);
|
||
|
||
//列表模式模式切换
|
||
function SwitchMode() {
|
||
SwitchFlag.value = !SwitchFlag.value;
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
|
||
statInfo.style.height = window.innerHeight - 100 + 'px';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width = window.innerWidth - 200 + 'px';
|
||
statInfo.style.height = window.innerHeight - 200 + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
}
|
||
const formLandRef = ref([]);
|
||
//每页条数
|
||
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;
|
||
};
|
||
//返回
|
||
function back() {
|
||
value.value = '370211';
|
||
deleteEntityByName('townLine');
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||
duration: 2,
|
||
});
|
||
flag.value = false;
|
||
}
|
||
|
||
//折叠
|
||
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 handleData = oldData => {
|
||
time.value += 1;
|
||
checkListdata.value = [];
|
||
let arr = [];
|
||
for (const key in layersDic) {
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (ite.A.name == layersDic[key].name) {
|
||
map.getLayers().removeAt(index);
|
||
}
|
||
});
|
||
}
|
||
oldDatas.value = oldData;
|
||
getcropper({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
|
||
res.data.forEach(item => {
|
||
if (Number(item.area) > 1) {
|
||
dic.value[item.name].disabled = false;
|
||
} else {
|
||
dic.value[item.name].disabled = true;
|
||
}
|
||
arr = dic;
|
||
});
|
||
for (const key in arr.value) {
|
||
if (arr.value[key].disabled !== true) {
|
||
checkListdata.value.push(key);
|
||
}
|
||
}
|
||
checkList.value = checkListdata.value;
|
||
checkList.value.forEach(item => {
|
||
addwms(layersDic[item]);
|
||
});
|
||
});
|
||
};
|
||
|
||
const tabRightWra = flag => {
|
||
tabrFlag.value = flag;
|
||
if(flag){
|
||
areachar()
|
||
}else{
|
||
farmland();
|
||
ASdivision();
|
||
}
|
||
};
|
||
|
||
//接口
|
||
//镇
|
||
const getTownships = (city, time) => {
|
||
getTownship({ divisions: city, yearMonth: time }).then(res => {
|
||
dd = {
|
||
小麦: [],
|
||
玉米: [],
|
||
大豆: [],
|
||
地瓜: [],
|
||
花生: [],
|
||
蓝莓: [],
|
||
茶叶: [],
|
||
马铃薯: [],
|
||
白菜和萝卜: [],
|
||
其他: [],
|
||
};
|
||
res.data.forEach((item, i) => {
|
||
for (let index = 0; index < Object.values(item).length; index++) {
|
||
if (Object.values(item)[index] == '0.0') {
|
||
res.data.splice(i, 1);
|
||
}
|
||
}
|
||
});
|
||
Township.brr = res.data;
|
||
Township.arr = res.data.sort((a, b) => {
|
||
return a.tomeName.length - b.tomeName.length;
|
||
});
|
||
Township.arr.unshift({
|
||
tomeCode: '370211',
|
||
tomeName: '全部',
|
||
});
|
||
|
||
let crr = [];
|
||
let drr = [];
|
||
Township.arr.forEach(item => {
|
||
if (crr.indexOf(item.tomeName) == -1) {
|
||
crr.push(item.tomeName);
|
||
drr.push({
|
||
tomeName: item.tomeName,
|
||
tomeCode: item.tomeCode,
|
||
area: item.area,
|
||
type: item.type,
|
||
});
|
||
}
|
||
});
|
||
Township.arr = drr;
|
||
selectOption.value = JSON.parse(JSON.stringify(Township.arr));
|
||
selectOption.value[0].tomeCode = '';
|
||
let arr = [...res.data];
|
||
let brr = [];
|
||
arr.splice(0, 1);
|
||
arr.forEach(item => {
|
||
if (brr.indexOf(item.tomeName) == -1) {
|
||
brr.push(item.tomeName);
|
||
}
|
||
});
|
||
data.title = [...Object.values(brr)];
|
||
data.title.forEach((item, index) => {
|
||
let town = res.data.map(i => {
|
||
if (item === i.tomeName) {
|
||
return i;
|
||
}
|
||
});
|
||
Object.keys(dd).forEach(it => {
|
||
const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
|
||
if (index > -1) {
|
||
dd[it].push(10);
|
||
} else {
|
||
dd[it].push(null);
|
||
}
|
||
});
|
||
});
|
||
ASdivision();
|
||
});
|
||
};
|
||
//村
|
||
const getvillages = (city, time) => {
|
||
getvillage({ divisions: city, yearMonth: time }).then(res => {
|
||
dd = {
|
||
小麦: [],
|
||
玉米: [],
|
||
大豆: [],
|
||
地瓜: [],
|
||
花生: [],
|
||
蓝莓: [],
|
||
茶叶: [],
|
||
马铃薯: [],
|
||
白菜和萝卜: [],
|
||
其他: [],
|
||
};
|
||
Township.brr = res.data;
|
||
let arr = [...res.data];
|
||
let brr = [];
|
||
arr.splice(0, 1);
|
||
arr.forEach(item => {
|
||
if (brr.indexOf(item.tomeName) == -1) {
|
||
brr.push(item.tomeName);
|
||
}
|
||
});
|
||
data.title = [...Object.values(brr)];
|
||
data.title.forEach((item, index) => {
|
||
let town = res.data.map(i => {
|
||
if (item === i.tomeName) {
|
||
return i;
|
||
}
|
||
});
|
||
Object.keys(dd).forEach(it => {
|
||
const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
|
||
if (index > -1) {
|
||
dd[it].push(1);
|
||
} else {
|
||
dd[it].push(null);
|
||
}
|
||
});
|
||
});
|
||
ASdivision();
|
||
});
|
||
};
|
||
|
||
//作物分类面积统计
|
||
const getcroppers = (city, time) => {
|
||
getcropper({ divisions: city, yearMonth: time }).then(res => {
|
||
res.data.forEach(item => {
|
||
if (Number(item.area) < 1) {
|
||
dic.value[item.name].disabled = true;
|
||
} else {
|
||
dic.value[item.name].disabled = false;
|
||
}
|
||
});
|
||
classData = ref([]);
|
||
namedata = ref([]);
|
||
res.data.forEach(item => {
|
||
classData.value.push(item.area);
|
||
namedata.value.push(item.name);
|
||
});
|
||
areachar();
|
||
});
|
||
};
|
||
//作物类型统计
|
||
const getcropTypeStatisticss = (city, time) => {
|
||
getcropTypeStatistics({ divisions: city, yearMonth: time }).then(res => {
|
||
Pie3D.arr = [];
|
||
let arr = [];
|
||
res.data.forEach(item => {
|
||
for (let index = 0; index < dictionaryArr.length; index++) {
|
||
if (item.name == dictionaryArr[index].name) {
|
||
dictionaryArr[index].area = item.area;
|
||
dictionaryArr[index].value = 1;
|
||
for (const key in dic.value) {
|
||
if (key == item.name && Number(item.area)>0) {
|
||
arr.push({
|
||
type: item.name,
|
||
content: {
|
||
value: item.area,
|
||
percent: item.areaB,
|
||
color: dic.value[key].color,
|
||
},
|
||
});
|
||
}
|
||
}
|
||
if(Number(dictionaryArr[index].area)>0){
|
||
Pie3D.arr.push(dictionaryArr[index]);
|
||
}
|
||
}
|
||
}
|
||
typesofdata.value = arr;
|
||
});
|
||
typesof();
|
||
});
|
||
};
|
||
//高标准农田//highStandarditem
|
||
let highStandardArr = ref([]);
|
||
const gethighStandards = time => {
|
||
gethighStandard({ yearMonth: time, divisions: window.localStorage.getItem('divisions') }).then(
|
||
res => {
|
||
highStandarditem = {
|
||
小麦: [],
|
||
玉米: [],
|
||
大豆: [],
|
||
地瓜: [],
|
||
花生: [],
|
||
蓝莓: [],
|
||
茶叶: [],
|
||
马铃薯: [],
|
||
白菜和萝卜: [],
|
||
其他: [],
|
||
};
|
||
highStandardArr.value = res.data;
|
||
highStandard.forEach((item, indexs) => {
|
||
let town = res.data.map(i => {
|
||
if (item === i.region) {
|
||
return i;
|
||
}
|
||
});
|
||
Object.keys(dd).forEach(it => {
|
||
const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
|
||
if (index > -1) {
|
||
highStandarditem[it].push(70);
|
||
} else {
|
||
highStandarditem[it].push(null);
|
||
}
|
||
});
|
||
});
|
||
if (res.data.length > 0) {
|
||
farmland();
|
||
}
|
||
}
|
||
);
|
||
};
|
||
|
||
const selectTab = () => {
|
||
if (value.value == '370211') {
|
||
getTownships('370211', oldDatas.value.name);
|
||
getcroppers('370211', oldDatas.value.name); //作物分类面积请求
|
||
getcropTypeStatisticss('370211', oldDatas.value.name); //作物类型统计百分比
|
||
return;
|
||
} else {
|
||
getcroppers(value.value, oldDatas.value.name); //作物分类面积请求
|
||
getcropTypeStatisticss(value.value, oldDatas.value.name); //作物类型统计百分比
|
||
getvillages(value.value, oldDatas.value.name);
|
||
}
|
||
};
|
||
const getcurrentPage = params => {
|
||
dataSource.value = TimeArr.value.slice(
|
||
(params - 1) * pageSizeS.value,
|
||
params * pageSizeS.value
|
||
);
|
||
};
|
||
//列表模式-年
|
||
const theTimes = () => {
|
||
gettheTime().then(res => {
|
||
oldDatas.value = { name: res.data[res.data.length - 1] };
|
||
timeArr.value = res.data;
|
||
formInline.value.yearMonth = res.data[res.data.length-1];
|
||
getlistModes(res.data[0]);
|
||
let arr = [];
|
||
res.data.forEach(item => {
|
||
arr.push({ name: item });
|
||
});
|
||
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
|
||
);
|
||
|
||
let str = oldDatas.value.name;
|
||
let str1 = str && str.replace(/-/g, '_');
|
||
var num3 = parseFloat(str);
|
||
layersDic = {
|
||
小麦: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_xiaomai`,
|
||
time: `T${num3}xiaomai${num3}nongzuowufenlei`,
|
||
},
|
||
玉米: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_yumi`,
|
||
time: `T${num3}yumi${num3}nongzuowufenlei`,
|
||
},
|
||
大豆: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_dadou`,
|
||
time: `T${num3}dadou$${num3}nongzuowufenlei`,
|
||
},
|
||
地瓜: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_digua`,
|
||
time: `T${num3}digua${num3}nongzuowufenlei`,
|
||
},
|
||
花生: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_huasheng`,
|
||
time: `T${num3}huasheng${num3}nongzuowufenlei`,
|
||
},
|
||
蓝莓: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_lanmei`,
|
||
time: `T${num3}lanmei${num3}nongzuowufenlei`,
|
||
},
|
||
茶叶: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_chaye`,
|
||
time: `T${num3}chaye${num3}nongzuowufenlei`,
|
||
},
|
||
其他: {
|
||
setOf: `${oldDatas.value.name}-nongzuowufenlei`,
|
||
name: `T${str1}_qitanongzuowu`,
|
||
time: `T${num3}qitanongzuowu${num3}nongzuowufenlei`,
|
||
},
|
||
};
|
||
});
|
||
};
|
||
//列表模式-默认展示
|
||
const getlistModes = value => {
|
||
onSubmit();
|
||
// getlistMode({ yearMonth: value, flag: '1', divisions: '370211' }).then(res => {
|
||
// insectarr.value = res.data;
|
||
// tableNewData.value = res.data.slice(
|
||
// (currentPage.value - 1) * pageSize.value,
|
||
// (currentPage.value - 1) * pageSize.value + pageSize.value
|
||
// );
|
||
// });
|
||
};
|
||
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);
|
||
}
|
||
});
|
||
});
|
||
var view = map.getView();
|
||
view.animate({
|
||
center: ['119.88661841637813', '35.85667692242919'], // 设置新的地图中心点坐标
|
||
duration: 1000, // 动画过渡时间
|
||
zoom: 11, // 设置新的地图缩放级别
|
||
});
|
||
};
|
||
|
||
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') === 'gbz');
|
||
map.removeLayer(layerzhezhaos);
|
||
var layergaoliangss = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||
map.removeLayer(layergaoliangss);
|
||
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());
|
||
}
|
||
});
|
||
}
|
||
|
||
//权限地图
|
||
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());
|
||
}
|
||
});
|
||
}
|
||
|
||
//图表
|
||
function areachar() {
|
||
if (areaDiv.value) {
|
||
const areaDivIntance = echarts.init(areaDiv.value);
|
||
let dataX = namedata.value; //名称
|
||
let dataY = classData.value; //数据
|
||
let zoomShow = false;
|
||
if (dataY.length > 14) {
|
||
zoomShow = true;
|
||
} else {
|
||
zoomShow = false;
|
||
}
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
grid: {
|
||
top: '10%',
|
||
right: '5%',
|
||
left: '18%',
|
||
bottom: '15%',
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: dataX,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(235, 238, 245, 1)',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
formatter: function (value) {
|
||
var ret = ''; //拼接加\n返回的类目项
|
||
var maxLength = 2; //每项显示文字个数
|
||
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;
|
||
}
|
||
},
|
||
},
|
||
axisTick: {
|
||
// 刻度
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: {
|
||
name: '面积(亩)',
|
||
nameTextStyle: {
|
||
color: 'rgba(153, 153, 153, 1)',
|
||
fontSize: 14,
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: ' rgba(153, 153, 153, 1)',
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed', // Keep the grid lines on the y-axis dashed
|
||
color: 'rgba(235, 238, 245, 1)',
|
||
},
|
||
show: true,
|
||
},
|
||
minInterval: 1,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
|
||
dataZoom: [
|
||
//滚动条
|
||
{
|
||
show: zoomShow,
|
||
zoomLock: true, //禁止拉伸
|
||
type: 'slider',
|
||
realtime: true,
|
||
startValue: 0,
|
||
endValue: 14,
|
||
xAxisIndex: [0],
|
||
bottom: '10',
|
||
left: '30',
|
||
height: 10,
|
||
borderColor: 'rgba(0,0,0,0)',
|
||
textStyle: {
|
||
color: '#05D5FF',
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
data: dataY,
|
||
barWidth: '15',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(255, 142, 67, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.98,
|
||
color: 'rgba(255, 142, 67, 0.4)', // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: 'rgba(255, 142, 67, 1)',
|
||
shadowBlur: 4,
|
||
borderRadius: [5, 5, 0, 0],
|
||
},
|
||
},
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// lineHeight: 10,
|
||
// formatter: '{c}',
|
||
// position: 'top',
|
||
// textStyle: {
|
||
// color: '#fff',
|
||
// fontSize: 10,
|
||
// },
|
||
// },
|
||
// },
|
||
},
|
||
],
|
||
};
|
||
|
||
// option && areaDivIntance.setOption(option);
|
||
useEcharts(areaDivIntance, option);
|
||
let erd = elementResizeDetectorMaker();
|
||
erd.listenTo(areaDiv.value, () => {
|
||
nextTick(() => {
|
||
areaDivIntance.resize();
|
||
});
|
||
});
|
||
}
|
||
}
|
||
function typesof() {
|
||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||
let isSelected = '';
|
||
let isHovered = '';
|
||
let hoveredIndex = '';
|
||
let option = getPie3D(Pie3D.arr, 0);
|
||
typesofDivIntance.clear(); // Clear existing series
|
||
typesofDivIntance.setOption(option); // Update chart with new data
|
||
|
||
// 生成扇形的曲面参数方程
|
||
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
||
// 计算
|
||
const midRatio = (startRatio + endRatio) / 2;
|
||
|
||
const startRadian = startRatio * Math.PI * 2;
|
||
const endRadian = endRatio * Math.PI * 2;
|
||
const midRadian = midRatio * Math.PI * 2;
|
||
|
||
// 如果只有一个扇形，则不实现选中效果。
|
||
if (startRatio === 0 && endRatio === 1) {
|
||
// eslint-disable-next-line no-param-reassign
|
||
isSelected = false;
|
||
}
|
||
|
||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||
// eslint-disable-next-line no-param-reassign
|
||
k = typeof k !== 'undefined' ? k : 1 / 3;
|
||
|
||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||
|
||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||
const hoverRate = isHovered ? 1.05 : 1;
|
||
|
||
// 返回曲面参数方程
|
||
return {
|
||
u: {
|
||
min: -Math.PI,
|
||
max: Math.PI * 3,
|
||
step: Math.PI / 32,
|
||
},
|
||
|
||
v: {
|
||
min: 0,
|
||
max: Math.PI * 2,
|
||
step: Math.PI / 20,
|
||
},
|
||
|
||
x(u, v) {
|
||
if (u < startRadian) {
|
||
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||
}
|
||
if (u > endRadian) {
|
||
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||
}
|
||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
|
||
y(u, v) {
|
||
if (u < startRadian) {
|
||
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||
}
|
||
if (u > endRadian) {
|
||
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||
}
|
||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
|
||
z(u, v) {
|
||
if (u < -Math.PI * 0.5) {
|
||
return Math.sin(u);
|
||
}
|
||
if (u > Math.PI * 2.5) {
|
||
return Math.sin(u) * h * 0.1;
|
||
}
|
||
// 当前图形的高度是Z根据h（每个value的值决定的）
|
||
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
|
||
},
|
||
};
|
||
}
|
||
// 生成模拟 3D 饼图的配置项
|
||
function getPie3D(pieData, internalDiameterRatio) {
|
||
const series = [];
|
||
// 总和
|
||
let sumValue = 0;
|
||
let startValue = 0;
|
||
let endValue = 0;
|
||
const legendData = [];
|
||
const k =
|
||
typeof internalDiameterRatio !== 'undefined'
|
||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||
: 1 / 3;
|
||
|
||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||
for (let i = 0; i < pieData.length; i += 1) {
|
||
sumValue += pieData[i].value;
|
||
|
||
const seriesItem = {
|
||
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
||
type: 'surface',
|
||
parametric: true,
|
||
wireframe: {
|
||
show: false,
|
||
},
|
||
pieData: pieData[i],
|
||
pieStatus: {
|
||
selected: false,
|
||
hovered: false,
|
||
k,
|
||
},
|
||
};
|
||
|
||
if (typeof pieData[i].itemStyle !== 'undefined') {
|
||
const { itemStyle } = pieData[i];
|
||
|
||
// eslint-disable-next-line no-unused-expressions
|
||
typeof pieData[i].itemStyle.color !== 'undefined'
|
||
? (itemStyle.color = pieData[i].itemStyle.color)
|
||
: null;
|
||
// eslint-disable-next-line no-unused-expressions
|
||
typeof pieData[i].itemStyle.opacity !== 'undefined'
|
||
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
||
: null;
|
||
|
||
seriesItem.itemStyle = itemStyle;
|
||
}
|
||
series.push(seriesItem);
|
||
}
|
||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||
for (let i = 0; i < series.length; i += 1) {
|
||
endValue = startValue + series[i].pieData.value;
|
||
|
||
series[i].pieData.startRatio = startValue / sumValue;
|
||
series[i].pieData.endRatio = endValue / sumValue;
|
||
series[i].parametricEquation = getParametricEquation(
|
||
series[i].pieData.startRatio,
|
||
series[i].pieData.endRatio,
|
||
false,
|
||
false,
|
||
k,
|
||
// 我这里做了一个处理，使除了第一个之外的值都是10
|
||
series[i].pieData.value === series[0].pieData.value ? 35 : 10
|
||
);
|
||
|
||
startValue = endValue;
|
||
|
||
legendData.push(series[i].name);
|
||
}
|
||
|
||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||
const option = {
|
||
// animation: false,
|
||
legend: {
|
||
show: true,
|
||
bottom: 30,
|
||
textStyle: { color: 'rgba(51, 51, 51, 1)' },
|
||
},
|
||
// backgroundColor: 'rgba(243, 253, 250, 1)',
|
||
tooltip: {
|
||
formatter: params => {
|
||
if (params.seriesName !== 'mouseoutSeries') {
|
||
let brr = '';
|
||
Pie3D.arr.forEach(item => {
|
||
if (item.name == params.seriesName) {
|
||
brr = item.area;
|
||
}
|
||
});
|
||
return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||
params.color
|
||
};"></span>${params.seriesName}:${Number(brr)}亩`;
|
||
}
|
||
return '';
|
||
},
|
||
},
|
||
|
||
xAxis3D: {
|
||
min: -1.5,
|
||
max: 1.5,
|
||
},
|
||
yAxis3D: {
|
||
min: -1.5,
|
||
max: 1.5,
|
||
},
|
||
zAxis3D: {
|
||
min: -1.5,
|
||
max: 1.5,
|
||
},
|
||
grid3D: {
|
||
show: false,
|
||
boxHeight: 5,
|
||
top: '-10%',
|
||
viewControl: {
|
||
// 3d效果可以放大、旋转等，请自己去查看官方配置
|
||
alpha: 35,
|
||
beta: 30,
|
||
rotateSensitivity: 1,
|
||
zoomSensitivity: 0,
|
||
panSensitivity: 0,
|
||
autoRotate: false,
|
||
distance: 300,
|
||
},
|
||
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
|
||
postEffect: {
|
||
// 配置这项会出现锯齿，请自己去查看官方配置有办法解决
|
||
enable: true,
|
||
bloom: {
|
||
enable: true,
|
||
bloomIntensity: 0.1,
|
||
},
|
||
SSAO: {
|
||
enable: true,
|
||
quality: 'medium',
|
||
radius: 2,
|
||
},
|
||
// temporalSuperSampling: {
|
||
// enable: true,
|
||
// },
|
||
},
|
||
},
|
||
series,
|
||
};
|
||
return option;
|
||
}
|
||
// option && typesofDivIntance.setOption(option);
|
||
useEcharts(typesofDivIntance, option);
|
||
}
|
||
// 高标准农田echarts
|
||
function farmland() {
|
||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||
let arr = [];
|
||
for (const key in highStandarditem) {
|
||
dd[key].forEach(item => {
|
||
if (item) {
|
||
arr.push(key);
|
||
}
|
||
});
|
||
}
|
||
let option = {
|
||
// backgroundColor: '#333333',
|
||
// tooltip: { show: true,},
|
||
grid: {
|
||
left: '10%',
|
||
right: '0%',
|
||
bottom: '0%',
|
||
top: '10%',
|
||
containLabel: false,
|
||
},
|
||
legend: {
|
||
show: true, // Set to false to hide the legend
|
||
top: '0px', // Position of the legend, you can use 'top', 'bottom', 'left', or 'right'
|
||
itemGap: 5, // Gap between each legend item
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: 'rgba(153, 153, 153, 1)', // Color of the legend text
|
||
},
|
||
itemWidth: 5, // Set the width of the legend symbols
|
||
itemHeight: 5, // Set the height of the legend symbols
|
||
data: arr, // Array of legend item names
|
||
},
|
||
|
||
tooltip: {
|
||
formatter: function (params) {
|
||
// 自定义悬浮文字的格式，params.value 为当前柱状图的数值
|
||
let a = 0;
|
||
highStandardArr.value.forEach(item => {
|
||
if (item.name == params.seriesName && item.region == params.name) {
|
||
a = item.area;
|
||
}
|
||
});
|
||
return (
|
||
params.seriesName +
|
||
'<span style="font-size: 14px; color: #f00;">' +
|
||
a +
|
||
'</span>' +
|
||
'亩'
|
||
);
|
||
},
|
||
},
|
||
|
||
xAxis: {
|
||
type: 'value',
|
||
max: 500,
|
||
show: false,
|
||
// 不显示轴线
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
// 不显示刻度线
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
// 网格线为虚线
|
||
show: false,
|
||
},
|
||
// axisLabel:{
|
||
// formatter:'{value}%'
|
||
// }
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
inverse: true,
|
||
// position: 'top', // Place the labels above the bars
|
||
offset: -160, // Adjust the offset to control the distance from the bars
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: 'rgba(51, 51, 51, 1)',
|
||
fontSize: 14,
|
||
verticalAlign: 'bottom',
|
||
lineHeight: 42,
|
||
},
|
||
data: highStandard,
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
show: false,
|
||
zoomLock: true, //禁止拉伸
|
||
width: 8,
|
||
yAxisIndex: [0],
|
||
bottom: 30,
|
||
top: 20,
|
||
right: 10,
|
||
startValue: 0,
|
||
endValue: 4,
|
||
handleIcon:
|
||
'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
|
||
handleSize: '100%',
|
||
handleStyle: {
|
||
color: '#DBDBDB',
|
||
height: '100%',
|
||
},
|
||
backgroundColor: 'transparent',
|
||
fillerColor: '#DBDBDB',
|
||
textStyle: {
|
||
color: 'transparent',
|
||
},
|
||
dataBackground: {
|
||
lineStyle: {
|
||
color: 'transparent',
|
||
},
|
||
areaStyle: {
|
||
color: 'transparent',
|
||
},
|
||
},
|
||
borderColor: 'transparent',
|
||
},
|
||
{
|
||
type: 'inside',
|
||
id: 'insideY',
|
||
yAxisIndex: 0,
|
||
start: 0,
|
||
end: 50,
|
||
zoomOnMouseWheel: false,
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '小麦',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.小麦,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(254, 181, 98, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(254, 181, 98, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '小麦',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '大豆',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.大豆,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 238, 112, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(255, 238, 112, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '大豆',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '茶叶',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.茶叶,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(179, 224, 104, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(179, 224, 104, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '茶叶',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '花生',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.花生,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 156, 145, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(255, 156, 145, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '花生',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '蓝莓',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.蓝莓,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(129, 179, 212, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(129, 179, 212, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '蓝莓',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '地瓜',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.地瓜,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(192, 187, 220, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(192, 187, 220, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '地瓜',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '玉米',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.玉米,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(142, 212, 200, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(142, 212, 200, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '玉米',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '马铃薯',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.马铃薯,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(253, 205, 230, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(253, 205, 230, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '马铃薯',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '白菜和萝卜',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.白菜和萝卜,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(205, 236, 198, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(205, 236, 198, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '白菜和萝卜',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '其他',
|
||
type: 'bar',
|
||
barWidth: 24,
|
||
stack: 'stack',
|
||
data: highStandarditem.其他,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 0,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 218, 44, 1)',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(255, 218, 44, 1)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '其他',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
|
||
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);
|
||
}
|
||
});
|
||
});
|
||
let arrs = [
|
||
'2019-2022gaobiaozhunnongtian',
|
||
'gbz',
|
||
'dianjigaoliang',
|
||
'dianjigaoliangs',
|
||
'gao',
|
||
];
|
||
arrs.forEach(item => {
|
||
map.getLayers()
|
||
.getArray()
|
||
.forEach((ite, index) => {
|
||
if (ite.A.name == item || ite.A.id == item) {
|
||
map.getLayers().removeAt(index);
|
||
}
|
||
});
|
||
});
|
||
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: 500,
|
||
});
|
||
map.addLayer(layers);
|
||
}
|
||
});
|
||
|
||
// areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
|
||
// farmlandDivIntance.on('click', param => ChartClick(param));
|
||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||
useEcharts(farmlandDivIntance, option);
|
||
let erd = elementResizeDetectorMaker();
|
||
erd.listenTo(farmlandDiv.value, () => {
|
||
nextTick(() => {
|
||
farmlandDivIntance.resize();
|
||
});
|
||
});
|
||
}
|
||
|
||
function ASdivision() {
|
||
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
||
let arr = [];
|
||
for (const key in dd) {
|
||
dd[key].forEach(item => {
|
||
if (item) {
|
||
arr.push(key);
|
||
}
|
||
});
|
||
}
|
||
var option = {
|
||
// 设置图表的位置
|
||
grid: {
|
||
bottom: '8%',
|
||
left: '10%',
|
||
right: '6%',
|
||
top: '6%',
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
show: true, // Set to false to hide the legend
|
||
top: '10px', // Position of the legend, you can use 'top', 'bottom', 'left', or 'right'
|
||
itemGap: 5, // Gap between each legend item
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: 'rgba(153, 153, 153, 1)', // Color of the legend text
|
||
},
|
||
itemWidth: 5, // Set the width of the legend symbols
|
||
itemHeight: 5, // Set the height of the legend symbols
|
||
data: arr, // Array of legend item names
|
||
},
|
||
tooltip: {
|
||
formatter: function (params) {
|
||
// 自定义悬浮文字的格式，params.value 为当前柱状图的数值
|
||
let a = 0;
|
||
Township.brr.forEach(item => {
|
||
if (item.name == params.seriesName && item.tomeName == params.name) {
|
||
a = item.area;
|
||
}
|
||
});
|
||
return (
|
||
params.seriesName +
|
||
'<span style="font-size: 14px; color: #f00;">' +
|
||
a +
|
||
'</span>' +
|
||
'亩'
|
||
);
|
||
},
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
show: false,
|
||
zoomLock: true, //禁止拉伸
|
||
width: 8,
|
||
yAxisIndex: [0],
|
||
bottom: 30,
|
||
top: 20,
|
||
right: 10,
|
||
startValue: 0,
|
||
endValue: 4,
|
||
handleIcon:
|
||
'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
|
||
handleSize: '100%',
|
||
handleStyle: {
|
||
color: '#DBDBDB',
|
||
height: '100%',
|
||
},
|
||
backgroundColor: 'transparent',
|
||
fillerColor: '#DBDBDB',
|
||
textStyle: {
|
||
color: 'transparent',
|
||
},
|
||
dataBackground: {
|
||
lineStyle: {
|
||
color: 'transparent',
|
||
},
|
||
areaStyle: {
|
||
color: 'transparent',
|
||
},
|
||
},
|
||
borderColor: 'transparent',
|
||
},
|
||
{
|
||
type: 'inside',
|
||
id: 'insideY',
|
||
yAxisIndex: 0,
|
||
start: 0,
|
||
end: 50,
|
||
zoomOnMouseWheel: false,
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
// X轴
|
||
xAxis: {
|
||
type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
|
||
// 坐标轴刻度
|
||
axisTick: {
|
||
show: false, // 是否显示坐标轴刻度 默认显示
|
||
},
|
||
// 坐标轴轴线
|
||
axisLine: {
|
||
// 是否显示坐标轴轴线 默认显示
|
||
show: false, // 是否显示坐标轴轴线 默认显示
|
||
},
|
||
// 坐标轴在图表区域中的分隔线
|
||
splitLine: {
|
||
show: false, // 是否显示分隔线。默认数值轴显示
|
||
},
|
||
// 坐标轴刻度标签
|
||
axisLabel: {
|
||
show: false, // 是否显示刻度标签 默认显示
|
||
},
|
||
},
|
||
// Y轴
|
||
yAxis: [
|
||
// 左侧Y轴
|
||
{
|
||
// 坐标轴类型, 'category' 类目轴，适用于离散的类目数据
|
||
// 为该类型时必须通过 data 设置类目数据
|
||
type: 'category',
|
||
// 坐标轴刻度
|
||
axisTick: {
|
||
show: false, // 是否显示坐标轴刻度 默认显示
|
||
},
|
||
// 坐标轴轴线
|
||
axisLine: {
|
||
// 是否显示坐标轴轴线 默认显示
|
||
show: false, // 是否显示坐标轴轴线 默认显示
|
||
lineStyle: {
|
||
// 坐标轴线线的颜色
|
||
color: '#cdd3ee',
|
||
},
|
||
},
|
||
// 坐标轴在图表区域中的分隔线
|
||
splitLine: {
|
||
show: false, // 是否显示分隔线。默认数值轴显示
|
||
},
|
||
// 坐标轴刻度标签
|
||
axisLabel: {
|
||
show: true, // 是否显示刻度标签 默认显示
|
||
fontSize: 12, // 文字的字体大小
|
||
color: 'rrgba(51, 51, 51, 1)', // 刻度标签文字的颜色
|
||
// 使用字符串模板，模板变量为刻度默认标签 {value}
|
||
formatter: '{value}',
|
||
},
|
||
// 类目数据，在类目轴（type: 'category'）中有效
|
||
data: data.title,
|
||
inverse: true,
|
||
},
|
||
],
|
||
// 系列列表
|
||
series: [
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '茶叶', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '茶叶',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0],
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: 'rgba(179, 224, 104, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(179, 224, 104, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(179, 224, 104, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.茶叶, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '地瓜', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '地瓜',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0],
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: 'rgba(192, 187, 220, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(192, 187, 220, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(192, 187, 220, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.地瓜, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '大豆',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: 'rgba(255, 238, 112, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(255, 238, 112, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 238, 112, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.大豆, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '花生',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0],
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: 'rgba(255, 156, 145, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(255, 156, 145, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 156, 145, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.花生, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '小麦',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0],
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: 'rgba(254, 181, 98, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(254, 181, 98, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(254, 181, 98, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.小麦, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '蓝莓',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0],
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: ' rgba(129, 179, 212, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: ' rgba(129, 179, 212, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: ' rgba(129, 179, 212, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.蓝莓, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '玉米',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'black',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0],
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: 'rgba(142, 212, 200, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: ' rgba(142, 212, 200, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: ' rgba(142, 212, 200, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.玉米, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '马铃薯', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '马铃薯',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0],
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: 'rgba(253, 205, 230, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: ' rgba(253, 205, 230, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: ' rgba(253, 205, 230, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.马铃薯, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '白菜和萝卜', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '白菜和萝卜',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0],
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: 'rgba(205, 236, 198, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: ' rgba(205, 236, 198, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: ' rgba(205, 236, 198, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.白菜和萝卜, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '其他', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '其他',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(119, 119, 119, 1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
barBorderRadius: [0, 0, 0, 0],
|
||
barBorderRadius: [0, 0, 0, 0], //
|
||
borderWidth: 1, // 设置边框宽度
|
||
borderColor: 'rgba(255, 218, 44, 1)', // 设置边框颜色
|
||
color: {
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(255, 218, 44, 1)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 218, 44, 1)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
data: dd.其他, // 系列中的数据内容数组
|
||
},
|
||
],
|
||
};
|
||
// ASdivisionDivIntance.on('click', param => ChartClickRB(param));
|
||
option && ASdivisionDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||
useEcharts(ASdivisionDivIntance, option);
|
||
let erd = elementResizeDetectorMaker();
|
||
erd.listenTo(ASdivisionDiv.value, () => {
|
||
nextTick(() => {
|
||
ASdivisionDivIntance.resize();
|
||
});
|
||
});
|
||
}
|
||
|
||
function chartModes() {
|
||
const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
|
||
let arr = [];
|
||
let WheatArr = [];
|
||
let CornArr = [];
|
||
let Soybean = [];
|
||
let SweetPotato = [];
|
||
let Peanuts = [];
|
||
let Blueberries = [];
|
||
let Tea = [];
|
||
let Potatoes = [];
|
||
let Cabbage = [];
|
||
let Other = [];
|
||
insectarr.value.forEach(item => {
|
||
arr.push(item.region);
|
||
item.小麦 !== undefined && WheatArr.push(item.小麦);
|
||
item.玉米 !== undefined && CornArr.push(item.玉米);
|
||
item.大豆 !== undefined && Soybean.push(item.大豆);
|
||
item.地瓜 !== undefined && SweetPotato.push(item.地瓜);
|
||
item.花生 !== undefined && Peanuts.push(item.花生);
|
||
item.蓝莓 !== undefined && Blueberries.push(item.蓝莓);
|
||
item.茶叶 !== undefined && Tea.push(item.茶叶);
|
||
item.马铃薯 !== undefined && Potatoes.push(item.马铃薯);
|
||
item.白菜和萝卜 !== undefined && Cabbage.push(item.白菜和萝卜);
|
||
item.其他 !== undefined && Other.push(item.其他);
|
||
});
|
||
let ends = (10 / arr.length) * 100;
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
let tipStr = params[0].axisValueLabel + '</br>';
|
||
let totalNum = 0;
|
||
for (let i = 0; i < params.length; i++) {
|
||
totalNum += params[i].value;
|
||
if (params[i].seriesName !== '合计') {
|
||
tipStr += params[i].seriesName + '：' + params[i].value + '</br>';
|
||
}
|
||
}
|
||
for (let i = 0; i < params.length; i++) {
|
||
totalNum += Number(params[i].value);
|
||
if (params[i].seriesName === '合计') {
|
||
tipStr += '合计：' + totalNum;
|
||
}
|
||
}
|
||
return tipStr;
|
||
},
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
width: '40%',
|
||
zoomLock: true, //禁止拉伸
|
||
top: '90%',
|
||
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',
|
||
},
|
||
],
|
||
legend: {
|
||
top: 10,
|
||
left: 10,
|
||
icon: 'rect',
|
||
itemWidth: 4, // 图例图表宽度
|
||
itemHeight: 12, // 图例图标高度
|
||
data: [],
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '13%',
|
||
bottom: '15%',
|
||
top: '10%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
name: '区域',
|
||
axisLabel: {
|
||
fontSize: 12,
|
||
interval: 0,
|
||
rotate: 0,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
// color: '#cbeaf6', // x坐标轴线颜色
|
||
},
|
||
},
|
||
data: arr,
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '面积（亩）',
|
||
axisLabel: {
|
||
// color: '#cbeaf6', // 坐标轴label文字颜色
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
// color: '#cbeaf6', // y坐标轴线颜色
|
||
},
|
||
},
|
||
splitLine: {
|
||
// 网格线
|
||
lineStyle: {
|
||
// type: 'dashed', // 设置网格线类型 dotted：虚线 solid:实线
|
||
// color: '#395367',
|
||
},
|
||
show: true, // 隐藏或显示
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '小麦',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(34, 252, 10, 1)',
|
||
},
|
||
data: WheatArr,
|
||
},
|
||
{
|
||
name: '玉米',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(255, 171, 87, 1)',
|
||
},
|
||
data: CornArr,
|
||
},
|
||
{
|
||
name: '大豆',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(26, 255, 215, 1)',
|
||
},
|
||
data: Soybean,
|
||
},
|
||
{
|
||
name: '地瓜',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(140, 26, 255, 1)',
|
||
},
|
||
data: SweetPotato,
|
||
},
|
||
{
|
||
name: '花生',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(255, 55, 255, 1)',
|
||
},
|
||
data: Peanuts,
|
||
},
|
||
{
|
||
name: '蓝莓',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: ' rgba(23, 143, 255, 1)',
|
||
},
|
||
data: Blueberries,
|
||
},
|
||
{
|
||
name: '茶叶',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(255, 255, 26, 1)',
|
||
},
|
||
data: Tea,
|
||
},
|
||
{
|
||
name: '马铃薯',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(255, 18, 18, 1)',
|
||
},
|
||
data: Potatoes,
|
||
},
|
||
{
|
||
name: '白菜和萝卜',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(229, 150, 255, 1)',
|
||
},
|
||
data: Cabbage,
|
||
},
|
||
{
|
||
name: '其他',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(189, 243, 255, 1)',
|
||
},
|
||
data: Other,
|
||
},
|
||
{
|
||
name: '合计',
|
||
type: 'bar',
|
||
stack: '分类',
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
},
|
||
formatter: '',
|
||
},
|
||
},
|
||
data: [],
|
||
},
|
||
],
|
||
};
|
||
|
||
var series = option.series;
|
||
var tooltip = option.tooltip;
|
||
// 提示框自定义内容包括总合及文字
|
||
function formatFun(params) {
|
||
let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
|
||
let totalNum = 0; // 用于存储当前列总数
|
||
// params为当前柱状图数组数量 遍历求和并添加类目label：value
|
||
for (let i = 0; i < params.length; i++) {
|
||
if (params[i].seriesName !== '合计') {
|
||
const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}"></span>`;
|
||
totalNum += params[i].value;
|
||
tipStr += dotHtml + params[i].seriesName + '：' + params[i].value + '</br>';
|
||
}
|
||
}
|
||
// 添加最后的合计行 数据为每列总合
|
||
for (let i = 0; i < params.length; i++) {
|
||
if (params[i].seriesName === '合计') {
|
||
tipStr += '合计：' + totalNum;
|
||
}
|
||
}
|
||
return tipStr;
|
||
}
|
||
tooltip.formatter = formatFun;
|
||
// 指定函数计算总合
|
||
function fun(params) {
|
||
var dataSum = 0;
|
||
for (var i = 0; i < series.length; i++) {
|
||
dataSum += series[i].data[params.dataIndex];
|
||
}
|
||
return dataSum;
|
||
}
|
||
// 加载页面时候替换最后一个series的formatter
|
||
series[series.length - 1].label.normal.formatter = fun;
|
||
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: 90%;
|
||
|
||
: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%;
|
||
}
|
||
}
|
||
|
||
.searchDiv {
|
||
display: flex;
|
||
|
||
.dow {
|
||
float: right;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.leftTop {
|
||
height: 40%;
|
||
max-width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.areaDiv {
|
||
width: 100%;
|
||
height: calc(100% - 67px);
|
||
opacity: 1;
|
||
padding: 1px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.leftbottom {
|
||
height: 35%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-width: 100%;
|
||
align-items: center;
|
||
|
||
.typesofDiv {
|
||
width: 375px;
|
||
height: 397px;
|
||
background-repeat: no-repeat;
|
||
background-size: 85% 85%;
|
||
background-position: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.tableDiv {
|
||
// background: rgba(255, 255, 255, 0.05);
|
||
width: 100%;
|
||
padding: 5px 10px 5px 10px;
|
||
color: rgba(255, 255, 255, 1);
|
||
height: 20%;
|
||
overflow: hidden;
|
||
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.el-table tr) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
:deep(.el-table) {
|
||
--el-table-border-color: none;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||
background-color: revert;
|
||
}
|
||
|
||
div {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.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;
|
||
justify-content: 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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
.areaDiv {
|
||
width: 100%;
|
||
height: calc(100% - 67px);
|
||
opacity: 1;
|
||
padding: 1px;
|
||
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_div {
|
||
display: flex;
|
||
.el-input__wrapper {
|
||
min-width: 100px;
|
||
}
|
||
}
|
||
|
||
// .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;
|
||
// border-radius: 0;
|
||
// box-shadow: none;
|
||
// }
|
||
|
||
:deep(.el-input__inner) {
|
||
color: rgba(51, 51, 51, 1);
|
||
}
|
||
// }
|
||
|
||
.ASdivision {
|
||
width: 100%;
|
||
height: calc(100% - 100px);
|
||
opacity: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.farmlandDiv {
|
||
width: 100%;
|
||
height: 340px;
|
||
opacity: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.typesofDiv {
|
||
padding: auto;
|
||
width: 90%;
|
||
height: calc(100% - 67px);
|
||
background-repeat: no-repeat;
|
||
background-size: 85% 85%;
|
||
background-position: center;
|
||
}
|
||
|
||
:deep(.el-select__popper) {
|
||
border: none !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
:deep(.el-popper) {
|
||
border: none !important;
|
||
background: transparent !important;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.legend {
|
||
position: absolute;
|
||
right: 25%;
|
||
bottom: 60px;
|
||
width: 129px;
|
||
border-radius: 4px;
|
||
background: rgba(255, 255, 255, 1);
|
||
|
||
// height: 50px;
|
||
:deep(.el-collapse-item__header) {
|
||
border-radius: 4px;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
padding: 0 30px;
|
||
.el-icon {
|
||
color: rgba(100, 195, 164, 1);
|
||
}
|
||
}
|
||
|
||
--el-collapse-content-bg-color {
|
||
background: rgba(2, 31, 26, 0.6);
|
||
}
|
||
|
||
:deep(.el-collapse-item__content) {
|
||
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: #fff;
|
||
// }
|
||
:deep(.el-checkbox__label) {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
.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);
|
||
}
|
||
}
|
||
|
||
#pop {
|
||
border-radius: 5px;
|
||
position: absolute;
|
||
background: #fff;
|
||
display: none;
|
||
// justify-content: flex-start;
|
||
// align-items: flex-end;
|
||
padding: 8px;
|
||
border: 2px solid rgba(4, 153, 153, 1);
|
||
}
|
||
/*设置弹出框样式*/
|
||
.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 {
|
||
background-repeat: no-repeat;
|
||
height: 42px;
|
||
opacity: 1;
|
||
border-radius: 8px;
|
||
color: rgba(100, 195, 164, 1);
|
||
}
|
||
#popup-content {
|
||
background-repeat: no-repeat;
|
||
background-size: 100% !important;
|
||
width: 522px;
|
||
height: 365px;
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
p {
|
||
width: 50%;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-right: 45px;
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.back_button {
|
||
position: absolute;
|
||
right: 30%;
|
||
top: 20px;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
.select_citys {
|
||
background: #fff;
|
||
.el-select-dropdown__item {
|
||
color: black;
|
||
}
|
||
box-shadow: 0px 3px 9px 0px rgba(100, 195, 164, 0.25), 0px 1px 2px 0px rgba(100, 195, 164, 0.8);
|
||
}
|
||
:deep(.el-popper) {
|
||
position: absolute !important;
|
||
left: 0;
|
||
}
|
||
.el-select-dropdown {
|
||
position: absolute !important;
|
||
left: 0;
|
||
}
|
||
.el-select__popper {
|
||
border: none !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
.el-popper {
|
||
border: none !important;
|
||
background: #fff !important;
|
||
color: black !important;
|
||
}
|
||
|
||
.el-popper__arrow::before {
|
||
background: rgba(41, 255, 255, 0.7) !important;
|
||
display: none;
|
||
}
|
||
|
||
.selectCity {
|
||
background: #fff;
|
||
border: 1px solid #ccc;
|
||
}
|
||
</style>
|