up
This commit is contained in:
250
src/views/Transitional.vue
Normal file
250
src/views/Transitional.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="zr">{{ message }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCodeImg } from '@/api/login';
|
||||
import Cookies from 'js-cookie';
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import { useRoute } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||||
const Route = useRoute();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
const { proxy } = getCurrentInstance();
|
||||
let message = ref('加载中，请稍侯.....');
|
||||
let loginForm = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
code: '',
|
||||
uuid: '',
|
||||
});
|
||||
onMounted(() => {
|
||||
loginForm.value.password = '';
|
||||
getName();
|
||||
});
|
||||
if (window.localStorage.getItem('userName')) {
|
||||
getUserInfo();
|
||||
}
|
||||
function getName(params) {
|
||||
//获取当前URL
|
||||
var url = document.location.href;
|
||||
//声明一个对象
|
||||
var getRequest = new Object();
|
||||
//获取?的位置
|
||||
var index = url.indexOf('?');
|
||||
if (index != -1) {
|
||||
//截取出?后面的字符串
|
||||
var str = url.substr(index + 1);
|
||||
//将截取出来的字符串按照&变成数组
|
||||
let strs = str.split('&');
|
||||
//将get传参存入对象中
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
getRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
|
||||
}
|
||||
}
|
||||
if (getRequest.ticket) {
|
||||
window.localStorage.setItem('ticket', getRequest.ticket);
|
||||
axios
|
||||
.get(
|
||||
`http://36.134.45.201:8000/prod-api/system/external/getInfo?ticket=${getRequest.ticket}`
|
||||
)
|
||||
.then(response => {
|
||||
window.localStorage.setItem('divisions', response.data.data.user.dept.deptCode);
|
||||
window.localStorage.setItem('deptName', response.data.data.user.dept.deptName);
|
||||
window.localStorage.setItem('userName', response.data.data.user.userName);
|
||||
})
|
||||
.catch(err => {
|
||||
// message.value='暂无权限'
|
||||
});
|
||||
}
|
||||
if (!window.localStorage.getItem('userName')) {
|
||||
setTimeout(() => {
|
||||
getName();
|
||||
}, 300);
|
||||
} else {
|
||||
loginForm.value.username = window.localStorage.getItem('userName');
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => loginForm.value.username,
|
||||
() => {
|
||||
getUserInfo();
|
||||
}
|
||||
);
|
||||
|
||||
function getUserInfo() {
|
||||
if (window.localStorage.getItem('divisions').length > 9) {
|
||||
localStorage.clear();
|
||||
message.value = '暂无权限';
|
||||
return;
|
||||
}
|
||||
if (loginForm.value.username) {
|
||||
loginForm.value.password = '123456';
|
||||
userStore
|
||||
.login(loginForm.value)
|
||||
.then(() => {
|
||||
router.push({ path: redirect.value || '/' });
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
// 重新获取验证码
|
||||
if (captchaEnabled.value) {
|
||||
getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const loginRules = {
|
||||
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
|
||||
password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
|
||||
code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
|
||||
};
|
||||
|
||||
const codeUrl = ref('');
|
||||
const loading = ref(false);
|
||||
// 验证码开关
|
||||
const captchaEnabled = ref(true);
|
||||
// 注册开关
|
||||
const register = ref(false);
|
||||
const redirect = ref(undefined);
|
||||
|
||||
function handleLogin() {
|
||||
proxy.$refs.loginRef.validate(valid => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
|
||||
if (loginForm.value.rememberMe) {
|
||||
Cookies.set('username', loginForm.value.username, { expires: 30 });
|
||||
Cookies.set('password', encrypt(loginForm.value.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 });
|
||||
} else {
|
||||
// 否则移除
|
||||
Cookies.remove('username');
|
||||
Cookies.remove('password');
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
// 调用action的登录方法
|
||||
userStore
|
||||
.login(loginForm.value)
|
||||
.then(() => {
|
||||
router.push({ path: redirect.value || '/' });
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
// 重新获取验证码
|
||||
if (captchaEnabled.value) {
|
||||
getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getCode() {
|
||||
getCodeImg().then(res => {
|
||||
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
||||
if (captchaEnabled.value) {
|
||||
codeUrl.value = 'data:image/gif;base64,' + res.img;
|
||||
loginForm.value.uuid = res.uuid;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getCookie() {
|
||||
const username = Cookies.get('username');
|
||||
const password = Cookies.get('password');
|
||||
const rememberMe = Cookies.get('rememberMe');
|
||||
loginForm.value = {
|
||||
username: username === undefined ? loginForm.value.username : username,
|
||||
password: password === undefined ? loginForm.value.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
||||
};
|
||||
}
|
||||
|
||||
getCode();
|
||||
getCookie();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url('../assets/images/login-background.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 400px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
.el-input {
|
||||
height: 40px;
|
||||
input {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 40px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.zr {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.login-code-img {
|
||||
height: 40px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -259,7 +259,7 @@ import * as echarts from 'echarts';
|
||||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||||
// import * as turf from '@turf/turf';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||||
import { getarea, getTownship, getvillage, dow } from '@/api/crops/classify.js';
|
||||
import axios from 'axios';
|
||||
import 'echarts-gl';
|
||||
import { download } from '@/utils/request';
|
||||
@ -448,7 +448,6 @@ let TypeTime = {
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
getArea(); //请求
|
||||
getaArea(); //面积
|
||||
getTownships();
|
||||
getvillages(); //村
|
||||
|
||||
@ -1085,28 +1084,6 @@ const getvillages = () => {
|
||||
Township.brr = res.features;
|
||||
});
|
||||
};
|
||||
//面积
|
||||
const getaArea = () => {
|
||||
getareas().then(res => {
|
||||
Township.crr = res.features;
|
||||
data.title.forEach((item, index) => {
|
||||
let town = res.features.map(i => {
|
||||
if (item === i.properties.town) {
|
||||
return i.properties;
|
||||
}
|
||||
});
|
||||
Object.keys(dd).forEach(it => {
|
||||
const index = town.findIndex(a => a && a.crop === it);
|
||||
if (index > -1) {
|
||||
dd[it].push(town[index].Shape_Area);
|
||||
} else {
|
||||
dd[it].push(null);
|
||||
}
|
||||
});
|
||||
});
|
||||
ASdivision();
|
||||
});
|
||||
};
|
||||
|
||||
const selectTab = () => {
|
||||
getArea();
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -78,21 +78,92 @@ import Cookies from 'js-cookie';
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import { useRoute } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||||
const Route = useRoute();
|
||||
console.log(Route.path);
|
||||
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
|
||||
const loginForm = ref({
|
||||
username: 'admin',
|
||||
password: 'admin123',
|
||||
let loginForm = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
code: '',
|
||||
uuid: '',
|
||||
});
|
||||
// onMounted(() => {
|
||||
// loginForm.value.password = '';
|
||||
// getName();
|
||||
// });
|
||||
// if (window.localStorage.getItem('userName')) {
|
||||
// getUserInfo();
|
||||
// }
|
||||
// function getName(params) {
|
||||
// //获取当前URL
|
||||
// var url = document.location.href;
|
||||
// //声明一个对象
|
||||
// var getRequest = new Object();
|
||||
// //获取?的位置
|
||||
// var index = url.indexOf('?');
|
||||
// if (index != -1) {
|
||||
// //截取出?后面的字符串
|
||||
// var str = url.substr(index + 1);
|
||||
// //将截取出来的字符串按照&变成数组
|
||||
// let strs = str.split('&');
|
||||
// //将get传参存入对象中
|
||||
// for (var i = 0; i < strs.length; i++) {
|
||||
// getRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
|
||||
// }
|
||||
// }
|
||||
// if (getRequest.ticket) {
|
||||
// window.localStorage.setItem('ticket', getRequest.ticket);
|
||||
// axios
|
||||
// .get(
|
||||
// `http://36.134.45.201:8000/prod-api/system/external/getInfo?ticket=${getRequest.ticket}`
|
||||
// )
|
||||
// .then(response => {
|
||||
// console.log(response)
|
||||
// window.localStorage.setItem('divisions', response.data.data.user.dept.deptCode);
|
||||
// window.localStorage.setItem('deptName', response.data.data.user.dept.deptName);
|
||||
// window.localStorage.setItem('userName', response.data.data.user.userName);
|
||||
// });
|
||||
// }
|
||||
// if (!window.localStorage.getItem('userName')) {
|
||||
// setTimeout(() => {
|
||||
// getName();
|
||||
// }, 300);
|
||||
// } else {
|
||||
// loginForm.value.username = window.localStorage.getItem('userName');
|
||||
// }
|
||||
// }
|
||||
|
||||
// watch(
|
||||
// () => loginForm.value.username,
|
||||
// () => {
|
||||
// getUserInfo();
|
||||
// }
|
||||
// );
|
||||
|
||||
// function getUserInfo() {
|
||||
// console.log(loginForm.value.username, '111');
|
||||
// if (loginForm.value.username) {
|
||||
// loginForm.value.password = '123456';
|
||||
// userStore
|
||||
// .login(loginForm.value)
|
||||
// .then(() => {
|
||||
// router.push({ path: redirect.value || '/' });
|
||||
// })
|
||||
// .catch(() => {
|
||||
// loading.value = false;
|
||||
// // 重新获取验证码
|
||||
// if (captchaEnabled.value) {
|
||||
// getCode();
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
const loginRules = {
|
||||
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
|
||||
@ -171,7 +242,7 @@ getCookie();
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url('../assets/images/login-background.png');
|
||||
background-image: url('../assets/images/login-background.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
@ -229,4 +300,4 @@ getCookie();
|
||||
height: 40px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<div class="selectDiv">
|
||||
站点名称:
|
||||
<el-select v-model="zdmcValue" placeholder="请选择">
|
||||
<el-select popper-class="select_city" v-model="zdmcValue" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in zdmcList"
|
||||
:key="item.msName"
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div class="selectDiv" style="margin-top: 10px">
|
||||
预警情况:
|
||||
<el-select v-model="warnValue" placeholder="请选择">
|
||||
<el-select popper-class="select_city" v-model="warnValue" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in warnList"
|
||||
:key="item.flag"
|
||||
@ -393,7 +393,7 @@ let alterData = ref([]);
|
||||
let newArr = ref([]);
|
||||
const zdmcList = ref([])
|
||||
const zdmcValue = ref('')
|
||||
|
||||
let code=window.localStorage.getItem('deptName')
|
||||
function getmeteorology() {
|
||||
meteorology({
|
||||
data: value.value,
|
||||
@ -781,7 +781,7 @@ const meteorologicals = () => {
|
||||
})
|
||||
|
||||
|
||||
meteorologicalsPeople({flag: 3, alertRange: radio1.value, data: value.value}).then(res => {
|
||||
meteorologicalsPeople({flag: 3, alertRange: radio1.value, data: value.value,divisions:code}).then(res => {
|
||||
peopleData.value = res.data
|
||||
|
||||
for (const i in peopleData.value) {
|
||||
@ -1281,5 +1281,30 @@ $height: calc(100vh - 100px);
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(2, 31, 26, 0.95);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-select__popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<div class="selectDiv">
|
||||
站点名称:
|
||||
<el-select v-model="zdmcValue" placeholder="请选择">
|
||||
<el-select popper-class="select_city" v-model="zdmcValue" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in zdmcList"
|
||||
:key="item.msName"
|
||||
@ -43,7 +43,7 @@
|
||||
</div>
|
||||
<div class="selectDiv" style="margin-top: 10px">
|
||||
预警情况:
|
||||
<el-select v-model="warnValue" placeholder="请选择">
|
||||
<el-select popper-class="select_city" v-model="warnValue" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in warnList"
|
||||
:key="item.flag"
|
||||
@ -384,6 +384,7 @@ let alterData = ref([]);
|
||||
let newArr = ref([]);
|
||||
const zdmcList = ref([]);
|
||||
const zdmcValue = ref('');
|
||||
let code=window.localStorage.getItem('deptName')
|
||||
|
||||
function getmeteorology() {
|
||||
meteorology({
|
||||
@ -766,7 +767,7 @@ const meteorologicals = () => {
|
||||
}
|
||||
});
|
||||
|
||||
meteorologicalsPeople({ flag: 1, alertRange: radio1.value, data: value.value }).then(res => {
|
||||
meteorologicalsPeople({ flag: 1, alertRange: radio1.value, data: value.value ,divisions:code}).then(res => {
|
||||
peopleData.value = res.data;
|
||||
|
||||
for (const i in peopleData.value) {
|
||||
@ -1261,4 +1262,31 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(2, 31, 26, 0.95);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-select__popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<div class="selectDiv">
|
||||
站点名称:
|
||||
<el-select v-model="zdmcValue" placeholder="请选择">
|
||||
<el-select popper-class="select_city" v-model="zdmcValue" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in zdmcList"
|
||||
:key="item.msName"
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div class="selectDiv" style="margin-top: 10px">
|
||||
预警情况:
|
||||
<el-select v-model="warnValue" placeholder="请选择">
|
||||
<el-select popper-class="select_city" v-model="warnValue" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in warnList"
|
||||
:key="item.flag"
|
||||
@ -185,7 +185,7 @@ let clickInfoMap = ref({name: '', value: ''});
|
||||
|
||||
|
||||
let rightWraFlag = ref(false);
|
||||
|
||||
let code=window.localStorage.getItem('deptName')
|
||||
|
||||
const value1 = ref('');
|
||||
|
||||
@ -777,7 +777,7 @@ const meteorologicals = () => {
|
||||
})
|
||||
|
||||
|
||||
meteorologicalsPeople({flag: 2, alertRange: radio1.value, data: value.value}).then(res => {
|
||||
meteorologicalsPeople({flag: 2, alertRange: radio1.value, data: value.value,divisions:code}).then(res => {
|
||||
peopleData.value = res.data
|
||||
|
||||
for (const i in peopleData.value) {
|
||||
@ -1278,5 +1278,30 @@ $height: calc(100vh - 100px);
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(2, 31, 26, 0.95);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-select__popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -50,10 +50,11 @@
|
||||
height="80%"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column prop="dataTime" label="日期" width="150">
|
||||
<el-table-column prop="dataTime" label="日期" width="160">
|
||||
<template #default="scope">
|
||||
<div>{{ handleDate(scope.row.dataTime) }}</div>
|
||||
<div>{{ handleTime(scope.row.dataTime) }}</div>
|
||||
<div>{{ scope.row.dataTime}}</div>
|
||||
<!-- <div>{{ handleDate(scope.row.dataTime) }}</div>
|
||||
<div>{{ handleTime(scope.row.dataTime) }}</div> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="airTemperature" label="空气温度(℃)" />
|
||||
@ -118,7 +119,7 @@
|
||||
:class="active == '6' ? 'SelectedDiv' : ''"
|
||||
@click="depthclick(6)"
|
||||
>
|
||||
大气压力
|
||||
大气压力
|
||||
</p>
|
||||
</div>
|
||||
<div ref="chartDiv" class="chartDiv"></div>
|
||||
@ -172,7 +173,7 @@ import L from 'leaflet';
|
||||
import iconShadow from '/img/marker/mark.png';
|
||||
import moment from 'Moment';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
import elementResizeDetectorMaker from "element-resize-detector";
|
||||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||||
|
||||
let map = L.Map;
|
||||
let tabulation = ref([]);
|
||||
@ -182,6 +183,7 @@ let label1 = ref('');
|
||||
let label2 = ref('全部');
|
||||
let tableNewData = ref([]);
|
||||
const chartDiv = ref(null);
|
||||
let code = window.localStorage.getItem('deptName');
|
||||
const dialogVisible = ref(false);
|
||||
let value1 = ref('');
|
||||
let formInline = ref({
|
||||
@ -191,7 +193,7 @@ let formInline = ref({
|
||||
});
|
||||
let flags = ref(false);
|
||||
let tabulationcurrentPage = ref(1); //列表当前页
|
||||
let tabulationpageSize = ref(9); //每页条数
|
||||
let tabulationpageSize = ref(11); //每页条数
|
||||
let center = null; // 指定中心点
|
||||
let chartData = ref({
|
||||
airTemperature: [], //空气温度
|
||||
@ -246,8 +248,7 @@ const initLeafletMap = () => {
|
||||
|
||||
/*-----------接口---------------*/
|
||||
const getmeteorologicals = () => {
|
||||
getmeteorological().then(res => {
|
||||
console.log(res.data);
|
||||
getmeteorological({ divisions: code }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
devicesArr.value.push(item);
|
||||
});
|
||||
@ -259,6 +260,7 @@ const getmeteorologys = () => {
|
||||
whetherToDownload: false,
|
||||
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
divisions: window.localStorage.getItem('divisions'),
|
||||
}).then(res => {
|
||||
tabulation.value = res.data;
|
||||
tableNewData.value = res.data.slice(
|
||||
@ -266,8 +268,7 @@ const getmeteorologys = () => {
|
||||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
|
||||
);
|
||||
});
|
||||
getMeteorological().then(res => {
|
||||
console.log(res.data)
|
||||
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
map.setView(center, 17);
|
||||
@ -301,21 +302,21 @@ const getMeteorologyTbs = () => {
|
||||
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
chartData.value['airTemperature'].push(item.airTemperature);
|
||||
chartData.value['airHumidity'].push(item.airHumidity);
|
||||
chartData.value['windSpeed'].push(item.windSpeed);
|
||||
chartData.value['windDirection'].push(item.windDirection);
|
||||
chartData.value['rainfall'].push(item.rainfall);
|
||||
chartData.value['atmosphericPressure'].push(item.atmosphericPressure);
|
||||
chartData.value['evaporation'].push(item.evaporation);
|
||||
chartData.value['lightIntensity'].push(item.lightIntensity);
|
||||
chartData.value['sunlightHours'].push(item.sunlightHours);
|
||||
chartData.value['photosyntheticEffectiveRadiation'].push(
|
||||
chartData.value['airTemperature'].unshift(item.airTemperature);
|
||||
chartData.value['airHumidity'].unshift(item.airHumidity);
|
||||
chartData.value['windSpeed'].unshift(item.windSpeed);
|
||||
chartData.value['windDirection'].unshift(item.windDirection);
|
||||
chartData.value['rainfall'].unshift(item.rainfall);
|
||||
chartData.value['atmosphericPressure'].unshift(item.atmosphericPressure);
|
||||
chartData.value['evaporation'].unshift(item.evaporation);
|
||||
chartData.value['lightIntensity'].unshift(item.lightIntensity);
|
||||
chartData.value['sunlightHours'].unshift(item.sunlightHours);
|
||||
chartData.value['photosyntheticEffectiveRadiation'].unshift(
|
||||
item.photosyntheticEffectiveRadiation
|
||||
);
|
||||
chartData.value['dataTimeArr'].push(item.dataTime);
|
||||
chartData.value['dataTimeArr'].unshift(item.dataTime);
|
||||
});
|
||||
chart()
|
||||
chart();
|
||||
});
|
||||
};
|
||||
/*------------事件----------------*/
|
||||
@ -326,10 +327,8 @@ const handleNodeClick = (data, node, data1, data2) => {
|
||||
// let oriFatherId = node.parent.parent.data;
|
||||
// label1.value = oriFatherId.label;
|
||||
// getCameraNames(label2.value);
|
||||
console.log(label2.value);
|
||||
city.value = label2.value;
|
||||
getMeteorological().then(res => {
|
||||
console.log(res.data);
|
||||
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.msName == label2.value) {
|
||||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
@ -349,7 +348,7 @@ const handleNodeClick = (data, node, data1, data2) => {
|
||||
const onSubmit = e => {
|
||||
getmeteorologys();
|
||||
getMeteorologyTbs();
|
||||
chart()
|
||||
chart();
|
||||
};
|
||||
|
||||
//创建ICON构造函数，相当于继承于ICON，可以重新设置属性
|
||||
@ -370,15 +369,14 @@ var greenIcon = new LeafIcon({
|
||||
//列表模式模式切换
|
||||
const SwitchMode = () => {
|
||||
SwitchFlag.value = !SwitchFlag.value;
|
||||
chart()
|
||||
chart();
|
||||
};
|
||||
//
|
||||
|
||||
const chart=()=>{
|
||||
const chart = () => {
|
||||
const statInfo = chartDiv.value; // 获取图表元素
|
||||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
|
||||
statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||||
console.log(document.querySelector('.chartModeFather').offsetWidth);
|
||||
const myChart = echarts.init(statInfo);
|
||||
// 设置宽度自适应
|
||||
window.addEventListener('resize', () => {
|
||||
@ -388,7 +386,7 @@ const chart=()=>{
|
||||
myChart.resize();
|
||||
});
|
||||
farmland();
|
||||
}
|
||||
};
|
||||
|
||||
//折叠右侧地图
|
||||
const foldClick = () => {
|
||||
@ -429,7 +427,14 @@ const depthclick = item => {
|
||||
farmland();
|
||||
};
|
||||
const dowcity = () => {
|
||||
downLoadFile(tabulation.value[tabulation.value.length - 1].excelPath);
|
||||
getmeteorology({
|
||||
name: city.value,
|
||||
whetherToDownload: true,
|
||||
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||||
});
|
||||
};
|
||||
//chart
|
||||
|
||||
@ -440,7 +445,6 @@ function farmland() {
|
||||
let arr1 = chartData.value.airTemperature;
|
||||
let arr2 = chartData.value.airHumidity;
|
||||
let color = 'rgba(255, 235, 59, 1)';
|
||||
console.log(active.value);
|
||||
switch (active.value) {
|
||||
case 1:
|
||||
leftY = '温度(℃)';
|
||||
@ -477,7 +481,7 @@ function farmland() {
|
||||
arr2 = chartData.value.evaporation;
|
||||
color = 'rgba(0, 209, 195, 1)';
|
||||
break;
|
||||
case 6:
|
||||
case 6:
|
||||
leftY = '大气压力(hpa)';
|
||||
rightY = '';
|
||||
arr1 = chartData.value.atmosphericPressure;
|
||||
@ -486,11 +490,9 @@ function farmland() {
|
||||
break;
|
||||
}
|
||||
var time = chartData.value.dataTimeArr;
|
||||
console.log(arr1);
|
||||
console.log(arr2);
|
||||
// var sportData = humidity.value;
|
||||
// var sportTime = temperature.value;
|
||||
let ends = (7 / time.length) * 100;
|
||||
let ends = (30 / time.length) * 100;
|
||||
let option = {
|
||||
color: [color, 'rgba(199, 125, 231, 1)'],
|
||||
tooltip: {
|
||||
@ -553,6 +555,7 @@ function farmland() {
|
||||
color: 'rgba(102, 102, 102, 1)',
|
||||
},
|
||||
interval: 0, //使x轴文字显示全
|
||||
rotate: 45,
|
||||
formatter: function (params) {
|
||||
var newParamsName = '';
|
||||
var paramsNameNumber = params.length;
|
||||
@ -763,11 +766,11 @@ function farmland() {
|
||||
// option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(chartDiv.value, () => {
|
||||
nextTick(() => {
|
||||
farmlandDivIntance.resize();
|
||||
})
|
||||
})
|
||||
erd.listenTo(chartDiv.value, () => {
|
||||
nextTick(() => {
|
||||
farmlandDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -835,10 +838,10 @@ $height: calc(100vh - 100px);
|
||||
.chartModeFather {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
.chartDiv{
|
||||
width: 100% !important;
|
||||
height: 89% !important;
|
||||
}
|
||||
.chartDiv {
|
||||
width: 100% !important;
|
||||
height: 89% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-tabs {
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<span>洪涝面积统计-高标准农田</span>
|
||||
<p @click="Deta3()">
|
||||
<p @click="Deta3()" v-if="limits">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -92,6 +92,7 @@
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:data="highStandardArr"
|
||||
style="width: 100%; font-size: 12px"
|
||||
empty-text="暂时无权限"
|
||||
>
|
||||
<el-table-column prop="region" label="区域名称" />
|
||||
<el-table-column
|
||||
@ -133,6 +134,7 @@
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:data="ZoningData"
|
||||
:key="itemKey"
|
||||
style="width: 100%; font-size: 12px"
|
||||
>
|
||||
<el-table-column prop="name" label="区域名称" />
|
||||
@ -201,15 +203,22 @@
|
||||
<el-checkbox
|
||||
v-for="(value, item, key) in dic"
|
||||
:key="key"
|
||||
:style="{
|
||||
backgroundColor: value.color,
|
||||
border: `1px solid value.color`,
|
||||
width: `100%`,
|
||||
}"
|
||||
: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>
|
||||
@ -279,7 +288,7 @@
|
||||
>
|
||||
<el-option label="作物类型" value="作物类型" />
|
||||
<el-option label="行政区划" value="行政区划" />
|
||||
<el-option label="高标准农田" value="高标准农田" />
|
||||
<el-option v-if="limits" label="高标准农田" value="高标准农田" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="镇">
|
||||
@ -338,6 +347,7 @@ import 'echarts-gl';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
import * as xlsx from 'xlsx'; // Vue3 版本
|
||||
import { useRouter } from 'vue-router';
|
||||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||||
|
||||
const router = useRouter();
|
||||
let viewer = ref(null);
|
||||
@ -345,6 +355,7 @@ const areaDiv = ref(null);
|
||||
const typesofDiv = ref(null);
|
||||
const ProgressBarDiv = ref(null);
|
||||
const value = ref('370211');
|
||||
value.value = window.localStorage.getItem('divisions');
|
||||
const leftProgressBarDiv = ref(null);
|
||||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||||
const clickInfoMap = ref({ name: '', value: '' });
|
||||
@ -373,6 +384,12 @@ let layers = ref(null); //村
|
||||
let regionName = ref('');
|
||||
let zhengData = ref([]);
|
||||
let alterArr = ref([]);
|
||||
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
|
||||
let itemKey = ref([]);
|
||||
let code =
|
||||
window.localStorage.getItem('deptName') == '青岛西海岸新区'
|
||||
? '黄岛区'
|
||||
: window.localStorage.getItem('deptName');
|
||||
let amount = ref([
|
||||
{
|
||||
洪涝: 0,
|
||||
@ -411,15 +428,8 @@ let layersDic = {
|
||||
name: 'T2020_05_26_honglao',
|
||||
},
|
||||
};
|
||||
let areatext = '8383894';
|
||||
//表格数据
|
||||
let tableData = ref([]);
|
||||
let TypeTime = {
|
||||
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
|
||||
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
|
||||
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
|
||||
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
|
||||
};
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
@ -429,7 +439,7 @@ function initonMounted() {
|
||||
theTimes(); //年
|
||||
//地图
|
||||
initmap();
|
||||
showDaChangArea()
|
||||
showDaChangArea();
|
||||
alter();
|
||||
areachar();
|
||||
typesof();
|
||||
@ -467,6 +477,8 @@ function initmap() {
|
||||
view: new ol.View({
|
||||
center: [119.86763411957472, 35.88435182141938],
|
||||
zoom: 11,
|
||||
// 设置最大缩放级别
|
||||
maxZoom: 16.5,
|
||||
projection: 'EPSG:4326',
|
||||
}),
|
||||
layers: [
|
||||
@ -497,31 +509,84 @@ function initmap() {
|
||||
});
|
||||
map.on('singleclick', function (e) {
|
||||
var coodinate = e.coordinate;
|
||||
var lon = coodinate[0];
|
||||
var lat = coodinate[1];
|
||||
var view = map.getView();
|
||||
var zoom = map.getView().getZoom();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
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,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
let url = 'http://36.134.44.75:8090/iserver/services/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,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
SQLSearch(code);
|
||||
}
|
||||
onUpdated(() => {
|
||||
// 获取父元素和地图容器
|
||||
@ -567,17 +632,18 @@ function QueryData(e, name, url, item) {
|
||||
if (item == '镇' && data.result.recordsets[0].features.features[0].properties.XJQYDM) {
|
||||
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
|
||||
let arr = [];
|
||||
gettownInformation({ divisions: '370211', yearMonth: '2023-05' }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.subregion == code) {
|
||||
console.log(item, code, '--------');
|
||||
name = item.name;
|
||||
arr.push(item);
|
||||
}
|
||||
alterArr.value = arr;
|
||||
});
|
||||
alter();
|
||||
});
|
||||
gettownInformation({ divisions: '370211', yearMonth: oldDatas.value.name }).then(
|
||||
res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.subregion == code) {
|
||||
name = item.name;
|
||||
arr.push(item);
|
||||
}
|
||||
alterArr.value = arr;
|
||||
});
|
||||
alter();
|
||||
}
|
||||
);
|
||||
}
|
||||
// else if (
|
||||
// item == '村' &&
|
||||
@ -598,10 +664,8 @@ function QueryData(e, name, url, item) {
|
||||
// }
|
||||
function alter() {
|
||||
if (data.result.currentCount > 0) {
|
||||
console.log(data.result.recordsets[0].features);
|
||||
if (data.result.recordsets[0].features) {
|
||||
overlay.setPosition(point.flatCoordinates);
|
||||
console.log(name);
|
||||
titleDiv.innerHTML = name;
|
||||
}
|
||||
layergaoliang = map
|
||||
@ -641,7 +705,7 @@ function QueryData(e, name, url, item) {
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
erase(newDataZh);
|
||||
value.value = '370211';
|
||||
value.value = window.localStorage.getItem('divisions');
|
||||
layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
@ -671,18 +735,19 @@ 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');
|
||||
// addConver(ft.getGeometry().getCoordinates(), 'huandao');
|
||||
});
|
||||
}
|
||||
//添加遮罩
|
||||
function addConver(data,name) {
|
||||
function addConver(data, name, color, index) {
|
||||
let source = new ol.source.Vector();
|
||||
var converLayer = new ol.layer.Vector({
|
||||
id: name ? name : 'zhezhao',
|
||||
id: name ? name : 'zhezhao',
|
||||
source: source,
|
||||
zIndex: index ? index : 50,
|
||||
style: new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba( 105, 105, 105, 0.9)',
|
||||
color: color ? color : 'rgba( 105, 105, 105, 0.9)',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
@ -696,18 +761,80 @@ function addConver(data,name) {
|
||||
|
||||
//擦除操作，生产遮罩范围
|
||||
function erase(data) {
|
||||
console.log(data);
|
||||
const extent = [-180, -90, 180, 90];
|
||||
const polygonRing = ol.geom.Polygon.fromExtent(extent);
|
||||
const coords = data;
|
||||
console.log(coords);
|
||||
coords.forEach(coord => {
|
||||
const linearRing = new ol.geom.LinearRing(coord[0]);
|
||||
polygonRing.appendLinearRing(linearRing);
|
||||
});
|
||||
return polygonRing;
|
||||
}
|
||||
//权限地图
|
||||
function SQLSearch(name) {
|
||||
let names = '';
|
||||
let url = '';
|
||||
let setName = '';
|
||||
let setOf = '';
|
||||
let quyu = '';
|
||||
url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
|
||||
names = name;
|
||||
|
||||
setName = 'XJQY3702112019WGS84';
|
||||
setOf = 'huangdaoqu_bianjie';
|
||||
quyu = 'XJQYMC';
|
||||
//SQL查询（模糊查询）
|
||||
// var url = 'http://192.168.0.113:8090/iserver/services/data-liangquhuadingWGS84/rest/data';
|
||||
var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
|
||||
queryParameter: {
|
||||
name: `${setName}@${setOf}`,
|
||||
attributeFilter: `${quyu} like '%${names}%'`,
|
||||
},
|
||||
datasetNames: [`${setOf}:${setName}`],
|
||||
});
|
||||
|
||||
new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
|
||||
if (serviceResult.result.featureCount != 0) {
|
||||
var layerzhezhao = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
var layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||||
map.removeLayer(layergaoliang);
|
||||
var geojson = new ol.format.GeoJSON().readFeatures(serviceResult.result.features);
|
||||
addConver(
|
||||
serviceResult.result.features.features[0].geometry.coordinates,
|
||||
'qu',
|
||||
'rgba( 105, 105, 105, 1)',
|
||||
9999
|
||||
);
|
||||
var selectFeatureSource = new ol.source.Vector();
|
||||
selectFeatureSource.addFeatures(geojson);
|
||||
//设置图层高亮样式
|
||||
const style = new ol.style.Style({
|
||||
// fill: new ol.style.Fill({
|
||||
// color: 'rgba(0, 255, 0, 0.1)',
|
||||
// }),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(85, 255, 255, 1.0)',
|
||||
// lineDash: [10, 10],
|
||||
width: 2,
|
||||
}),
|
||||
});
|
||||
var vectorQuery = new ol.layer.Vector({
|
||||
id: 'dianjigaoliang',
|
||||
source: selectFeatureSource,
|
||||
});
|
||||
vectorQuery.setStyle(style);
|
||||
map.addLayer(vectorQuery);
|
||||
map.getView().fit(selectFeatureSource.getExtent());
|
||||
}
|
||||
});
|
||||
}
|
||||
const cun = () => {
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
@ -780,7 +907,6 @@ watch(
|
||||
if (layersDic[item]) {
|
||||
// 假设要删除的图层为 layerToRemove
|
||||
var index = map.getLayers().getArray().indexOf(layersDic[item].name);
|
||||
console.log(map.getLayers().getArray());
|
||||
map.getLayers()
|
||||
.getArray()
|
||||
.forEach((ite, index) => {
|
||||
@ -804,11 +930,27 @@ watch(
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
value.value = '370211';
|
||||
value.value = window.localStorage.getItem('divisions');
|
||||
getydamageAreas(value.value, oldDatas.value.name); //农作物受灾面积统计
|
||||
getproportions(value.value, oldDatas.value.name); //农作物受灾面积占比
|
||||
gethighStandards(oldDatas.value.name); //高标准农田冷冻等级面积统计
|
||||
gettownInformations(value.value, oldDatas.value.name);
|
||||
gettownInformations(value.value, oldDatas.value.name); //镇
|
||||
// if (limits) {
|
||||
|
||||
// } else {
|
||||
// getvillages(value.value, oldDatas.value.name);
|
||||
// }
|
||||
let str = oldDatas.value.name;
|
||||
let str1 = str.replace(/-/g, '_');
|
||||
layersDic = {
|
||||
洪涝区: {
|
||||
setOf: `${oldDatas.value.name}-honglao`,
|
||||
name: `T${str1}_honglao`,
|
||||
},
|
||||
};
|
||||
for (const key in checkList.value) {
|
||||
addwms(layersDic[checkList.value[key]]);
|
||||
}
|
||||
}
|
||||
);
|
||||
let townZuowu = ref({ label: [] }); //镇的作物
|
||||
@ -835,21 +977,6 @@ function rightFoldClick() {
|
||||
}
|
||||
}
|
||||
|
||||
function addvillages(value, customName) {
|
||||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||||
url: `${serverAPI.geoserverUrl}/shuzisannong/wms`,
|
||||
layers: 'shuzisannong:result', //图层名
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
transparent: true, //是否透明
|
||||
// CQL_FILTER: `XZDM=${value.value}`,
|
||||
CQL_FILTER: `value in (${value})`,
|
||||
},
|
||||
});
|
||||
map2.customName = customName;
|
||||
viewer.imageryLayers.addImageryProvider(map2);
|
||||
}
|
||||
const handleChange = value => {
|
||||
formInline.value.area = value;
|
||||
};
|
||||
@ -862,11 +989,10 @@ const onSubmit = () => {
|
||||
getllistDroughtsDamage({
|
||||
yearMonth: formInline.value.time,
|
||||
statistical: formInline.value.statistical,
|
||||
droughtRating: formInline.value.droughtRating == null ? '1' : formInline.value.droughtRating,
|
||||
droughtRating:
|
||||
formInline.value.droughtRating == null ? '1' : formInline.value.droughtRating,
|
||||
area: formInline.value.area,
|
||||
}).then(res => {
|
||||
console.log(res.data);
|
||||
console.log(formInline.value.statistical);
|
||||
if (formInline.value.statistical == '行政区划') {
|
||||
res.data.forEach(item => {
|
||||
if (arr.indexOf(item.typeName) == -1) {
|
||||
@ -942,7 +1068,6 @@ const onSubmit = () => {
|
||||
}
|
||||
}
|
||||
} else if (formInline.value.statistical == '高标准农田') {
|
||||
console.log(res.data);
|
||||
res.data.forEach(item => {
|
||||
if (arr.indexOf(item.region) == -1) {
|
||||
arr.push(item.region);
|
||||
@ -1013,6 +1138,14 @@ const theTimes = () => {
|
||||
timeArr.value = res.data;
|
||||
formInline.value.time = res.data[0];
|
||||
onSubmit();
|
||||
let str = oldDatas.value.name;
|
||||
let str1 = str.replace(/-/g, '_');
|
||||
layersDic = {
|
||||
洪涝区: {
|
||||
setOf: `${oldDatas.value.name}-honglao`,
|
||||
name: `T${str1}_honglao`,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
@ -1053,35 +1186,29 @@ const getproportions = (city, time) => {
|
||||
//高标准农田洪涝面积统计
|
||||
const gethighStandards = time => {
|
||||
gethighStandard({ yearMonth: time }).then(res => {
|
||||
console.log(res.data);
|
||||
highStandardArr.value = JSON.parse(JSON.stringify(res.data));
|
||||
// res.data.forEach(item => {
|
||||
// highStandardArr.value.push({
|
||||
// region: item.region,
|
||||
// yesFlooding: item.yesFlooding,
|
||||
// createdTime: item.createdTime,
|
||||
// });
|
||||
// });
|
||||
console.log(highStandardArr.value);
|
||||
});
|
||||
};
|
||||
|
||||
//镇
|
||||
const gettownInformations = (city, time) => {
|
||||
ZoningData = ref([]);
|
||||
gettownInformation({ divisions: city, yearMonth: time }).then(res => {
|
||||
ZoningData = ref([]);
|
||||
let arr = [];
|
||||
zhengData.value = JSON.parse(JSON.stringify(res.data));
|
||||
Township.arr = res.data.sort((a, b) => {
|
||||
return a.name.length - b.name.length;
|
||||
});
|
||||
Township.arr.forEach(item => {
|
||||
ZoningData.value.push({
|
||||
arr.push({
|
||||
name: item.name,
|
||||
subregion: item.subregion,
|
||||
yesFloodingPercentage: item.yesFloodingPercentage,
|
||||
createdTime: item.createdTime,
|
||||
});
|
||||
});
|
||||
ZoningData.value = arr;
|
||||
itemKey.value = Math.random();
|
||||
Township.arr.unshift({
|
||||
subregion: '370211',
|
||||
name: '全部',
|
||||
@ -1102,7 +1229,6 @@ const gettownInformations = (city, time) => {
|
||||
Township.arr = drr;
|
||||
selectOption.value = JSON.parse(JSON.stringify(Township.arr));
|
||||
selectOption.value[0].subregion = null;
|
||||
console.log(selectOption.value);
|
||||
});
|
||||
};
|
||||
//村
|
||||
@ -1124,6 +1250,7 @@ const getvillages = (city, time) => {
|
||||
createdTime: item.createdTime,
|
||||
});
|
||||
});
|
||||
itemKey.value = Math.random();
|
||||
data.title = [...Object.values(brr)];
|
||||
data.title.forEach((item, index) => {
|
||||
let town = res.data.map(i => {
|
||||
@ -1151,106 +1278,53 @@ const selectTab = () => {
|
||||
gettownInformations(value.value);
|
||||
return;
|
||||
}
|
||||
// Township.arr.forEach(item => {
|
||||
// if (item.properties.XZDM == value.value) {
|
||||
// getstatisticsOfTheAreas(value.value); //冷冻等级面积统计
|
||||
// getproportionOfAreas(value.value);
|
||||
// }
|
||||
// });
|
||||
// if (value.value == '370211') {
|
||||
// removeWms(['village_CQL']);
|
||||
// XZDM = null;
|
||||
// removeWms(['aaa']);
|
||||
// getTownships();
|
||||
// hiddenOverlayChart();
|
||||
// ASdivision();
|
||||
// areachar();
|
||||
// typesof();
|
||||
// return;
|
||||
// }
|
||||
// let arr = [...Township.arr];
|
||||
// console.log('arr:', arr);
|
||||
// arr.forEach(item => {
|
||||
// if (item.properties.XZDM == value.value) {
|
||||
// viewer.camera.flyTo({
|
||||
// destination: Cesium.Rectangle.fromDegrees(
|
||||
// item.bbox[0],
|
||||
// item.bbox[1],
|
||||
// item.bbox[2],
|
||||
// item.bbox[3]
|
||||
// ),
|
||||
// duration: 2,
|
||||
// });
|
||||
// }
|
||||
// let arr = [...Township.brr];
|
||||
// let brr = [];
|
||||
// // console.log(Township.brr);
|
||||
// arr.forEach(item => {
|
||||
// if (item.properties.XZDM == value.value) {
|
||||
// brr.push(item.properties.XZQMC);
|
||||
// }
|
||||
// });
|
||||
// // console.log(brr);
|
||||
// data.title = [...Object.values(brr)];
|
||||
// });
|
||||
// areachar();
|
||||
// typesof();
|
||||
// let town = [...Township.arr];
|
||||
// const townData = town.find(item => item.properties.XZDM === value.value);
|
||||
// if (townData) {
|
||||
// // 移除镇高亮
|
||||
// deleteEntityByName('townLine');
|
||||
// // 高亮镇边界
|
||||
// addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
|
||||
// }
|
||||
// // 移除以前村
|
||||
// removeWms(['aaa']);
|
||||
// // 添加村
|
||||
// addvillage(`XZDM=${value.value}`, 'aaa');
|
||||
// getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
|
||||
// let arr = [];
|
||||
// res.data.map((item, index) => {
|
||||
// if (item.region == townData.properties.XZMC) {
|
||||
// arr.push({
|
||||
// crop: item.type,
|
||||
// Shape_Area: item.area,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// townZuowu.value = {
|
||||
// label: arr,
|
||||
// };
|
||||
// console.log();
|
||||
// console.log(arr);
|
||||
// showOverlayChart({ x: 642, y: 312 });
|
||||
// });
|
||||
};
|
||||
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
const Deta = item => {
|
||||
getydamageArea({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
getydamageArea({
|
||||
divisions: value.value,
|
||||
whetherToDownload: true,
|
||||
yearMonth: oldDatas.value.name,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
};
|
||||
const Deta2 = item => {
|
||||
getproportion({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
getproportion({
|
||||
divisions: value.value,
|
||||
whetherToDownload: true,
|
||||
yearMonth: oldDatas.value.name,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
};
|
||||
|
||||
const Deta3 = item => {
|
||||
gethighStandard({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
gethighStandard({
|
||||
divisions: value.value,
|
||||
whetherToDownload: true,
|
||||
yearMonth: oldDatas.value.name,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
};
|
||||
const Deta4 = item => {
|
||||
if (value.value == '370211') {
|
||||
gettownInformation({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
gettownInformation({
|
||||
divisions: value.value,
|
||||
whetherToDownload: true,
|
||||
yearMonth: oldDatas.value.name,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
} else {
|
||||
getvillage({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
getvillage({
|
||||
divisions: value.value,
|
||||
whetherToDownload: true,
|
||||
yearMonth: oldDatas.value.name,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
}
|
||||
@ -1308,6 +1382,22 @@ const exportExcel = (
|
||||
xlsx.writeFile(wb, `${fileName}.xlsx`);
|
||||
};
|
||||
const handleData = oldData => {
|
||||
checkListdata.value = [];
|
||||
for (const key in dic) {
|
||||
if (dic[key].disabled !== true) {
|
||||
checkListdata.value.push(key);
|
||||
}
|
||||
}
|
||||
checkList.value = checkListdata.value;
|
||||
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;
|
||||
};
|
||||
/*-------------echarts--------------*/
|
||||
@ -1339,7 +1429,7 @@ function areachar() {
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
fontSize: 14, //字体大小
|
||||
color: 'rgba(255, 255, 255, 0.7)', //字体颜色
|
||||
color: '#fff', //字体颜色
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
@ -1349,7 +1439,7 @@ function areachar() {
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
color: '#fff',
|
||||
fontWeight: 400,
|
||||
fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
|
||||
fontSize: 14,
|
||||
@ -1378,12 +1468,12 @@ function areachar() {
|
||||
yAxis: {
|
||||
name: '面积(亩)',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -1438,27 +1528,66 @@ function areachar() {
|
||||
};
|
||||
|
||||
option && areaDivIntance.setOption(option);
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
areaDivIntance.resize();
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(areaDiv.value, () => {
|
||||
nextTick(() => {
|
||||
areaDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function typesof() {
|
||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||
var data = typesofData.value;
|
||||
typesofData.value.forEach(item => {
|
||||
item['itemStyle'] = {};
|
||||
switch (item.name) {
|
||||
case '茶叶':
|
||||
item['itemStyle']['color'] = 'rgba(0, 209, 195, 1)';
|
||||
break;
|
||||
case '大豆':
|
||||
item['itemStyle']['color'] = 'rgba(255, 184, 148, 1)';
|
||||
break;
|
||||
case '花生':
|
||||
item['itemStyle']['color'] = 'rgba(255, 140, 255, 1)';
|
||||
break;
|
||||
case '蓝莓':
|
||||
item['itemStyle']['color'] = 'rgba(0, 153, 255, 1)';
|
||||
break;
|
||||
case '地瓜':
|
||||
item['itemStyle']['color'] = 'rgba(255, 18, 18, 1)';
|
||||
break;
|
||||
case '小麦':
|
||||
item['itemStyle']['color'] = 'rgba(25, 196, 22, 1)';
|
||||
break;
|
||||
case '玉米':
|
||||
item['itemStyle']['color'] = 'rgba(255, 240, 26, 1)';
|
||||
break;
|
||||
case '马铃薯':
|
||||
item['itemStyle']['color'] = 'rgba(253, 127, 1, 1)';
|
||||
break;
|
||||
case '白菜和萝卜':
|
||||
item['itemStyle']['color'] = 'rgba(201, 255, 148, 1)';
|
||||
break;
|
||||
case '其他':
|
||||
item['itemStyle']['color'] = 'rgba(166, 224, 255, 1)';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
var data = typesofData.value;
|
||||
let option = {
|
||||
color: [
|
||||
'rgba(9, 187, 222, 0.8)',
|
||||
'rgba(255, 235, 59, 0.8)',
|
||||
'rgba(234, 165, 93, 0.8)',
|
||||
'rgba(215, 25, 28, 0.8)',
|
||||
'#585247',
|
||||
'#7F6AAD',
|
||||
'#009D85',
|
||||
'rgba(250,250,250,0.3)',
|
||||
],
|
||||
// color: [
|
||||
// 'rgba(9, 187, 222, 0.8)',
|
||||
// 'rgba(255, 235, 59, 0.8)',
|
||||
// 'rgba(234, 165, 93, 0.8)',
|
||||
// 'rgba(215, 25, 28, 0.8)',
|
||||
// '#585247',
|
||||
// '#7F6AAD',
|
||||
// '#009D85',
|
||||
// 'rgba(250,250,250,0.3)',
|
||||
// ],
|
||||
title: {
|
||||
text: '总面积',
|
||||
subtext: `${totalArea.value}亩`,
|
||||
@ -1482,7 +1611,7 @@ function typesof() {
|
||||
top: 'middle',
|
||||
right: '2%',
|
||||
textStyle: {
|
||||
color: '#f2f2f2',
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
icon: 'roundRect',
|
||||
@ -1579,6 +1708,12 @@ function typesof() {
|
||||
};
|
||||
|
||||
useEcharts(typesofDivIntance, option);
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(typesofDiv.value, () => {
|
||||
nextTick(() => {
|
||||
typesofDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function chartModes() {
|
||||
@ -1814,10 +1949,7 @@ function ChartClick(item) {
|
||||
// 定位到地块
|
||||
let features = formLandRef.value;
|
||||
features.forEach(it => {
|
||||
console.log('it.properties.name:', it.properties.name);
|
||||
console.log('item.name:', item.name);
|
||||
if (it.properties.name === item.name) {
|
||||
console.log('dingwei');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
it.bbox[0],
|
||||
@ -1834,111 +1966,7 @@ function ChartClick(item) {
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------------------------------------*/
|
||||
function getAreaFenlei() {
|
||||
let fl = fenleiRef.value;
|
||||
console.log('fl:', fl);
|
||||
axios({
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
})
|
||||
.then(res => {
|
||||
console.log('res1111:', res);
|
||||
let data = res.data.features;
|
||||
data.forEach((item, index) => {
|
||||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
item.bbox[2],
|
||||
item.bbox[3]
|
||||
);
|
||||
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
||||
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
||||
let latitude = Cesium.Math.toDegrees(center.latitude);
|
||||
|
||||
if (item.properties.XZDM === '370211011') {
|
||||
//灵山卫街道
|
||||
longitude = 120.0863;
|
||||
latitude = 35.941;
|
||||
} else if (item.properties.XZDM === '370211003') {
|
||||
//薛家岛街道
|
||||
longitude = 120.243682;
|
||||
latitude = 35.97123201;
|
||||
}
|
||||
const townData = fl[item.properties.XZMC];
|
||||
let label = [];
|
||||
if (townData) {
|
||||
label = townData.map((it, inex) => {
|
||||
// let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
|
||||
// return dd
|
||||
return it.properties;
|
||||
});
|
||||
}
|
||||
// label = label.join(' ')
|
||||
// console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
|
||||
// 添加点
|
||||
// viewer.entities.add({
|
||||
// name: 'point' + item.properties.XZDM,
|
||||
// position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
||||
// point: new Cesium.PointGraphics({
|
||||
// show: true,
|
||||
// pixelSize: 10,
|
||||
// // heightReference: Cesium.HeightReference.NONE,
|
||||
// color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
|
||||
// outlineColor: new Cesium.Color(0, 0, 0, 0),
|
||||
// outlineWidth: 0,
|
||||
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
|
||||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
|
||||
// }),
|
||||
// // label: {
|
||||
// // show: false,
|
||||
// // text: label.join(' '),
|
||||
// // font: '12px sans-serif',
|
||||
// // fillColor: Cesium.Color.WHITE,
|
||||
// // showBackground: true,
|
||||
// // backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
|
||||
// // // style: Cesium.LabelStyle.FILL,
|
||||
// // outlineWidth: 3,
|
||||
// // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
// // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
|
||||
// // pixelOffset: new Cesium.Cartesian2(-80, -10),
|
||||
// // },
|
||||
// info: {
|
||||
// label: label,
|
||||
// ...item.properties,
|
||||
// // 经纬度，以便监听
|
||||
// lon: longitude,
|
||||
// lat: latitude,
|
||||
// },
|
||||
// });
|
||||
});
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
let fenleiRef = ref({});
|
||||
function mbHandle() {
|
||||
axios({
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
|
||||
})
|
||||
.then(res => {
|
||||
let features = res.data.features;
|
||||
let town = {};
|
||||
// 按镇分类
|
||||
features.forEach(item => {
|
||||
let key = item.properties.town;
|
||||
if (town[key]) {
|
||||
town[key].push(item);
|
||||
} else {
|
||||
town[key] = [item];
|
||||
}
|
||||
});
|
||||
fenleiRef.value = town;
|
||||
getAreaFenlei();
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
|
||||
// 地图移动时弹窗跟随
|
||||
function infoWindowPostRender() {
|
||||
@ -2530,8 +2558,12 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
// :deep(.el-checkbox__label) {
|
||||
// color: #fff;
|
||||
// }
|
||||
:deep(.el-checkbox__label) {
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2603,11 +2635,12 @@ $height: calc(100vh - 100px);
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 8px;
|
||||
color: rgba(47, 214, 214, 1) !important;
|
||||
right: 15px;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
font-size: 18px;
|
||||
}
|
||||
#popup {
|
||||
.pophead {
|
||||
@ -2708,8 +2741,6 @@ $height: calc(100vh - 100px);
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-select__popper.el-popper) {
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -112,7 +112,7 @@
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="affectedArea" label="受灾面积(公顷)" />
|
||||
<el-table-column prop="affectedArea" label="成灾面积(公顷)" />
|
||||
<el-table-column prop="name" label="详情">
|
||||
<template #default="scope">
|
||||
<span
|
||||
@ -218,10 +218,10 @@
|
||||
</div>
|
||||
<div class="frameDiv">
|
||||
<el-dialog
|
||||
destroy-on-close
|
||||
v-model="centerDialogVisible"
|
||||
title="台风灾害损失预测"
|
||||
width="30%"
|
||||
destroy-on-close
|
||||
center
|
||||
>
|
||||
<el-form
|
||||
@ -239,22 +239,22 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="风力等级" prop="power">
|
||||
<el-input v-model="ruleForm.power">
|
||||
<el-input disabled v-model="ruleForm.power">
|
||||
<template #append>级</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="台风过境风速" prop="speed">
|
||||
<el-input v-model="ruleForm.speed">
|
||||
<el-input disabled v-model="ruleForm.speed">
|
||||
<template #append>米/秒</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="台风实时中心气压" prop="pressure">
|
||||
<el-input v-model="ruleForm.pressure">
|
||||
<el-input disabled v-model="ruleForm.pressure">
|
||||
<template #append>百帕</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="风圈半径" prop="radius7">
|
||||
<el-input v-model="ruleForm.radius7">
|
||||
<el-input disabled v-model="ruleForm.radius7">
|
||||
<template #append>千米</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@ -332,7 +332,7 @@ import moment from 'Moment';
|
||||
// import * as turf from '@turf/turf';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { ElLoading } from 'element-plus';
|
||||
import { getarea, getTownship, getvillage, getareas } from '@/api/crops/classify.js';
|
||||
import { getarea, getTownship, getvillage, } from '@/api/crops/classify.js';
|
||||
import {
|
||||
getytyphoon,
|
||||
getyear,
|
||||
@ -391,13 +391,13 @@ let dic = {
|
||||
'-5°以下': { color: 'rgba(234, 165, 93, 1)', disabled: false },
|
||||
};
|
||||
const rules = reactive({
|
||||
power: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入风力等级',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
// power: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请输入风力等级',
|
||||
// trigger: 'change',
|
||||
// },
|
||||
// ],
|
||||
duration: [
|
||||
{
|
||||
required: true,
|
||||
@ -405,27 +405,27 @@ const rules = reactive({
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
speed: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入过境风速时间',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
pressure: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输台风实时中心气压',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
radius7: [
|
||||
{
|
||||
required: true,
|
||||
message: '风圈半径',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
// speed: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请输入过境风速时间',
|
||||
// trigger: 'change',
|
||||
// },
|
||||
// ],
|
||||
// pressure: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请输台风实时中心气压',
|
||||
// trigger: 'change',
|
||||
// },
|
||||
// ],
|
||||
// radius7: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '风圈半径',
|
||||
// trigger: 'change',
|
||||
// },
|
||||
// ],
|
||||
});
|
||||
watch(
|
||||
() => value1.value,
|
||||
@ -542,7 +542,7 @@ function initMap() {
|
||||
// 去除logo
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
||||
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1800; //相机的高度的最小值
|
||||
// viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
// viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
// viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
@ -629,98 +629,7 @@ function getLevel(height) {
|
||||
}
|
||||
|
||||
let townZuowu = ref({ label: [] }); //镇的作物
|
||||
let XZDM = '';
|
||||
let XZQDM = '';
|
||||
// 村点击高亮
|
||||
function villageClick(layers, xy, level, cartographic, movement) {
|
||||
const index = layers.findIndex(
|
||||
item =>
|
||||
item._imageryProvider._layers &&
|
||||
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
|
||||
);
|
||||
if (index > -1) {
|
||||
const providerPoint = layers[index];
|
||||
// 拿取最后一个图层
|
||||
let provider = providerPoint._imageryProvider;
|
||||
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
|
||||
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
|
||||
let promise = provider.pickFeatures(
|
||||
xy.x,
|
||||
xy.y,
|
||||
level,
|
||||
cartographic.longitude,
|
||||
cartographic.latitude
|
||||
);
|
||||
if (promise) {
|
||||
promise.then(data => {
|
||||
if (data.length > 0) {
|
||||
let newData = data['0'];
|
||||
console.log(newData);
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
newData.data.bbox[0],
|
||||
newData.data.bbox[1],
|
||||
newData.data.bbox[2],
|
||||
newData.data.bbox[3]
|
||||
),
|
||||
duration: 2,
|
||||
});
|
||||
|
||||
if (newData.properties && newData.properties.XZQDM) {
|
||||
if (XZQDM !== newData.properties.XZQDM) {
|
||||
//防止
|
||||
XZQDM = newData.properties.XZQDM;
|
||||
let item = newData.data;
|
||||
// 移除高亮
|
||||
deleteEntityByName('villageLine');
|
||||
// 高亮边界
|
||||
addBoundaryHandle(
|
||||
item.geometry && item.geometry.coordinates,
|
||||
'villageLine',
|
||||
'yellow'
|
||||
);
|
||||
// townZuowu.value = info//保存数据
|
||||
|
||||
// 后插和村
|
||||
if (newData.properties.XZQDM === '370211104217') {
|
||||
// console.log('后河岔村委会')
|
||||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
item.bbox[2],
|
||||
item.bbox[3]
|
||||
);
|
||||
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
||||
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
||||
let latitude = Cesium.Math.toDegrees(center.latitude);
|
||||
let info = {
|
||||
lon: longitude,
|
||||
lat: latitude,
|
||||
...item.properties,
|
||||
// XZQMC
|
||||
label: [
|
||||
{ crop: '茶叶', Shape_Area: 2820 },
|
||||
{ crop: '大豆', Shape_Area: 2767 },
|
||||
{ crop: '花生', Shape_Area: 62356 },
|
||||
{ crop: '蓝莓', Shape_Area: 5443 },
|
||||
{ crop: '地瓜', Shape_Area: 897 },
|
||||
{ crop: '小麦', Shape_Area: 20111 },
|
||||
],
|
||||
};
|
||||
townZuowu.value = info; //保存数据
|
||||
|
||||
// 展示弹窗
|
||||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 添加村
|
||||
// CQL_FILTER:筛选的语句
|
||||
// customName地图服务自定义属性名
|
||||
@ -804,9 +713,6 @@ function rightFoldClick() {
|
||||
}
|
||||
}
|
||||
//
|
||||
const submitClick = () => {
|
||||
submitForm(ruleFormRef);
|
||||
};
|
||||
const submitForm = async formEl => {
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
@ -853,6 +759,7 @@ const submitForm = async formEl => {
|
||||
affectedArea: res.data[3],
|
||||
};
|
||||
detailsArr.value = obj;
|
||||
ruleForm.value.duration=''
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -871,7 +778,6 @@ const SaveResults = () => {
|
||||
economicLosses: detailsArr.value.economicLosses,
|
||||
disasterArea: detailsArr.value.disasterArea,
|
||||
}).then(res => {
|
||||
console.log(res.data);
|
||||
ElMessage({
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
@ -1616,7 +1522,6 @@ const typhoon = typhoonData => {
|
||||
ruleForm.value.radius7 = informationData.value.radiusAve7; //半径
|
||||
ruleForm.value.time = informationData.value.time; //台风时间
|
||||
|
||||
console.log(ruleForm.value);
|
||||
// if (
|
||||
// pickedFeature.primitive._outlineWidth === 0.01 ||
|
||||
// pickedFeature.primitive._outlineWidth === 0.02
|
||||
@ -1725,7 +1630,6 @@ const typhoon = typhoonData => {
|
||||
let pickedFeaturePosition = pickedFeature.primitive._position;
|
||||
let mouseMovePositionTemp = mouseMovePoint(pickedFeaturePosition); // 台风点信息
|
||||
informationData.value = mouseMovePositionTemp;
|
||||
console.log(informationData.value);
|
||||
showOverlayChart(movement.endPosition); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
} else {
|
||||
@ -1927,7 +1831,6 @@ const getyears = () => {
|
||||
const gettyphoonDamageSelects = () => {
|
||||
gettyphoonDamageSelect({ startTime: '', endTime: '' }).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
console.log(res.data);
|
||||
});
|
||||
};
|
||||
|
||||
@ -1944,7 +1847,6 @@ const selectTab = () => {
|
||||
}
|
||||
|
||||
let arr = [...Township.arr];
|
||||
console.log('arr:', arr);
|
||||
arr.forEach(item => {
|
||||
if (item.properties.XZDM == value.value) {
|
||||
viewer.camera.flyTo({
|
||||
@ -1993,8 +1895,6 @@ const selectTab = () => {
|
||||
townZuowu.value = {
|
||||
label: arr,
|
||||
};
|
||||
console.log();
|
||||
console.log(arr);
|
||||
showOverlayChart({ x: 642, y: 312 });
|
||||
});
|
||||
};
|
||||
@ -2023,7 +1923,6 @@ const handleRowClick = (selection, row) => {
|
||||
viewer.entities.removeAll();
|
||||
if (selection.indexOf(row) !== -1) {
|
||||
getndPower({ tfbh: row.tfbh }).then(res => {
|
||||
console.log(res);
|
||||
typhoonName.value = res[0].name;
|
||||
res[0].points.forEach(item => {
|
||||
windArr.value.push(item.speed);
|
||||
@ -2059,7 +1958,6 @@ const delect = e => {
|
||||
/*-------------echarts--------------*/
|
||||
|
||||
function soil() {
|
||||
console.log(typhoonTime.value);
|
||||
const soilDivIntance = echarts.init(areaDiv.value);
|
||||
let option = {
|
||||
grid: {
|
||||
@ -2251,7 +2149,6 @@ function back() {
|
||||
value.value = '370211';
|
||||
selectTab();
|
||||
if (flag.value === '1') {
|
||||
console.log(flag.value);
|
||||
}
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
@ -2261,88 +2158,6 @@ function back() {
|
||||
hiddenOverlayChart();
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------------------------------------*/
|
||||
function getAreaFenlei() {
|
||||
let fl = fenleiRef.value;
|
||||
console.log('fl:', fl);
|
||||
axios({
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
})
|
||||
.then(res => {
|
||||
console.log('res1111:', res);
|
||||
let data = res.data.features;
|
||||
data.forEach((item, index) => {
|
||||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
item.bbox[2],
|
||||
item.bbox[3]
|
||||
);
|
||||
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
||||
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
||||
let latitude = Cesium.Math.toDegrees(center.latitude);
|
||||
|
||||
if (item.properties.XZDM === '370211011') {
|
||||
//灵山卫街道
|
||||
longitude = 120.0863;
|
||||
latitude = 35.941;
|
||||
} else if (item.properties.XZDM === '370211003') {
|
||||
//薛家岛街道
|
||||
longitude = 120.243682;
|
||||
latitude = 35.97123201;
|
||||
}
|
||||
const townData = fl[item.properties.XZMC];
|
||||
let label = [];
|
||||
if (townData) {
|
||||
label = townData.map((it, inex) => {
|
||||
// let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
|
||||
// return dd
|
||||
return it.properties;
|
||||
});
|
||||
}
|
||||
// label = label.join(' ')
|
||||
// console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
|
||||
// 添加点
|
||||
// viewer.entities.add({
|
||||
// name: 'point' + item.properties.XZDM,
|
||||
// position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
||||
// point: new Cesium.PointGraphics({
|
||||
// show: true,
|
||||
// pixelSize: 10,
|
||||
// // heightReference: Cesium.HeightReference.NONE,
|
||||
// color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
|
||||
// outlineColor: new Cesium.Color(0, 0, 0, 0),
|
||||
// outlineWidth: 0,
|
||||
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
|
||||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
|
||||
// }),
|
||||
// // label: {
|
||||
// // show: false,
|
||||
// // text: label.join(' '),
|
||||
// // font: '12px sans-serif',
|
||||
// // fillColor: Cesium.Color.WHITE,
|
||||
// // showBackground: true,
|
||||
// // backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
|
||||
// // // style: Cesium.LabelStyle.FILL,
|
||||
// // outlineWidth: 3,
|
||||
// // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
// // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
|
||||
// // pixelOffset: new Cesium.Cartesian2(-80, -10),
|
||||
// // },
|
||||
// info: {
|
||||
// label: label,
|
||||
// ...item.properties,
|
||||
// // 经纬度，以便监听
|
||||
// lon: longitude,
|
||||
// lat: latitude,
|
||||
// },
|
||||
// });
|
||||
});
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
let fenleiRef = ref({});
|
||||
|
||||
// 地图移动时弹窗跟随
|
||||
@ -3182,10 +2997,12 @@ $height: calc(100vh - 100px);
|
||||
:deep(.el-input-group__append) {
|
||||
box-shadow: none;
|
||||
background: rgba(22, 94, 102, 1);
|
||||
}
|
||||
.el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
:deep().el-form-item__label {
|
||||
color: #fff;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -5,13 +5,7 @@
|
||||
<div class="rightbottom">
|
||||
<div class="title">
|
||||
<span>非粮化耕地面积统计</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="Deta()">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -19,7 +13,13 @@
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<el-select popper-class="select_city" v-model="value" clearable placeholder="全部">
|
||||
<el-select
|
||||
v-if="limits"
|
||||
popper-class="select_city"
|
||||
v-model="value"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in Township.arr"
|
||||
:key="item.subregionCode"
|
||||
@ -75,15 +75,22 @@
|
||||
<el-checkbox
|
||||
v-for="(value, item, key) in dic"
|
||||
:key="key"
|
||||
:style="{
|
||||
background: value.color,
|
||||
border: `1px solid ${value.color}`,
|
||||
width: `100%`,
|
||||
}"
|
||||
v-model="checked3"
|
||||
: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>
|
||||
@ -124,7 +131,7 @@
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span>非粮化</span>
|
||||
:
|
||||
<span>{{ Number(item.nonFarm).toFixed(2) }}(亩)</span>
|
||||
<span>{{ Number(item.farm).toFixed(2) }}(亩)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -141,7 +148,9 @@ import 'echarts-gl';
|
||||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getNonFood, getNonFoodHuoChun, getNonFoodChun, getFlYear } from '@/api/plough/degrain.js';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
import axios from 'axios';
|
||||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||||
|
||||
let viewer = ref(null);
|
||||
const ASdivisionDiv = ref(null);
|
||||
@ -158,27 +167,38 @@ let checkListdata = ref([]);
|
||||
let alterArr = ref([]);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
|
||||
let code =
|
||||
window.localStorage.getItem('deptName') == '青岛西海岸新区'
|
||||
? '黄岛区'
|
||||
: window.localStorage.getItem('deptName');
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
|
||||
const Deta = item => {
|
||||
downloadURL(item);
|
||||
};
|
||||
const downloadURL = url => {
|
||||
let link = document.createElement('a');
|
||||
link.style.display = 'none';
|
||||
link.href = url;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
if (value.value == '370211') {
|
||||
getNonFood({ yearMonth: oldDatas.value.name, whetherToDownload: true }).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
} else {
|
||||
getNonFoodChun({
|
||||
divisions: value.value,
|
||||
yearMonth: oldDatas.value.name,
|
||||
whetherToDownload: true,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let dic = {
|
||||
非粮化: { color: 'rgba(47, 236, 56, 0.8)', disabled: false },
|
||||
};
|
||||
// 图层字典
|
||||
let layersDic = {
|
||||
非粮化: {
|
||||
setOf: '2022-06-01-gengdi',
|
||||
name: 'T2022_06_01_feilianghua',
|
||||
setOf: '2022-09-30-gengdi',
|
||||
name: 'T2022_09_30_feilianghua',
|
||||
},
|
||||
};
|
||||
let layers = ref(null); //村
|
||||
@ -226,8 +246,24 @@ onUpdated(() => {
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
value.value = '370211';
|
||||
getNonFoods(oldDatas.value.name);
|
||||
value.value = window.localStorage.getItem('divisions');
|
||||
if (limits) {
|
||||
getNonFoods(oldDatas.value.name);
|
||||
} else {
|
||||
getNonFoodChuns(value.value, oldDatas.value.name);
|
||||
}
|
||||
|
||||
let str = oldDatas.value.name;
|
||||
let str1 = str.replace(/-/g, '_');
|
||||
layersDic = {
|
||||
非粮化: {
|
||||
setOf: `${oldDatas.value.name}-gengdi`,
|
||||
name: `T${str1}_feilianghua`,
|
||||
},
|
||||
};
|
||||
for (const key in checkList.value) {
|
||||
addwms(layersDic[checkList.value[key]]);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -247,6 +283,8 @@ function initmap() {
|
||||
view: new ol.View({
|
||||
center: [119.86763411957472, 35.88435182141938],
|
||||
zoom: 11,
|
||||
// 设置最大缩放级别
|
||||
maxZoom: 16.5,
|
||||
projection: 'EPSG:4326',
|
||||
}),
|
||||
layers: [
|
||||
@ -279,28 +317,80 @@ function initmap() {
|
||||
});
|
||||
map.on('singleclick', function (e) {
|
||||
var coodinate = e.coordinate;
|
||||
var lon = coodinate[0];
|
||||
var lat = coodinate[1];
|
||||
var view = map.getView();
|
||||
var zoom = map.getView().getZoom();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
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,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
let url = 'http://36.134.44.75:8090/iserver/services/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,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -321,6 +411,73 @@ function initmap() {
|
||||
});
|
||||
// 开始监听父元素大小变化
|
||||
resizeObserver.observe(parentElement);
|
||||
SQLSearch(code);
|
||||
}
|
||||
|
||||
//权限地图
|
||||
function SQLSearch(name) {
|
||||
let names = '';
|
||||
let url = '';
|
||||
let setName = '';
|
||||
let setOf = '';
|
||||
let quyu = '';
|
||||
url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
|
||||
names = name;
|
||||
|
||||
setName = 'XJQY3702112019WGS84';
|
||||
setOf = 'huangdaoqu_bianjie';
|
||||
quyu = 'XJQYMC';
|
||||
//SQL查询（模糊查询）
|
||||
// var url = 'http://192.168.0.113:8090/iserver/services/data-liangquhuadingWGS84/rest/data';
|
||||
var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
|
||||
queryParameter: {
|
||||
name: `${setName}@${setOf}`,
|
||||
attributeFilter: `${quyu} like '%${names}%'`,
|
||||
},
|
||||
datasetNames: [`${setOf}:${setName}`],
|
||||
});
|
||||
|
||||
new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
|
||||
if (serviceResult.result.featureCount != 0) {
|
||||
var layerzhezhao = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
var layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||||
map.removeLayer(layergaoliang);
|
||||
var geojson = new ol.format.GeoJSON().readFeatures(serviceResult.result.features);
|
||||
addConver(
|
||||
serviceResult.result.features.features[0].geometry.coordinates,
|
||||
'qu',
|
||||
'rgba( 105, 105, 105, 1)',
|
||||
9999
|
||||
);
|
||||
var selectFeatureSource = new ol.source.Vector();
|
||||
selectFeatureSource.addFeatures(geojson);
|
||||
//设置图层高亮样式
|
||||
const style = new ol.style.Style({
|
||||
// fill: new ol.style.Fill({
|
||||
// color: 'rgba(0, 255, 0, 0.1)',
|
||||
// }),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(85, 255, 255, 1.0)',
|
||||
// lineDash: [10, 10],
|
||||
width: 2,
|
||||
}),
|
||||
});
|
||||
var vectorQuery = new ol.layer.Vector({
|
||||
id: 'dianjigaoliang',
|
||||
source: selectFeatureSource,
|
||||
});
|
||||
vectorQuery.setStyle(style);
|
||||
map.addLayer(vectorQuery);
|
||||
map.getView().fit(selectFeatureSource.getExtent());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const cun = () => {
|
||||
@ -459,7 +616,7 @@ function QueryData(e, name, url, item) {
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
erase(newDataZh);
|
||||
value.value = '370211';
|
||||
value.value = window.localStorage.getItem('divisions');
|
||||
layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
@ -489,18 +646,19 @@ 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');
|
||||
// addConver(ft.getGeometry().getCoordinates(), 'huandao');
|
||||
});
|
||||
}
|
||||
//添加遮罩
|
||||
function addConver(data,name) {
|
||||
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: 'rgba( 105, 105, 105, 0.9)',
|
||||
color: color ? color : 'rgba( 105, 105, 105, 0.9)',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
@ -545,7 +703,6 @@ watch(
|
||||
});
|
||||
newData.forEach(item => {
|
||||
if (layersDic[item]) {
|
||||
console.log(layersDic[item]);
|
||||
addwms(layersDic[item]);
|
||||
}
|
||||
});
|
||||
@ -599,16 +756,23 @@ const getFlYears = () => {
|
||||
res.data.forEach(item => {
|
||||
dataSource.value.push({ name: item });
|
||||
});
|
||||
let str = oldDatas.value.name;
|
||||
let str1 = str.replace(/-/g, '_');
|
||||
layersDic = {
|
||||
非粮化: {
|
||||
setOf: `${oldDatas.value.name}-gengdi`,
|
||||
name: `T${str1}_feilianghua`,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
//镇
|
||||
const getNonFoods = (time) => {
|
||||
const getNonFoods = time => {
|
||||
Township.arr = [];
|
||||
townArr.value = [];
|
||||
getNonFood({yearMonth:time}).then(res => {
|
||||
console.log(res.data);
|
||||
getNonFood({ yearMonth: time }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.nonFarm > 0) {
|
||||
if (item.farm > 0) {
|
||||
Township.arr.push(item);
|
||||
townArr.value.push(item);
|
||||
}
|
||||
@ -618,7 +782,6 @@ const getNonFoods = (time) => {
|
||||
subregionCode: '370211',
|
||||
subregionName: '全部',
|
||||
});
|
||||
console.log(Township.arr);
|
||||
let arr = [...res.data];
|
||||
let brr = [];
|
||||
arr.splice(0, 1);
|
||||
@ -631,11 +794,11 @@ const getNonFoods = (time) => {
|
||||
});
|
||||
};
|
||||
//村
|
||||
const getNonFoodChuns = (city,time) => {
|
||||
townArr.value = [];
|
||||
getNonFoodChun({ divisions: city,yearMonth:time }).then(res => {
|
||||
const getNonFoodChuns = (city, time) => {
|
||||
getNonFoodChun({ divisions: city, yearMonth: time }).then(res => {
|
||||
townArr.value = [];
|
||||
res.data.forEach(item => {
|
||||
if (item.nonFarm > 0) {
|
||||
if (item.farm > 0) {
|
||||
townArr.value.push(item);
|
||||
}
|
||||
});
|
||||
@ -647,27 +810,41 @@ const getNonFoodChuns = (city,time) => {
|
||||
const selectTab = () => {
|
||||
if (value.value == '370211') {
|
||||
//全部
|
||||
getNonFoods();
|
||||
getNonFoods(oldDatas.value.name);
|
||||
} else if (value.value) {
|
||||
getNonFoodChuns(value.value, oldDatas.value.name);
|
||||
}
|
||||
};
|
||||
const handleData = oldData => {
|
||||
checkListdata.value = [];
|
||||
for (const key in dic) {
|
||||
if (dic[key].disabled !== true) {
|
||||
checkListdata.value.push(key);
|
||||
}
|
||||
}
|
||||
checkList.value = checkListdata.value;
|
||||
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;
|
||||
};
|
||||
function ASdivision() {
|
||||
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
||||
console.log(townArr.value);
|
||||
townArr.value.sort((a, b) => {
|
||||
return b.nonFarm - a.nonFarm;
|
||||
return b.farm - a.farm;
|
||||
});
|
||||
var nameList = [];
|
||||
var dataList = [];
|
||||
townArr.value.forEach(item => {
|
||||
nameList.push(item.subregionName);
|
||||
dataList.push(Number(item.nonFarm).toFixed(2));
|
||||
dataList.push(Number(item.farm).toFixed(2));
|
||||
});
|
||||
console.log(dataList);
|
||||
let ends = (3 / townArr.value.length) * 100;
|
||||
var option = {
|
||||
tooltip: {
|
||||
@ -746,7 +923,7 @@ function ASdivision() {
|
||||
textStyle: {
|
||||
padding: [8, 0, 0, 0],
|
||||
fontSize: 14,
|
||||
color: 'rgba(21, 222, 255, 0.8)',
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -774,7 +951,7 @@ function ASdivision() {
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(24, 255, 255, 0.8)',
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
@ -817,14 +994,20 @@ function ASdivision() {
|
||||
ASdivisionDivIntance.on('click', param => ChartClickRB(param));
|
||||
// option && ASdivisionDivIntance.setOption(option, true);
|
||||
useEcharts(ASdivisionDivIntance, option);
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(ASdivisionDiv.value, () => {
|
||||
nextTick(() => {
|
||||
ASdivisionDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
function typesof() {
|
||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||
let data = townArr.value;
|
||||
let totalArea = 0;
|
||||
data.forEach(item => {
|
||||
(item.name = item.subregionName), (item.value = Number(item.nonFarm).toFixed(2));
|
||||
totalArea += item.nonFarm;
|
||||
(item.name = item.subregionName), (item.value = Number(item.farm).toFixed(2));
|
||||
totalArea += item.farm;
|
||||
});
|
||||
let option = {
|
||||
color: [
|
||||
@ -955,10 +1138,12 @@ function typesof() {
|
||||
};
|
||||
|
||||
useEcharts(typesofDivIntance, option);
|
||||
}
|
||||
// 右下角图表点击事件
|
||||
function ChartClickRB(param) {
|
||||
console.log('右下点击', param);
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(typesofDiv.value, () => {
|
||||
nextTick(() => {
|
||||
typesofDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1237,8 +1422,12 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
// :deep(.el-checkbox__label) {
|
||||
// color: #fff;
|
||||
// }
|
||||
:deep(.el-checkbox__label) {
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1311,11 +1500,12 @@ $height: calc(100vh - 100px);
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 8px;
|
||||
color: rgba(47, 214, 214, 1) !important;
|
||||
right: 15px;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
font-size: 18px;
|
||||
}
|
||||
#popup {
|
||||
.pophead {
|
||||
|
||||
@ -118,7 +118,6 @@
|
||||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||||
import axios from 'axios';
|
||||
import { getTreeData, getCameraName } from '../../../api/plough/VideoSurveillance';
|
||||
import VideoJs from '@/components/video/video.vue';
|
||||
@ -178,7 +177,7 @@ const initLeafletMap = () => {
|
||||
|
||||
/*-----------接口---------------*/
|
||||
const getTreeDatas = () => {
|
||||
getTreeData().then(res => {
|
||||
getTreeData({divisions:window.localStorage.getItem('deptName')}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
devicesArr.value.push(item);
|
||||
});
|
||||
|
||||
@ -5,13 +5,7 @@
|
||||
<div class="rightbottom">
|
||||
<div class="title">
|
||||
<span>撂荒耕地面积统计</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="Deta()">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -19,7 +13,13 @@
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<el-select popper-class="select_city" v-model="value" clearable placeholder="全部">
|
||||
<el-select
|
||||
v-if="limits"
|
||||
popper-class="select_city"
|
||||
v-model="value"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in Township.arr"
|
||||
:key="item.subregionCode"
|
||||
@ -75,15 +75,22 @@
|
||||
<el-checkbox
|
||||
v-for="(value, item, key) in dic"
|
||||
:key="key"
|
||||
:style="{
|
||||
background: value.color,
|
||||
border: `1px solid ${value.color}`,
|
||||
width: `100%`,
|
||||
}"
|
||||
v-model="checked3"
|
||||
: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>
|
||||
@ -140,6 +147,7 @@ import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
import {
|
||||
getAbandon,
|
||||
getNonFoodHuoChun,
|
||||
@ -148,6 +156,7 @@ import {
|
||||
getLhdyear,
|
||||
} from '@/api/plough/abandonedLand.js';
|
||||
import axios from 'axios';
|
||||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||||
|
||||
let viewer = ref(null);
|
||||
const ASdivisionDiv = ref(null);
|
||||
@ -155,30 +164,34 @@ const typesofDiv = ref(null);
|
||||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||||
let townArr = ref([]);
|
||||
const value = ref('370211');
|
||||
const clickInfoMap = ref({ info: [] });
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
const checkList = ref([]);
|
||||
let checkListdata = ref([]);
|
||||
let alterArr = ref([]);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
|
||||
let code =
|
||||
window.localStorage.getItem('deptName') == '青岛西海岸新区'
|
||||
? '黄岛区'
|
||||
: window.localStorage.getItem('deptName');
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
const Deta = item => {
|
||||
downloadURL(item);
|
||||
};
|
||||
const downloadURL = url => {
|
||||
let link = document.createElement('a');
|
||||
link.style.display = 'none';
|
||||
link.href = url;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
let dd = {
|
||||
小麦: [],
|
||||
if (value.value == '370211') {
|
||||
getAbandon({ yearMonth: oldDatas.value.name, whetherToDownload: true }).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
} else {
|
||||
getAbandonChun({
|
||||
divisions: value.value,
|
||||
yearMonth: oldDatas.value.name,
|
||||
whetherToDownload: true,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
}
|
||||
};
|
||||
let dic = {
|
||||
撂荒地: { color: 'rgba(175, 110, 250, 0.8)', disabled: false },
|
||||
@ -186,8 +199,8 @@ let dic = {
|
||||
// 图层字典
|
||||
let layersDic = {
|
||||
撂荒地: {
|
||||
setOf: '2022-06-01-gengdi',
|
||||
name: 'T2022_06_01_liaohuang',
|
||||
setOf: '2022-12-31-liaohuang',
|
||||
name: 'T2022_12_31_liaohuang',
|
||||
},
|
||||
};
|
||||
let layers = ref(null); //村
|
||||
@ -239,8 +252,13 @@ onUpdated(() => {
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
value.value = '370211';
|
||||
getAbandons(oldDatas.value.name);
|
||||
value.value = window.localStorage.getItem('divisions');
|
||||
getCityAndCountZbs(value.value, oldDatas.value.name);
|
||||
if (limits) {
|
||||
getAbandons(oldDatas.value.name);
|
||||
} else {
|
||||
getAbandonChuns(value.value, oldDatas.value.name);
|
||||
}
|
||||
}
|
||||
);
|
||||
/*-------------地图------------------------*/
|
||||
@ -259,6 +277,8 @@ function initmap() {
|
||||
view: new ol.View({
|
||||
center: [119.86763411957472, 35.88435182141938],
|
||||
zoom: 11,
|
||||
// 设置最大缩放级别
|
||||
maxZoom: 16.5,
|
||||
projection: 'EPSG:4326',
|
||||
}),
|
||||
layers: [
|
||||
@ -291,28 +311,80 @@ function initmap() {
|
||||
});
|
||||
map.on('singleclick', function (e) {
|
||||
var coodinate = e.coordinate;
|
||||
var lon = coodinate[0];
|
||||
var lat = coodinate[1];
|
||||
var view = map.getView();
|
||||
var zoom = map.getView().getZoom();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
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,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
let url = 'http://36.134.44.75:8090/iserver/services/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,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -333,8 +405,73 @@ function initmap() {
|
||||
});
|
||||
// 开始监听父元素大小变化
|
||||
resizeObserver.observe(parentElement);
|
||||
SQLSearch(code);
|
||||
}
|
||||
//权限地图
|
||||
function SQLSearch(name) {
|
||||
let names = '';
|
||||
let url = '';
|
||||
let setName = '';
|
||||
let setOf = '';
|
||||
let quyu = '';
|
||||
url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
|
||||
names = name;
|
||||
|
||||
setName = 'XJQY3702112019WGS84';
|
||||
setOf = 'huangdaoqu_bianjie';
|
||||
quyu = 'XJQYMC';
|
||||
//SQL查询（模糊查询）
|
||||
// var url = 'http://192.168.0.113:8090/iserver/services/data-liangquhuadingWGS84/rest/data';
|
||||
var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
|
||||
queryParameter: {
|
||||
name: `${setName}@${setOf}`,
|
||||
attributeFilter: `${quyu} like '%${names}%'`,
|
||||
},
|
||||
datasetNames: [`${setOf}:${setName}`],
|
||||
});
|
||||
|
||||
new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
|
||||
if (serviceResult.result.featureCount != 0) {
|
||||
var layerzhezhao = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
var layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||||
map.removeLayer(layergaoliang);
|
||||
var geojson = new ol.format.GeoJSON().readFeatures(serviceResult.result.features);
|
||||
addConver(
|
||||
serviceResult.result.features.features[0].geometry.coordinates,
|
||||
'qu',
|
||||
'rgba( 105, 105, 105, 1)',
|
||||
9999
|
||||
);
|
||||
var selectFeatureSource = new ol.source.Vector();
|
||||
selectFeatureSource.addFeatures(geojson);
|
||||
//设置图层高亮样式
|
||||
const style = new ol.style.Style({
|
||||
// fill: new ol.style.Fill({
|
||||
// color: 'rgba(0, 255, 0, 0.1)',
|
||||
// }),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(85, 255, 255, 1.0)',
|
||||
// lineDash: [10, 10],
|
||||
width: 2,
|
||||
}),
|
||||
});
|
||||
var vectorQuery = new ol.layer.Vector({
|
||||
id: 'dianjigaoliang',
|
||||
source: selectFeatureSource,
|
||||
});
|
||||
vectorQuery.setStyle(style);
|
||||
map.addLayer(vectorQuery);
|
||||
map.getView().fit(selectFeatureSource.getExtent());
|
||||
}
|
||||
});
|
||||
}
|
||||
const cun = () => {
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
@ -398,7 +535,7 @@ function QueryData(e, name, url, item) {
|
||||
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
|
||||
value.value = code;
|
||||
let arr = [];
|
||||
getAbandon({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
|
||||
getAbandon({ yearMonth: oldDatas.value.name }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
console.log(item.subregionCode, code);
|
||||
if (item.subregionCode == code) {
|
||||
@ -415,7 +552,7 @@ function QueryData(e, name, url, item) {
|
||||
) {
|
||||
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
|
||||
let arr = [];
|
||||
getNonFoodHuoChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
|
||||
getNonFoodHuoChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.subregionCode == code) {
|
||||
name = item.subregionName;
|
||||
@ -472,7 +609,7 @@ function QueryData(e, name, url, item) {
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
erase(newDataZh);
|
||||
value.value = '370211';
|
||||
value.value = window.localStorage.getItem('divisions');
|
||||
layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
@ -502,18 +639,19 @@ 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');
|
||||
// addConver(ft.getGeometry().getCoordinates(), 'huandao');
|
||||
});
|
||||
}
|
||||
//添加遮罩
|
||||
function addConver(data,name) {
|
||||
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: 'rgba( 105, 105, 105, 0.9)',
|
||||
color: color ? color : 'rgba( 105, 105, 105, 0.9)',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
@ -617,11 +755,10 @@ const getLhdyears = () => {
|
||||
};
|
||||
|
||||
//镇
|
||||
const getAbandons = (time) => {
|
||||
Township.arr = [];
|
||||
townArr.value = [];
|
||||
getAbandon({yearMonth:time}).then(res => {
|
||||
console.log(res.data);
|
||||
const getAbandons = time => {
|
||||
getAbandon({ yearMonth: time }).then(res => {
|
||||
Township.arr = [];
|
||||
townArr.value = [];
|
||||
res.data.forEach(item => {
|
||||
if (item.wasteland > 0) {
|
||||
Township.arr.push(item);
|
||||
@ -646,9 +783,9 @@ const getAbandons = (time) => {
|
||||
});
|
||||
};
|
||||
//村
|
||||
const getAbandonChuns = (city,time) => {
|
||||
townArr.value = [];
|
||||
getAbandonChun({ divisions: city ,yearMonth:time}).then(res => {
|
||||
const getAbandonChuns = (city, time) => {
|
||||
getAbandonChun({ divisions: city, yearMonth: time }).then(res => {
|
||||
townArr.value = [];
|
||||
res.data.forEach(item => {
|
||||
if (item.wasteland > 0) {
|
||||
townArr.value.push(item);
|
||||
@ -659,8 +796,8 @@ const getAbandonChuns = (city,time) => {
|
||||
});
|
||||
};
|
||||
//占比
|
||||
const getCityAndCountZbs = city => {
|
||||
getCityAndCountZb({ divisions: city }).then(res => {
|
||||
const getCityAndCountZbs = (city, time) => {
|
||||
getCityAndCountZb({ divisions: city, yearMonth: time }).then(res => {
|
||||
console.log(res.data);
|
||||
});
|
||||
};
|
||||
@ -668,7 +805,7 @@ const getCityAndCountZbs = city => {
|
||||
const selectTab = () => {
|
||||
if (value.value == '370211') {
|
||||
//全部
|
||||
getAbandons();
|
||||
getAbandons(oldDatas.value.name);
|
||||
} else if (value.value) {
|
||||
getAbandonChuns(value.value, oldDatas.value.name);
|
||||
}
|
||||
@ -733,7 +870,6 @@ function ASdivision() {
|
||||
nameList.push(item.subregionName);
|
||||
dataList.push(Number(item.wasteland).toFixed(2));
|
||||
});
|
||||
console.log(dataList);
|
||||
let ends = (3 / townArr.value.length) * 100;
|
||||
var option = {
|
||||
tooltip: {
|
||||
@ -812,7 +948,7 @@ function ASdivision() {
|
||||
textStyle: {
|
||||
padding: [8, 0, 0, 0],
|
||||
fontSize: 14,
|
||||
color: 'rgba(21, 222, 255, 0.8)',
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -840,7 +976,7 @@ function ASdivision() {
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(24, 255, 255, 0.8)',
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
@ -883,6 +1019,12 @@ function ASdivision() {
|
||||
ASdivisionDivIntance.on('click', param => ChartClickRB(param));
|
||||
// option && ASdivisionDivIntance.setOption(option, true);
|
||||
useEcharts(ASdivisionDivIntance, option);
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(ASdivisionDiv.value, () => {
|
||||
nextTick(() => {
|
||||
ASdivisionDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
function typesof() {
|
||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||
@ -1021,6 +1163,12 @@ function typesof() {
|
||||
};
|
||||
|
||||
useEcharts(typesofDivIntance, option);
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(typesofDiv.value, () => {
|
||||
nextTick(() => {
|
||||
typesofDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
// 右下角图表点击事件
|
||||
function ChartClickRB(param) {
|
||||
@ -1303,8 +1451,12 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
// :deep(.el-checkbox__label) {
|
||||
// color: #fff;
|
||||
// }
|
||||
:deep(.el-checkbox__label) {
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1377,11 +1529,12 @@ $height: calc(100vh - 100px);
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 8px;
|
||||
color: rgba(47, 214, 214, 1) !important;
|
||||
right: 15px;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
font-size: 18px;
|
||||
}
|
||||
#popup {
|
||||
.pophead {
|
||||
|
||||
@ -5,13 +5,7 @@
|
||||
<div class="rightbottom">
|
||||
<div class="title">
|
||||
<span>非农化耕地面积统计</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="Deta()">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -19,7 +13,13 @@
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<el-select popper-class="select_city" v-model="value" clearable placeholder="全部">
|
||||
<el-select
|
||||
v-if="limits"
|
||||
popper-class="select_city"
|
||||
v-model="value"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in Township.arr"
|
||||
:key="item.subregionCode"
|
||||
@ -75,15 +75,22 @@
|
||||
<el-checkbox
|
||||
v-for="(value, item, key) in dic"
|
||||
:key="key"
|
||||
:style="{
|
||||
background: value.color,
|
||||
border: `1px solid ${value.color}`,
|
||||
width: `100%`,
|
||||
}"
|
||||
v-model="checked3"
|
||||
: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>
|
||||
@ -123,7 +130,7 @@
|
||||
<p>
|
||||
<span>非农化</span>
|
||||
:
|
||||
<span>{{ Number(item.farm).toFixed(2) }}(亩)</span>
|
||||
<span>{{ Number(item.nonFarm).toFixed(2) }}(亩)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -146,6 +153,8 @@ import {
|
||||
getNonGrainHuoChun,
|
||||
getFnYear,
|
||||
} from '@/api/plough/agriculturization.js';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||||
|
||||
let viewer = ref(null);
|
||||
const ASdivisionDiv = ref(null);
|
||||
@ -162,27 +171,37 @@ let checkListdata = ref([]);
|
||||
let alterArr = ref([]);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
|
||||
let code =
|
||||
window.localStorage.getItem('deptName') == '青岛西海岸新区'
|
||||
? '黄岛区'
|
||||
: window.localStorage.getItem('deptName');
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
const Deta = item => {
|
||||
downloadURL(item);
|
||||
};
|
||||
const downloadURL = url => {
|
||||
let link = document.createElement('a');
|
||||
link.style.display = 'none';
|
||||
link.href = url;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
if (value.value == '370211') {
|
||||
getNonGrain({ yearMonth: oldDatas.value.name, whetherToDownload: true }).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
} else {
|
||||
getNonGrainChun({
|
||||
divisions: value.value,
|
||||
yearMonth: oldDatas.value.name,
|
||||
whetherToDownload: true,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let dic = {
|
||||
非农化: { color: 'rgba(255, 255, 0, 1)', disabled: false },
|
||||
};
|
||||
// 图层字典
|
||||
let layersDic = {
|
||||
非农化: {
|
||||
setOf: '2022-06-01-gengdi',
|
||||
name: 'T2022_06_01_feinonghua',
|
||||
setOf: '2022-09-30-gengdi',
|
||||
name: 'T2022_09_30_feinonghua',
|
||||
},
|
||||
};
|
||||
let layers = ref(null); //村
|
||||
@ -231,8 +250,23 @@ onUpdated(() => {
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
value.value = '370211';
|
||||
getNonGrains(oldDatas.value.name);
|
||||
value.value = window.localStorage.getItem('divisions');
|
||||
if (limits) {
|
||||
getNonGrains(oldDatas.value.name);
|
||||
} else {
|
||||
getNonGrainChuns(value.value, oldDatas.value.name);
|
||||
}
|
||||
let str = oldDatas.value.name;
|
||||
let str1 = str.replace(/-/g, '_');
|
||||
layersDic = {
|
||||
非农化: {
|
||||
setOf: `${oldDatas.value.name}-gengdi`,
|
||||
name: `T${str1}_feinonghua`,
|
||||
},
|
||||
};
|
||||
for (const key in checkList.value) {
|
||||
addwms(layersDic[checkList.value[key]]);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -252,6 +286,8 @@ function initmap() {
|
||||
view: new ol.View({
|
||||
center: [119.86763411957472, 35.88435182141938],
|
||||
zoom: 11,
|
||||
// 设置最大缩放级别
|
||||
maxZoom: 16.5,
|
||||
projection: 'EPSG:4326',
|
||||
}),
|
||||
layers: [
|
||||
@ -284,28 +320,82 @@ function initmap() {
|
||||
});
|
||||
map.on('singleclick', function (e) {
|
||||
var coodinate = e.coordinate;
|
||||
var lon = coodinate[0];
|
||||
var lat = coodinate[1];
|
||||
var view = map.getView();
|
||||
var zoom = map.getView().getZoom();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
if (limits) {
|
||||
var lon = coodinate[0];
|
||||
var lat = coodinate[1];
|
||||
var view = map.getView();
|
||||
var zoom = map.getView().getZoom();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'镇'
|
||||
let url = 'http://36.134.44.75:8090/iserver/services/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();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -326,8 +416,73 @@ function initmap() {
|
||||
});
|
||||
// 开始监听父元素大小变化
|
||||
resizeObserver.observe(parentElement);
|
||||
SQLSearch(code);
|
||||
}
|
||||
//权限地图
|
||||
function SQLSearch(name) {
|
||||
let names = '';
|
||||
let url = '';
|
||||
let setName = '';
|
||||
let setOf = '';
|
||||
let quyu = '';
|
||||
url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
|
||||
names = name;
|
||||
|
||||
setName = 'XJQY3702112019WGS84';
|
||||
setOf = 'huangdaoqu_bianjie';
|
||||
quyu = 'XJQYMC';
|
||||
//SQL查询（模糊查询）
|
||||
// var url = 'http://192.168.0.113:8090/iserver/services/data-liangquhuadingWGS84/rest/data';
|
||||
var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
|
||||
queryParameter: {
|
||||
name: `${setName}@${setOf}`,
|
||||
attributeFilter: `${quyu} like '%${names}%'`,
|
||||
},
|
||||
datasetNames: [`${setOf}:${setName}`],
|
||||
});
|
||||
|
||||
new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
|
||||
if (serviceResult.result.featureCount != 0) {
|
||||
var layerzhezhao = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
var layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'dianjigaoliang');
|
||||
map.removeLayer(layergaoliang);
|
||||
var geojson = new ol.format.GeoJSON().readFeatures(serviceResult.result.features);
|
||||
addConver(
|
||||
serviceResult.result.features.features[0].geometry.coordinates,
|
||||
'qu',
|
||||
'rgba( 105, 105, 105, 1)',
|
||||
9999
|
||||
);
|
||||
var selectFeatureSource = new ol.source.Vector();
|
||||
selectFeatureSource.addFeatures(geojson);
|
||||
//设置图层高亮样式
|
||||
const style = new ol.style.Style({
|
||||
// fill: new ol.style.Fill({
|
||||
// color: 'rgba(0, 255, 0, 0.1)',
|
||||
// }),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(85, 255, 255, 1.0)',
|
||||
// lineDash: [10, 10],
|
||||
width: 2,
|
||||
}),
|
||||
});
|
||||
var vectorQuery = new ol.layer.Vector({
|
||||
id: 'dianjigaoliang',
|
||||
source: selectFeatureSource,
|
||||
});
|
||||
vectorQuery.setStyle(style);
|
||||
map.addLayer(vectorQuery);
|
||||
map.getView().fit(selectFeatureSource.getExtent());
|
||||
}
|
||||
});
|
||||
}
|
||||
const cun = () => {
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
@ -464,7 +619,7 @@ function QueryData(e, name, url, item) {
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
erase(newDataZh);
|
||||
value.value = '370211';
|
||||
value.value = window.localStorage.getItem('divisions');
|
||||
layergaoliang = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
@ -494,18 +649,19 @@ 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');
|
||||
// addConver(ft.getGeometry().getCoordinates(), 'huandao');
|
||||
});
|
||||
}
|
||||
//添加遮罩
|
||||
function addConver(data, name) {
|
||||
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: 'rgba( 105, 105, 105, 0.9)',
|
||||
color: color ? color : 'rgba( 105, 105, 105, 0.9)',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
@ -603,6 +759,14 @@ const getFnYears = () => {
|
||||
res.data.forEach(item => {
|
||||
dataSource.value.push({ name: item });
|
||||
});
|
||||
let str = oldDatas.value.name;
|
||||
let str1 = str.replace(/-/g, '_');
|
||||
layersDic = {
|
||||
非农化: {
|
||||
setOf: `${oldDatas.value.name}-gengdi`,
|
||||
name: `T${str1}_feinonghua`,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
//镇
|
||||
@ -612,7 +776,7 @@ const getNonGrains = time => {
|
||||
getNonGrain({ yearMonth: time }).then(res => {
|
||||
console.log(res.data);
|
||||
res.data.forEach(item => {
|
||||
if (item.farm > 0) {
|
||||
if (item.nonFarm > 0) {
|
||||
Township.arr.push(item);
|
||||
townArr.value.push(item);
|
||||
}
|
||||
@ -636,10 +800,10 @@ const getNonGrains = time => {
|
||||
};
|
||||
//村
|
||||
const getNonGrainChuns = (city, time) => {
|
||||
townArr.value = [];
|
||||
getNonGrainChun({ divisions: city, yearMonth: time }).then(res => {
|
||||
townArr.value = [];
|
||||
res.data.forEach(item => {
|
||||
if (item.farm > 0) {
|
||||
if (item.nonFarm > 0) {
|
||||
townArr.value.push(item);
|
||||
}
|
||||
});
|
||||
@ -651,28 +815,43 @@ const getNonGrainChuns = (city, time) => {
|
||||
const selectTab = () => {
|
||||
if (value.value == '370211') {
|
||||
//全部
|
||||
getNonGrains();
|
||||
getNonGrains(oldDatas.value.name);
|
||||
} else if (value.value) {
|
||||
getNonGrainChuns(value.value, oldDatas.value.name);
|
||||
}
|
||||
};
|
||||
const handleData = oldData => {
|
||||
checkListdata.value = [];
|
||||
for (const key in dic) {
|
||||
if (dic[key].disabled !== true) {
|
||||
checkListdata.value.push(key);
|
||||
}
|
||||
}
|
||||
checkList.value = checkListdata.value;
|
||||
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;
|
||||
};
|
||||
|
||||
function ASdivision() {
|
||||
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
||||
console.log(townArr.value);
|
||||
|
||||
townArr.value.sort((a, b) => {
|
||||
return b.farm - a.farm;
|
||||
return b.nonFarm - a.nonFarm;
|
||||
});
|
||||
var nameList = [];
|
||||
var dataList = [];
|
||||
townArr.value.forEach(item => {
|
||||
nameList.push(item.subregionName);
|
||||
dataList.push(Number(item.farm).toFixed(2));
|
||||
dataList.push(Number(item.nonFarm).toFixed(2));
|
||||
});
|
||||
console.log(dataList);
|
||||
let ends = (3 / townArr.value.length) * 100;
|
||||
var option = {
|
||||
tooltip: {
|
||||
@ -751,7 +930,7 @@ function ASdivision() {
|
||||
textStyle: {
|
||||
padding: [8, 0, 0, 0],
|
||||
fontSize: 14,
|
||||
color: 'rgba(21, 222, 255, 0.8)',
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -779,7 +958,7 @@ function ASdivision() {
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(24, 255, 255, 0.8)',
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
@ -822,14 +1001,20 @@ function ASdivision() {
|
||||
ASdivisionDivIntance.on('click', param => ChartClickRB(param));
|
||||
// option && ASdivisionDivIntance.setOption(option, true);
|
||||
useEcharts(ASdivisionDivIntance, option);
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(ASdivisionDiv.value, () => {
|
||||
nextTick(() => {
|
||||
ASdivisionDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
function typesof() {
|
||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||
let data = townArr.value;
|
||||
let totalArea = 0;
|
||||
data.forEach(item => {
|
||||
(item.name = item.subregionName), (item.value = Number(item.farm).toFixed(2));
|
||||
totalArea += item.farm;
|
||||
(item.name = item.subregionName), (item.value = Number(item.nonFarm).toFixed(2));
|
||||
totalArea += item.nonFarm;
|
||||
});
|
||||
let option = {
|
||||
color: [
|
||||
@ -960,6 +1145,12 @@ function typesof() {
|
||||
};
|
||||
|
||||
useEcharts(typesofDivIntance, option);
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(typesofDiv.value, () => {
|
||||
nextTick(() => {
|
||||
typesofDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
// 右下角图表点击事件
|
||||
function ChartClickRB(param) {
|
||||
@ -1110,7 +1301,7 @@ $height: calc(100vh - 100px);
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.farmlandDiv {
|
||||
.nonFarmlandDiv {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
opacity: 1;
|
||||
@ -1241,8 +1432,12 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
// :deep(.el-checkbox__label) {
|
||||
// color: #fff;
|
||||
// }
|
||||
:deep(.el-checkbox__label) {
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1314,11 +1509,13 @@ $height: calc(100vh - 100px);
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 8px;
|
||||
top: 11px;
|
||||
right: 15px;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
font-size: 18px;
|
||||
}
|
||||
#popup {
|
||||
border-radius: 5px;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -159,7 +159,7 @@ getCode();
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url("../assets/images/login-background.png");
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
|
||||
Reference in New Issue
Block a user