up

src/App.vue

@@ -1,12 +1,10 @@
 <template>
-
-        <div class="center">
-            <Headers />
-            <navbar v-if="Route.path!=='/login'" @setLayout="setLayout" />
-            <router-view />
-            <settings ref="settingRef" />
-        </div>
-
+    <div class="center">
+        <Headers />
+        <navbar v-if="Route.path !== '/login'" @setLayout="setLayout" />
+        <router-view />
+        <settings ref="settingRef" />
+    </div>
 </template>
 
 <script setup>
@@ -14,8 +12,9 @@ import useSettingsStore from '@/store/modules/settings';
 import { handleThemeStyle } from '@/utils/theme';
 import VScaleScreen from 'v-scale-screen';
 import Headers from '@/components/heades/index';
-import { AppMain, Navbar, Settings, TagsView } from '@/layout/components'
+import { AppMain, Navbar, Settings, TagsView } from '@/layout/components';
 import { useRoute } from 'vue-router';
+import { getToken, setToken, removeToken } from '@/utils/auth';
 const Route = useRoute();
 onMounted(() => {
     nextTick(() => {
@@ -25,8 +24,22 @@ onMounted(() => {
 });
 const settingRef = ref(null);
 function setLayout() {
-  settingRef.value.openSetting();
+    settingRef.value.openSetting();
 }
+var beginTime = 0; //执行onbeforeunload的开始时间
+var differTime = 0; //时间差
+window.onunload = function () {
+    differTime = new Date().getTime() - beginTime;
+    if (differTime >= 1200000) {
+        localStorage.clear();
+        removeToken();
+    } else {
+        console.log('浏览器刷新');
+    }
+};
+window.onbeforeunload = function () {
+    beginTime = new Date().getTime();
+};
 </script>
 <style lang="scss" scoped>
 .center {

src/api/login.js

@@ -1,20 +1,17 @@
 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid) {
+export function login(ticket) {
   const data = {
-    username,
-    password,
-    code,
-    uuid
+    ticket,
   }
   return request({
     url: '/login',
     headers: {
       isToken: false
     },
-    method: 'post',
-    data: data
+    method: 'get',
+    params: data
   })
 }
 

src/api/meteorological/monitor/information.js

@@ -49,10 +49,27 @@ export function meteorology (data) {
         params:data
     })
 }
-export function zdmc () {
+export function zdmc (data) {
     return request({
-        url: '/equipment/zdmc ',
+        url: '/equipment/zdmc',
         method: 'get',
+        params:data
+    })
+}
+
+export function getSeeWarning (query) {  //判断一周内是否有预警
+    return request({
+        url: '/equipment/seeWarning',
+        method: 'get',
+        params: query
+    })
+}
+
+export function getSeeWarningData (query) {  //获取预警日期
+    return request({
+        url: '/equipment/seeWarningData',
+        method: 'get',
+        params: query
     })
 }
 

src/api/operationLog/operationLog.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+export function getfindLog(query) { //系统日志
+    return request({
+        url: 'equipment/findLog',
+        method: 'get',
+        params: query
+    })
+}
+

src/api/pestis/pestis.js

@@ -114,3 +114,31 @@ export function getCameraNameTo(query) { //大田视频摄像头列表
     })
 }
 
+export function getSeedlingMonitoring(query) { //苗情监测
+    return request({
+        url: 'equipment/seedlingMonitoring',
+        method: 'get',
+        params: query
+    })
+}
+export function getCapturePointCamera(query) { //苗情监测摄像头
+    return request({
+        url: 'equipment/capturePointCamera',
+        method: 'get',
+        params: query
+    })
+}
+export function getQuery(query) { //获取摄像头信息
+    return request({
+        url: 'equipment/query',
+        method: 'get',
+        params: query
+    })
+}
+export function getSxtbf(query) { //摄像头
+    return request({
+        url: 'equipment/sxtbf',
+        method: 'get',
+        params: query
+    })
+}

src/api/plough/VideoSurveillance.js

@@ -15,4 +15,33 @@ export function getCameraName(query) { //获取视频地址
         method: 'get',
         params: query
     })
+}
+
+export function getQuery(query) { //获取摄像头信息
+    return request({
+        url: 'equipment/query',
+        method: 'get',
+        params: query
+    })
+}
+export function getRunTheCamera(query) { //控制摄像头
+    return request({
+        url: 'equipment/runTheCamera',
+        method: 'get',
+        params: query
+    })
+}
+export function getCameraNameS(query) { //摄像头列表
+    return request({
+        url: 'equipment/cameraNames',
+        method: 'get',
+        params: query
+    })
+}
+export function getSxtbf(query) { //摄像头
+    return request({
+        url: 'equipment/sxtbf',
+        method: 'get',
+        params: query
+    })
 }

src/api/plough/abandonedLand.js

@@ -40,4 +40,11 @@ export function getLhdyear(query) { //时间
         params: query
     })
 }
+export function getflHeith(query) { //撂荒高标准
+    return request({
+        url: 'equipment/lhdHeith',
+        method: 'get',
+        params: query
+    })
+}
 

src/api/plough/agriculturization.js

@@ -35,5 +35,12 @@ export function getFnYear(query) { //时间
         params: query
     })
 }
+export function getfnHeith(query) { //高标准
+    return request({
+        url: 'equipment/fnHeith',
+        method: 'get',
+        params: query
+    })
+}
 
 

src/api/plough/degrain.js

@@ -33,4 +33,10 @@ export function getFlYear(query) { //时间
     })
 }
 
-
+export function getlhdHeith(query) { //高标准农田
+    return request({
+        url: 'equipment/flHeith',
+        method: 'get',
+        params: query
+    })
+}

src/api/system/chzl.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+// 查询病害列表
+export function listChzl(query) {
+  return request({
+    url: '/system/chzl/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询病害详细
+export function getChzl(id) {
+  return request({
+    url: '/system/chzl/' + id,
+    method: 'get'
+  })
+}
+
+// 新增病害
+export function addChzl(data) {
+  return request({
+    url: '/system/chzl/insert',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改病害
+export function updateChzl(data) {
+  return request({
+    url: '/system/chzl',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除病害
+export function delChzl(query) {
+  return request({
+    url: '/system/chzl/delete',
+    method: 'get',
+    params: query
+  })
+}

src/components/Screenfull/index.vue

@@ -20,27 +20,22 @@ let rightWra = null;
 let flag = ref(true);
 let leftment = null;
 let main_container = null;
-onMounted(() => {
-    navbar = document.querySelector('.navDiv');
-    app_main = document.querySelector('.app-main');
-    headers = document.querySelector('.headers');
-    leftWra = document.querySelector('.leftWra');
-    rightWra = document.querySelector('.rightWra');
-    leftment = document.querySelector('.leftment');
-    main_container = document.querySelector('.main-container');
-});
 //隐藏导航栏
 const max = () => {
-    document.querySelector('.navDiv').style.display = 'none';
-    document.querySelector('.navbar').style.display = 'none';
-    document.querySelector('.app-main').style.height = '100%';
-    document.querySelector('.headers').style.transform = `translate(0, 0)`;
-    document.querySelector('.leftment').style.display = 'none';
-    document.querySelector('.main-container').style.marginLeft = '0';
+    document.querySelector('.navDiv') && (document.querySelector('.navDiv').style.display = 'none');
+    document.querySelector('.navbar') && (document.querySelector('.navbar').style.display = 'none');
+    document.querySelector('.app-main') && (document.querySelector('.app-main').style.height = '100%');
+    document.querySelector('.headers') && (document.querySelector('.headers').style.transform = `translate(0, 0)`);
+    document.querySelector('.leftment') && (document.querySelector('.leftment').style.display = 'none');
+    document.querySelector('.main-container') && (document.querySelector('.main-container').style.marginLeft = '0');
     document.querySelector('.leftWra')
         ? (document.querySelector('.leftWra').style.top = '80px')
         : '';
-    document.querySelector('.rightWra').style.top = '80px';
+        document.querySelector('.rightWra') && (document.querySelector('.rightWra').style.top = '80px');
+        document.querySelector('.rightWra') && (document.querySelector('.rightWra').style.height = 'calc(100vh - 80px)');
+        document.querySelector('.bottom_center') && (document.querySelector('.bottom_center').style.bottom = '0px');
+        document.querySelector('.legend') && (document.querySelector('.legend').style.bottom = '10px');
+        document.querySelector('.treeDiv') && (document.querySelector('.treeDiv').style.top = '80px');
     // settingsStore.changeSetting({ key: 'topNav', value: flag.value });
 };
 </script>

src/components/TimeLine/TimeLine.vue

@@ -10,15 +10,43 @@
             :max="max"
         ></el-slider>
         <div class="optionWrapper">
-            <img @click="leftHandle" src="@/assets/images/upper.png" alt="《" />
-            <img @click="autoPlay" v-if="!times" src="@/assets/images/start.png" alt="||" />
-            <img @click="pausePlay" v-if="times" src="@/assets/images/suspend.png" alt="||" />
-            <img @click="rightHandle" src="@/assets/images/below.png" alt="》" />
+            <el-tooltip class="box-item" effect="dark" content="上一页" placement="top-start">
+                <img
+                    @click="leftHandle"
+                    style="width: 30px; height: 30px; margin-right: 3px"
+                    src="@/assets/images/upper.png"
+                    alt="《"
+                />
+            </el-tooltip>
+            <img
+                @click="autoPlay"
+                style="width: 30px; height: 30px; margin-right: 3px"
+                v-if="!times"
+                src="@/assets/images/suspend.png"
+                alt="||"
+            />
+            <img
+                @click="pausePlay"
+                style="width: 30px; height: 30px; margin-right: 3px"
+                v-if="times"
+                src="@/assets/images/start.png"
+                alt="||"
+            />
+            <el-tooltip class="box-item" effect="dark" content="下一页" placement="top">
+                <img
+                    @click="nextPage"
+                    style="width: 30px; height: 30px"
+                    src="@/assets/images/below.png"
+                    alt="》"
+                />
+            </el-tooltip>
         </div>
     </div>
 </template>
 
 <script>
+import { withCtx } from 'vue';
+
 /*
 dataSource=[
     {name:'year1',value:''}
@@ -26,7 +54,7 @@ dataSource=[
 */
 
 export default {
-    props: ['dataSource', 'theme'],
+    props: ['dataSource', 'theme', 'allCount'],
     data() {
         return {
             value2: 100, //当前的值
@@ -35,6 +63,7 @@ export default {
             times: null,
             min: 0,
             max: 100,
+            currentPage: this.allCount,
         };
     },
     watch: {
@@ -78,17 +107,32 @@ export default {
                     num += splitNumber;
                 });
             this.marks = marks; //赋值mark
+            this.value2 = this.max;
         },
         // 上一个
         leftHandle() {
-            // 判断是不是第一个
-            if (this.value2 === 0) {
-                this.value2 = this.max;
+            if (this.currentPage == 1) {
+                this.currentPage = this.allCount;
             } else {
-                this.value2 -= this.step;
+                this.currentPage--;
             }
+            this.$emit('getcurrentPage', this.currentPage);
+            // // 判断是不是第一个
+            // if (this.value2 === 0) {
+            //     this.value2 = this.max;
+            // } else {
+            //     this.value2 -= this.step;
+            // }
         },
         // 下一个
+        nextPage() {
+            if (this.currentPage == this.allCount) {
+                this.currentPage = 1;
+            } else {
+                this.currentPage++;
+            }
+            this.$emit('getcurrentPage', this.currentPage);
+        },
         rightHandle() {
             // 判断是否是最后一个
             if (this.value2 === this.max) {
@@ -121,7 +165,11 @@ export default {
     align-items: center;
     display: flex;
     align-items: center;
-
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.75);
+    border: 1px solid rgba(51, 51, 51, 1);
+    box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08),
+        0px 9px 28px 8px rgba(0, 0, 0, 0.05);
     ::v-deep .el-slider {
         flex: 1;
         padding: 2.5em;
@@ -131,12 +179,12 @@ export default {
             min-width: 200px;
             width: 90%;
             .el-slider__bar {
-                background-color: rgba(108, 177, 184, 1);
+                background-color: rgba(100, 195, 164, 1);
                 border-radius: 5px;
             }
             // 点
             .el-slider__stop {
-                background-color: rgba(108, 177, 184, 1);
+                background-color: rgba(100, 195, 164, 1);
                 height: 10px;
                 width: 1px;
                 // top: -2px;
@@ -153,7 +201,7 @@ export default {
             .el-slider__marks-text {
                 color: rgba(222, 244, 255, 1);
                 text-align: left;
-                left: 13%;
+                // left: 13%;
                 font-size: 14px;
                 font-weight: 400;
                 color: rgba(255, 255, 255, 1);

src/components/TimeLine/calculatetime.js

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+// 获取间隔天数
+export function getDays(day1, day2) {
+    // 获取入参字符串形式日期的Date型日期
+    let st = day1.getDate()
+    const et = day2.getDate()
+   
+    const retArr = []
+   
+    // 获取开始日期的年，月，日
+    let yyyy = st.getFullYear(),
+      mm = st.getMonth(),
+      dd = st.getDate()
+   
+    // 循环
+    while (st.getTime() != et.getTime()) {
+      retArr.push(st.getYMD())
+   
+      if (st.getTime() > et.getTime()) return;
+      st = new Date(yyyy, mm, ++dd); // 避免开始日期添加两次
+    }
+   
+    // 将结束日期的天放进数组
+    retArr.push(et.getYMD())
+   
+    return retArr // 或可换为return ret;
+    // alert(retArr); // 或可换为return ret;
+  }
+   
+  // 给Date对象添加getYMD方法，获取字符串形式的年月日
+  Date.prototype.getYMD = function () {
+    // 将结果放在数组中，使用数组的join方法返回连接起来的字符串，并给不足两位的天和月十位上补零
+    return [this.getFullYear(), fz(this.getMonth() + 1), fz(this.getDate())].join(
+      '/'
+    )
+  }
+   
+  // 给String对象添加getDate方法，使字符串形式的日期返回为Date型的日期
+  String.prototype.getDate = function () {
+    const strArr = this.split('-')
+    return new Date(strArr[0], strArr[1] - 1, strArr[2])
+  }
+   
+  // 给月和天，不足两位的前面补0
+  function fz(num) {
+    if (num < 10) {
+      num = '0' + num
+    }
+    return num
+  }
+   
+  // 递归转化为对象
+  export function arrToObj(arr) {
+    const obj = {}
+    const defaultObj = {}
+    for (let i = 0; i < arr.length; i++) {
+      obj[i] = arr[i]
+      if (Object.prototype.toString.call(arr[i]) == '[object Array]') {
+        const deepArray = this.arrToObj(arr[i])
+        continue
+      } else {
+        defaultObj[i] = arr[i]
+      }
+    }
+    return defaultObj
+  }

src/components/heades/index.vue

@@ -25,17 +25,26 @@ onMounted(() => {
     // console.log(document.querySelector('.menubar'));
 });
 const exitMaximize = () => {
-    document.querySelector('.navDiv').style.display = '';
-    document.querySelector('.navbar').style.display = '';
-    document.querySelector('.app-main').style.height = 'calc(100% - 50px)';
-    document.querySelector('.headers').style.transform = `translate(0, -100%)`;
+    document.querySelector('.navDiv') && (document.querySelector('.navDiv').style.display = '');
+    document.querySelector('.navbar') && (document.querySelector('.navbar').style.display = '');
+    document.querySelector('.rightWra') && (document.querySelector('.rightWra').style.height = 'calc(100vh - 98px)');
+    document.querySelector('.app-main')&&(
+        (document.querySelector('.app-main').style.height = 'calc(100% - 50px)')
+    );
+    document.querySelector('.headers') &&
+        (document.querySelector('.headers').style.transform = `translate(0, -100%)`);
     document.querySelector('.leftWra')
         ? (document.querySelector('.leftWra').style.top = '10px')
         : '';
-    document.querySelector('.rightWra').style.top = '10px';
-    document.querySelector('.leftment').style.display = 'block';
-    document.querySelector('.main-container').style.marginLeft =
-        document.querySelector('.leftment').style.width;
+    document.querySelector('.rightWra') && (document.querySelector('.rightWra').style.top = '0px');
+    document.querySelector('.leftment') &&
+        (document.querySelector('.leftment').style.display = 'block');
+    document.querySelector('.main-container') &&
+        (document.querySelector('.main-container').style.marginLeft =
+            document.querySelector('.leftment').style.width);
+            document.querySelector('.bottom_center') && (document.querySelector('.bottom_center').style.bottom = '50px');
+            document.querySelector('.legend') && (document.querySelector('.legend').style.bottom = '60px');
+            document.querySelector('.treeDiv') && (document.querySelector('.treeDiv').style.top = '0px');
 };
 </script>
 

src/components/video/video copy.vue

@@ -0,0 +1,528 @@
+<template>
+    <div class="videoPlay">
+        <video ref="m3u8_video" class="video-js vjs-default-skin vjs-big-play-centered" controls>
+            <source :src="videoSrc" />
+        </video>
+    </div>
+</template>
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import videojs, { VideoJsPlayer } from 'video.js';
+import 'video.js/dist/video-js.css';
+import { getQuery, getRunTheCamera } from '@/api/plough/VideoSurveillance';
+import { ElMessage } from 'element-plus';
+import tingzhi from '@/assets/images/tingzhi.png';
+import shang from '@/assets/images/shang.png';
+import xia from '@/assets/images/xia.png';
+import fangda from '@/assets/images/fangda.png';
+import suoxiao from '@/assets/images/suoxiao.png';
+import you from '@/assets/images/you.png';
+import youshang from '@/assets/images/youshang.png';
+import youxia from '@/assets/images/youxia.png';
+import zuo from '@/assets/images/zuo.png';
+import zuoshang from '@/assets/images/zuoshang.png';
+import zuoxia from '@/assets/images/zuoxia.png';
+const props = withDefaults(
+    defineProps<{
+        videoSrc: string;
+        autoPlay?: boolean;
+        sonData;
+    }>(),
+    { autoPlay: false }
+);
+const m3u8_video = ref();
+let player: VideoJsPlayer;
+const initPlay = async () => {
+    await nextTick();
+    const options = {
+        muted: true,
+        controls: true,
+        autoplay: true,
+        loop: true,
+        language: 'zh-CN',
+        techOrder: ['html5'],
+        controlBar: {
+            children: [],
+        },
+    };
+    player = videojs(m3u8_video.value, options, () => {
+        videojs.log('播放器已经准备好了!');
+        if (props.autoPlay && props.videoSrc) {
+            player.play();
+        }
+        player.on('ended', () => {
+            videojs.log('播放结束了!');
+        });
+        player.on('error', () => {
+            videojs.log('播放器解析出错!');
+        });
+    });
+    const myPlayer = videojs(m3u8_video.value, options, function () {
+        const baseComponent = videojs.getComponent('Component');
+        const myComponent = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${shang}" />`,
+                    title: '上', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    console.log(res.data[0]);
+                    getRunTheCamera({ ...res.data[0], operation: 0, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent2 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${xia}" />`,
+                    title: '下', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    console.log(res.data[0]);
+                    getRunTheCamera({ ...res.data[0], operation: 1, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent3 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${zuo}" />`,
+                    title: '左', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    console.log(res.data[0]);
+                    getRunTheCamera({ ...res.data[0], operation: 2, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent4 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${you}" />`,
+                    title: '右', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    console.log(res.data[0]);
+                    getRunTheCamera({ ...res.data[0], operation: 3, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent5 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${zuoshang}" />`,
+                    title: '左上', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    console.log(res.data[0]);
+                    getRunTheCamera({ ...res.data[0], operation: 4, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent6 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${zuoxia}" />`,
+                    title: '左下', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    console.log(res.data[0]);
+                    getRunTheCamera({ ...res.data[0], operation: 5, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent7 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${youshang}" />`,
+                    title: '右上', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    console.log(res.data[0]);
+                    getRunTheCamera({ ...res.data[0], operation: 6, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent8 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${youxia}" />`,
+                    title: '右下', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 7, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent9 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${fangda}" />`,
+                    title: '放大', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 8, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent10 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${suoxiao}" />`,
+                    title: '缩小', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 9, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent11 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${tingzhi}" />`,
+                    title: '暂停', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 10, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        videojs.registerComponent('myComponent', myComponent);
+        videojs.registerComponent('myComponent2', myComponent2);
+        videojs.registerComponent('myComponent3', myComponent3);
+        videojs.registerComponent('myComponent4', myComponent4);
+        videojs.registerComponent('myComponent5', myComponent5);
+        videojs.registerComponent('myComponent6', myComponent6);
+        videojs.registerComponent('myComponent7', myComponent7);
+        videojs.registerComponent('myComponent8', myComponent8);
+        videojs.registerComponent('myComponent9', myComponent9);
+        videojs.registerComponent('myComponent10', myComponent10);
+        videojs.registerComponent('myComponent11', myComponent11);
+
+        const controlBar = myPlayer.getChild('controlBar');
+        if (controlBar) {
+            controlBar.addChild('myComponent');
+            controlBar.addChild('myComponent2');
+            controlBar.addChild('myComponent3');
+            controlBar.addChild('myComponent4');
+            controlBar.addChild('myComponent5');
+            controlBar.addChild('myComponent6');
+            controlBar.addChild('myComponent7');
+            controlBar.addChild('myComponent8');
+            controlBar.addChild('myComponent9');
+            controlBar.addChild('myComponent10');
+            controlBar.addChild('myComponent11');
+        } else {
+            console.error(
+                'Control bar not found. Make sure you have a control bar in your video player.'
+            );
+        }
+    });
+
+    const fullscreenToggle = videojs.extend(videojs.getComponent('Button'), {
+        constructor: function (player, options) {
+            videojs.getComponent('Button').apply(this, arguments);
+            this.controlText('全屏按钮');
+        },
+        handleClick: function () {
+            if (player.isFullscreen()) {
+                player.exitFullscreen();
+            } else {
+                player.requestFullscreen();
+            }
+        },
+    });
+
+    // Register the custom fullscreenToggle component
+    videojs.registerComponent('fullscreenToggle', fullscreenToggle);
+
+    // Create the custom fullscreenToggle button
+    const fullscreenButton = new fullscreenToggle(player);
+
+    // Add the fullscreen icon to the custom fullscreenToggle button
+    fullscreenButton.addClass('vjs-icon-fullscreen-enter'); // Use the correct Video.js fullscreen icon class
+    fullscreenButton.addClass('custom-fullscreen-btn');
+    // Find the controlBar node and add the custom fullscreenToggle button
+    const controlBar = player.getChild('controlBar');
+    if (controlBar) {
+        controlBar.addChild(fullscreenButton);
+    } else {
+        console.error(
+            'Control bar not found. Make sure you have a control bar in your video player.'
+        );
+    }
+};
+const getImageUrl = name => {
+    return new URL(`@/assets/images/${name}`, import.meta.url).href;
+};
+onMounted(() => {
+    initPlay();
+});
+//直接改变路径测试
+watch(
+    () => props.videoSrc,
+    () => {
+        player.pause();
+        player.src(props.videoSrc);
+        player.load();
+        if (props.videoSrc) {
+            player.play();
+        }
+    }
+);
+onBeforeUnmount(() => {
+    player?.dispose();
+});
+</script>
+<style lang="scss" scoped>
+.videoPlay {
+    width: 100%;
+    height: 100%;
+    .video-js {
+        height: 100%;
+        width: 100%;
+        object-fit: fill;
+    }
+}
+
+:deep(.vjs-tech) {
+    object-fit: fill;
+}
+.jietu {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+:deep() .custom-fullscreen-btn {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    z-index: 9999;
+}
+
+</style>
+<style>
+.vjs-my-components{
+    cursor: pointer !important;
+}
+</style>

src/components/video/video.vue

@@ -1,83 +1,521 @@
 <template>
     <div class="videoPlay">
-      <video
-        ref="m3u8_video"
-        class="video-js vjs-default-skin vjs-big-play-centered"
-        controls
-      >
-        <source :src="videoSrc" />
-      </video>
+        <video ref="m3u8_video" class="video-js vjs-default-skin vjs-big-play-centered" controls>
+            <source :src="videoSrc" />
+        </video>
     </div>
-  </template>
-  <script lang="ts" setup>
-  import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
-  import videojs, { VideoJsPlayer } from "video.js";
-  import "video.js/dist/video-js.css";
-  const props = withDefaults(
+</template>
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import videojs, { VideoJsPlayer } from 'video.js';
+import 'video.js/dist/video-js.css';
+import { getQuery, getRunTheCamera } from '@/api/plough/VideoSurveillance';
+import { ElMessage } from 'element-plus';
+import tingzhi from '@/assets/images/tingzhi.png';
+import shang from '@/assets/images/shang.png';
+import xia from '@/assets/images/xia.png';
+import fangda from '@/assets/images/fangda.png';
+import suoxiao from '@/assets/images/suoxiao.png';
+import you from '@/assets/images/you.png';
+import youshang from '@/assets/images/youshang.png';
+import youxia from '@/assets/images/youxia.png';
+import zuo from '@/assets/images/zuo.png';
+import zuoshang from '@/assets/images/zuoshang.png';
+import zuoxia from '@/assets/images/zuoxia.png';
+const props = withDefaults(
     defineProps<{
-      videoSrc: string;
-      autoPlay?: boolean;
+        videoSrc: string;
+        autoPlay?: boolean;
+        sonData;
     }>(),
     { autoPlay: false }
-  );
-  const m3u8_video = ref();
-  let player: VideoJsPlayer;
-  const initPlay = async () => {
+);
+const m3u8_video = ref();
+let player: VideoJsPlayer;
+const initPlay = async () => {
     await nextTick();
     const options = {
-      muted: true,
-      controls: true,
-      autoplay: true,
-      loop: true,
-      language: "zh-CN",
-      techOrder: ["html5"],
+        muted: true,
+        controls: true,
+        autoplay: true,
+        loop: true,
+        language: 'zh-CN',
+        techOrder: ['html5'],
+        controlBar: {
+            children: [],
+        },
     };
     player = videojs(m3u8_video.value, options, () => {
-      videojs.log("播放器已经准备好了!");
-      if (props.autoPlay && props.videoSrc) {
-        player.play();
-      }
-      player.on("ended", () => {
-        videojs.log("播放结束了!");
-      });
-      player.on("error", () => {
-        videojs.log("播放器解析出错!");
-      });
+        videojs.log('播放器已经准备好了!');
+        if (props.autoPlay && props.videoSrc) {
+            player.play();
+        }
+        player.on('ended', () => {
+            videojs.log('播放结束了!');
+        });
+        player.on('error', () => {
+            videojs.log('播放器解析出错!');
+        });
     });
-  };
-  onMounted(() => {
+    const myPlayer = videojs(m3u8_video.value, options, function () {
+        const baseComponent = videojs.getComponent('Component');
+        const myComponent = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${shang}" />`,
+                    title: '上', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 0, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent2 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${xia}" />`,
+                    title: '下', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 1, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent3 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${zuo}" />`,
+                    title: '左', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 2, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent4 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${you}" />`,
+                    title: '右', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 3, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent5 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${zuoshang}" />`,
+                    title: '左上', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 4, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent6 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${zuoxia}" />`,
+                    title: '左下', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 5, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent7 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${youshang}" />`,
+                    title: '右上', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 6, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent8 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${youxia}" />`,
+                    title: '右下', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 7, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent9 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${fangda}" />`,
+                    title: '放大', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 8, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent10 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${suoxiao}" />`,
+                    title: '缩小', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 9, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        const myComponent11 = videojs.extend(baseComponent, {
+            constructor: function (player, options) {
+                baseComponent.apply(this, arguments);
+                this.on('click', this.clickIcon);
+            },
+            createEl: function () {
+                const divObj = videojs.dom.createEl('div', {
+                    className: 'vjs-my-components',
+                    innerHTML: `<img style="width:30px;height:30px;" src="${tingzhi}" />`,
+                    title: '暂停', // 提示文字
+                    style: {
+                        cursor: 'pointer', // 光标样式
+                    },
+                });
+                return divObj;
+            },
+            clickIcon: function () {
+                getQuery({ name: props.sonData }).then(res => {
+                    getRunTheCamera({ ...res.data[0], operation: 10, duration: 1000 }).then(res => {
+                        if (res == '失败') {
+                            ElMessage.error(res);
+                        } else {
+                            ElMessage({
+                                message: '成功',
+                                type: 'success',
+                            });
+                        }
+                    });
+                });
+            },
+        });
+        videojs.registerComponent('myComponent', myComponent);
+        videojs.registerComponent('myComponent2', myComponent2);
+        videojs.registerComponent('myComponent3', myComponent3);
+        videojs.registerComponent('myComponent4', myComponent4);
+        videojs.registerComponent('myComponent5', myComponent5);
+        videojs.registerComponent('myComponent6', myComponent6);
+        videojs.registerComponent('myComponent7', myComponent7);
+        videojs.registerComponent('myComponent8', myComponent8);
+        videojs.registerComponent('myComponent9', myComponent9);
+        videojs.registerComponent('myComponent10', myComponent10);
+        videojs.registerComponent('myComponent11', myComponent11);
+
+        const controlBar = myPlayer.getChild('controlBar');
+        if (controlBar) {
+            controlBar.addChild('myComponent');
+            controlBar.addChild('myComponent2');
+            controlBar.addChild('myComponent3');
+            controlBar.addChild('myComponent4');
+            controlBar.addChild('myComponent5');
+            controlBar.addChild('myComponent6');
+            controlBar.addChild('myComponent7');
+            controlBar.addChild('myComponent8');
+            controlBar.addChild('myComponent9');
+            controlBar.addChild('myComponent10');
+            controlBar.addChild('myComponent11');
+        } else {
+            console.error(
+                'Control bar not found. Make sure you have a control bar in your video player.'
+            );
+        }
+    });
+
+    const fullscreenToggle = videojs.extend(videojs.getComponent('Button'), {
+        constructor: function (player, options) {
+            videojs.getComponent('Button').apply(this, arguments);
+            this.controlText('全屏按钮');
+        },
+        handleClick: function () {
+            if (player.isFullscreen()) {
+                player.exitFullscreen();
+            } else {
+                player.requestFullscreen();
+            }
+        },
+    });
+
+    // Register the custom fullscreenToggle component
+    videojs.registerComponent('fullscreenToggle', fullscreenToggle);
+
+    // Create the custom fullscreenToggle button
+    const fullscreenButton = new fullscreenToggle(player);
+
+    // Add the fullscreen icon to the custom fullscreenToggle button
+    fullscreenButton.addClass('vjs-icon-fullscreen-enter'); // Use the correct Video.js fullscreen icon class
+    fullscreenButton.addClass('custom-fullscreen-btn');
+    // Find the controlBar node and add the custom fullscreenToggle button
+    const controlBar = player.getChild('controlBar');
+    if (controlBar) {
+        controlBar.addChild(fullscreenButton);
+    } else {
+        console.error(
+            'Control bar not found. Make sure you have a control bar in your video player.'
+        );
+    }
+};
+const getImageUrl = name => {
+    return new URL(`@/assets/images/${name}`, import.meta.url).href;
+};
+onMounted(() => {
     initPlay();
-  });
-  //直接改变路径测试
-  watch(
+});
+//直接改变路径测试
+watch(
     () => props.videoSrc,
     () => {
-      player.pause();
-      player.src(props.videoSrc);
-      player.load();
-      if (props.videoSrc) {
-        player.play();
-      }
+        player.pause();
+        player.src(props.videoSrc);
+        player.load();
+        if (props.videoSrc) {
+            player.play();
+        }
     }
-  );
-  onBeforeUnmount(() => {
+);
+onBeforeUnmount(() => {
     player?.dispose();
-  });
-  </script>
-  <style lang="scss" scoped>
-  .videoPlay {
+});
+</script>
+<style lang="scss" scoped>
+.videoPlay {
     width: 100%;
     height: 100%;
     .video-js {
-      height: 100%;
-      width: 100%;
-      object-fit: fill;
+        height: 100%;
+        width: 100%;
+        object-fit: fill;
     }
-  }
-  
-  :deep(.vjs-tech) {
+}
+
+:deep(.vjs-tech) {
     object-fit: fill;
-  }
-  </style>
-     
-  
+}
+.jietu {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+:deep() .custom-fullscreen-btn {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    z-index: 9999;
+}
+
+</style>
+<style>
+.vjs-my-components{
+    cursor: pointer !important;
+}
+</style>

src/layout/components/Navbar.vue

@@ -96,7 +96,7 @@ function logout() {
     })
         .then(() => {
             userStore.logOut().then(() => {
-                location.href = 'http://36.134.45.201:8000/index';
+                location.href = serverAPI.logHome;
             });
             localStorage.clear();
         })
@@ -127,8 +127,6 @@ const tabMode = () => {
         document.querySelector('.mode').innerText = '列表模式';
         window.document.querySelector('#screenfull').style.display = 'block';
     }
-
-    console.log();
 };
 </script>
 

src/main.js

@@ -14,9 +14,6 @@ import store from './store'
 import router from './router'
 import directive from './directive' // directive
 
-
-
-
 // 注册指令
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
@@ -47,8 +44,8 @@ import TreeSelect from '@/components/TreeSelect'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 
-const app = createApp(App)
 
+const app = createApp(App)
 // 全局方法挂载
 app.config.globalProperties.useDict = useDict
 app.config.globalProperties.download = download

src/permission.js

@@ -8,10 +8,11 @@ import { isRelogin } from '@/utils/request'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
+import cache from '@/plugins/cache'
 
 NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/transitional'];
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/transitional'];
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
@@ -22,10 +23,10 @@ router.beforeEach((to, from, next) => {
       next({ path: '/' })
       NProgress.done()
     } else {
-      if (useUserStore().roles.length === 0) {
+      if (useUserStore().roles.length === 0 && cache.session.get('logintime')) {
         isRelogin.show = true
         // 判断当前用户是否已拉取完user_info信息
-        useUserStore().getInfo().then(() => {
+        useUserStore().getInfo().then((res) => {
           isRelogin.show = false
           usePermissionStore().generateRoutes().then(accessRoutes => {
             // 根据roles权限生成可访问的路由表
@@ -52,7 +53,10 @@ router.beforeEach((to, from, next) => {
       // 在免登录白名单，直接进入
       next()
     } else {
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+      // next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+      useUserStore().logOut().then(() => {
+        window.open(serverAPI.logHome, '_blank');
+      })
       NProgress.done()
     }
   }

src/router/index.js

@@ -88,21 +88,7 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  },
-  {
-    path: '/manage',
-    component: Layout,
-    hidden: true,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'manage',
-        component: () => import('@/views/system/user/manage/index'),
-        name: 'manage',
-        meta: { title: '后台管理', icon: 'user' }
-      }
-    ]
-  }
+  }, 
 ]
 
 // 动态路由，基于用户权限动态去加载

src/store/modules/user.js

@@ -1,7 +1,8 @@
 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import defAva from '@/assets/images/profile.jpg'
-
+import cache from '@/plugins/cache'
+import { decrypt } from '@/utils/jsencrypt'
 const useUserStore = defineStore(
   'user',
   {
@@ -15,15 +16,18 @@ const useUserStore = defineStore(
     actions: {
       // 登录
       login(userInfo) {
-        const username = userInfo.username.trim()
-        const password = userInfo.password
-        const code = userInfo.code
-        const uuid = userInfo.uuid
+        // const username = userInfo.username.trim()
+        // const password = encrypt(userInfo.password)
+        // // const password = userInfo.password
+        // const code = userInfo.code
+        // const uuid = userInfo.uuid
+        const ticket = userInfo.ticket
         return new Promise((resolve, reject) => {
-          login(username, password, code, uuid).then(res => {
-            setToken(res.token)
-            this.token = res.token
-            resolve()
+          login(ticket).then(res => {
+            setToken(res.data.accessToken)
+            this.token = res.data.accessToken
+            cache.session.set('logintime', 'logintime')
+            resolve(res)
           }).catch(error => {
             reject(error)
           })
@@ -35,7 +39,6 @@ const useUserStore = defineStore(
           getInfo().then(res => {
             const user = res.user
             const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
-
             if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
               this.roles = res.roles
               this.permissions = res.permissions

src/utils/auth.js

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'Admin-Token'
+const TokenKey = 'Admin-Token-QDSZSN_SCJG_10'
 
 export function getToken() {
   return Cookies.get(TokenKey)

src/utils/download.js

@@ -7,7 +7,6 @@ import {download} from "@/utils/request";
  * 整体代码都不需要变，你只需要调用这个我写的downLoadFile(value)函数，在点击下载按钮的时候，通过@click方法调用这个函数，传入那个文件路径就行，文件路径就是若依框架的/profile/upload/日期/文件名那个路径，这个路径看不懂就不要用了！
  */
 export function downLoadFile(value){
-    console.log(111);
   //根据文件路径参数，按斜杠进行分割，取得文件名，这是download函数需要的第三个参数
   let list = value.split("/");
   let fileName = list[list.length-1];
@@ -17,9 +16,5 @@ export function downLoadFile(value){
   }
   /** request里面的download下载函数 */
   //download函数是若依自带的，第一个参数是请求的url路径，不需要变，这个路径下的controller后台方法也是若依写好封装好了的。
-  console.log(params);
-  console.log(fileName);
   download("/common/download/resource", params, fileName);
-  console.log("文件名");
-  console.log("value");
 }

src/utils/permission.js

@@ -20,7 +20,6 @@ export function checkPermi(value) {
     }
     return true
   } else {
-    console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
     return false
   }
 }
@@ -45,7 +44,6 @@ export function checkRole(value) {
     }
     return true
   } else {
-    console.error(`need roles! Like checkRole="['admin','editor']"`)
     return false
   }
 }

src/utils/request.js

@@ -20,34 +20,6 @@ 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
@@ -84,7 +56,6 @@ service.interceptors.request.use(config => {
       const interval = 1000;                       // 间隔时间(ms)，小于此时间视为重复提交
       if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
         const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
         return Promise.reject(new Error(message))
       } else {
         cache.session.setJSON('sessionObj', requestObj)
@@ -93,7 +64,6 @@ service.interceptors.request.use(config => {
   }
   return config
 }, error => {
-  console.log(error)
   Promise.reject(error)
 })
 
@@ -113,15 +83,21 @@ service.interceptors.response.use(res => {
       ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
         isRelogin.show = false;
         useUserStore().logOut().then(() => {
-          location.href = 'http://36.134.45.201:8000/index';
+          location.href = serverAPI.logHome;
         })
       }).catch(() => {
         isRelogin.show = false;
       });
     }
     localStorage.clear();
+    useUserStore().logOut().then(() => {
+      location.href = serverAPI.logHome;
+    })
     return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
   } else if (code === 500) {
+    if (msg == '用户不存在/密码错误') {
+      window.localStorage.clear();
+    }
     ElMessage({ message: msg, type: 'error' })
     return Promise.reject(new Error(msg))
   } else if (code === 601) {
@@ -135,7 +111,6 @@ service.interceptors.response.use(res => {
   }
 },
   error => {
-    console.log('err' + error)
     let { message } = error;
     if (message == "Network Error") {
       message = "后端接口连接异常";
@@ -170,7 +145,6 @@ export function download(url, params, filename, config) {
     }
     downloadLoadingInstance.close();
   }).catch((r) => {
-    console.error(r)
     ElMessage.error('下载文件出现错误，请联系管理员！')
     downloadLoadingInstance.close();
   })

src/views/Transitional.vue

@@ -12,6 +12,9 @@ import useUserStore from '@/store/modules/user';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 import { ref, onMounted, inject, reactive, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { setToken, removeToken } from '@/utils/auth';
+
 const Route = useRoute();
 
 const userStore = useUserStore();
@@ -19,20 +22,14 @@ const router = useRouter();
 const { proxy } = getCurrentInstance();
 let message = ref('加载中，请稍侯.....');
 let loginForm = ref({
-    username: '',
-    password: '',
-    rememberMe: false,
-    code: '',
-    uuid: '',
+    ticket: '',
 });
+
 onMounted(() => {
-    loginForm.value.password = '';
     getName();
 });
-if (window.localStorage.getItem('userName')) {
-    getUserInfo();
-}
 function getName(params) {
+    removeToken();
     //获取当前URL
     var url = document.location.href;
     //声明一个对象
@@ -49,58 +46,60 @@ function getName(params) {
             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');
-    }
-}
+    // if (getRequest.ticket) {
+    //     window.localStorage.setItem('ticket', getRequest.ticket);
+    //     axios
+    //         .get(
+    //             `${serverAPI.baseUrl}/equipment/getUser?ticket=${getRequest.ticket}&url=${serverAPI.api}`
+    //         )
+    //         .then(response => {
+    //             console.log(response);
+    //             if (response.data.data.deptCode == '-1') {
+    //                 window.localStorage.setItem('divisions', '370211');
+    //                 window.localStorage.setItem('deptName', '青岛西海岸新区');
+    //                 window.localStorage.setItem('userName', response.data.data.userName);
+    //                 loginForm.value.username = response.data.data.userName;
+    //             } else {
+    //                 window.localStorage.setItem('divisions', response.data.data.deptCode);
+    //                 window.localStorage.setItem(
+    //                     'deptName',
+    //                     response.data.data.deptCode.length == 6
+    //                         ? '青岛西海岸新区'
+    //                         : response.data.data.deptName
+    //                 );
+    //                 window.localStorage.setItem('userName', response.data.data.userName);
+    //                 loginForm.value.username = response.data.data.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();
-                }
-            });
-    }
+    loginForm.value.ticket = getRequest.ticket;
+    userStore
+        .login(loginForm.value)
+        .then(response => {
+            if (response.data.deptCode == '-1') {
+                window.localStorage.setItem('divisions', '370211');
+                window.localStorage.setItem('deptName', '青岛西海岸新区');
+                window.localStorage.setItem('userName', response.data.userName);
+            } else {
+                window.localStorage.setItem('divisions', response.data.deptCode);
+                window.localStorage.setItem(
+                    'deptName',
+                    response.data.deptCode.length == 6
+                        ? '青岛西海岸新区'
+                        : response.data.deptName
+                );
+                window.localStorage.setItem('userName', response.data.userName);
+            }
+            router.push({ path: redirect.value || '/' });
+        })
+        .catch(() => {
+            loading.value = false;
+            // 重新获取验证码
+            if (captchaEnabled.value) {
+                getCode();
+            }
+        });
 }
 
 const loginRules = {

src/views/chzl/chzl.vue

@@ -0,0 +1,335 @@
+<template>
+    <div class="app-container">
+        <el-form
+            :model="queryParams"
+            ref="queryRef"
+            :inline="true"
+            v-show="showSearch"
+            label-width="68px"
+        >
+            <el-form-item label="病害名称" prop="name">
+                <el-input
+                    v-model="queryParams.name"
+                    placeholder="请输入病害名称"
+                    clearable
+                    @keyup.enter="handleQuery"
+                />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                    type="primary"
+                    plain
+                    icon="Plus"
+                    @click="handleAdd"
+                    v-hasPermi="['system:chzl:add']"
+                >
+                    新增
+                </el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table
+            v-loading="loading"
+            :data="chzlList"
+            max-height="75vh"
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column label="病害名称" align="center" prop="name" />
+            <el-table-column
+                label="防治方法"
+                align="center"
+                prop="fzff"
+            />
+            <el-table-column
+                label="发病症状"
+                align="center"
+                prop="xttz"
+            />
+            <el-table-column :key="index" align="center" label="详情">
+                <template #default="scope">
+                    <span
+                        class="Guidance"
+                        style="cursor: pointer; color: rgba(100, 195, 164, 1)"
+                        @click="GuidanceClick(scope.row)"
+                    >
+                        查看详情
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template #default="scope">
+                    <el-button
+                        link
+                        type="primary"
+                        icon="Delete"
+                        @click="handleDelete(scope.row)"
+                        v-hasPermi="['system:chzl:remove']"
+                    >
+                        删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+        />
+
+        <!-- 添加或修改病害对话框 -->
+        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+            <el-form ref="chzlRef" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="病害名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入病害名称" />
+                </el-form-item>
+                <el-form-item label="防治方法" prop="fzff">
+                    <el-input v-model="form.fzff" placeholder="请输入防治方法" />
+                </el-form-item>
+                <el-form-item label="发病症状" prop="xttz">
+                    <el-input v-model="form.xttz" placeholder="请输入发病症状" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">确 定</el-button>
+                    <el-button @click="cancel">取 消</el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <el-dialog v-model="GuidanceFlag" title="指导意见" width="50%" center>
+            <div class="titleDivs">
+                <div style="height: 60px; width: 6px; background: rgba(100, 195, 164, 1)"></div>
+                <div style="height: 60px; width: 6px; background: #fff"></div>
+                <div style="height: 60px; width: 3px; background: rgba(100, 195, 164, 0.6)"></div>
+                <h2
+                    style="
+                        background: #fff;
+                        height: 60px;
+                        padding: 20px;
+                        font-size: 28px;
+                        font-weight: 800;
+                    "
+                >
+                    {{ GuidanceTxt.name }}
+                </h2>
+            </div>
+            <div class="GuidanceDiv">
+                <div class="GuidanceContent">
+                    <h3 style="color: rgba(100, 195, 164, 1); font-weight: 600; display: flex">
+                        <img v-if="label3 == '虫情监测仪'" src="@/assets/images/chong.png" />
+                        <img v-if="label3 == '大田视频病害监测'" src="@/assets/images/bing.png" />
+                        &nbsp; 形态特征
+                    </h3>
+                    <p style="white-space: pre-line">&emsp;{{ GuidanceTxt.xttz }}</p>
+                    <h3 style="color: rgba(100, 195, 164, 1); font-weight: 600; display: flex">
+                        <img src="@/assets/images/fang.png" />
+                        &nbsp; 防治方法
+                    </h3>
+                    <p style="white-space: pre-wrap">{{ GuidanceTxt.fzff }}</p>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup name="Chzl">
+import { getChzl, listChzl, addChzl, delChzl } from '@/api/system/chzl.js';
+
+const { proxy } = getCurrentInstance();
+
+const chzlList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref('');
+let GuidanceFlag = ref(false);
+let GuidanceArr = ref([]);
+let GuidanceTxt = ref([]);
+
+const data = reactive({
+    form: {},
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        id: null,
+        name: null,
+        bt: null,
+        nr: null,
+    },
+    rules: {},
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询病害列表 */
+function getList() {
+    loading.value = true;
+    listChzl({...queryParams.value}).then(response => {
+        chzlList.value = response.data;
+        total.value = response.total;
+        loading.value = false;
+    });
+}
+
+// 取消按钮
+function cancel() {
+    open.value = false;
+    reset();
+}
+
+// 表单重置
+function reset() {
+    form.value = {
+        name: null,
+        xttz: null,
+        fzff: null,
+    };
+    proxy.resetForm('chzlRef');
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+    queryParams.value.pageNum = 1;
+    getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+    proxy.resetForm('queryRef');
+    handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+    ids.value = selection.map(item => item.id);
+    single.value = selection.length != 1;
+    multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+    reset();
+    open.value = true;
+    title.value = '添加病害';
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+    reset();
+    const _id = row.id || ids.value;
+    getChzl(_id).then(response => {
+        form.value = response.data;
+        open.value = true;
+        title.value = '修改病害';
+    });
+}
+
+/** 提交按钮 */
+function submitForm() {
+    proxy.$refs['chzlRef'].validate(valid => {
+        if (valid) {
+            if (form.value.id != null) {
+                updateChzl(form.value).then(response => {
+                    proxy.$modal.msgSuccess('修改成功');
+                    open.value = false;
+                    getList();
+                });
+            } else {
+                addChzl(form.value).then(response => {
+                    proxy.$modal.msgSuccess(response.msg);
+                    open.value = false;
+                    getList();
+                });
+            }
+        }
+    });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+    const _ids = row.name;
+    proxy.$modal
+        .confirm('是否确认删除"' + _ids + '"的数据项？')
+        .then(function () {
+            return delChzl({ name: _ids });
+        })
+        .then(() => {
+            getList();
+            proxy.$modal.msgSuccess('删除成功');
+        })
+        .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+    proxy.download(
+        'system/chzl/export',
+        {
+            ...queryParams.value,
+        },
+        `chzl_${new Date().getTime()}.xlsx`
+    );
+}
+const GuidanceClick = e => {
+    GuidanceFlag.value = true;
+    GuidanceTxt.value = e;
+};
+
+getList();
+</script>
+
+<style lang="scss" scoped>
+:deep() th {
+    color: black !important;
+}
+:deep().el-table__expand-icon {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+}
+/*2.展开按钮未点击的样式是加号带边框*/
+:deep().el-table__expand-icon {
+    content: url('/Users/luce/Desktop/数字三农/Agriculture-front-end/src/assets/images/zhankais.png') !important;
+    padding: 2px;
+}
+/*3.展开按钮点击后的样式是减号带边框*/
+:deep() .el-table__expand-icon--expanded {
+    content: url('/Users/luce/Desktop/数字三农/Agriculture-front-end/src/assets/images/shouqi.png') !important;
+}
+.titleDivs {
+    display: flex;
+    height: 57px;
+    align-items: center;
+    background-image: url('@/assets/images/bgx.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+:deep().el-table {
+.cell {
+    white-space: nowrap;
+}
+} 
+.GuidanceDiv {
+    width: 100%;
+    height: 300px;
+    overflow: hidden;
+    overflow-y: auto;
+    .GuidanceContent {
+        overflow-y: auto;
+    }
+}
+</style>

src/views/crops/area/Area.vue

@@ -383,12 +383,6 @@ let dic = {
     白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
     其他: 'rgba(250, 129, 109, 0.8)',
 };
-watch(
-    () => Township.arr,
-    val => {
-        console.log('val:', val);
-    }
-);
 //行政区划数据
 var data = {
     title: [],
@@ -405,11 +399,6 @@ let dd = {
     白菜和萝卜: [],
     其他: [],
 };
-let areatext = '8383894';
-
-const change = () => {
-    console.log(checkedCities.value);
-};
 
 //表格数据
 let tableData = [
@@ -447,7 +436,6 @@ let TypeTime = {
 
 // 组件挂载完成后执行
 onMounted(() => {
-    getArea(); //请求
     getTownships();
     getvillages(); //村
 
@@ -463,7 +451,7 @@ onMounted(() => {
     let leftWra = document.querySelector('.leftWra');
     leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
     let rightWra = document.querySelector('.rightWra');
-    rightWra.style.transform = 'translate(107%,0)';
+    rightWra.style.transform = 'translate(101%,0)';
 });
 
 /*-------------地图------------------------*/
@@ -747,7 +735,6 @@ function getFarmland() {
         method: 'get',
     })
         .then(res => {
-            console.log('农田：', res);
             formLandRef.value = res.data.features;
         })
         .catch(err => {});
@@ -797,11 +784,6 @@ function layerClick() {
                                 if (data.length > 0) {
                                     let newData = data['0'];
                                     if (newData.properties && newData.properties.XZDM) {
-                                        console.log('XZDM:', XZDM);
-                                        console.log(
-                                            'newData.properties.XZDM:',
-                                            newData.properties.XZDM
-                                        );
                                         if (XZDM !== newData.properties.XZDM) {
                                             flag.value = true;
                                             //防止重复加载
@@ -848,10 +830,6 @@ function layerClick() {
                                                     let info = entitys[na]._info;
                                                     // entitys[na].label.show = true
                                                     townZuowu.value = info; //保存数据
-                                                    console.log(
-                                                        townZuowu.value,
-                                                        '------------------'
-                                                    );
                                                     showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
                                                     viewer.scene.postRender.addEventListener(
                                                         infoWindowPostRender
@@ -908,7 +886,6 @@ function villageClick(layers, xy, level, cartographic, movement) {
                 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],
@@ -936,7 +913,6 @@ function villageClick(layers, xy, level, cartographic, movement) {
 
                                 // 后插和村
                                 if (newData.properties.XZQDM === '370211104217') {
-                                    // console.log('后河岔村委会')
                                     const rectangle = Cesium.Rectangle.fromDegrees(
                                         item.bbox[0],
                                         item.bbox[1],
@@ -1047,16 +1023,11 @@ function rightFoldClick() {
         rightWra.style.transform = 'translate(0,0)';
     } else {
         let rightWra = document.querySelector('.rightWra');
-        rightWra.style.transform = 'translate(107%,0)';
+        rightWra.style.transform = 'translate(101%,0)';
     }
 }
 
 /*------------------接口--------------------*/
-const getArea = () => {
-    getarea({ time: '2023-04-25', subregion: '1', parent: '黄岛区' }).then(res => {
-        console.log(res);
-    });
-};
 //镇
 const getTownships = () => {
     getTownship().then(res => {
@@ -1167,7 +1138,6 @@ const selectTab = () => {
         },
     ];
     if (value.value == '370211') {
-        console.log('sssssssssssssssssssss');
         removeWms(['village_CQL']);
         XZDM=null
         removeWms(['aaa']);
@@ -1331,7 +1301,6 @@ const selectTab = () => {
     ];
 
     let arr = [...Township.arr];
-    console.log('arr:', arr);
     arr.forEach(item => {
         if (item.properties.XZDM == value.value) {
             viewer.camera.flyTo({
@@ -1346,13 +1315,11 @@ const selectTab = () => {
         }
         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)];
     });
     ASdivision();
@@ -1383,8 +1350,6 @@ const selectTab = () => {
         townZuowu.value = {
             label: arr,
         };
-        console.log();
-        console.log(arr);
         showOverlayChart({ x: 642, y: 312 });
     });
 };
@@ -1768,7 +1733,6 @@ function areachar() {
 }
 
 function typesof() {
-    console.log(Pie3D.arr);
     const typesofDivIntance = echarts.init(typesofDiv.value);
     let isSelected = '';
     let isHovered = '';
@@ -2273,10 +2237,6 @@ function farmland() {
         // },
     };
 
-    farmlandDivIntance.on('click', function (params) {
-        console.log(params.name);
-    });
-    farmlandDivIntance.on('click', param => ChartClick(param));
     option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
     useEcharts(farmlandDivIntance, option);
 }
@@ -2376,7 +2336,6 @@ function back() {
     value.value = '370211';
     selectTab();
     if (flag.value === '1') {
-        console.log(flag.value);
         addWms('shuzisannong:huangdaoqu_town', 'tl');
     }
     viewer.camera.flyTo({
@@ -2417,10 +2376,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],
@@ -2769,14 +2725,12 @@ function ASdivision() {
 /*--------------------------------------------------------------------------------------------*/
 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(
@@ -2807,8 +2761,6 @@ function getAreaFenlei() {
                         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,
@@ -3565,17 +3517,7 @@ $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;
-    }
+    background:#fff;
 }
 
 .el-select__popper {

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

@@ -14,36 +14,63 @@
                     value-format="YYYY-MM-DD"
                     type="date"
                     placeholder="选择日期"
-                />
+                    :disabledDate="disabledDateFun"
+                >
+                    <template #default="cell">
+                        <div class="cell" :class="{ current: cell.isCurrent }">
+                            <span class="text">{{ cell.text }}</span>
+                            <span v-if="isHoliday(cell)" class="holiday" />
+                        </div>
+                    </template>
+                </el-date-picker>
             </div>
             <div class="rightTop">
                 <div class="title">
+                    <div
+                        style="
+                            width: 3px;
+                            height: 19px;
+                            opacity: 1;
+                            background: rgba(100, 195, 164, 1);
+                            margin-right: 12px;
+                        "
+                    ></div>
                     <span>预警信息发布</span>
                 </div>
                 <div class="farmlandDiv">
                     <div class="radioDiv">
                         预警范围：
                         <el-radio-group @change="onclick()" v-model="radio1" class="ml-4">
-                            <el-radio :label="5000" size="large" style="color: white">5km</el-radio>
-                            <el-radio :label="10000" size="large" style="color: white">
-                                10km
-                            </el-radio>
+                            <el-radio :label="5000" size="large">5km</el-radio>
+                            <el-radio :label="10000" size="large">10km</el-radio>
                         </el-radio-group>
                     </div>
                     <div class="selectDiv">
                         站点名称:
-                        <el-select popper-class="select_city" v-model="zdmcValue" placeholder="请选择">
+                        <el-select
+                            popper-class="select_city"
+                            style="width: 76%"
+                            v-model="zdmcValue"
+                            placeholder="请选择"
+                            teleported="false"
+                        >
                             <el-option
                                 v-for="item in zdmcList"
                                 :key="item.msName"
                                 :label="item.msName"
                                 :value="item.msName"
+                                :title="item.msName"
                             ></el-option>
                         </el-select>
                     </div>
-                    <div  class="selectDiv" style="margin-top: 10px">
+                    <div class="selectDiv" style="margin-top: 10px">
                         预警情况:
-                        <el-select popper-class="select_city" v-model="warnValue" placeholder="请选择">
+                        <el-select
+                            popper-class="select_city"
+                            style="width: 76%"
+                            v-model="warnValue"
+                            placeholder="请选择"
+                        >
                             <el-option
                                 v-for="item in warnList"
                                 :key="item.flag"
@@ -59,10 +86,12 @@
 
                     <el-table
                         :cell-style="{ textAlign: 'center' }"
-                        :header-cell-style="{ 'text-align': 'center', color: 'white' }"
+                        :header-cell-style="{
+                            'text-align': 'center',
+                            color: 'rgba(102, 102, 102, 1)',
+                        }"
                         :data="pageData"
                         style="width: 100%"
-                        max-height="470px"
                         @selection-change="handleSelectionChange"
                     >
                         <el-table-column type="selection" width="20" />
@@ -94,32 +123,31 @@
             <div class="rightFoldDiv" @click="rightFoldClick()">
                 <el-tooltip
                     :disabled="!rightWraFlag"
-                    :show-arrow="false"
                     hide-after="0"
+                    :show-arrow="false"
                     show-after="200"
                     class="box-item"
                     effect="dark"
                     content="收起"
                     placement="top"
                 >
-                    <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
+                    <el-icon v-if="rightWraFlag">
+                        <img src="@/assets/images/shouhuis.png" />
+                    </el-icon>
                 </el-tooltip>
                 <el-tooltip
                     :disabled="rightWraFlag"
-                    :show-arrow="false"
                     hide-after="0"
+                    :show-arrow="false"
                     show-after="200"
                     class="box-item"
                     effect="dark"
                     content="展开"
                     placement="top"
                 >
-                    <img
-                        class="imgrotate"
-                        v-if="!rightWraFlag"
-                        src="@/assets/images/close1.png"
-                        alt=""
-                    />
+                    <el-icon v-if="!rightWraFlag">
+                        <img src="@/assets/images/zhankaiss.png" />
+                    </el-icon>
                 </el-tooltip>
             </div>
         </div>
@@ -172,6 +200,8 @@ import {
     meteorologicalsPeople,
     meteorology,
     zdmc,
+    getSeeWarning,
+    getSeeWarningData,
 } from '@/api/meteorological/monitor/information.js';
 import { ElMessage } from 'element-plus';
 import 'echarts-gl';
@@ -208,17 +238,22 @@ let dic = {
     重度干热风: { color: 'rgba(234, 165, 93, 1)', disabled: false },
 };
 const warnValue = ref();
+const holidays = ref([]);
 
+const isHoliday = ({ dayjs }) => {
+    return holidays.value.includes(dayjs.format('YYYY-MM-DD'));
+};
 function query() {
     getmeteorology();
 }
-let code=window.localStorage.getItem('deptName')
+let code = window.localStorage.getItem('deptName');
 function reset() {
-    value.value = getYesterday().toJSON().substr(0, 10);
+    // value.value = getYesterday().toJSON().substr(0, 10);
     radio1.value = 5000;
     zdmcValue.value = '';
     warnValue.value = '';
     getmeteorology();
+    meteorologicals();
 }
 
 const warnList = [
@@ -236,6 +271,23 @@ const warnList = [
     },
 ];
 
+const disabledDateFun = time => {
+    const currentDate = new Date();
+    currentDate.setHours(0, 0, 0, 0); // Set hours, minutes, seconds, and milliseconds to 0
+    if (time.getTime() > currentDate.getTime()) {
+        return {
+            disabled: true,
+            style: {
+                // Define your disabled date style here
+                color: 'red',
+                textDecoration: 'line-through',
+                // Add more CSS properties as needed
+            },
+        };
+    } else {
+        return false; // Enable dates in the past or today
+    }
+};
 const rules = reactive({
     power: [
         {
@@ -313,10 +365,10 @@ function updatePagedData() {
 // );
 
 function getIcon(val) {
-    if (val === '轻度干旱') return ganhan1;
-    if (val === '中度干旱') return ganhan2;
-    if (val === '严重干旱') return ganhan3;
-    if (val === '特大干旱') return ganhan4;
+    if (val === '轻度热干风') return ganhan1;
+    if (val === '中度热干风') return ganhan2;
+    if (val === '严重热干风') return ganhan3;
+    if (val === '特大热干风') return ganhan4;
     if (val === '无灾害') return ganhan0;
 }
 
@@ -335,25 +387,22 @@ let map = ref(null);
 const cun = () => {
     layers = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
-            url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84@huangdaoqu_bianjie',
-            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
+            url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
             cacheEnabled: false,
         }),
-        name: 'huangdaoqu_village',
+        name: 'CJQY3702112019WGS84',
         projection: 'EPSG:4326', //3857
         zIndex: 9999,
     });
     map.addLayer(layers);
-    // var layersArray = map.getLayers();
-    // layersArray.insertAt(999, layers);
 };
 const zhen = () => {
     var layer = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
-            url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84@huangdaoqu_bianjie',
-            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
+            url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
             cacheEnabled: false,
         }),
+        name: 'XJQY3702112019WGS84',
         projection: 'EPSG:4326', //3857
         zIndex: 9999,
     });
@@ -364,12 +413,14 @@ let layers = ref(null); //村
 onMounted(() => {
     value.value = getYesterday().toJSON().substr(0, 10);
     getmeteorology();
+    getSeeWarningDatas();
+    getSeeWarnings();
     //地图
     initMap();
 
     meteorologicals();
     let rightWra = document.querySelector('.rightWra');
-    rightWra.style.transform = 'translate(107%,0)';
+    rightWra.style.transform = 'translate(101%,0)';
 });
 onUpdated(() => {
     document.querySelector('.mode').style.display = 'none';
@@ -387,6 +438,7 @@ function getmeteorology() {
         flag: 4,
         msName: zdmcValue.value,
         warning: warnValue.value,
+        divisions: code,
     }).then(res => {
         SaveResultsDiv.value = res.data;
         updatePagedData();
@@ -394,7 +446,7 @@ function getmeteorology() {
 }
 
 function getZdmc() {
-    zdmc().then(res => {
+    zdmc({ divisions: code }).then(res => {
         zdmcList.value = res.data;
     });
 }
@@ -414,10 +466,11 @@ function initMap() {
         }),
         layers: [
             new ol.layer.Tile({
-                source: new ol.source.Tianditu({
-                    layerType: 'img',
-                    key: '1d109683f4d84198e37a38c442d68311',
+                source: new ol.source.XYZ({
+                    url: `${serverAPI.tiandituLayers}`,
+                    projection: serverAPI.tiandituLayers == 'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'?'EPSG:4326':'EPSG:3857',
                 }),
+                preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
             }),
         ],
     });
@@ -498,9 +551,9 @@ function initMap() {
       <div class="info-window">
       <div  class="close-btn" ><span>站点信息</span><img src="${guanbi}" alt=""/> </div>
       <div class="content" style="color:white;font-size: 16px">
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>名称:</span><span>${clickInformationData.name}</span></div>
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>经度:</span><span>${clickInformationData.lon}</span></div>
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>维度:</span><span>${clickInformationData.lat}</span></div>
+        <div class="line" style="margin-top: 10px"><div class="label">名称:</div><span>${clickInformationData.name}</span></div>
+        <div class="line" style="margin-top: 10px"><div class="label">经度:</div><span>${clickInformationData.lon}</span></div>
+        <div class="line" style="margin-top: 10px"><div class="label">纬度:</div><span>${clickInformationData.lat}</span></div>
       </div>
       </div>
     `;
@@ -526,9 +579,9 @@ function initMap() {
       <div class="info-window" >
       <div  class="close-btn" ><span>人员信息</span><img src="${guanbi}" alt=""/> </div>
       <div class="content" style="color:white;font-size: 16px">
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>姓名:</span><span>${clickInformationData.name}</span></div>
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>手机:</span><span>${clickInformationData.phone}</span></div>
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>位置:</span><span>${clickInformationData.region}</span></div>
+        <div class="line" style="margin-top: 10px"><div class="label">姓名:</div><span>${clickInformationData.name}</span></div>
+        <div class="line" style="margin-top: 10px"><div class="label">手机:</div><span>${clickInformationData.phone}</span></div>
+        <div class="line" style="margin-top: 10px"><div class="label">位置:</div><span>${clickInformationData.region}</span></div>
       </div>
       </div>
     `;
@@ -632,7 +685,7 @@ function rightFoldClick() {
         rightWra.style.transform = 'translate(0,0)';
     } else {
         let rightWra = document.querySelector('.rightWra');
-        rightWra.style.transform = 'translate(107%,0)';
+        rightWra.style.transform = 'translate(101%,0)';
     }
 }
 
@@ -644,6 +697,7 @@ const onclick = () => {
         data: value.value,
         alertRange: radio1.value,
         flag: 4,
+        divisions: code,
     }).then(res => {
         SaveResultsDiv.value = res.data;
         updatePagedData();
@@ -663,7 +717,7 @@ const meteorologicals = () => {
         map.removeLayer(personIconLayer.value[i]);
     }
     personIconLayer.value = [];
-    getmeteorologyEquipment({ flag: 4, data: value.value }).then(res => {
+    getmeteorologyEquipment({ flag: 4, data: value.value ,divisions:code }).then(res => {
         informationData.value = res.data;
         for (const i in informationData.value) {
             const centerLonLat = [
@@ -690,7 +744,7 @@ const meteorologicals = () => {
             // 为圆形创建一个样式
             const circleStyle = new ol.style.Style({
                 stroke: new ol.style.Stroke({
-                    color: 'rgb(255,255,0)',
+                    color: dic[informationData.value[i].warning] && dic[informationData.value[i].warning].color,
                     width: 2,
                 }),
             });
@@ -761,7 +815,12 @@ const meteorologicals = () => {
         }
     });
 
-    meteorologicalsPeople({ flag: 4, alertRange: radio1.value, data: value.value ,divisions:code}).then(res => {
+    meteorologicalsPeople({
+        flag: 4,
+        alertRange: radio1.value,
+        data: value.value,
+        divisions: code,
+    }).then(res => {
         peopleData.value = res.data;
 
         for (const i in peopleData.value) {
@@ -824,6 +883,7 @@ const selectTime = () => {
         data: value.value,
         alertRange: radio1.value,
         flag: 4,
+        divisions: code,
     }).then(res => {
         SaveResultsDiv.value = res.data;
         updatePagedData();
@@ -855,11 +915,35 @@ const getmeteorologicalFreezes = () => {
         SaveResultsDiv.value = res.data;
     });
 };
+const getSeeWarnings = () => {
+    getSeeWarning({ flag: 4, divisions: code }).then(res => {
+        if (res.data.length < 1) {
+            ElMessage({
+                message: '近1周暂无预警',
+                type: 'success',
+            });
+        } else {
+            ElMessage({
+                message: `近1周${res.data.length}次预警`,
+                type: 'warning',
+            });
+        }
+    });
+};
+const getSeeWarningDatas = () => {
+    let arr = [];
+    getSeeWarningData({ flag: 4, divisions: code }).then(res => {
+        arr = [];
+        res.data.forEach(item => {
+            arr.push(item.dataTime);
+        });
+        holidays.value = arr;
+    });
+};
 </script>
 
 <style lang="scss" scoped>
 $height: calc(100vh - 100px);
-
 .center {
     width: 100%;
     height: 100%;
@@ -869,55 +953,41 @@ $height: calc(100vh - 100px);
     }
 
     .title {
-        width: 100%;
-        height: 45px;
-        background: url('@/assets/images/title.png');
-        background-repeat: no-repeat;
-        background-size: 110% 100%;
-        color: #fff;
+        width: 90%;
+        margin: 15px;
+        height: 37px;
+        border-radius: 3px 3px, 0px, 0px;
+        background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
         font-size: 18px;
         font-weight: 700;
-        line-height: 45px;
-        padding-left: 46px;
+        line-height: 37px;
+        padding-left: 16px;
         display: flex;
-        cursor: pointer;
         align-items: center;
+        cursor: pointer;
         justify-content: space-between;
 
-        :deep(.el-input__wrapper) {
-            width: 100px;
-            border-radius: 30px;
-            border: 1px solid rgba(23, 194, 180, 1);
-            background: rgba(41, 255, 255, 0.1);
-            height: 34px;
-        }
-
         span {
-            width: 80%;
+            width: 95%;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
-            background: linear-gradient(
-                180deg,
-                rgba(255, 255, 255, 1) 33.33%,
-                rgba(41, 255, 219, 1) 100%
-            );
+            font-size: 16px;
+            font-weight: 700;
+            color: rgba(51, 51, 51, 1);
+            background-clip: text;
             -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
 
         p {
-            width: 120px;
+            width: 79px;
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
-            background: linear-gradient(
-                180deg,
-                rgba(16, 111, 111, 1) 0%,
-                rgba(47, 214, 214, 1) 100%
-            );
-            border: 1.5px solid rgba(23, 194, 180, 1);
+            border-radius: 4px;
+            background: rgba(100, 195, 164, 1);
             display: flex;
+            color: rgba(255, 255, 255, 1);
             justify-content: center;
             align-items: center;
         }
@@ -928,33 +998,48 @@ $height: calc(100vh - 100px);
             .ol-overlaycontainer-stopevent {
                 .overlay1 div:first-child {
                     .info-window {
-                        padding: 10px;
-
+                        border-radius: 8px;
+                        background: rgba(255, 255, 255, 1);
+                        box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),
+                            0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
                         .close-btn {
                             color: white;
                             display: flex;
                             justify-content: space-between;
                             font-size: 22px;
-                            background: url('@/assets/images/top.png');
-                            padding: 3px 0 3px 40px;
+                            padding: 3px 0 3px 20px;
                             img {
                                 margin-right: 15px;
+                                width: 15px;
+                                height: 15px;
+                                margin: auto 10px;
                             }
+                            border-radius: 8px;
+                            color: rgba(100, 195, 164, 1);
+                            background: rgba(100, 195, 164, 0.05);
                         }
 
                         .content {
-                            background: url('@/assets/images/bottom.png') no-repeat;
-                            background-size: 100% 100%;
                             padding: 20px;
                             display: flex;
                             flex-direction: column;
-
                             .line {
-                                background: url('@/assets/images/chande.png');
                                 padding-left: 20px;
                                 margin: 10px;
                                 display: flex;
                                 align-items: center;
+                                .label {
+                                    color: rgba(63, 161, 128, 1);
+                                }
+                                span {
+                                    color: rgba(51, 51, 51, 1);
+                                    display: block;
+                                    min-width: 160px;
+                                    background: rgba(100, 195, 164, 0.1);
+                                    box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
+                                    text-align: center;
+                                    padding: 5px 5px;
+                                }
                             }
                         }
                     }
@@ -966,16 +1051,17 @@ $height: calc(100vh - 100px);
 
 .rightWra {
     position: absolute;
-    top: 10px;
-    right: 20px;
+    top: 0px;
+    right: 0px;
     width: 23%;
-    height: $height;
+    height: calc(100vh - 98px);
     opacity: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: rgba(2, 31, 26, 0.85);
-    box-shadow: inset 0 0 15px 6px rgba(41, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 1);
+    box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
+        0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
     transition: transform 1s;
 
     .farmlandHeader {
@@ -984,7 +1070,6 @@ $height: calc(100vh - 100px);
         font-weight: 400;
         letter-spacing: 0;
         align-items: center;
-        color: rgba(255, 255, 255, 1);
         margin: 20px 0;
         padding: 0 10px;
 
@@ -992,16 +1077,8 @@ $height: calc(100vh - 100px);
             .el-input__wrapper {
                 box-shadow: none;
                 border-radius: 4px;
-                background: transparent
-                    linear-gradient(
-                        180deg,
-                        rgba(38, 212, 191, 0.5) 0%,
-                        rgba(43, 186, 186, 0.5) 25.69%,
-                        rgba(45, 165, 181, 0.5) 66.67%,
-                        rgba(54, 111, 168, 0.5) 100%
-                    );
-
-                border: 1px solid rgba(137, 211, 245, 1);
+                background: rgba(100, 195, 164, 0.75);
+                border: 1px solid rgba(100, 195, 164, 1);
             }
 
             :deep(.el-input__inner) {
@@ -1011,19 +1088,20 @@ $height: calc(100vh - 100px);
     }
 
     .rightFoldDiv {
-        width: 30px;
+        width: 28px;
         height: 30px;
         position: absolute;
-        left: -8%;
+        left: 0;
         top: 50%;
-        transform: translate(0, -50%);
+        transform: translate(-100%, -50%);
         font-size: 30px;
         color: #ccc;
+        cursor: pointer;
     }
 
     .rightTop {
         width: 100%;
-        height: 88%;
+        height: calc(100% - 72px);
         opacity: 1;
         display: flex;
         flex-direction: column;
@@ -1036,8 +1114,8 @@ $height: calc(100vh - 100px);
             width: 95%;
             flex-direction: column;
             padding: 5px 10px 5px 10px;
-            color: rgba(255, 255, 255, 1);
-            height: 100%;
+            color: rgba(51, 51, 51, 1);
+            height: calc(100% - 67px);
 
             :deep(.el-table--fit) {
                 height: 90%;
@@ -1059,26 +1137,26 @@ $height: calc(100vh - 100px);
                     ::v-deep .el-input__wrapper {
                         box-shadow: none;
                         border-radius: 4px;
-                        background: transparent
-                            linear-gradient(
-                                180deg,
-                                rgba(38, 212, 191, 0.5) 0%,
-                                rgba(43, 186, 186, 0.5) 25.69%,
-                                rgba(45, 165, 181, 0.5) 66.67%,
-                                rgba(54, 111, 168, 0.5) 100%
-                            );
-
-                        border: none;
+                        background: rgba(255, 255, 255, 1);
+                        border: 1px solid rgba(219, 219, 219, 1);
                     }
                 }
             }
+            :deep(.el-input__wrapper) {
+                opacity: 1;
+                border-radius: 4px;
+                width: 70%;
+                .el-input__inner {
+                    color: rgba(51, 51, 51, 1);
+                }
+            }
 
             .btws {
                 display: flex;
-                justify-content: space-around;
                 align-items: center;
                 margin-top: 10px;
                 margin-bottom: 10px;
+                justify-content: center;
 
                 .el-button {
                     color: white;
@@ -1086,17 +1164,15 @@ $height: calc(100vh - 100px);
 
                     border: 1.5px solid rgba(23, 194, 180, 1);
                 }
-
                 .bt1 {
-                    background: linear-gradient(
-                        180deg,
-                        rgba(16, 111, 111, 1) 0%,
-                        rgba(47, 214, 214, 1) 100%
-                    );
+                    background: rgba(100, 195, 164, 1);
+                    border: 1px solid rgba(100, 195, 164, 1);
                 }
 
                 .bt2 {
-                    background: rgba(22, 94, 102, 1);
+                    background: rgba(255, 255, 255, 1);
+                    border: 1px solid rgba(219, 219, 219, 1);
+                    color: rgba(102, 102, 102, 1);
                 }
             }
 
@@ -1129,7 +1205,7 @@ $height: calc(100vh - 100px);
 
             :deep(.el-table) {
                 --el-table-border-color: none;
-                color: rgba(255, 255, 255, 1);
+                // color: rgba(255, 255, 255, 1);
             }
 
             :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
@@ -1183,7 +1259,6 @@ $height: calc(100vh - 100px);
         }
     }
 }
-
 :deep(.el-input__wrapper) {
     opacity: 1;
     border-radius: 4px;
@@ -1198,25 +1273,29 @@ $height: calc(100vh - 100px);
 .legend {
     position: absolute;
     right: 25%;
-    bottom: 7%;
+    bottom: 60px;
     width: 129px;
-    border: 1px solid rgba(4, 153, 153, 1);
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 1);
 
     // height: 50px;
     :deep(.el-collapse-item__header) {
-        background: rgba(2, 31, 26, 0.6);
-        color: rgba(255, 255, 255, 1);
+        border-radius: 4px;
+        color: rgba(51, 51, 51, 1);
+        font-size: 14px;
+        font-weight: 400;
         text-align: center;
         padding: 0 30px;
-        font-size: 14px;
+        .el-icon {
+            color: rgba(100, 195, 164, 1);
+        }
     }
 
-    //--el-collapse-content-bg-color {
-    //  background: rgba(2, 31, 26, 0.6);
-    //}
+    --el-collapse-content-bg-color {
+        background: rgba(2, 31, 26, 0.6);
+    }
 
     :deep(.el-collapse-item__content) {
-        background: rgba(2, 31, 26, 0.6);
         padding: 0 10px;
         padding-bottom: 10px;
     }
@@ -1224,12 +1303,20 @@ $height: calc(100vh - 100px);
     --el-collapse-border-color: none;
     --el-collapse-content-bg-color: none;
 
+    // opacity: 1;
+    // border-radius: 4px;
+    // background: rgba(2, 31, 26, 0.6);
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: flex-start;
+    // align-items: center;
+    // padding: 10px 10px 10px 10px;
     p {
         margin: 10px;
         font-size: 14px;
         font-weight: 400;
-        letter-spacing: 0;
-        line-height: 0;
+        letter-spacing: 0px;
+        line-height: 0px;
         color: rgba(255, 255, 255, 1);
         text-align: center;
     }
@@ -1242,32 +1329,60 @@ $height: calc(100vh - 100px);
             padding-left: 10px;
             font-size: 14px;
             font-weight: 400;
-            letter-spacing: 0;
-            line-height: 0;
-            color: rgba(255, 255, 255, 1);
+            letter-spacing: 0px;
+            line-height: 0px;
+            // color: rgba(255, 255, 255, 1);
             text-align: left;
         }
     }
 
+    // :deep(.el-checkbox__label) {
+    //     color: #fff;
+    // }
     :deep(.el-checkbox__label) {
-        color: black;
+        display: flex;
+        align-items: center;
     }
 }
+.cell {
+    height: 30px;
+    padding: 3px 0;
+    box-sizing: border-box;
+}
+.cell .text {
+    width: 24px;
+    height: 24px;
+    display: block;
+    margin: 0 auto;
+    line-height: 24px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 50%;
+}
+.cell.current .text {
+    background: #626aef;
+    color: #fff;
+}
+.cell .holiday {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: var(--el-color-danger);
+    border-radius: 50%;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+}
 </style>
 
 <style lang="scss">
+.disabled {
+    color: var(--el-datepicker-off-text-color) !important;
+    cursor:not-allowed !important;
+}
 .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;
-    }
+    background: #fff;
 }
 .el-select__popper {
     border: none !important;
@@ -1276,10 +1391,18 @@ $height: calc(100vh - 100px);
 
 .el-popper {
     border: none !important;
-    background: transparent !important;
+    background: #fff !important;
+    color: black !important;
 }
 
 .el-popper__arrow::before {
-    background: rgba(41, 255, 255, 0.7) !important;
+    display: none;
+}
+.el-select-dropdown {
+    position: absolute !important;
+    left: 0;
+    background: #fff !important;
+    border: 1px solid #ccc;
+    max-width: 230px;
 }
 </style>

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

@@ -14,36 +14,63 @@
                     value-format="YYYY-MM-DD"
                     type="date"
                     placeholder="选择日期"
-                />
+                    :disabledDate="disabledDateFun"
+                >
+                    <template #default="cell">
+                        <div class="cell" :class="{ current: cell.isCurrent }">
+                            <span class="text">{{ cell.text }}</span>
+                            <span v-if="isHoliday(cell)" class="holiday" />
+                        </div>
+                    </template>
+                </el-date-picker>
             </div>
             <div class="rightTop">
                 <div class="title">
+                    <div
+                        style="
+                            width: 3px;
+                            height: 19px;
+                            opacity: 1;
+                            background: rgba(100, 195, 164, 1);
+                            margin-right: 12px;
+                        "
+                    ></div>
                     <span>预警信息发布</span>
                 </div>
                 <div class="farmlandDiv">
                     <div class="radioDiv">
                         预警范围：
                         <el-radio-group @change="onclick()" v-model="radio1" class="ml-4">
-                            <el-radio :label="5000" size="large" style="color: white">5km</el-radio>
-                            <el-radio :label="10000" size="large" style="color: white">
-                                10km
-                            </el-radio>
+                            <el-radio :label="5000" size="large">5km</el-radio>
+                            <el-radio :label="10000" size="large">10km</el-radio>
                         </el-radio-group>
                     </div>
                     <div class="selectDiv">
                         站点名称:
-                        <el-select  popper-class="select_city" v-model="zdmcValue" placeholder="请选择">
+                        <el-select
+                            popper-class="select_city"
+                            v-model="zdmcValue"
+                            placeholder="请选择"
+                            style="width: 76%"
+                            teleported="false"
+                        >
                             <el-option
                                 v-for="item in zdmcList"
                                 :key="item.msName"
                                 :label="item.msName"
                                 :value="item.msName"
+                                :title="item.msName"
                             ></el-option>
                         </el-select>
                     </div>
                     <div class="selectDiv" style="margin-top: 10px">
                         预警情况:
-                        <el-select  popper-class="select_city" v-model="warnValue" placeholder="请选择">
+                        <el-select
+                            popper-class="select_city"
+                            v-model="warnValue"
+                            placeholder="请选择"
+                            style="width: 76%"
+                        >
                             <el-option
                                 v-for="item in warnList"
                                 :key="item.flag"
@@ -59,10 +86,12 @@
 
                     <el-table
                         :cell-style="{ textAlign: 'center' }"
-                        :header-cell-style="{ 'text-align': 'center', color: 'white' }"
+                        :header-cell-style="{
+                            'text-align': 'center',
+                            color: 'rgba(102, 102, 102, 1)',
+                        }"
                         :data="pageData"
                         style="width: 100%"
-                        max-height="470px"
                         @selection-change="handleSelectionChange"
                     >
                         <el-table-column type="selection" width="20" />
@@ -94,32 +123,31 @@
             <div class="rightFoldDiv" @click="rightFoldClick()">
                 <el-tooltip
                     :disabled="!rightWraFlag"
-                    :show-arrow="false"
                     hide-after="0"
+                    :show-arrow="false"
                     show-after="200"
                     class="box-item"
                     effect="dark"
                     content="收起"
                     placement="top"
                 >
-                    <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
+                    <el-icon v-if="rightWraFlag">
+                        <img src="@/assets/images/shouhuis.png" />
+                    </el-icon>
                 </el-tooltip>
                 <el-tooltip
                     :disabled="rightWraFlag"
-                    :show-arrow="false"
                     hide-after="0"
+                    :show-arrow="false"
                     show-after="200"
                     class="box-item"
                     effect="dark"
                     content="展开"
                     placement="top"
                 >
-                    <img
-                        class="imgrotate"
-                        v-if="!rightWraFlag"
-                        src="@/assets/images/close1.png"
-                        alt=""
-                    />
+                    <el-icon v-if="!rightWraFlag">
+                        <img src="@/assets/images/zhankaiss.png" />
+                    </el-icon>
                 </el-tooltip>
             </div>
         </div>
@@ -172,6 +200,8 @@ import {
     meteorologicalsPeople,
     meteorology,
     zdmc,
+    getSeeWarning,
+    getSeeWarningData,
 } from '@/api/meteorological/monitor/information.js';
 import { ElMessage } from 'element-plus';
 import 'echarts-gl';
@@ -208,18 +238,42 @@ let dic = {
     严重干旱: { color: 'rgba(234, 165, 93, 1)', disabled: false },
     特大干旱: { color: 'rgba(215, 25, 28, 1)', disabled: false },
 };
+
 const warnValue = ref();
 
+const holidays = ref([]);
+
+const isHoliday = ({ dayjs }) => {
+    return holidays.value.includes(dayjs.format('YYYY-MM-DD'));
+};
+const disabledDateFun = time => {
+    const currentDate = new Date();
+    currentDate.setHours(0, 0, 0, 0); // Set hours, minutes, seconds, and milliseconds to 0
+    if (time.getTime() > currentDate.getTime()) {
+        return {
+            disabled: true,
+            style: {
+                // Define your disabled date style here
+                color: 'red',
+                textDecoration: 'line-through',
+                // Add more CSS properties as needed
+            },
+        };
+    } else {
+        return false; // Enable dates in the past or today
+    }
+};
 function query() {
     getmeteorology();
 }
 
 function reset() {
-    value.value = getYesterday().toJSON().substr(0, 10);
+    // value.value = getYesterday().toJSON().substr(0, 10);
     radio1.value = 5000;
     zdmcValue.value = '';
     warnValue.value = '';
     getmeteorology();
+    meteorologicals();
 }
 
 const warnList = [
@@ -340,25 +394,26 @@ let map = ref(null);
 const cun = () => {
     layers = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
-            url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84@huangdaoqu_bianjie',
-            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
+            url:
+                serverAPI.geoserverUrl +
+                `/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
             cacheEnabled: false,
         }),
-        name: 'huangdaoqu_village',
+        name: 'CJQY3702112019WGS84',
         projection: 'EPSG:4326', //3857
         zIndex: 9999,
     });
     map.addLayer(layers);
-    // var layersArray = map.getLayers();
-    // layersArray.insertAt(999, layers);
 };
 const zhen = () => {
     var layer = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
-            url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84@huangdaoqu_bianjie',
-            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
+            url:
+                serverAPI.geoserverUrl +
+                `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
             cacheEnabled: false,
         }),
+        name: 'XJQY3702112019WGS84',
         projection: 'EPSG:4326', //3857
         zIndex: 9999,
     });
@@ -369,12 +424,14 @@ let layers = ref(null); //村
 onMounted(() => {
     value.value = getYesterday().toJSON().substr(0, 10);
     getmeteorology();
+    getSeeWarnings();
+    getSeeWarningDatas();
     //地图
     initMap();
 
     meteorologicals();
     let rightWra = document.querySelector('.rightWra');
-    rightWra.style.transform = 'translate(107%,0)';
+    rightWra.style.transform = 'translate(101%,0)';
 });
 onUpdated(() => {
     document.querySelector('.mode').style.display = 'none';
@@ -384,7 +441,7 @@ let alterData = ref([]);
 let newArr = ref([]);
 const zdmcList = ref([]);
 const zdmcValue = ref('');
-let code=window.localStorage.getItem('deptName')
+let code = window.localStorage.getItem('deptName');
 
 function getmeteorology() {
     meteorology({
@@ -393,6 +450,7 @@ function getmeteorology() {
         flag: 1,
         msName: zdmcValue.value,
         warning: warnValue.value,
+        divisions: code,
     }).then(res => {
         SaveResultsDiv.value = res.data;
         updatePagedData();
@@ -400,7 +458,7 @@ function getmeteorology() {
 }
 
 function getZdmc() {
-    zdmc().then(res => {
+    zdmc({ divisions: code }).then(res => {
         zdmcList.value = res.data;
     });
 }
@@ -420,10 +478,15 @@ function initMap() {
         }),
         layers: [
             new ol.layer.Tile({
-                source: new ol.source.Tianditu({
-                    layerType: 'img',
-                    key: '1d109683f4d84198e37a38c442d68311',
+                source: new ol.source.XYZ({
+                    url: `${serverAPI.tiandituLayers}`,
+                    projection:
+                        serverAPI.tiandituLayers ==
+                        'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'
+                            ? 'EPSG:4326'
+                            : 'EPSG:3857',
                 }),
+                preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
             }),
         ],
     });
@@ -504,9 +567,9 @@ function initMap() {
       <div class="info-window">
       <div  class="close-btn" ><span>站点信息</span><img src="${guanbi}" alt=""/> </div>
       <div class="content" style="color:white;font-size: 16px">
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>名称:</span><span>${clickInformationData.name}</span></div>
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>经度:</span><span>${clickInformationData.lon}</span></div>
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>维度:</span><span>${clickInformationData.lat}</span></div>
+        <div class="line" style="margin-top: 10px">" <div class="label">名称:</div><span>${clickInformationData.name}</span></div>
+        <div class="line" style="margin-top: 10px">" <div class="label">经度:</div><span>${clickInformationData.lon}</span></div>
+        <div class="line" style="margin-top: 10px">" <div class="label">纬度:</div><span>${clickInformationData.lat}</span></div>
       </div>
       </div>
     `;
@@ -532,9 +595,9 @@ function initMap() {
       <div class="info-window" >
       <div  class="close-btn" ><span>人员信息</span><img src="${guanbi}" alt=""/> </div>
       <div class="content" style="color:white;font-size: 16px">
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>姓名:</span><span>${clickInformationData.name}</span></div>
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>手机:</span><span>${clickInformationData.phone}</span></div>
-        <div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>位置:</span><span>${clickInformationData.region}</span></div>
+        <div class="line" style="margin-top: 10px"><div class="label">姓名:</div><span>${clickInformationData.name}</span></div>
+        <div class="line" style="margin-top: 10px"><div class="label">手机:</div><span>${clickInformationData.phone}</span></div>
+        <div class="line" style="margin-top: 10px"><div class="label">位置:</div><span>${clickInformationData.region}</span></div>
       </div>
       </div>
     `;
@@ -638,7 +701,7 @@ function rightFoldClick() {
         rightWra.style.transform = 'translate(0,0)';
     } else {
         let rightWra = document.querySelector('.rightWra');
-        rightWra.style.transform = 'translate(107%,0)';
+        rightWra.style.transform = 'translate(101%,0)';
     }
 }
 
@@ -650,6 +713,7 @@ const onclick = () => {
         data: value.value,
         alertRange: radio1.value,
         flag: 1,
+        divisions: code,
     }).then(res => {
         SaveResultsDiv.value = res.data;
         updatePagedData();
@@ -669,7 +733,7 @@ const meteorologicals = () => {
         map.removeLayer(personIconLayer.value[i]);
     }
     personIconLayer.value = [];
-    getmeteorologyEquipment({ flag: 1, data: value.value }).then(res => {
+    getmeteorologyEquipment({ flag: 1, data: value.value, divisions: code }).then(res => {
         informationData.value = res.data;
         for (const i in informationData.value) {
             const centerLonLat = [
@@ -696,7 +760,9 @@ const meteorologicals = () => {
             // 为圆形创建一个样式
             const circleStyle = new ol.style.Style({
                 stroke: new ol.style.Stroke({
-                    color: 'rgb(255,255,0)',
+                    color:
+                        dic[informationData.value[i].warning] &&
+                        dic[informationData.value[i].warning].color,
                     width: 2,
                 }),
             });
@@ -767,7 +833,12 @@ const meteorologicals = () => {
         }
     });
 
-    meteorologicalsPeople({ flag: 1, alertRange: radio1.value, data: value.value ,divisions:code}).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) {
@@ -830,6 +901,7 @@ const selectTime = () => {
         data: value.value,
         alertRange: radio1.value,
         flag: 1,
+        divisions: code,
     }).then(res => {
         SaveResultsDiv.value = res.data;
         updatePagedData();
@@ -839,7 +911,6 @@ const selectTime = () => {
 const subText = () => {
     //发送短信
     getsendSms(multipleSelection.value).then(res => {
-        console.log(res.data);
         if (res.data.code == 'OK') {
             ElMessage({
                 message: '发送成功',
@@ -862,11 +933,36 @@ const getmeteorologicalFreezes = () => {
         SaveResultsDiv.value = res.data;
     });
 };
+
+const getSeeWarnings = () => {
+    getSeeWarning({ flag: 1, divisions: code }).then(res => {
+        if (res.data.length < 1) {
+            ElMessage({
+                message: '近1周暂无预警',
+                type: 'success',
+            });
+        } else {
+            ElMessage({
+                message: `近1周${res.data.length}次预警`,
+                type: 'warning',
+            });
+        }
+    });
+};
+const getSeeWarningDatas = () => {
+    let arr = [];
+    getSeeWarningData({ flag: 1, divisions: code }).then(res => {
+        arr = [];
+        res.data.forEach(item => {
+            arr.push(item.dataTime);
+        });
+        holidays.value = arr;
+    });
+};
 </script>
 
 <style lang="scss" scoped>
 $height: calc(100vh - 100px);
-
 .center {
     width: 100%;
     height: 100%;
@@ -876,55 +972,41 @@ $height: calc(100vh - 100px);
     }
 
     .title {
-        width: 100%;
-        height: 45px;
-        background: url('@/assets/images/title.png');
-        background-repeat: no-repeat;
-        background-size: 110% 100%;
-        color: #fff;
+        width: 90%;
+        margin: 15px;
+        height: 37px;
+        border-radius: 3px 3px, 0px, 0px;
+        background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
         font-size: 18px;
         font-weight: 700;
-        line-height: 45px;
-        padding-left: 46px;
+        line-height: 37px;
+        padding-left: 16px;
         display: flex;
-        cursor: pointer;
         align-items: center;
+        cursor: pointer;
         justify-content: space-between;
 
-        :deep(.el-input__wrapper) {
-            width: 100px;
-            border-radius: 30px;
-            border: 1px solid rgba(23, 194, 180, 1);
-            background: rgba(41, 255, 255, 0.1);
-            height: 34px;
-        }
-
         span {
-            width: 80%;
+            width: 95%;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
-            background: linear-gradient(
-                180deg,
-                rgba(255, 255, 255, 1) 33.33%,
-                rgba(41, 255, 219, 1) 100%
-            );
+            font-size: 16px;
+            font-weight: 700;
+            color: rgba(51, 51, 51, 1);
+            background-clip: text;
             -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
 
         p {
-            width: 120px;
+            width: 79px;
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
-            background: linear-gradient(
-                180deg,
-                rgba(16, 111, 111, 1) 0%,
-                rgba(47, 214, 214, 1) 100%
-            );
-            border: 1.5px solid rgba(23, 194, 180, 1);
+            border-radius: 4px;
+            background: rgba(100, 195, 164, 1);
             display: flex;
+            color: rgba(255, 255, 255, 1);
             justify-content: center;
             align-items: center;
         }
@@ -935,33 +1017,48 @@ $height: calc(100vh - 100px);
             .ol-overlaycontainer-stopevent {
                 .overlay1 div:first-child {
                     .info-window {
-                        padding: 10px;
-
+                        border-radius: 8px;
+                        background: rgba(255, 255, 255, 1);
+                        box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),
+                            0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
                         .close-btn {
                             color: white;
                             display: flex;
                             justify-content: space-between;
                             font-size: 22px;
-                            background: url('@/assets/images/top.png');
-                            padding: 3px 0 3px 40px;
+                            padding: 3px 0 3px 20px;
                             img {
                                 margin-right: 15px;
+                                width: 15px;
+                                height: 15px;
+                                margin: auto 10px;
                             }
+                            border-radius: 8px;
+                            color: rgba(100, 195, 164, 1);
+                            background: rgba(100, 195, 164, 0.05);
                         }
 
                         .content {
-                            background: url('@/assets/images/bottom.png') no-repeat;
-                            background-size: 100% 100%;
                             padding: 20px;
                             display: flex;
                             flex-direction: column;
-
                             .line {
-                                background: url('@/assets/images/chande.png');
                                 padding-left: 20px;
                                 margin: 10px;
                                 display: flex;
                                 align-items: center;
+                                .label {
+                                    color: rgba(63, 161, 128, 1);
+                                }
+                                span {
+                                    color: rgba(51, 51, 51, 1);
+                                    display: block;
+                                    min-width: 160px;
+                                    background: rgba(100, 195, 164, 0.1);
+                                    box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
+                                    text-align: center;
+                                    padding: 5px 5px;
+                                }
                             }
                         }
                     }
@@ -973,25 +1070,24 @@ $height: calc(100vh - 100px);
 
 .rightWra {
     position: absolute;
-    top: 10px;
-    right: 20px;
+    top: 0px;
+    right: 0px;
     width: 23%;
-    height: $height;
+    height: calc(100vh - 98px);
     opacity: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: rgba(2, 31, 26, 0.85);
-    box-shadow: inset 0 0 15px 6px rgba(41, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 1);
+    box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
+        0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
     transition: transform 1s;
-
     .farmlandHeader {
         display: flex;
         font-size: 18px;
         font-weight: 400;
         letter-spacing: 0;
         align-items: center;
-        color: rgba(255, 255, 255, 1);
         margin: 20px 0;
         padding: 0 10px;
 
@@ -999,16 +1095,8 @@ $height: calc(100vh - 100px);
             .el-input__wrapper {
                 box-shadow: none;
                 border-radius: 4px;
-                background: transparent
-                    linear-gradient(
-                        180deg,
-                        rgba(38, 212, 191, 0.5) 0%,
-                        rgba(43, 186, 186, 0.5) 25.69%,
-                        rgba(45, 165, 181, 0.5) 66.67%,
-                        rgba(54, 111, 168, 0.5) 100%
-                    );
-
-                border: 1px solid rgba(137, 211, 245, 1);
+                background: rgba(100, 195, 164, 0.75);
+                border: 1px solid rgba(100, 195, 164, 1);
             }
 
             :deep(.el-input__inner) {
@@ -1018,34 +1106,33 @@ $height: calc(100vh - 100px);
     }
 
     .rightFoldDiv {
-        width: 30px;
+        width: 28px;
         height: 30px;
         position: absolute;
-        left: -8%;
+        left: 0;
         top: 50%;
-        transform: translate(0, -50%);
+        transform: translate(-100%, -50%);
         font-size: 30px;
         color: #ccc;
+        cursor: pointer;
     }
 
     .rightTop {
         width: 100%;
-        height: 88%;
+        height: calc(100% - 72px);
         opacity: 1;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
-
         .farmlandDiv {
             // background: rgba(255, 255, 255, 0.05);
             display: flex;
             width: 95%;
             flex-direction: column;
             padding: 5px 10px 5px 10px;
-            color: rgba(255, 255, 255, 1);
-            height: 100%;
-
+            color: rgba(51, 51, 51, 1);
+            height: calc(100% - 67px);
             :deep(.el-table--fit) {
                 height: 90%;
             }
@@ -1066,26 +1153,26 @@ $height: calc(100vh - 100px);
                     ::v-deep .el-input__wrapper {
                         box-shadow: none;
                         border-radius: 4px;
-                        background: transparent
-                            linear-gradient(
-                                180deg,
-                                rgba(38, 212, 191, 0.5) 0%,
-                                rgba(43, 186, 186, 0.5) 25.69%,
-                                rgba(45, 165, 181, 0.5) 66.67%,
-                                rgba(54, 111, 168, 0.5) 100%
-                            );
-
-                        border: none;
+                        background: rgba(255, 255, 255, 1);
+                        border: 1px solid rgba(219, 219, 219, 1);
                     }
                 }
             }
+            :deep(.el-input__wrapper) {
+                opacity: 1;
+                border-radius: 4px;
+                width: 70%;
+                .el-input__inner {
+                    color: rgba(51, 51, 51, 1);
+                }
+            }
 
             .btws {
                 display: flex;
-                justify-content: space-around;
                 align-items: center;
                 margin-top: 10px;
                 margin-bottom: 10px;
+                justify-content: center;
 
                 .el-button {
                     color: white;
@@ -1093,17 +1180,15 @@ $height: calc(100vh - 100px);
 
                     border: 1.5px solid rgba(23, 194, 180, 1);
                 }
-
                 .bt1 {
-                    background: linear-gradient(
-                        180deg,
-                        rgba(16, 111, 111, 1) 0%,
-                        rgba(47, 214, 214, 1) 100%
-                    );
+                    background: rgba(100, 195, 164, 1);
+                    border: 1px solid rgba(100, 195, 164, 1);
                 }
 
                 .bt2 {
-                    background: rgba(22, 94, 102, 1);
+                    background: rgba(255, 255, 255, 1);
+                    border: 1px solid rgba(219, 219, 219, 1);
+                    color: rgba(102, 102, 102, 1);
                 }
             }
 
@@ -1136,7 +1221,7 @@ $height: calc(100vh - 100px);
 
             :deep(.el-table) {
                 --el-table-border-color: none;
-                color: rgba(255, 255, 255, 1);
+                // color: rgba(255, 255, 255, 1);
             }
 
             :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
@@ -1205,25 +1290,29 @@ $height: calc(100vh - 100px);
 .legend {
     position: absolute;
     right: 25%;
-    bottom: 7%;
+    bottom: 60px;
     width: 129px;
-    border: 1px solid rgba(4, 153, 153, 1);
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 1);
 
     // height: 50px;
     :deep(.el-collapse-item__header) {
-        background: rgba(2, 31, 26, 0.6);
-        color: rgba(255, 255, 255, 1);
+        border-radius: 4px;
+        color: rgba(51, 51, 51, 1);
+        font-size: 14px;
+        font-weight: 400;
         text-align: center;
         padding: 0 30px;
-        font-size: 14px;
+        .el-icon {
+            color: rgba(100, 195, 164, 1);
+        }
     }
 
-    //--el-collapse-content-bg-color {
-    //  background: rgba(2, 31, 26, 0.6);
-    //}
+    --el-collapse-content-bg-color {
+        background: rgba(2, 31, 26, 0.6);
+    }
 
     :deep(.el-collapse-item__content) {
-        background: rgba(2, 31, 26, 0.6);
         padding: 0 10px;
         padding-bottom: 10px;
     }
@@ -1231,12 +1320,20 @@ $height: calc(100vh - 100px);
     --el-collapse-border-color: none;
     --el-collapse-content-bg-color: none;
 
+    // opacity: 1;
+    // border-radius: 4px;
+    // background: rgba(2, 31, 26, 0.6);
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: flex-start;
+    // align-items: center;
+    // padding: 10px 10px 10px 10px;
     p {
         margin: 10px;
         font-size: 14px;
         font-weight: 400;
-        letter-spacing: 0;
-        line-height: 0;
+        letter-spacing: 0px;
+        line-height: 0px;
         color: rgba(255, 255, 255, 1);
         text-align: center;
     }
@@ -1249,32 +1346,56 @@ $height: calc(100vh - 100px);
             padding-left: 10px;
             font-size: 14px;
             font-weight: 400;
-            letter-spacing: 0;
-            line-height: 0;
-            color: rgba(255, 255, 255, 1);
+            letter-spacing: 0px;
+            line-height: 0px;
+            // color: rgba(255, 255, 255, 1);
             text-align: left;
         }
     }
 
+    // :deep(.el-checkbox__label) {
+    //     color: #fff;
+    // }
     :deep(.el-checkbox__label) {
-        color: black;
+        display: flex;
+        align-items: center;
     }
 }
+.cell {
+    height: 30px;
+    padding: 3px 0;
+    box-sizing: border-box;
+}
+.cell .text {
+    width: 24px;
+    height: 24px;
+    display: block;
+    margin: 0 auto;
+    line-height: 24px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 50%;
+}
+.cell.current .text {
+    background: #626aef;
+    color: #fff;
+}
+.cell .holiday {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: var(--el-color-danger);
+    border-radius: 50%;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+}
 </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;
-    }
+    background: #fff;
 }
 .el-select__popper {
     border: none !important;
@@ -1283,10 +1404,22 @@ $height: calc(100vh - 100px);
 
 .el-popper {
     border: none !important;
-    background: transparent !important;
+    background: #fff !important;
+    color: black !important;
 }
 
 .el-popper__arrow::before {
-    background: rgba(41, 255, 255, 0.7) !important;
+    display: none;
+}
+.disabled {
+    color: var(--el-datepicker-off-text-color) !important;
+    cursor: not-allowed !important;
+}
+.el-select-dropdown {
+    position: absolute !important;
+    left: 0;
+    background: #fff !important;
+    border: 1px solid #ccc;
+    max-width: 230px;
 }
 </style>

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

@@ -47,12 +47,12 @@
                                 :header-cell-style="{ 'text-align': 'center' }"
                                 :cell-style="{ 'text-align': 'center' }"
                                 header-row-class-name="tabth"
-                                height="80%"
+                                height="90%"
                                 highlight-current-row
                             >
                                 <el-table-column prop="dataTime" label="日期" width="160">
                                     <template #default="scope">
-                                        <div>{{ scope.row.dataTime}}</div>
+                                        <div>{{ scope.row.dataTime }}</div>
                                         <!-- <div>{{ handleDate(scope.row.dataTime) }}</div>
                                         <div>{{ handleTime(scope.row.dataTime) }}</div> -->
                                     </template>
@@ -72,11 +72,11 @@
                                 />
                             </el-table>
                             <div class="example-pagination-block">
-                                共{{ tabulation.length }}条
+                                共{{ tabulation }}条
                                 <el-pagination
                                     background
                                     layout="prev, pager, next"
-                                    :total="tabulation.length"
+                                    :total="Number(tabulation)"
                                     :current-page="tabulationcurrentPage"
                                     :page-size="tabulationpageSize"
                                     @current-change="tabulationCurrentChange"
@@ -193,7 +193,7 @@ let formInline = ref({
 });
 let flags = ref(false);
 let tabulationcurrentPage = ref(1); //列表当前页
-let tabulationpageSize = ref(11); //每页条数
+let tabulationpageSize = ref(14); //每页条数
 let center = null; // 指定中心点
 let chartData = ref({
     airTemperature: [], //空气温度
@@ -219,14 +219,13 @@ const data = reactive({
 onMounted(() => {
     getmeteorologicals();
     initLeafletMap();
-    getmeteorologys();
     getMeteorologyTbs();
 });
 onUpdated(() => {
     document.querySelector('.mode').style.display = 'none';
     window.document.querySelector('#screenfull').style.display = 'none';
 });
-
+let baseLayers = null;
 const initLeafletMap = () => {
     //加载地图
     map = L.map('cesiumContainers', {
@@ -235,20 +234,58 @@ const initLeafletMap = () => {
         zoomControl: false, //禁用 + - 按钮
         doubleClickZoom: false, // 禁用双击放大
         attributionControl: false, // 移除右下角leaflet标识
+        maxZoom: 16,
+        crs: serverAPI.tiandituzhuji=='http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng' ? L.CRS.EPSG4326 : L.CRS.EPSG3857
     });
     //   渲染底图
-    L.tileLayer(
-        'http://t0.tianditu.com/DataServer?T=img_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
-    ).addTo(map);
-    L.tileLayer(
-        'http://t0.tianditu.com/DataServer?T=cia_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
-    ).addTo(map);
-    map._onResize();
+    // 创建底图图层
+    let imgBaseLayer = null;
+    let ciaBaseLayer = null;
+    if (
+        serverAPI.tiandituzhuji ==
+        'http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'
+    ) {
+        imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
+            maxZoom: 20,
+            tileSize: 256,
+            zoomOffset: 1,
+        });
+
+        ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
+            maxZoom: 20,
+            tileSize: 256,
+            zoomOffset: 1,
+        });
+    } else {
+        // 创建底图图层
+        imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
+            // maxZoom: 20,
+            // tileSize: 256,
+            // zoomOffset: 1,
+        });
+
+        ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
+            // maxZoom: 20,
+            // tileSize: 256,
+            // zoomOffset: 1,
+        });
+    }
+    // 将底图图层添加到地图
+    imgBaseLayer.addTo(map);
+    ciaBaseLayer.addTo(map);
+    baseLayers = {
+        'Image Base Map': imgBaseLayer,
+        'CIA Base Map': ciaBaseLayer,
+    };
+    L.Util.requestAnimFrame(map.invalidateSize, map, !1, map._container); //解决首次加载不完全问题
 };
 
 /*-----------接口---------------*/
 const getmeteorologicals = () => {
     getmeteorological({ divisions: code }).then(res => {
+        label2.value = res.data[0].children[0].label;
+        city.value = res.data[0].children[0].label;
+        getmeteorologys();
         res.data.forEach(item => {
             devicesArr.value.push(item);
         });
@@ -256,96 +293,142 @@ const getmeteorologicals = () => {
 };
 const getmeteorologys = () => {
     getmeteorology({
+        msName: city.value,
+        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: code,
+        pageNums:tabulationcurrentPage.value,
+        pageSizes:tabulationpageSize.value
+    }).then(res => {
+        tabulation.value =  res.data[0] && res.data[0].pageCount;
+        tableNewData.value = res.data
+    });
+    getMeteorologyTbs();
+    // getMeteorological({ divisions: code }).then(res => {
+    //     map.eachLayer(layer => {
+    //         // 检查图层是否为底图
+    //         const isBaseLayer = Object.values(baseLayers).includes(layer);
+    //         // 如果不是底图，删除图层
+    //         if (!isBaseLayer) {
+    //             map.removeLayer(layer);
+    //         }
+    //     });
+    //     res.data.forEach(item => {
+    //         center = L.latLng(item.msLatitude, item.msLongitude);
+    //         map.setView(center, 17);
+    //         L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
+    //             .addTo(map)
+    //             .bindPopup(
+    //                 `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
+    //             )
+    //             .openPopup();
+    //     });
+    // });
+};
+const getMeteorologyTbs = () => {
+    getMeteorologyTb({
         name: city.value,
         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'),
+        divisions: code,
     }).then(res => {
-        tabulation.value = res.data;
-        tableNewData.value = res.data.slice(
-            (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
-            (tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
-        );
-    });
-    getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
-        res.data.forEach(item => {
-            center = L.latLng(item.msLatitude, item.msLongitude);
-            map.setView(center, 17);
-            L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
-                .addTo(map)
-                .bindPopup(
-                    `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
-                )
-                .openPopup();
-        });
-    });
-};
-const getMeteorologyTbs = () => {
-    (chartData.value['airTemperature'] = []), //空气温度
-        (chartData.value['airHumidity'] = []), //空气湿度
-        (chartData.value['windSpeed'] = []), //风速
-        (chartData.value['windDirection'] = []), //风向
-        (chartData.value['rainfall'] = []), //雨量
-        (chartData.value['atmosphericPressure'] = []), //大气压力
-        (chartData.value['evaporation'] = []), //蒸发
-        (chartData.value['lightIntensity'] = []), //光照强度
-        (chartData.value['sunlightHours'] = []), //日照时数
-        (chartData.value['photosyntheticEffectiveRadiation'] = []), //光合有效
-        (chartData.value['dataTimeArr'] = []),
-        getMeteorologyTb({
-            name: city.value,
-            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,
-        }).then(res => {
+        (chartData.value['airTemperature'] = []), //空气温度
+            (chartData.value['airHumidity'] = []), //空气湿度
+            (chartData.value['windSpeed'] = []), //风速
+            (chartData.value['windDirection'] = []), //风向
+            (chartData.value['rainfall'] = []), //雨量
+            (chartData.value['atmosphericPressure'] = []), //大气压力
+            (chartData.value['evaporation'] = []), //蒸发
+            (chartData.value['lightIntensity'] = []), //光照强度
+            (chartData.value['sunlightHours'] = []), //日照时数
+            (chartData.value['photosyntheticEffectiveRadiation'] = []), //光合有效
+            (chartData.value['dataTimeArr'] = []),
             res.data.forEach(item => {
-                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(
+                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(
                     item.photosyntheticEffectiveRadiation
                 );
-                chartData.value['dataTimeArr'].unshift(item.dataTime);
+                chartData.value['dataTimeArr'].push(item.dataTime);
             });
-            chart();
-        });
+        chart();
+    });
 };
 /*------------事件----------------*/
+watch(
+    () => label2.value,
+    (val, oldVal) => {
+        getMeteorological({ divisions: code }).then(res => {
+            map.eachLayer(layer => {
+                // 检查图层是否为底图
+                const isBaseLayer = Object.values(baseLayers).includes(layer);
+                // 如果不是底图，删除图层
+                if (!isBaseLayer) {
+                    map.removeLayer(layer);
+                }
+            });
+            res.data.forEach(item => {
+                if (item.msName == label2.value) {
+                    center = L.latLng(item.msLatitude, item.msLongitude);
+                    map.setView(center, 17);
+                    L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
+                        .addTo(map)
+                        .bindPopup(
+                            `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
+                        )
+                        .openPopup();
+                }
+            });
+        });
+        getMeteorologyTbs();
+    }
+);
 //树结构
 const handleNodeClick = (data, node, data1, data2) => {
-    label2.value = data.label;
-    formInline.value.flag = '';
-    // let oriFatherId = node.parent.parent.data;
-    // label1.value = oriFatherId.label;
-    // getCameraNames(label2.value);
-    city.value = label2.value;
-    getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
-        res.data.forEach(item => {
-            if (item.msName == label2.value) {
-                center = L.latLng(item.msLatitude, item.msLongitude);
-                map.setView(center, 17);
-                L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
-                    .addTo(map)
-                    .bindPopup(
-                        `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
-                    )
-                    .openPopup();
-            }
-        });
-    });
+    tabulationcurrentPage.value = 1;
+    if (!data.children) {
+        label2.value = data.label;
+        formInline.value.flag = '';
+        value1.value = [];
+        city.value = label2.value;
+        // getMeteorological({ divisions: code }).then(res => {
+        //     map.eachLayer(layer => {
+        //         // 检查图层是否为底图
+        //         const isBaseLayer = Object.values(baseLayers).includes(layer);
+        //         // 如果不是底图，删除图层
+        //         if (!isBaseLayer) {
+        //             map.removeLayer(layer);
+        //         }
+        //     });
+        //     res.data.forEach(item => {
+        //         if (item.msName == label2.value) {
+        //             center = L.latLng(item.msLatitude, item.msLongitude);
+        //             map.setView(center, 17);
+        //             L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
+        //                 .addTo(map)
+        //                 .bindPopup(
+        //                     `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
+        //                 )
+        //                 .openPopup();
+        //         }
+        //     });
+        // });
+        getmeteorologys();
+    }
 };
 
 //查询
 const onSubmit = e => {
+    tabulationcurrentPage.value = 1;
     getmeteorologys();
     getMeteorologyTbs();
     chart();
@@ -395,10 +478,17 @@ const foldClick = () => {
 //分页
 const tabulationCurrentChange = val => {
     tabulationcurrentPage.value = val;
-    tableNewData.value = tabulation.value.slice(
-        (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
-        (tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
-    );
+    getmeteorology({
+        msName: city.value,
+        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: code,
+        pageNums:tabulationcurrentPage.value,
+        pageSizes:tabulationpageSize.value
+    }).then(res => {
+        tableNewData.value = res.data
+    });
 };
 //时间换行
 const handleDate = timestamp => {
@@ -419,6 +509,7 @@ const handleTime = timestamp => {
 const resetForm = () => {
     value1.value = '';
     formInline.value.flag = '';
+    tabulationcurrentPage.value=1
     getmeteorologys();
 };
 //图表切换
@@ -432,6 +523,7 @@ const dowcity = () => {
         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,
+        divisions: code,
     }).then(res => {
         downLoadFile(res.data[res.data.length - 1].excelPath);
     });
@@ -837,10 +929,10 @@ $height: calc(100vh - 100px);
 }
 .chartModeFather {
     width: 100%;
-    height: 89%;
+    height: calc(100% - 140px);
     .chartDiv {
         width: 100% !important;
-        height: 89% !important;
+        height: calc(100% - 26px) !important;
     }
 }
 
@@ -989,15 +1081,16 @@ $height: calc(100vh - 100px);
                 ) {
                 color: rgba(0, 0, 0, 1);
             }
-            height: 93%;
+            height: 100%;
             :deep(.el-table__inner-wrapper) {
-                height: 96% !important;
+                height: 100% !important;
             }
             .example-pagination-block {
                 font-size: 14px;
                 display: flex;
                 align-items: center;
                 justify-content: flex-end;
+                margin-top: 20px;
             }
             :deep(.tabth) {
                 background-color: rgba(247, 247, 247, 1);
@@ -1042,9 +1135,9 @@ $height: calc(100vh - 100px);
             ) {
             color: rgba(0, 0, 0, 1);
         }
-        height: 93%;
+        height: 100%;
         :deep(.el-table__inner-wrapper) {
-            height: 96% !important;
+            height: 100% !important;
         }
         .example-pagination-block {
             font-size: 14px;
@@ -1146,6 +1239,15 @@ $height: calc(100vh - 100px);
     width: 100%;
     height: 100%;
 }
+
+:deep(.el-tree-node) {
+    //el-tree 换行展示
+    white-space: normal; //关键代码!!!!!!!!!
+    .el-tree-node__content {
+        height: 100%;
+        align-items: start;
+    }
+}
 </style>
 <style lang="scss">
 .video {

src/views/operationLog/index.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class="app-container">
+        <el-table
+            v-loading="loading"
+            :data="jobLogList"
+            header-row-class-name="tabth"
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column label="数据名称" width="180" align="center" prop="name" />
+            <el-table-column
+                label="操作"
+                align="center"
+                prop="operate"
+                :show-overflow-tooltip="true"
+            />
+            <el-table-column
+                label="操作状态"
+                align="center"
+                prop="runningStatus"
+                :show-overflow-tooltip="true"
+            />
+
+            <el-table-column
+                label="开始时间"
+                align="center"
+                prop="startTime"
+                :show-overflow-tooltip="true"
+            />
+            <el-table-column
+                label="结束时间"
+                align="center"
+                prop="endTime"
+                :show-overflow-tooltip="true"
+            />
+            <el-table-column
+                label="存储路径"
+                align="center"
+                prop="cclj"
+                :show-overflow-tooltip="true"
+            />
+            <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template #default="scope">
+                    <el-button
+                        link
+                        type="primary"
+                        icon="View"
+                        @click="handleView(scope.row)"
+                        v-hasPermi="['monitor:job:query']"
+                    >
+                        详细
+                    </el-button>
+                </template>
+            </el-table-column> -->
+        </el-table>
+
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+        />
+
+        <!-- 调度日志详细 -->
+        <el-dialog title="调度日志详细" v-model="open" width="700px" append-to-body>
+            <el-form :model="form" label-width="100px">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
+                        <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="任务分组：">{{ form.jobGroup }}</el-form-item>
+                        <el-form-item label="执行时间：">{{ form.createTime }}</el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="调用方法：">{{ form.invokeTarget }}</el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="日志信息：">{{ form.jobMessage }}</el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="执行状态：">
+                            <div v-if="form.status == 0">正常</div>
+                            <div v-else-if="form.status == 1">失败</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="异常信息：" v-if="form.status == 1">
+                            {{ form.exceptionInfo }}
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="open = false">关 闭</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup name="JobLog">
+import { getJob } from '@/api/monitor/job';
+import { getfindLog } from '@/api/operationLog/operationLog.js';
+
+const { proxy } = getCurrentInstance();
+const { sys_common_status, sys_job_group } = proxy.useDict('sys_common_status', 'sys_job_group');
+
+const jobLogList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const multiple = ref(true);
+const total = ref(0);
+const dateRange = ref([]);
+const route = useRoute();
+
+const data = reactive({
+    form: {},
+    queryParams: {
+        pageNum: 1,
+        pageSize: 17,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined,
+    },
+});
+let pageArr = ref([]);
+
+const { queryParams, form, rules } = toRefs(data);
+
+onUpdated(() => {
+        document.querySelector('.mode').style.display = 'none';
+        window.document.querySelector('#screenfull').style.display = 'none';
+})
+watch(
+    () => data.queryParams.pageNum,
+    (val, oldVal) => {
+        jobLogList.value = pageArr.value.slice(
+            (data.queryParams.pageNum - 1) * data.queryParams.pageSize,
+            data.queryParams.pageNum * data.queryParams.pageSize
+        );
+    }
+);
+
+/** 查询调度日志列表 */
+function getList() {
+    loading.value = true;
+    getfindLog().then(res => {
+        loading.value = false;
+        pageArr.value = res.data;
+        jobLogList.value = pageArr.value.slice(
+            (data.queryParams.pageNum - 1) * data.queryParams.pageSize,
+            data.queryParams.pageNum * data.queryParams.pageSize
+        );
+        total.value = pageArr.value.length;
+    });
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+    ids.value = selection.map(item => item.jobLogId);
+    multiple.value = !selection.length;
+}
+
+(() => {
+    const jobId = route.params && route.params.jobId;
+    if (jobId !== undefined && jobId != 0) {
+        getJob(jobId).then(response => {
+            queryParams.value.jobName = response.data.jobName;
+            queryParams.value.jobGroup = response.data.jobGroup;
+            getList();
+        });
+    } else {
+        getList();
+    }
+})();
+
+getList();
+</script>
+<style lang="scss" scoped>
+:deep(.tabth) {
+    background-color: rgba(247, 247, 247, 1);
+}
+:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
+    color: rgba(0, 0, 0, 1);
+}
+:deep(.el-pagination__sizes){
+    display: none !important;
+}
+</style>

src/views/plough/Degrain/index.vue

@@ -2,8 +2,21 @@
     <div class="center">
         <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
         <div class="rightWra">
-            <div class="rightbottom">
+            <div class="tabar">
+                <div :class="tabrFlag ? 'tabarS' : ''" @click="tabRightWra(true)">行政区划</div>
+                <div :class="!tabrFlag ? 'tabarS' : ''" @click="tabRightWra(false)">高标准农田</div>
+            </div>
+            <div class="rightbottom" v-show="tabrFlag">
                 <div class="title">
+                    <div
+                        style="
+                            width: 3px;
+                            height: 19px;
+                            opacity: 1;
+                            background: rgba(100, 195, 164, 1);
+                            margin-right: 12px;
+                        "
+                    ></div>
                     <span>非粮化耕地面积统计</span>
                     <p @click="Deta()">
                         下载 &nbsp;
@@ -29,12 +42,46 @@
                 </el-select>
                 <div ref="ASdivisionDiv" class="ASdivision"></div>
             </div>
-            <div class="rightbottom">
+            <div class="rightbottom" v-show="tabrFlag">
                 <div class="title">
+                    <div
+                        style="
+                            width: 3px;
+                            height: 19px;
+                            opacity: 1;
+                            background: rgba(100, 195, 164, 1);
+                            margin-right: 12px;
+                        "
+                    ></div>
                     <span>非粮化耕地面积占比</span>
                 </div>
                 <div ref="typesofDiv" class="typesofDiv"></div>
             </div>
+            <div v-show="!tabrFlag" class="rightTop">
+                <div class="title">
+                    <div
+                        style="
+                            width: 3px;
+                            height: 19px;
+                            opacity: 1;
+                            background: rgba(100, 195, 164, 1);
+                            margin-right: 12px;
+                        "
+                    ></div>
+                    <span>高标准农田</span>
+                    <p @click="Deta3()" v-if="limits">
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
+                <div v-show="limits" ref="farmlandDiv" class="farmlandDiv"></div>
+                <div v-if="!limits">
+                    <img src="@/assets/images/qx.png" />
+                </div>
+            </div>
             <div class="rightFoldDiv" @click="rightFoldClick()">
                 <el-tooltip
                     :disabled="!rightWraFlag"
@@ -46,7 +93,9 @@
                     content="收起"
                     placement="top"
                 >
-                    <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
+                    <el-icon v-if="rightWraFlag">
+                        <img src="@/assets/images/shouhuis.png" />
+                    </el-icon>
                 </el-tooltip>
                 <el-tooltip
                     :disabled="rightWraFlag"
@@ -58,12 +107,9 @@
                     content="展开"
                     placement="top"
                 >
-                    <img
-                        class="imgrotate"
-                        v-if="!rightWraFlag"
-                        src="@/assets/images/close1.png"
-                        alt=""
-                    />
+                    <el-icon v-if="!rightWraFlag">
+                        <img src="@/assets/images/zhankaiss.png" />
+                    </el-icon>
                 </el-tooltip>
             </div>
         </div>
@@ -100,6 +146,8 @@
                 v-if="dataSource.length > 0"
                 :dataSource="dataSource"
                 @dataHandle="handleData"
+                :allCount="allCount"
+                @getcurrentPage="getcurrentPage"
             />
         </div>
         <div class="tool">
@@ -118,9 +166,11 @@
                         font-size: 20px;
                         font-weight: 400;
                         letter-spacing: 1px;
-                        color: rgba(246, 255, 255, 1);
                         line-height: 42px;
-                        padding-left: 45px;
+                        padding-left: 15px;
+                        border-radius: 8px;
+                        margin: 20px;
+                        background: rgba(100, 195, 164, 0.05);
                     "
                 ></div>
                 <a href="#" id="popup-closer" class="ol-popup-closer"></a>
@@ -128,9 +178,7 @@
             <div id="popup-content" style="padding: 10px">
                 <div class="perform" v-for="(item, index) in alterArr" :key="index">
                     <div class="perform_children">
-                        <img src="@/assets/images/icon.png" />
-                        <span>非粮化</span>
-                        :
+                        <div class="label">非粮化:</div>
                         <span>{{ Number(item.farm).toFixed(2) }}(亩)</span>
                     </div>
                 </div>
@@ -147,7 +195,13 @@ import * as echarts from 'echarts';
 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 {
+    getNonFood,
+    getNonFoodHuoChun,
+    getNonFoodChun,
+    getFlYear,
+    getlhdHeith,
+} from '@/api/plough/degrain.js';
 import { downLoadFile } from '@/utils/download.js';
 import axios from 'axios';
 import elementResizeDetectorMaker from 'element-resize-detector';
@@ -161,14 +215,21 @@ const value = ref('370211');
 const clickInfoMap = ref({ info: [] });
 const flag = ref(false);
 let leftWraFlag = ref(true);
-let rightWraFlag = ref(true);
+let rightWraFlag = ref(false);
 const checkList = ref([]);
 let checkListdata = ref([]);
 let alterArr = ref([]);
 let dataSource = ref([]);
 let oldDatas = ref('');
 let time = ref(1);
+let allCount = ref([]);
+let currentPageS = ref('');
+let pageSizeS = ref(5);
+let timeArr = ref([]);
+let tabrFlag = ref(true);
 let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
+let standardArr = ref([]);
+const farmlandDiv = ref(null);
 let code =
     window.localStorage.getItem('deptName') == '青岛西海岸新区'
         ? '黄岛区'
@@ -196,9 +257,7 @@ let dic = {
     非粮化: { color: 'rgba(47, 236, 56, 0.8)', disabled: false },
 };
 // 图层字典
-let layersDic = {
-
-};
+let layersDic = {};
 let layers = ref(null); //村
 var data = {
     title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
@@ -218,6 +277,15 @@ const options = [
         label: 'Option2',
     },
 ];
+const tabRightWra = flag => {
+    tabrFlag.value = flag;
+    if (flag) {
+        ASdivision()
+        typesof()
+    } else {
+        farmland()
+    }
+};
 // 组件挂载完成后执行
 onMounted(() => {
     initonMounted();
@@ -236,6 +304,8 @@ function initonMounted() {
         }
     }
     checkList.value = checkListdata.value;
+    let rightWra = document.querySelector('.rightWra');
+    rightWra.style.transform = 'translate(101%,0)';
 }
 onUpdated(() => {
     document.querySelector('.mode').style.display = 'none';
@@ -296,10 +366,11 @@ function initmap() {
         }),
         layers: [
             new ol.layer.Tile({
-                source: new ol.source.Tianditu({
-                    layerType: 'img',
-                    key: '1d109683f4d84198e37a38c442d68311',
+                source: new ol.source.XYZ({
+                    url: `${serverAPI.tiandituLayers}`,
+                    projection: serverAPI.tiandituLayers == 'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'?'EPSG:4326':'EPSG:3857',
                 }),
+                preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
             }),
             //注记
             // new ol.layer.Tile({
@@ -337,19 +408,19 @@ function initmap() {
                 QueryData(
                     e,
                     'CJQY3702112019WGS84@huangdaoqu_bianjie',
-                    'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
+                    `${serverAPI.geoserverUrl}/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',
+                    `${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
                     '镇'
                 );
             }
         } else {
-            let url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
+            let url = `${serverAPI.geoserverUrl}/data-huangdaoqu_bianjie/rest/data`;
             let sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
                 queryParameter: {
                     name: 'XJQY3702112019WGS84@huangdaoqu_bianjie',
@@ -384,14 +455,14 @@ function initmap() {
                                 QueryData(
                                     e,
                                     'CJQY3702112019WGS84@huangdaoqu_bianjie',
-                                    'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
+                                    `${serverAPI.geoserverUrl}/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',
+                                    `${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
                                     '镇'
                                 );
                             }
@@ -428,7 +499,7 @@ function SQLSearch(name) {
     let setName = '';
     let setOf = '';
     let quyu = '';
-    url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
+    url = `${serverAPI.geoserverUrl}/data-huangdaoqu_bianjie/rest/data`;
     names = name;
 
     setName = 'XJQY3702112019WGS84';
@@ -486,15 +557,14 @@ function SQLSearch(name) {
         }
     });
 }
-
+//添加村级矢量
 const cun = () => {
     layers = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
-            url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
-            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
+            url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
             cacheEnabled: false,
         }),
-        name: 'huangdaoqu_village',
+        name: 'CJQY3702112019WGS84',
         projection: 'EPSG:4326', //3857
         zIndex: 9999,
     });
@@ -503,10 +573,10 @@ const cun = () => {
 const zhen = () => {
     var layer = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
-            url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
-            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
+            url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
             cacheEnabled: false,
         }),
+        name: 'XJQY3702112019WGS84',
         projection: 'EPSG:4326', //3857
         zIndex: 9999,
     });
@@ -722,7 +792,6 @@ watch(
             });
             newData.forEach(item => {
                 if (layersDic[item]) {
-                    console.log(2);
                     addwms(layersDic[item]);
                 }
             });
@@ -762,19 +831,33 @@ function rightFoldClick() {
         rightWra.style.transform = 'translate(0,0)';
     } else {
         let rightWra = document.querySelector('.rightWra');
-        rightWra.style.transform = 'translate(107%,0)';
+        rightWra.style.transform = 'translate(101%,0)';
     }
 }
 
 //接口
+const getcurrentPage = params => {
+    dataSource.value = timeArr.value.slice(
+        (params - 1) * pageSizeS.value,
+        params * pageSizeS.value
+    );
+};
 
 //时间
 const getFlYears = () => {
     getFlYear().then(res => {
         oldDatas.value = { name: res.data[res.data.length - 1] };
+        let arr = [];
         res.data.forEach(item => {
-            dataSource.value.push({ name: item });
+            arr.push({ name: item });
         });
+        timeArr.value = arr;
+        allCount.value = Math.ceil(timeArr.value.length / 5); //总页数
+        currentPageS = Math.ceil(arr.length / 5); //当前页
+        dataSource.value = timeArr.value.slice(
+            (currentPageS - 1) * pageSizeS.value,
+            currentPageS * pageSizeS.value
+        );
         let str = oldDatas.value.name;
         let str1 = str.replace(/-/g, '_');
         layersDic = {
@@ -783,6 +866,25 @@ const getFlYears = () => {
                 name: `T${str1}_feilianghua`,
             },
         };
+        getlhdHeiths()
+    });
+};
+//高标准
+const getlhdHeiths = () => {
+    getlhdHeith({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
+        standardArr.value = res.data;
+        if (res.data.length > 0) {
+            farmland();
+        }
+    });
+};
+const Deta3 = item => {
+    getlhdHeith({
+        divisions: '370211',
+        yearMonth: oldDatas.value.name,
+        whetherToDownload: true,
+    }).then(res => {
+        downLoadFile(res.data[res.data.length - 1].downloadPath);
     });
 };
 //镇
@@ -893,7 +995,7 @@ function ASdivision() {
             show: true,
             top: '10',
             right: '5%',
-            textStyle: { color: 'rgba(255,255,255,.9)' },
+            textStyle: { color: 'rgba(153, 153, 153, 1)' },
             itemWidth: 20,
             itemHeight: 12.5,
             icon: 'rect',
@@ -953,7 +1055,7 @@ function ASdivision() {
                 textStyle: {
                     padding: [8, 0, 0, 0],
                     fontSize: 14,
-                    color: '#fff',
+                    color: 'rgba(153, 153, 153, 1)',
                 },
             },
         },
@@ -961,7 +1063,7 @@ function ASdivision() {
             name: '',
             triggerEvent: true,
             nameTextStyle: {
-                color: 'rgba(255,255,255,1)',
+                color: 'rgba(153, 153, 153, 1)',
                 fontSize: 16,
                 padding: [0, 0, 10, -20],
             },
@@ -981,7 +1083,7 @@ function ASdivision() {
             axisLabel: {
                 show: true,
                 textStyle: {
-                    color: '#fff',
+                    color: 'rgba(153, 153, 153, 1)',
                     fontSize: 14,
                 },
             },
@@ -1000,11 +1102,15 @@ function ASdivision() {
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                             {
                                 offset: 0,
-                                color: 'rgba(47, 236, 56, 1)',
+                                color: 'rgba(255, 211, 81, 1)',
+                            },
+                            {
+                                offset: 0.7,
+                                color: 'rgba(255, 211, 81, 1)',
                             },
                             {
                                 offset: 1,
-                                color: 'rgba(47, 236, 56, 0.8)',
+                                color: 'rgba(255, 211, 81, 0.05)',
                             },
                         ]),
                     },
@@ -1051,7 +1157,7 @@ function typesof() {
             text: '非粮化总面积',
             subtext: `${totalArea.toFixed(2)}亩`,
             textStyle: {
-                color: '#f2f2f2',
+                color: 'rgba(51, 51, 51, 1)',
                 fontSize: 14,
                 // align: 'center'
             },
@@ -1138,32 +1244,6 @@ function typesof() {
                     },
                 ],
             },
-            {
-                name: '外边框',
-                type: 'pie',
-                clockWise: false, //顺时加载
-                hoverAnimation: false, //鼠标移入变大
-                center: ['50%', '50%'],
-                radius: ['85%', '85%'],
-                tooltip: { show: false },
-                label: {
-                    normal: {
-                        show: false,
-                    },
-                },
-                data: [
-                    {
-                        value: 9,
-                        name: '',
-                        itemStyle: {
-                            normal: {
-                                borderWidth: 2,
-                                borderColor: '#0b5263',
-                            },
-                        },
-                    },
-                ],
-            },
         ],
     };
 
@@ -1175,6 +1255,209 @@ function typesof() {
         });
     });
 }
+function farmland() {
+    const farmlandDivIntance = echarts.init(farmlandDiv.value);
+    let subNameArr = [];
+    let wheatUnitOutputValueArr = [];
+    let wheatOutputArr = [];
+    standardArr.value.forEach(item => {
+        subNameArr.push(item.subregionName);
+        wheatUnitOutputValueArr.push(item.farm);
+    });
+    let ends = (3 / subNameArr.length) * 100;
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            formatter: function (params, ticket, callback) {
+                var res = params[0].name;
+
+                for (var i = 0, l = params.length; i < l; i++) {
+                    if (params[i].seriesType === 'line') {
+                        res +=
+                            '<br/>' +
+                            params[i].seriesName +
+                            ' : ' +
+                            (params[i].value ? params[i].value : '-') +
+                            'h';
+                    } else {
+                        res +=
+                            '<br/>' +
+                            params[i].seriesName +
+                            ' : ' +
+                            (params[i].value ? params[i].value : '-') +
+                            '';
+                    }
+                }
+                return res;
+            },
+        },
+        grid: {
+            top: '15%',
+            bottom: '15%',
+            left: '15%',
+            right: '10%',
+        },
+        dataZoom: [
+            {
+                show: false, //隐藏或显示（true）组件
+                type: 'slider',
+                width: '40%',
+                zoomLock: false,
+                top: '90%',
+                start: 0,
+                end: ends,
+                showDataShadow: false,
+                showDetail: false,
+                fillerColor: 'rgba(64, 158, 255)',
+                borderRadius: '50%',
+                moveHandleSize: 0,
+                moveHandleStyle: {},
+                left: '35%',
+                height: 12,
+                handleSize: '80%',
+                handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
+                handleStyle: {
+                    borderWidth: 0,
+                    color: 'rgba(64, 158, 255)',
+                },
+            },
+            {
+                type: 'inside',
+            },
+        ],
+        // legend: {
+        //     data: ['单产量', '总产量'],
+        //     textStyle: {
+        //         color: 'rgba(153, 153, 153, 1)',
+        //         fontSize: 12,
+        //     },
+        //     type: 'scroll',
+        //     top: '3%',
+        // },
+        xAxis: [
+            {
+                type: 'category',
+                nameTextStyle: {
+                    fontSize: 12,
+                },
+                axisLabel: {
+                    interval: 0,
+                    formatter: function (value) {
+                        var ret = ''; //拼接加\n返回的类目项
+                        var maxLength = 5; //每项显示文字个数
+                        var valLength = value.length; //X轴类目项的文字个数
+                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+                        if (rowN > 1) {
+                            //如果类目项的文字大于5,
+                            for (var i = 0; i < rowN; i++) {
+                                var temp = ''; //每次截取的字符串
+                                var start = i * maxLength; //开始截取的位置
+                                var end = start + maxLength; //结束截取的位置
+                                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+                                temp = value.substring(start, end) + '\n';
+                                ret += temp; //凭借最终的字符串
+                            }
+                            return ret;
+                        } else {
+                            return value;
+                        }
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(153, 153, 153, 1)',
+                    },
+                },
+                axisPointer: {
+                    type: 'shadow',
+                },
+                data: subNameArr,
+            },
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '面积(亩)',
+                splitLine: {
+                    show: true,
+                },
+                nameTextStyle: {
+                    fontSize: 12,
+                },
+                axisLabel: {
+                    fontSize: 14,
+                    relativeSize: -2,
+                    formatter: '{value}',
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(153, 153, 153, 1)',
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        //分割线样式
+                        type: 'dashed',
+                        color: 'rgba(153, 153, 153, 1)',
+                    },
+                },
+                min: 0,
+                position: 'top',
+            },
+        ],
+        series: [
+            {
+                name: '面积(亩)',
+                type: 'bar',
+                barWidth: '10%',
+                yAxisIndex: 0,
+                data: wheatUnitOutputValueArr,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: 2,
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: 'rgba(64, 192, 87, 0.5)', // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgba(64, 192, 87, 0.2)', // 100% 处的颜色
+                                },
+                            ],
+                            global: false, // 缺省为 false
+                        },
+                        // borderColor:'rgba(0, 170, 255, 0.9)',
+                        shadowColor: 'rgba(255, 255, 255, 0.5)',
+                        shadowBlur: 10,
+                    },
+                },
+            },
+        ],
+    };
+    // areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
+    // farmlandDivIntance.on('click', param => ChartClick(param));
+    option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
+    useEcharts(farmlandDivIntance, option);
+    let erd = elementResizeDetectorMaker();
+    erd.listenTo(farmlandDiv.value, () => {
+        nextTick(() => {
+            farmlandDivIntance.resize();
+        });
+    });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -1188,33 +1471,29 @@ $height: calc(100vh - 100px);
     }
 
     .title {
-        width: 100%;
-        height: 45px;
-        background: url('@/assets/images/title.png');
-        background-repeat: no-repeat;
-        background-size: 110% 100%;
-        color: #fff;
+        width: 90%;
+        margin: 15px;
+        height: 37px;
+        border-radius: 3px 3px, 0px, 0px;
+        background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
         font-size: 18px;
         font-weight: 700;
-        line-height: 45px;
-        padding-left: 46px;
+        line-height: 37px;
+        padding-left: 16px;
         display: flex;
         align-items: center;
         cursor: pointer;
-        justify-content: space-between;
 
         span {
-            width: 80%;
+            width: 95%;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
-            background: linear-gradient(
-                180deg,
-                rgba(255, 255, 255, 1) 33.33%,
-                rgba(41, 255, 219, 1) 100%
-            );
+            font-size: 16px;
+            font-weight: 700;
+            color: rgba(51, 51, 51, 1);
+            background-clip: text;
             -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
 
         p {
@@ -1222,13 +1501,10 @@ $height: calc(100vh - 100px);
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
-            background: linear-gradient(
-                180deg,
-                rgba(16, 111, 111, 1) 0%,
-                rgba(47, 214, 214, 1) 100%
-            );
-            border: 1.5px solid rgba(23, 194, 180, 1);
+            border-radius: 4px;
+            background: rgba(100, 195, 164, 1);
             display: flex;
+            color: rgba(255, 255, 255, 1);
             justify-content: center;
             align-items: center;
         }
@@ -1290,24 +1566,51 @@ $height: calc(100vh - 100px);
 
 .rightWra {
     position: absolute;
-    top: 10px;
-    right: 20px;
+    top: 0px;
+    right: 0px;
     width: 23%;
-    height: $height;
+    height: calc(100vh - 98px);
     opacity: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: rgba(2, 31, 26, 0.85);
-    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 1);
+    box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
+        0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
     transition: transform 1s;
+    .tabar {
+        width: 90%;
+        margin: 15px 15px 0 15px;
+        height: 34px;
+        display: flex;
+        padding: 0 15px;
+        justify-content: space-around;
+        div {
+            width: 45%;
+            line-height: 34px;
+            text-align: center;
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid rgba(100, 195, 164, 1);
+            font-size: 14px;
+            font-weight: 400;
+            letter-spacing: 0px;
+            color: rgba(100, 195, 164, 1);
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .tabarS {
+            background: rgba(100, 195, 164, 1);
+            border: 1px solid rgba(100, 195, 164, 1);
+            color: rgba(255, 255, 255, 1);
+        }
+    }
     .rightFoldDiv {
-        width: 30px;
+        width: 28px;
         height: 30px;
         position: absolute;
-        left: -8%;
+        left: 0;
         top: 50%;
-        transform: translate(0, -50%);
+        transform: translate(-100%, -50%);
         font-size: 30px;
         color: #ccc;
     }
@@ -1337,42 +1640,36 @@ $height: calc(100vh - 100px);
 
     .rightbottom {
         width: 100%;
-        height: 455px;
+        height: calc(50% - 25px);
         opacity: 1;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
-        padding-top: 13px;
 
         .el-select {
             width: 80%;
             font-size: 14px;
             color: #333;
             background: rgba(22, 94, 102, 1);
-            // border: 1px solid rgba(4, 153, 153, 1) !important;
-            margin-top: 20px;
+            border: 1px solid #ccc !important;
 
             :deep(.el-input__wrapper) {
-                background-color: transparent;
+                // background-color: transparent;
                 border-radius: 0;
                 box-shadow: none;
             }
-
-            :deep(.el-input__inner) {
-                color: rgba(255, 255, 255, 0.7);
-            }
         }
         .typesofDiv {
             width: 100%;
-            height: 368px;
+            height: calc(100% - 67px);
             background-repeat: no-repeat;
             background-size: 85% 85%;
             background-position: center;
         }
         .ASdivision {
             width: 100%;
-            height: 368px;
+            height: calc(100% - 100px);
             opacity: 1;
             display: flex;
             justify-content: center;
@@ -1393,17 +1690,22 @@ $height: calc(100vh - 100px);
 .legend {
     position: absolute;
     right: 25%;
-    bottom: 7%;
+    bottom: 60px;
     width: 129px;
-    border: 1px solid rgba(4, 153, 153, 1);
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 1);
 
     // height: 50px;
     :deep(.el-collapse-item__header) {
-        background: rgba(2, 31, 26, 0.6);
-        color: rgba(255, 255, 255, 1);
+        border-radius: 4px;
+        color: rgba(51, 51, 51, 1);
+        font-size: 14px;
+        font-weight: 400;
         text-align: center;
         padding: 0 30px;
-        font-size: 14px;
+        .el-icon {
+            color: rgba(100, 195, 164, 1);
+        }
     }
 
     --el-collapse-content-bg-color {
@@ -1411,7 +1713,6 @@ $height: calc(100vh - 100px);
     }
 
     :deep(.el-collapse-item__content) {
-        background: rgba(2, 31, 26, 0.6);
         padding: 0 10px;
         padding-bottom: 10px;
     }
@@ -1447,7 +1748,7 @@ $height: calc(100vh - 100px);
             font-weight: 400;
             letter-spacing: 0px;
             line-height: 0px;
-            color: rgba(255, 255, 255, 1);
+            // color: rgba(255, 255, 255, 1);
             text-align: left;
         }
     }
@@ -1467,7 +1768,7 @@ $height: calc(100vh - 100px);
     left: -2%;
     right: 0;
     margin: auto;
-    width: calc(100% - (400px * 2) - (10vw * 2));
+    width: 570px;
     min-width: 380px;
     bottom: 5%;
     height: 75px;
@@ -1529,57 +1830,51 @@ $height: calc(100vh - 100px);
 .ol-popup-closer {
     text-decoration: none;
     position: absolute;
-    top: 11px;
-    right: 15px;
-    color: #fff !important;
+    top: 25px;
+    right: 30px;
+    color: rgba(100, 195, 164, 1) !important;
 }
 .ol-popup-closer:after {
     content: '✖';
     font-size: 18px;
 }
 #popup {
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08),
+        0px 9px 28px 8px rgba(0, 0, 0, 0.05);
     .pophead {
-        background-image: url('@/assets/images/top.png') !important;
-        background-repeat: no-repeat;
+        min-width: 315px;
         height: 42px;
         opacity: 1;
-        background: linear-gradient(270deg, rgba(19, 92, 98, 0.4) 0%, rgba(19, 92, 98, 1) 100%);
+        border-radius: 8px;
+        color: rgba(100, 195, 164, 1);
+        .popup-title {
+            min-width: 320px;
+        }
     }
     #popup-content {
-        background: url('@/assets/images/bottom.png') no-repeat !important;
-        background-size: 100% 100% !important;
-        width: 280px;
-        height: 86px;
+        width: 100% !important;
+        width: max-content;
         opacity: 1;
-        background: rgba(2, 31, 26, 0.7);
-        // display: flex;
-        // flex-wrap: wrap;
-        // align-items: center;
-        // justify-content: space-between;
-        .perform {
-            width: 100%;
-            margin: 20px 0;
-            display: flex;
-        }
         .perform_children {
-            width: 100%;
+            width: 195px;
             height: 28px;
             line-height: 28px;
             font-size: 14px;
-            background: linear-gradient(
-                270deg,
-                rgba(19, 92, 98, 0) 0%,
-                rgba(33, 169, 169, 0.36) 100%
-            );
             padding-left: 18px;
             display: flex;
-            background: url('@/assets/images/duande.png') no-repeat !important;
-            background-size: 100% 100% !important;
+            justify-content: flex-end;
             .label {
-                color: rgba(47, 214, 214, 1);
+                color: rgba(63, 161, 128, 1);
             }
             span {
-                color: #fff;
+                color: rgba(51, 51, 51, 1);
+                display: block;
+                min-width: 100px;
+                background: rgba(100, 195, 164, 0.1);
+                box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
+                text-align: center;
             }
         }
     }
@@ -1594,17 +1889,7 @@ $height: calc(100vh - 100px);
 
 <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;
-    }
+    background: #fff;
 }
 
 .el-select__popper {
@@ -1614,9 +1899,12 @@ $height: calc(100vh - 100px);
 
 .el-popper {
     border: none !important;
-    background: transparent !important;
+    background: #fff !important;
+    color: black !important;
+}
+.el-popper__arrow::before {
+    display: none;
 }
-
 .el-popper__arrow::before {
     background: rgba(41, 255, 255, 0.7) !important;
 }

src/views/plough/VideoSurveillance/index.vue

@@ -49,7 +49,7 @@
                                 :header-cell-style="{ 'text-align': 'center' }"
                                 :cell-style="{ 'text-align': 'center' }"
                                 header-row-class-name="tabth"
-                                height="80%"
+                                height="calc(100vh - 200px)"
                                 highlight-current-row
                             >
                                 <el-table-column
@@ -58,7 +58,7 @@
                                     label="序号"
                                     :index="Nindex"
                                 />
-                                <el-table-column prop="village" label="村名" width="180" />
+                                <el-table-column prop="village" label="位置" width="180" />
                                 <el-table-column prop="cameraName" label="摄像头名称" width="180" />
                                 <el-table-column label="操作">
                                     <template #default="scope">
@@ -77,8 +77,8 @@
                                     background
                                     layout="prev, pager, next"
                                     :total="tabulation.length"
-                                    :current-page="tabulationcurrentPage"
-                                    :page-size="tabulationpageSize"
+                                    :current-page="currentPage"
+                                    :page-size="pageSize"
                                     @current-change="tabulationCurrentChange"
                                 />
                             </div>
@@ -105,10 +105,12 @@
                 class="video"
                 destroy-on-close
                 title="实时监控"
-                width="30%"
+                width="40%"
                 :before-close="handleClose"
             >
-                <div class="myVideo"><VideoJs :videoSrc="data.videoSrc" autoPlay /></div>
+                <div id="myVideo" style="width: 100%; height: 100%">
+                    <!-- <VideoJs :videoSrc="data.videoSrc" :sonData="fatherData" autoPlay /> -->
+                </div>
             </el-dialog>
         </div>
     </div>
@@ -119,11 +121,22 @@ import { ref, onMounted, inject, reactive, watch } from 'vue';
 import * as echarts from 'echarts';
 import { useEcharts } from '@/hooks/useEcharts';
 import axios from 'axios';
-import { getTreeData, getCameraName } from '../../../api/plough/VideoSurveillance';
+import '@/assets/monitor/imouplayer.js';
+import {
+    getTreeData,
+    getCameraName,
+    getCameraNameS,
+    getQuery,
+    getSxtbf,
+} from '../../../api/plough/VideoSurveillance';
 import VideoJs from '@/components/video/video.vue';
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';
 import iconShadow from '/img/marker/mark.png';
+import { TileWMS } from 'ol/source';
+import md5 from 'js-md5';
+import CryptoJS from 'crypto-js';
+import { ElMessage } from 'element-plus';
 
 let map = L.Map;
 let tabulation = ref([]);
@@ -140,9 +153,11 @@ let formInline = ref({
 });
 let flags = ref(false);
 let currentPage = ref(1); //当前页
-let pageSize = ref(12); //每页条数
+let pageSize = ref(18); //每页条数
 let center = null; // 指定中心点
-const newData=ref({})
+const newData = ref({});
+let fatherData = ref('');
+let baseLayers = null;
 const data = reactive({
     videoSrc:
         'http://cmgw-vpc.lechange.com:8888/LCO/9C023C5FACFE48F/0/1/20230530T033445/a44e6e04b0608347f0209ab2b25aa258.m3u8',
@@ -151,33 +166,68 @@ onMounted(() => {
     getTreeDatas();
     initLeafletMap();
     getCameraNames();
+    getCameraNameSs();
 });
 onUpdated(() => {
-        document.querySelector('.mode').style.display = 'none';
-        window.document.querySelector('#screenfull').style.display = 'none';
+    document.querySelector('.mode').style.display = 'none';
+    window.document.querySelector('#screenfull').style.display = 'none';
 });
 const initLeafletMap = () => {
-    //加载地图
     map = L.map('cesiumContainers', {
         center: [36.4, 119.166326], // 地图中心
         zoom: 7, //缩放比列
         zoomControl: false, //禁用 + - 按钮
         doubleClickZoom: false, // 禁用双击放大
         attributionControl: false, // 移除右下角leaflet标识
+        maxZoom: 16,
+        crs: serverAPI.tiandituzhuji=='http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng' ? L.CRS.EPSG4326 : L.CRS.EPSG3857
     });
-    //   渲染底图
-    L.tileLayer(
-        'http://t0.tianditu.com/DataServer?T=img_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
-    ).addTo(map);
-    L.tileLayer(
-        'http://t0.tianditu.com/DataServer?T=cia_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
-    ).addTo(map);
-    map._onResize();
+    // 创建底图图层
+    let imgBaseLayer = null;
+    let ciaBaseLayer = null;
+    if (
+        serverAPI.tiandituzhuji ==
+        'http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'
+    ) {
+        imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
+            maxZoom: 20,
+            tileSize: 256,
+            zoomOffset: 1,
+        });
+
+        ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
+            maxZoom: 20,
+            tileSize: 256,
+            zoomOffset: 1,
+        });
+    } else {
+        // 创建底图图层
+        imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
+            // maxZoom: 20,
+            // tileSize: 256,
+            // zoomOffset: 1,
+        });
+
+        ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
+            // maxZoom: 20,
+            // tileSize: 256,
+            // zoomOffset: 1,
+        });
+    }
+
+    // 将底图图层添加到地图
+    imgBaseLayer.addTo(map);
+    ciaBaseLayer.addTo(map);
+    baseLayers = {
+        'Image Base Map': imgBaseLayer,
+        'CIA Base Map': ciaBaseLayer,
+    };
+    L.Util.requestAnimFrame(map.invalidateSize, map, !1, map._container); //解决首次加载不完全问题
 };
 
 /*-----------接口---------------*/
 const getTreeDatas = () => {
-    getTreeData({divisions:window.localStorage.getItem('deptName')}).then(res => {
+    getTreeData({ divisions: window.localStorage.getItem('deptName') }).then(res => {
         res.data.forEach(item => {
             devicesArr.value.push(item);
         });
@@ -185,14 +235,8 @@ const getTreeDatas = () => {
 };
 const getCameraNames = videoName => {
     getCameraName({ name: videoName }).then(res => {
-        tabulation.value = res.data;
-        console.log(newData.value)
-        if(newData.value.children!==null){
-            tableNewData.value = res.data;
-        }
-       
         res.data.forEach((item, index) => {
-            center = L.latLng(item.latitude,item.longitude);
+            center = L.latLng(item.latitude, item.longitude);
             map.setView(center, 17);
             L.marker([item.latitude, item.longitude], { icon: greenIcon })
                 .addTo(map)
@@ -203,6 +247,24 @@ const getCameraNames = videoName => {
         });
     });
 };
+const getCameraNameSs = () => {
+    getCameraNameS().then(res => {
+        tabulation.value = res.data;
+        if (newData.value.children !== null) {
+            tableNewData.value = res.data.slice(
+                (currentPage.value - 1) * pageSize.value,
+                currentPage.value * pageSize.value
+            );
+        }
+    });
+};
+const tabulationCurrentChange = e => {
+    currentPage.value = e;
+    tableNewData.value = tabulation.value.slice(
+        (currentPage.value - 1) * pageSize.value,
+        currentPage.value * pageSize.value
+    );
+};
 /*------------事件----------------*/
 //树结构
 const handleNodeClick = (data, node, data1, data2) => {
@@ -210,14 +272,114 @@ const handleNodeClick = (data, node, data1, data2) => {
     formInline.value.flag = '';
     // let oriFatherId = node.parent.parent.data;
     // label1.value = oriFatherId.label;
-    newData.value=data
+    newData.value = data;
     getCameraNames(label2.value);
 };
-const onDetail = e => {
-    console.log(e);
+function getRandom(a, b) {
+    var max = a;
+    var min = b;
+    if (a < b) {
+        max = b;
+        min = a;
+    }
+    return parseInt(Math.random() * (max - min)) + min;
+}
+function suijione(num, maxA, minlA, fqy) {
+    let arr = [];
+    let arr1 = [];
+    let arr2 = [];
+    if (num) {
+        for (let m = 0; m <= 9; m++) {
+            arr.push(m);
+        }
+    }
+    if (maxA) {
+        for (let m = 65; m <= 90; m++) {
+            arr1.push(m);
+        }
+    }
+    if (minlA) {
+        for (let m = 97; m <= 122; m++) {
+            arr2.push(m);
+        }
+    }
+    if (!fqy) {
+        console.log('生成位数必传');
+    }
+    let mergeArr = arr.concat(arr1);
+    let mergeArr1 = mergeArr.concat(arr2);
+    let _length = mergeArr1.length;
+    let text = '';
+    for (let m = 0; m < fqy; m++) {
+        let text1 = '';
+        let random = getRandom(0, _length);
+        if (mergeArr1[random] <= 9) {
+            text1 = mergeArr1[random];
+        } else if (mergeArr1[random] > 9) {
+            text1 = String.fromCharCode(mergeArr1[random]);
+        }
+        text += text1;
+    }
+    return text;
+}
+let deviceId = ref('');
+let channelId = ref('');
+let token = ref('');
+let code = ref('');
+let streamId = ref(0);
+let type = ref(1);
+let recordType = ref(null);
+let onDetail = e => {
+    fatherData.value = e.cameraName;
     data.videoSrc = e.hdStreaming;
     dialogVisible.value = true;
+    getQuery({ name: e.cameraName }).then(res => {
+        let API_KEY = res.data[0].appId;
+        let SECRET = res.data[0].appSecret;
+        let time = new Date().getTime() / 1000;
+        let nonce = suijione(true, false, true, 32);
+        const inputString = `time:${parseInt(time)},nonce:${nonce},appSecret:${SECRET}`;
+        let id = res.data[0].id;
+        getSxtbf({ deviceId: e.cameraName })
+            .then(response => {
+                let player = new imouPlayer({
+                    id: 'myVideo',
+                    // 设备序列号
+                    deviceId: res.data[0].deviceId,
+                    token: response.data.data.kitToken,
+                    channelId: 0,
+                    // 1 直播  2 录播
+                    type: 1,
+                    // 直播 0 高清  1 标清  默认
+                    streamId: 0,
+                    // 录播 云录像 1 本地录像 localRecord 默认 云录像
+                    recordType: 'cloud',
+                    // 如果设备设置了自定义音视频加密秘钥，则输入此秘钥；
+                    // 如果设备只设置了设备密码，则输入设备密码；其他情况默认设备序列号。
+                    code: '',
+                });
+                player.on('play', res => {
+                    console.log('开始播放 play', res);
+                });
+                player.on('pause', () => {
+                    console.log('播放器暂停 pause');
+                });
+                player.on('error', res => {
+                    console.log('播放器错误 error', res);
+                });
+                player.on('volume', res => {
+                    console.log('声音控制', res);
+                });
+                player.on('talk', res => {
+                    console.log('对讲 talk', res);
+                });
+            })
+            .catch(error => {
+                console.log(error);
+            });
+    });
 };
+
 const Nindex = index => {
     // 当前页数 - 1 * 每页数据条数 + 1
     const page = currentPage.value; // 当前页码
@@ -246,6 +408,7 @@ const foldClick = () => {
 };
 </script>
 
+<style src="./imouplayer.css" />
 <style lang="scss" scoped>
 $height: calc(100vh - 100px);
 
@@ -327,6 +490,7 @@ $height: calc(100vh - 100px);
         font-size: 14px;
         color: rgba(0, 0, 0, 1);
         padding: 10px 20px;
+        overflow-y: scroll;
     }
     .cesiumContainersDiv {
         width: 30%;
@@ -579,6 +743,19 @@ $height: calc(100vh - 100px);
     width: 100%;
     height: 100%;
 }
+:deep().icon {
+    font-size: 35px !important;
+    color: #f18d00;
+    position: absolute;
+    bottom: 10px;
+    cursor: pointer;
+}
+:deep().record-icon {
+    font-size: 35px !important;
+    color: #f18d00;
+    position: absolute;
+    bottom: 60px;
+}
 </style>
 <style lang="scss">
 .video {
@@ -587,4 +764,22 @@ $height: calc(100vh - 100px);
         height: 400px;
     }
 }
+.el-date-range-picker__header {
+    .arrow-left {
+        position: unset !important;
+        pointer-events: all !important;
+    }
+    .arrow-right {
+        position: unset !important;
+        pointer-events: all !important;
+        border-left: none;
+        border-bottom: none;
+        border-top: none;
+        right: none;
+        top: none;
+        transform: none;
+        width: 30px;
+        height: none;
+    }
+}
 </style>

src/views/system/user/manage/index.vue

@@ -1,194 +0,0 @@
-<template>
-    <div class="centent">
-        <div class="header">
-            <el-button type="primary" @click="dialogVisible = true">添加</el-button>
-        </div>
-        <div class="center">
-            <el-table
-                :data="tableData"
-                :header-cell-style="{ 'text-align': 'center' }"
-                :cell-style="{ 'text-align': 'center' }"
-                style="width: 100%"
-                header-row-class-name="tabth"
-            >
-                <el-table-column prop="data" label="日期" />
-                <el-table-column prop="layerName" label="图层名:" />
-                <el-table-column prop="type" label="种类" />
-                <el-table-column prop="suiffx" label="格式" />
-                <el-table-column prop="remark" label="备注" />
-                <el-table-column prop="操作" label="操作">
-                    <template #default="scope">
-                        <el-button
-                            size="small"
-                            type="danger"
-                            @click="handleDelete(scope.$index, scope.row)"
-                        >
-                            删除
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-        <el-dialog v-model="dialogVisible" title="添加" width="30%" :before-close="handleClose">
-            <el-form label-width="100px" :model="formLabelAlign" style="max-width: 460px">
-                <el-form-item label="日期:">
-                    <el-input v-model="formLabelAlign.data" placeholder="例如：2023-06-15" />
-                </el-form-item>
-                <el-form-item label="图层名:">
-                    <el-input
-                        v-model="formLabelAlign.layerName"
-                        placeholder="例如：2023-06-15-xiaomai"
-                    />
-                </el-form-item>
-                <el-form-item label="种类:">
-                    <el-select
-                        popper-class="select_type"
-                        v-model="formLabelAlign.type"
-                        width="100"
-                        placeholder="请选择"
-                    >
-                        <el-option label="湿润" value="湿润" />
-                        <el-option label="适宜" value="适宜" />
-                        <el-option label="轻度干旱" value="轻度干旱" />
-                        <el-option label="中度干旱" value="中度干旱" />
-                        <el-option label="重度干旱" value="重度干旱" />
-                        <el-option label="无冻害" value="无冻害" />
-                        <el-option label="轻度冻害" value="轻度冻害" />
-                        <el-option label="中度冻害" value="中度冻害" />
-                        <el-option label="重度冻害" value="重度冻害" />
-                        <el-option label="洪涝" value="洪涝" />
-                        <el-option label="好" value="好" />
-                        <el-option label="较好" value="较好" />
-                        <el-option label="适中" value="适中" />
-                        <el-option label="较差" value="较差" />
-                        <el-option label="差" value="差" />
-                        <el-option label="茶叶" value="茶叶" />
-                        <el-option label="大豆" value="大豆" />
-                        <el-option label="花生" value="花生" />
-                        <el-option label="蓝莓" value="蓝莓" />
-                        <el-option label="地瓜" value="地瓜" />
-                        <el-option label="小麦" value="小麦" />
-                        <el-option label="玉米" value="玉米" />
-                        <el-option label="马铃薯" value="马铃薯" />
-                        <el-option label="白菜和萝卜" value="白菜和萝卜" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="格式:">
-                    <el-select popper-class="select_type" v-model="formLabelAlign.suffix" width="100" placeholder="请选择">
-                        <el-option label="tif" value="features" />
-                        <el-option label="shp" value="gridValue" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="备注">
-                    <el-input v-model="formLabelAlign.remark" />
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="dialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="addlist">确认</el-button>
-                </span>
-            </template>
-        </el-dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject, reactive, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
-import { getsaveMap } from '@/api/manage/manaje.js';
-const dialogVisible = ref(false);
-
-const formLabelAlign = reactive({
-    data: '',
-    type: '',
-    suffix: '',
-    remark: '',
-    layerName: '',
-});
-
-const tableData = [
-    {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-    {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-    {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-    {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-    },
-];
-
-/*-----------接口---------------*/
-
-const getsaveMaps = data => {
-    console.log(data);
-    getsaveMap({ mapServices: data }).then(res => {
-        console.log(res.data);
-    });
-};
-
-/*------------事件----------------*/
-const addlist = () => {
-    dialogVisible.value = false;
-    getsaveMaps(formLabelAlign);
-};
-</script>
-
-<style lang="scss" scoped>
-.centent {
-    width: 98%;
-    margin: 10px;
-    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.08);
-    .header {
-        padding: 10px;
-    }
-    .center {
-        padding: 0 20px;
-        :deep(
-                .el-table .el-table__header-wrapper th,
-                .el-table .el-table__fixed-header-wrapper th
-            ) {
-            color: rgba(0, 0, 0, 1);
-        }
-        height: 93%;
-        :deep(.el-table__inner-wrapper) {
-            height: 96% !important;
-        }
-        .example-pagination-block {
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-        }
-        :deep(.tabth) {
-            background-color: rgba(247, 247, 247, 1);
-            .el-table-fixed-column--left {
-                background: rgba(247, 247, 247, 1) !important;
-            }
-        }
-    }
-}
-</style>
-<style lang="scss">
-.select_type {
-    background: #fff;
-    .el-select-dropdown__item.hover {
-        background: rgba(217, 231, 255, 0.2);
-    }
-    .el-select-dropdown__item {
-        color: black;
-    }
-}
-</style>

src/views/system/user/profile/index.vue

@@ -68,6 +68,12 @@ import userInfo from "./userInfo";
 import resetPwd from "./resetPwd";
 import { getUserProfile } from "@/api/system/user";
 
+
+onUpdated(() => {
+    document.querySelector('.mode').style.display = 'none';
+    window.document.querySelector('#screenfull').style.display = 'none';
+});
+
 const activeTab = ref("userinfo");
 const state = reactive({
   user: {},