up

src/api/pestis/pestis.js

@@ -99,3 +99,18 @@ export function getfindAllSoilTb(query) { //土壤图表
     })
 }
 
+export function getTreeDataTo(query) { //大田视频摄像头列表
+    return request({
+        url: 'equipment/treeDataTo',
+        method: 'get',
+        params: query
+    })
+}
+export function getCameraNameTo(query) { //大田视频摄像头列表
+    return request({
+        url: 'equipment/cameraNameTo',
+        method: 'get',
+        params: query
+    })
+}
+

src/api/plough/agriculturization.js

@@ -3,23 +3,26 @@ import request from '@/utils/request'
 
 export function getNonGrain(query) { //镇的数据
     return request({
-        url: 'equipment/nonGrain',
+        url: 'equipment/nonFood',
         method: 'get',
         params: query
     })
 }
 
+
 export function getNonGrainChun(query) { //镇的编码查村的数据
     return request({
-        url: 'equipment/nonGrainChun',
+        url: 'equipment/nonFoodChun',
         method: 'get',
         params: query
     })
 }
 
+
+
 export function getNonGrainHuoChun(query) { //村的编码查村的数据
     return request({
-        url: 'equipment/nonGrainHuoChun',
+        url: 'equipment/nonFoodHuoChun',
         method: 'get',
         params: query
     })

src/api/plough/degrain.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 
 export function getNonFood(query) { //镇的数据
     return request({
-        url: 'equipment/nonFood',
+        url: 'equipment/nonGrain',
         method: 'get',
         params: query
     })
@@ -11,7 +11,7 @@ export function getNonFood(query) { //镇的数据
 
 export function getNonFoodChun(query) { //镇的编码查村的数据
     return request({
-        url: 'equipment/nonFoodChun',
+        url: 'equipment/nonGrainChun',
         method: 'get',
         params: query
     })
@@ -19,7 +19,7 @@ export function getNonFoodChun(query) { //镇的编码查村的数据
 
 export function getNonFoodHuoChun(query) { //村的编码查村的数据
     return request({
-        url: 'equipment/nonFoodHuoChun',
+        url: 'equipment/nonGrainHuoChun',
         method: 'get',
         params: query
     })

src/components/TimeLine/TimeLine.vue

@@ -29,7 +29,7 @@ export default {
     props: ['dataSource', 'theme'],
     data() {
         return {
-            value2: 0, //当前的值
+            value2: 100, //当前的值
             marks: {}, //时间轴刻度
             step: 10,
             times: null,
@@ -45,14 +45,12 @@ export default {
             this.$emit('dataHandle', oldData);
         },
         dataSource: function (val, oldVal) {
-            console.log(val) 
             //源数据监听
             this.dataHandleInit();
         },
     },
     mounted() {
         this.dataHandleInit(); //
-        console.log(this.dataSource)
     },
     methods: {
         dataHandleInit() {
@@ -98,7 +96,6 @@ export default {
                 this.value2 = 0;
             } else {
                 this.value2 += this.step;
-                console.log(this.value2)
             }
         },
         // 自动播放
@@ -127,7 +124,7 @@ export default {
 
     ::v-deep .el-slider {
         flex: 1;
-        padding: 2em;
+        padding: 2.5em;
 
         .el-slider__runway {
             background-color: rgba(255, 255, 255, 0.2);

src/components/TopNav/index.vue

@@ -148,10 +148,10 @@ function activeRoutes(key) {
 }
 
 onMounted(() => {
-  window.addEventListener('resize', setVisibleNumber)
+  window.addEventListener('resize', setVisibleNumber,{ passive: true })
 })
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', setVisibleNumber)
+  window.removeEventListener('resize', setVisibleNumber,{ passive: true })
 })
 
 onMounted(() => {

src/layout/components/Navbar.vue

@@ -8,9 +8,7 @@
             <template v-if="appStore.device !== 'mobile'">
                 <!-- <header-search id="header-search" class="right-menu-item" /> -->
 
-                <el-button class="mode" @click="tabMode">
-                    列表模式
-                </el-button>
+                <el-button class="mode" @click="tabMode">列表模式</el-button>
                 <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
                 <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
@@ -32,9 +30,9 @@
                             <router-link to="/user/profile">
                                 <el-dropdown-item>个人中心</el-dropdown-item>
                             </router-link>
-                            <router-link to="/manage/manage">
+                            <!-- <router-link to="/manage/manage">
                                 <el-dropdown-item>地图服务管理</el-dropdown-item>
-                            </router-link>
+                            </router-link> -->
                             <el-dropdown-item command="setLayout">
                                 <span>布局设置</span>
                             </el-dropdown-item>
@@ -63,10 +61,10 @@ import useAppStore from '@/store/modules/app';
 import useUserStore from '@/store/modules/user';
 import useSettingsStore from '@/store/modules/settings';
 import Logo from '@/layout/components/Sidebar/Logo.vue';
-import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router';
 import { watch } from 'vue';
 
-const router = useRouter()
+const router = useRouter();
 const appStore = useAppStore();
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
@@ -100,6 +98,7 @@ function logout() {
             userStore.logOut().then(() => {
                 location.href = '/index';
             });
+            localStorage.clear();
         })
         .catch(() => {});
 }
@@ -109,24 +108,23 @@ function setLayout() {
     emits('setLayout');
 }
 
-
 const tabMode = () => {
-    if( document.querySelector('.mode').innerText=='地图模式'){
+    if (document.querySelector('.mode').innerText == '地图模式') {
         flag.value = true;
-        localStorage.setItem(router.currentRoute.value.path,true);
-    }else{
+        localStorage.setItem(router.currentRoute.value.path, true);
+    } else {
         flag.value = false;
-        localStorage.setItem(router.currentRoute.value.path,false);
+        localStorage.setItem(router.currentRoute.value.path, false);
     }
     if (!flag.value) {
         window.document.querySelector('.centerBox').style.display = 'none';
         window.document.querySelector('.tabulation').style.display = 'block';
-        document.querySelector('.mode').innerText='地图模式'
+        document.querySelector('.mode').innerText = '地图模式';
         window.document.querySelector('#screenfull').style.display = 'none';
     } else {
         window.document.querySelector('.tabulation').style.display = 'none';
         window.document.querySelector('.centerBox').style.display = 'block';
-        document.querySelector('.mode').innerText='列表模式'
+        document.querySelector('.mode').innerText = '列表模式';
         window.document.querySelector('#screenfull').style.display = 'block';
     }
 

src/main.js

@@ -79,6 +79,7 @@ app.use(FitScreen)
 
 
 
+
 directive(app)
 
 // 使用element-plus 并且设置全局的大小

src/permission.js

@@ -11,7 +11,7 @@ import usePermissionStore from '@/store/modules/permission'
 
 NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/transitional'];
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -42,6 +42,11 @@ export const constantRoutes = [
     component: () => import('@/views/login'),
     hidden: true
   },
+  {
+    path: '/transitional',
+    component: () => import('@/views/Transitional'),
+    hidden: true
+  },
   {
     path: '/register',
     component: () => import('@/views/register'),

src/utils/request.js

@@ -20,6 +20,34 @@ const service = axios.create({
   timeout: 300000
 })
 
+// //获取当前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);
+  })
+}
+
+
 // request拦截器
 service.interceptors.request.use(config => {
   // 是否需要设置 token
@@ -31,9 +59,13 @@ service.interceptors.request.use(config => {
   }
   // get请求映射params参数
   if (config.method === 'get' && config.params) {
+    if (!config.params.divisions) {
+      config.params['divisions'] = window.localStorage.getItem('divisions')
+    }
     let url = config.url + '?' + tansParams(config.params);
     url = url.slice(0, -1);
-    config.params = {};
+    config.params = {
+    };
     config.url = url;
   }
   if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {

src/views/Transitional.vue

@@ -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>

src/views/crops/area/Area.vue

@@ -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();

src/views/login.vue

@@ -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>

src/views/meteorological/monitor/FloodWarning/index.vue

@@ -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>

src/views/meteorological/monitor/drought/index.vue

@@ -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>

src/views/meteorological/monitor/freeze/index.vue

@@ -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>

src/views/meteorological/monitor/information/index.vue

@@ -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 {

src/views/meteorological/remoteSense/FloodExtraction/FloodExtraction.vue

@@ -78,7 +78,7 @@
                 <div class="rightTop">
                     <div class="title">
                         <span>洪涝面积统计-高标准农田</span>
-                        <p @click="Deta3()">
+                        <p @click="Deta3()" v-if="limits">
                             下载 &nbsp;
                             <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 {

src/views/meteorological/remoteSense/estimate/index.vue

@@ -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">

src/views/plough/Degrain/index.vue

@@ -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()">
                         下载 &nbsp;
                         <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 {

src/views/plough/VideoSurveillance/index.vue

@@ -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);
         });

src/views/plough/abandonedLand/index.vue

@@ -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()">
                         下载 &nbsp;
                         <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 {

src/views/plough/agriculturization/index.vue

@@ -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()">
                         下载 &nbsp;
                         <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;

src/views/register.vue

@@ -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 {