Agriculture-front-end/src/views/meteorological/monitor/drought/index.vue

<template>
    <div class="center">
        <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
        <div class="rightWra">
            <div class="farmlandHeader">
                监测日期:&emsp;
                <el-select
                    v-model="value"
                    popper-class="select_city"
                    class="m-2"
                    placeholder="Select"
                    @change="selectTime"
                >
                    <el-option v-for="item in options" :key="item" :label="item" :value="item" />
                </el-select>
            </div>
            <div class="rightTop">
                <div class="title">
                    <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">5km</el-radio>
                            <el-radio label="10000" size="large">10km</el-radio>
                        </el-radio-group>
                    </div>
                    <el-table
                        :cell-style="{ textAlign: 'center' }"
                        :header-cell-style="{ 'text-align': 'center' }"
                        :data="SaveResultsDiv"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="20" />
                        <el-table-column prop="devCode" width="80" label="设备号" />
                        <el-table-column prop="warning" label="预警情况" />
                        <el-table-column prop="name" width="80" label="联系人" />
                        <el-table-column prop="telephone" label="联系电话" />
                    </el-table>
                    <el-button
                        class="but"
                        type="primary"
                        :disabled="multipleSelection.length < 1"
                        @click="subText"
                    >
                        发布预警短信
                    </el-button>
                </div>
            </div>

            <div class="rightFoldDiv" @click="rightFoldClick()">
                <el-tooltip
                    :disabled="!rightWraFlag"
                    :show-arrow="false"
                    hide-after="0"
                    show-after="200"
                    class="box-item"
                    effect="dark"
                    content="收起"
                    placement="top"
                >
                    <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
                </el-tooltip>
                <el-tooltip
                    :disabled="rightWraFlag"
                    :show-arrow="false"
                    hide-after="0"
                    show-after="200"
                    class="box-item"
                    effect="dark"
                    content="展开"
                    placement="top"
                >
                    <img
                        class="imgrotate"
                        v-if="!rightWraFlag"
                        src="@/assets/images/close1.png"
                        alt=""
                    />
                </el-tooltip>
            </div>
        </div>
        <div class="tool">
            <span><img src="@/assets/images/LAYER.png" alt="" /></span>
            <span><img src="@/assets/images/amplify.png" alt="" /></span>
            <span><img src="@/assets/images/reduce.png" alt="" /></span>
            <span><img src="@/assets/images/measure.png" alt="" /></span>
            <span><img src="@/assets/images/face.png" alt="" /></span>
            <span><img src="@/assets/images/position.png" alt="" /></span>
        </div>
        <div id="popup">
            <div>
                <div class="rowWra">
                    <span>设备：</span>
                    <span>{{ regionName }}</span>
                </div>
                <div class="rowWra">
                    <span>经度：</span>
                    <span>{{ popdata.msLongitude }}</span>
                </div>
                <div class="rowWra">
                    <span>纬度：</span>
                    <span>{{ popdata.msLatitude }}</span>
                </div>
            </div>
            <div class="cancel" @click="hiddenOverlayChart">X</div>
        </div>
        <div id="pop">
            <div>
                <div class="rowWra">
                    <span>设备：</span>
                    <span>{{ regionName }}</span>
                </div>
                <div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
                    <span>经度：</span>
                    <span>{{ item.msLongitude }}</span>
                    <span>纬度：</span>
                    <span>{{ item.msLatitude }}</span>
                </div>
            </div>
            <div class="cancel" @click="hiddenOverlayChart">X</div>
        </div>
        <el-collapse class="legend" accordion>
            <el-collapse-item name="1">
                <template #title>图例</template>
                <div class="mt-4">
                    <el-checkbox-group v-model="checkList" @change="change">
                        <el-checkbox
                            v-for="(value, item, key) in dic"
                            :key="key"
                            :style="{
                                backgroundColor: value.color,
                                border: `1px solid value.color`,
                                width: `100%`,
                            }"
                            :v-model="value.disabled"
                            :disabled="value.disabled"
                            :label="item"
                        />
                    </el-checkbox-group>
                </div>
            </el-collapse-item>
        </el-collapse>

        <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
    </div>
</template>

<script setup>
import { ref, onMounted, inject, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import moment from 'Moment';
// import * as turf from '@turf/turf';
import { useEcharts } from '@/hooks/useEcharts';
import { ElLoading } from 'element-plus';
import {
    getreturnToMonitoringTime,
    getmeteorologicalFreeze,
    getsendSms,
    getmeteorologyEquipment,
} from '@/api/meteorological/monitor/information.js';
import axios from 'axios';
import 'echarts-gl';
import { download } from '@/utils/request';
import qs from 'qs';

let viewer = ref(null);
const value = ref('2023');
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
let clickInfoMap = ref({ name: '', value: '' });
const formLandRef = ref([]);
const flag = ref(false);
let rightWraFlag = ref(false);
const checkList = ref(['false']);
const areaDiv = ref(null);
const value1 = ref('');
const options = ref([]);
let informationData = ref([]);
let windArr = ref([]);
let pressureArr = ref([]);
let typhoonTime = ref([]);
const SaveResultsDiv = ref([]);
const radio1 = ref('5000');
const multipleSelection = ref([]);
let popdata = ref({});

var baozi =
    'data:image/png;base64,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
let dic = {
    轻度干旱: { color: 'rgba(9, 187, 222, 1)', disabled: false },
    中度干旱: { color: 'rgba(255, 235, 59, 1)', disabled: false },
    严重干旱: { color: 'rgba(234, 165, 93, 1)', disabled: false },
    特大干旱: { color: 'rgba(215, 25, 28, 1)', disabled: false },
};
const rules = reactive({
    power: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
    count: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
});
watch(
    () => value1.value,
    val => {
        let startTime = moment(value1.value[0]).format('YYYY-MM-DD')
            ? moment(value1.value[0]).format('YYYY-MM-DD ')
            : '';
        let endTime = moment(value1.value[1]).format('YYYY-MM-DD')
            ? moment(value1.value[1]).format('YYYY-MM-DD')
            : '';
    }
);
//行政区划数据
var data = {
    title: [],
};

// 组件挂载完成后执行
onMounted(() => {
    getreturnToMonitoringTimes();
    //地图
    initMap();
    getFarmland();
    getmeteorologyEquipments();
    let rightWra = document.querySelector('.rightWra');
    rightWra.style.transform = 'translate(107%,0)';
});

/*-------------地图------------------------*/
const mapOption = {
    url:
        'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
        '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
        '&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
    layer: 'tdtCva',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'c',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
    ],
    maximumLevel: 18,
};
Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
function initMap() {
    viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,
        shouldAnimate: true, //自动播放
        infoBox: false, //信息框
        animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
        timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
        geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
        homeButton: false, //主页按钮
        navigationHelpButton: false, //导航帮助按钮
        selectionIndicator: false, //原生选择绿框
        fullscreenButton: false, //右下角的全屏按钮
        // terrainProvider:new Cesium.createWorldTerrain(),
        terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
        sceneModePicker: false, //是否显示投影方式控件
        contextOptions: {
            webgl: {
                alpha: true,
            },
        },

        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            ...mapOption,
            // url: "http://service.sdmap.gov.cn/hisimage/weipian202209?tk=9cc3e9deb3cf643b6f133717c333d16d",
            // layer: "c",
            // style: ",c",
            // format: "image/png",
            // tileMatrixSetID: "EPSG:4490",
            // rectangle: Cesium.Rectangle.fromDegrees(114.8, 34.35, 122.82, 38.43),
            // // subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            // tilingScheme: new Cesium.GeographicTilingScheme(),
            // tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
            // // maximumLevel: 18
        }),
    });
    // 去除logo
    viewer.cesiumWidget.creditContainer.style.display = 'none';
    addWms('huangdaoqu_town', 'huangdaoqu_town');
    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 0,
    });

    // 图层点击事件
    // layerClick();
    // 蒙版
    mbHandle();

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (event) {
        var pickedObject = viewer.scene.pick(event.position);
        if (
            Cesium.defined(pickedObject) &&
            pickedObject.id instanceof Cesium.Entity &&
            pickedObject.id.billboard
        ) {
            var position = pickedObject.id.position.getValue(viewer.clock.currentTime);
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var long = Cesium.Math.toDegrees(cartographic.longitude);
            var lat = Cesium.Math.toDegrees(cartographic.latitude);
            var height = cartographic.height.toFixed(2);
            console.log('经度: ' + long + '，纬度: ' + lat + '，高度: ' + height);

            townZuowu.label.forEach((item, index) => {
                if (item.dev_code == pickedObject.id.name) {
                    popdata.value = item;
                }
            });
            showOverlayChart(event.position);
            viewer.scene.postRender.addEventListener(infoWindowPostRender);
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

// data数据数组
// name实体名称，方便以后删除
// color实体颜色
function addBoundaryHandle(data, name, color) {
    data.forEach(item => {
        let arr = [];
        item[0].forEach(mem => {
            arr.push(mem[0]);
            arr.push(mem[1]);
        });
        viewer.entities.add({
            name: name,
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray(arr),
                width: 6,
                // material: new Cesium.PolylineDashMaterialProperty({//虚线
                material: new Cesium.PolylineGlowMaterialProperty({
                    //光晕
                    glowPower: 0.2,
                    color: color
                        ? Cesium.Color.fromCssColorString(color)
                        : Cesium.Color.fromBytes(250, 128, 114), //#FA8072
                }),
                // followSurface: false, //是否贴着地表
                clampToGround: true, //贴地
            },
        });
    });
}
function getLevel(height) {
    if (height > 48000000) {
        return 0;
    } else if (height > 24000000) {
        return 1;
    } else if (height > 12000000) {
        return 2;
    } else if (height > 6000000) {
        return 3;
    } else if (height > 3000000) {
        return 4;
    } else if (height > 1500000) {
        return 5;
    } else if (height > 750000) {
        return 6;
    } else if (height > 375000) {
        return 7;
    } else if (height > 187500) {
        return 8;
    } else if (height > 93750) {
        return 9;
    } else if (height > 46875) {
        return 10;
    } else if (height > 23437.5) {
        return 11;
    } else if (height > 11718.75) {
        return 12;
    } else if (height > 5859.38) {
        return 13;
    } else if (height > 2929.69) {
        return 14;
    } else if (height > 1464.84) {
        return 15;
    } else if (height > 732.42) {
        return 16;
    } else if (height > 366.21) {
        return 17;
    } else {
        return 18;
    }
}
function getFarmland() {
    axios({
        url:
            serverAPI.geoserverUrl +
            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
        method: 'get',
    })
        .then(res => {
            console.log('农田：', res);
            formLandRef.value = res.data.features;
        })
        .catch(err => {});
}

let townZuowu = ref({ label: [] }); //镇的作物
let XZDM = '';
// 图层点击事件
function layerClick() {
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (movement) {
        var ray = viewer.camera.getPickRay(movement.position);
        var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        if (cartesian) {
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            if (cartographic) {
                let xy = new Cesium.Cartesian2();
                let alti = viewer.camera.positionCartographic.height;
                let level = getLevel(alti);
                const layers = viewer.imageryLayers._layers;
                // 筛选出黄岛区服务
                const index = layers.findIndex(
                    item =>
                        item._imageryProvider._layers &&
                        item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
                );
                if (index > -1) {
                    const providerPoint = layers[index];
                    // 拿取最后一个图层
                    let provider = providerPoint._imageryProvider;
                    if (
                        provider &&
                        provider.ready &&
                        provider._layers &&
                        providerPoint.show === true
                    ) {
                        xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
                        let promise = provider.pickFeatures(
                            xy.x,
                            xy.y,
                            level,
                            cartographic.longitude,
                            cartographic.latitude
                        );
                        if (promise) {
                            promise.then(data => {
                                if (data.length > 0) {
                                    let newData = data['0'];
                                    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;
                                            //防止重复加载
                                            XZDM = newData.properties.XZDM;
                                            value.value = XZDM; //
                                            if (selectTab) {
                                                selectTab(); //
                                            }
                                            let item = newData.data;
                                            // 定位
                                            viewer.camera.flyTo({
                                                destination: Cesium.Rectangle.fromDegrees(
                                                    item.bbox[0],
                                                    item.bbox[1],
                                                    item.bbox[2],
                                                    item.bbox[3]
                                                ),
                                                duration: 2,
                                            });
                                            // 移除高亮
                                            deleteEntityByName('townLine');
                                            // 高亮边界
                                            addBoundaryHandle(
                                                item.geometry && item.geometry.coordinates,
                                                'townLine',
                                                'yellow'
                                            );
                                            // 移除以前的
                                            removeWms(['village_CQL']);
                                            // 添加新的
                                            addvillage(
                                                `XZDM=${newData.properties.XZDM}`,
                                                'village_CQL'
                                            );

                                            // 显示该镇的种植结构
                                            let entitys = viewer.entities._entities._array;
                                            for (var na = entitys.length - 1; na >= 0; na--) {
                                                if (
                                                    entitys[na]._name &&
                                                    entitys[na]._name ===
                                                        'point' + newData.properties.XZDM
                                                ) {
                                                    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
                                                    );
                                                } else {
                                                    // if (entitys[na].label) {
                                                    //     entitys[na].label.show = false
                                                    // }
                                                }
                                            }
                                            // 移除村高亮
                                            deleteEntityByName('villageLine');
                                            XZQDM = '';
                                        } else {
                                            // // 已经有镇了，监听村点击
                                            villageClick(layers, xy, level, cartographic, movement);
                                        }
                                    } else {
                                        removeWms(['village_CQL']);
                                        // 移除框框
                                        hiddenOverlayChart(); // 清除监听事件
                                    }
                                }
                            });
                        }
                    }
                }
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
let XZQDM = '';
// 村点击高亮
function villageClick(layers, xy, level, cartographic, movement) {
    const index = layers.findIndex(
        item =>
            item._imageryProvider._layers &&
            item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
    );
    if (index > -1) {
        const providerPoint = layers[index];
        // 拿取最后一个图层
        let provider = providerPoint._imageryProvider;
        if (provider && provider.ready && provider._layers && providerPoint.show === true) {
            xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
            let promise = provider.pickFeatures(
                xy.x,
                xy.y,
                level,
                cartographic.longitude,
                cartographic.latitude
            );
            if (promise) {
                promise.then(data => {
                    if (data.length > 0) {
                        let newData = data['0'];
                        console.log(newData);
                        viewer.camera.flyTo({
                            destination: Cesium.Rectangle.fromDegrees(
                                newData.data.bbox[0],
                                newData.data.bbox[1],
                                newData.data.bbox[2],
                                newData.data.bbox[3]
                            ),
                            duration: 2,
                        });

                        if (newData.properties && newData.properties.XZQDM) {
                            if (XZQDM !== newData.properties.XZQDM) {
                                //防止
                                XZQDM = newData.properties.XZQDM;
                                let item = newData.data;
                                // 移除高亮
                                deleteEntityByName('villageLine');
                                // 高亮边界
                                addBoundaryHandle(
                                    item.geometry && item.geometry.coordinates,
                                    'villageLine',
                                    'yellow'
                                );
                                // townZuowu.value = info//保存数据

                                // 后插和村
                                if (newData.properties.XZQDM === '370211104217') {
                                    // console.log('后河岔村委会')
                                    const rectangle = Cesium.Rectangle.fromDegrees(
                                        item.bbox[0],
                                        item.bbox[1],
                                        item.bbox[2],
                                        item.bbox[3]
                                    );
                                    const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
                                    let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
                                    let latitude = Cesium.Math.toDegrees(center.latitude);
                                    let info = {
                                        lon: longitude,
                                        lat: latitude,
                                        ...item.properties,
                                        // XZQMC
                                        label: [
                                            { crop: '茶叶', Shape_Area: 2820 },
                                            { crop: '大豆', Shape_Area: 2767 },
                                            { crop: '花生', Shape_Area: 62356 },
                                            { crop: '蓝莓', Shape_Area: 5443 },
                                            { crop: '地瓜', Shape_Area: 897 },
                                            { crop: '小麦', Shape_Area: 20111 },
                                        ],
                                    };
                                    townZuowu.value = info; //保存数据

                                    // 展示弹窗
                                    showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
                                    viewer.scene.postRender.addEventListener(infoWindowPostRender);
                                }
                            }
                        }
                    }
                });
            }
        }
    }
}
// 添加村
// CQL_FILTER:筛选的语句
// customName地图服务自定义属性名
function addvillage(CQL_FILTER, customName) {
    let map2 = new Cesium.WebMapServiceImageryProvider({
        url: `${serverAPI.geoserverUrl}/shuzisannong/wms`,
        layers: 'shuzisannong:huangdaoqu_village', //图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            transparent: true, //是否透明
            // CQL_FILTER: `XZDM=${value.value}`,
            CQL_FILTER: CQL_FILTER,
        },
    });
    map2.customName = customName;
    viewer.imageryLayers.addImageryProvider(map2);
}
// 移除wms
// nameArry ：属性名数组（customName）
// isMohu ：是否模糊查询
function removeWms(nameArry, isMohu) {
    if (viewer) {
        // 倒叙遍历，customName是自定义的属性
        const layers = viewer.imageryLayers._layers;
        for (let f = layers.length - 1; f >= 0; f--) {
            nameArry.forEach(item => {
                if (layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
                    if (isMohu) {
                        if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
                            viewer.imageryLayers.remove(layers[f]);
                        }
                    } else {
                        if (layers[f]._imageryProvider.customName === item) {
                            viewer.imageryLayers.remove(layers[f]);
                        }
                    }
                }
            });
        }
    }
}

// 根据实体名字删除实体(模糊删除)
function deleteEntityByName(name) {
    if (viewer) {
        let entitys = viewer.entities._entities._array;
        for (var na = entitys.length - 1; na >= 0; na--) {
            if (entitys[na]._name && entitys[na]._name === name) {
                viewer.entities.remove(entitys[na]);
            }
        }
    }
}

//折叠
function rightFoldClick() {
    rightWraFlag.value = !rightWraFlag.value;
    if (rightWraFlag.value) {
        let rightWra = document.querySelector('.rightWra');
        rightWra.style.transform = 'translate(0,0)';
    } else {
        let rightWra = document.querySelector('.rightWra');
        rightWra.style.transform = 'translate(107%,0)';
    }
}

const onclick = () => {
    //选择范围
    getmeteorologicalFreezes();
};

const selectTime = () => {
    //选择时间
    getmeteorologicalFreezes();
};
const subText = () => {
    //发送短信
    getsendSms({ meteorologicalStations: multipleSelection.value }).then(res => {
        console.log(res.data);
    });
};
const handleSelectionChange = val => {
    multipleSelection.value = val;
};
/*------------------接口--------------------*/

const getreturnToMonitoringTimes = () => {
    getreturnToMonitoringTime({ flag: 1 }).then(res => {
        options.value = res.data;
        value.value = res.data[res.data.length - 1];
        getmeteorologicalFreezes(res.data[res.data.length - 1]);
    });
};
const getmeteorologicalFreezes = () => {
    getmeteorologicalFreeze({
        monitoringTime: value.value,
        alertRange: radio1.value,
        flag: '1',
    }).then(res => {
        SaveResultsDiv.value = res.data;
    });
};
const getmeteorologyEquipments = () => {
    getmeteorologyEquipment().then(res => {
        console.log(res.data);
        res.data.forEach((item, index) => {
            townZuowu.label = res.data;
            addCircleRipple(viewer, {
                //默认只绘制两个圆圈叠加 如遇绘制多个，请自行源码内添加。
                id: '111',
                lon: item.msLongitude,
                lat: item.msLatitude,
                height: 500,
                maxR: radio1.value,
                minR: 0, //最好为0
                deviationR: 10, //差值 差值也大 速度越快
                eachInterval: 2000, //两个圈的时间间隔
                // imageUrl: './redCircle2.png',
            });
            viewer.entities.add({
                name: item.dev_code,
                position: Cesium.Cartesian3.fromDegrees(
                    parseFloat(item.msLongitude),
                    parseFloat(item.msLatitude)
                ),
                billboard: {
                    image: baozi,
                    scale: 0.9,
                    width: 35,
                    height: 35,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY, //广告牌不进行深度检测
                    // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置HeightReference高度参考类型为CLAMP_TO_GROUND贴地类型
                },
            });
        });
    });
};
// 添加wms
function addWms(layers, customName, bottom) {
    let map = new Cesium.WebMapServiceImageryProvider({
        url: serverAPI.geoserverUrl + `/map-${layers}/wms111/`,
        layers: layers + '@' + layers, //图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            srs: 'EPSG:4326',
            VERSION: '1.1.1',
            transparent: true, //是否透明
            exceptions: 'application/vnd.ogc.se_inimage',
        },
    });
    map.customName = customName; //自己定义各种属性
    let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
    if (bottom) {
        viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
        viewer.imageryLayers.raise(dd); //将图层上移一层
    }
}
//返回
function back() {
    delete townZuowu.value.XZQMC;
    removeWms(['gbznt'], true);
    removeWms(['aaa']);
    value.value = '370211';
    selectTab();
    if (flag.value === '1') {
        console.log(flag.value);
    }
    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 2,
    });
    flag.value = false;
    hiddenOverlayChart();
}

/*--------------------------------------------------------------------------------------------*/
function getAreaFenlei() {
    let fl = fenleiRef.value;
    console.log('fl:', fl);
    axios({
        url:
            serverAPI.geoserverUrl +
            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
    })
        .then(res => {
            console.log('res1111:', res);
            let data = res.data.features;
            data.forEach((item, index) => {
                const rectangle = Cesium.Rectangle.fromDegrees(
                    item.bbox[0],
                    item.bbox[1],
                    item.bbox[2],
                    item.bbox[3]
                );
                const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
                let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
                let latitude = Cesium.Math.toDegrees(center.latitude);

                if (item.properties.XZDM === '370211011') {
                    //灵山卫街道
                    longitude = 120.0863;
                    latitude = 35.941;
                } else if (item.properties.XZDM === '370211003') {
                    //薛家岛街道
                    longitude = 120.243682;
                    latitude = 35.97123201;
                }
                const townData = fl[item.properties.XZMC];
                let label = [];
                if (townData) {
                    label = townData.map((it, inex) => {
                        // let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
                        // return dd
                        return it.properties;
                    });
                }
            });
        })
        .catch(err => {});
}
let fenleiRef = ref({});
function mbHandle() {
    axios({
        url:
            serverAPI.geoserverUrl +
            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
    })
        .then(res => {
            let features = res.data.features;
            let town = {};
            // 按镇分类
            features.forEach(item => {
                let key = item.properties.town;
                if (town[key]) {
                    town[key].push(item);
                } else {
                    town[key] = [item];
                }
            });
            fenleiRef.value = town;
            getAreaFenlei();
        })
        .catch(err => {});
}

// 地图移动时弹窗跟随
function infoWindowPostRender() {
    // let viewer = viewers.value;
    if (popdata.value.msLongitude && popdata.value.msLatitude) {
        //经纬度转为世界坐标
        const gisPosition = Cesium.Cartesian3.fromDegrees(
            Number(popdata.value.msLongitude),
            Number(popdata.value.msLatitude),
            0
        ); //转化为屏幕坐标
        var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene,
            gisPosition
        );

        if (Cesium.defined(windowPosition)) {
            const pop = document.getElementById('popup');
            if (pop) {
                pop.style.top = windowPosition.y - 10 + 'px';
                pop.style.left = windowPosition.x + 10 + 'px';
            }
        }
    }
}

// 隐藏弹窗
function hiddenOverlayChart() {
    const pop = document.getElementById('popup');
    if (pop) {
        pop.style.display = 'none'; // 清除监听事件
    }

    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
}
//显示弹窗
function showOverlayChart(position) {
    const pop = document.getElementById('popup');
    if (pop) {
        pop.style.display = 'block';
        pop.style.position = 'absolute';
        pop.style.top = position.y - 10 + 'px';
        pop.style.left = position.x + 10 + 'px';
        pop.style.zIndex = 99;
    }
}

//添加范围圈
function addCircleRipple(viewer, data) {
    var r1 = data.minR,
        r2 = data.minR;

    function changeR1() {
        //这是callback，参数不能内传
        r1 = r1 + data.deviationR;
        if (r1 >= data.maxR) {
            r1 = data.minR;
        }

        return r1;
    }
    function changeR2() {
        r2 = r2 + data.deviationR;
        if (r2 >= data.maxR) {
            r2 = data.minR;
        }
        return r2;
    }
    viewer.entities.add({
        id: data.id,
        name: '',
        position: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, data.height),
        ellipse: {
            semiMinorAxis: new Cesium.CallbackProperty(changeR1, false),
            semiMajorAxis: new Cesium.CallbackProperty(changeR1, false),
            height: data.height,
            material: new Cesium.ImageMaterialProperty({
                image: data.imageUrl,
                repeat: new Cesium.Cartesian2(1.0, 1.0),
                transparent: true,
                color: new Cesium.CallbackProperty(function () {
                    var alp = 1 - r1 / data.maxR;
                    return Cesium.Color.WHITE.withAlpha(alp); //entity的颜色透明 并不影响材质，并且 entity也会透明哦
                }, false),
            }),
        },
    });
    setTimeout(function () {
        viewer.entities.add({
            name: '',
            position: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, data.height),
            ellipse: {
                semiMinorAxis: new Cesium.CallbackProperty(changeR2, false),
                semiMajorAxis: new Cesium.CallbackProperty(changeR2, false),
                height: data.height,
                material: new Cesium.ImageMaterialProperty({
                    image: data.imageUrl,
                    repeat: new Cesium.Cartesian2(1.0, 1.0),
                    transparent: true,
                    color: new Cesium.CallbackProperty(function () {
                        var alp = 1;
                        alp = 1 - r2 / data.maxR;
                        return Cesium.Color.WHITE.withAlpha(alp);
                    }, false),
                }),
            },
        });
    }, data.eachInterval);
}
/*-------------------------------------------------------------------------------------------*/
</script>

<style lang="scss" scoped>
$height: calc(100vh - 100px);

.center {
    width: 100%;
    height: 100%;

    .imgrotate {
        transform: rotate(180deg);
    }

    .title {
        width: 100%;
        height: 45px;
        background: url('@/assets/images/title.png');
        background-repeat: no-repeat;
        background-size: 110% 100%;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        line-height: 45px;
        padding-left: 46px;
        display: flex;
        cursor: pointer;
        align-items: center;
        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%;
            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%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        p {
            width: 120px;
            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);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
.frame {
    :deep(.el-table__cell) {
        color: #333;
    }
}
.rightWra {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 23%;
    height: $height;
    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);
    transition: transform 1s;
    .farmlandHeader {
        display: flex;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        align-items: center;
        color: rgba(255, 255, 255, 1);
        margin: 20px 0;
        padding: 0 10px;
        .el-select {
            // width: 80%;
            // font-size: 14px;
            // color: #333;
            // background: rgba(22, 94, 102, 1);
            // border: 1px solid rgba(4, 153, 153, 1) !important;
            // margin-top: 20px;

            :deep(.el-input__wrapper) {
                background-color: transparent;
                box-shadow: none;
                border-radius: 4px;
                background: 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);
            }

            :deep(.el-input__inner) {
                color: #fff;
            }
        }
    }
    .rightFoldDiv {
        width: 30px;
        height: 30px;
        position: absolute;
        left: -8%;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 30px;
        color: #ccc;
    }

    .rightTop {
        width: 100%;
        height: 88%;
        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%;
            :deep(.el-table--fit) {
                height: 90%;
            }
            .but {
                width: 100px;
                margin: 10px auto;
            }
            .radioDiv {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            :deep(.el-table tr) {
                background-color: transparent;
            }
            :deep(.el-table) {
                --el-table-border-color: none;
                color: rgba(255, 255, 255, 1);
            }
            :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
                background-color: revert;
            }

            .Crops {
                display: flex;
                width: 100%;
                margin-bottom: 10px;
                font-size: 14px;
                font-weight: 400;
                height: 31px;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                opacity: 1;
                background: linear-gradient(
                    90deg,
                    rgba(21, 173, 148, 0.1) 0%,
                    rgba(21, 173, 148, 0) 100%
                );

                div {
                    display: flex;
                    align-items: center;
                }
            }

            .el-checkbox-group {
                display: flex;
                flex-direction: column;
            }

            :deep(.ones) {
                width: 100%;
                height: 171;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                --el-table-tr-bg-color: null;
                --el-table-border-color: null;
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 0px;
                color: rgba(255, 255, 255, 1);
            }
        }

        .ProgressBar {
            width: 100%;
            height: 9px;
            opacity: 1;
        }
    }

    .rightbottom {
        width: 100%;
        height: 490px;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .ASdivision {
            display: flex;
            justify-content: center;
            width: 95%;
            flex-direction: column;
            padding: 5px 10px 5px 10px;
            color: rgba(255, 255, 255, 1);
            height: 40%;
            :deep(.el-table tr) {
                background-color: transparent;
            }
            :deep(.el-table) {
                --el-table-border-color: none;
                color: rgba(255, 255, 255, 1);
            }
            :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
                background-color: revert;
            }

            .Crops {
                display: flex;
                width: 100%;
                margin-bottom: 10px;
                font-size: 14px;
                font-weight: 400;
                height: 31px;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                opacity: 1;
                background: linear-gradient(
                    90deg,
                    rgba(21, 173, 148, 0.1) 0%,
                    rgba(21, 173, 148, 0) 100%
                );

                div {
                    display: flex;
                    align-items: center;
                }
            }

            .el-checkbox-group {
                display: flex;
                flex-direction: column;
            }

            :deep(.ones) {
                width: 100%;
                height: 171;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                --el-table-tr-bg-color: null;
                --el-table-border-color: null;
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 0px;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
}
:deep(.el-input__wrapper) {
    opacity: 1;
    border-radius: 4px;
    // background: rgba(22, 94, 102, 1);
    // border: 1px solid rgba(4, 153, 153, 1);
    // box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.25);dsawe
    width: 70%;
    .el-input__inner {
        color: #ccc;
    }
}

.legend {
    position: absolute;
    right: 25%;
    bottom: 7%;
    width: 129px;
    border: 1px solid rgba(4, 153, 153, 1);

    // height: 50px;
    :deep(.el-collapse-item__header) {
        background: rgba(2, 31, 26, 0.6);
        color: rgba(255, 255, 255, 1);
        text-align: center;
        padding: 0 30px;
        font-size: 14px;
    }

    --el-collapse-content-bg-color {
        background: rgba(2, 31, 26, 0.6);
    }

    :deep(.el-collapse-item__content) {
        background: rgba(2, 31, 26, 0.6);
        padding: 0 10px;
        padding-bottom: 10px;
    }

    --el-collapse-border-color: none;
    --el-collapse-content-bg-color: none;

    // opacity: 1;
    // border-radius: 4px;
    // background: rgba(2, 31, 26, 0.6);
    // display: flex;
    // flex-direction: column;
    // justify-content: flex-start;
    // align-items: center;
    // padding: 10px 10px 10px 10px;
    p {
        margin: 10px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }

    .mt-4 {
        .el-checkbox {
            height: 30px;
            width: 100%;
            margin-bottom: 2px;
            padding-left: 10px;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 0px;
            color: rgba(255, 255, 255, 1);
            text-align: left;
        }
    }

    :deep(.el-checkbox__label) {
        color: black;
    }
}

.bottom_center {
    position: absolute;
    // left: calc(400px + 20px + 8vw);
    left: -2%;
    right: 0;
    margin: auto;
    width: calc(100% - (400px * 2) - (10vw * 2));
    min-width: 380px;
    bottom: 5%;
    height: 75px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(2, 31, 26, 0.6);
    border: 1px solid rgba(4, 153, 153, 1);
}

.tool {
    position: absolute;
    right: 30%;
    top: 8%;
    width: 30px;
    height: 280px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
}

#popup {
    border-radius: 5px;
    background: rgba(2, 31, 26, 1);
    display: none;
    // justify-content: flex-start;
    // align-items: flex-end;
    padding: 30px 8px 20px 8px;
    border: 2px solid rgba(4, 153, 153, 1);

    .rowWra {
        display: flex;
        margin-bottom: 10px;
        justify-content: space-between;
        & > span:nth-child(1) {
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
            // margin-top: 20px;
            line-height: 24px;
            // width: 3em;
            // font-size: 14px;
            margin-right: 10px;
        }

        & > span:nth-child(2) {
            color: rgba(255, 255, 255, 1);
            width: 179px;
            height: 24px;
            opacity: 1;
            border-radius: 2px;
            background: rgba(217, 231, 255, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2px 10px 2px 10px;
        }
    }

    .cancel {
        position: absolute;
        right: 10px;
        top: 5px;
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
    }
}

#pop {
    border-radius: 5px;
    background: rgba(2, 31, 26, 1);
    display: none;
    // justify-content: flex-start;
    // align-items: flex-end;
    padding: 30px 8px 20px 8px;

    .cancel {
        position: absolute;
        right: 10px;
        top: 5px;
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
    }

    & > div {
        display: flex;
        margin-bottom: 10px;

        & > div:nth-child(1) {
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
            // margin-top: 20px;
            line-height: 24px;
            margin-right: 10px;
        }

        & > div:nth-child(2) {
            color: rgba(255, 255, 255, 1);
            width: 129px;
            height: 24px;
            opacity: 1;
            border-radius: 2px;
            background: rgba(217, 231, 255, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2px 10px 2px 10px;
            // margin-top: 20px;
        }
    }
}

.back_button {
    position: absolute;
    right: 30%;
    top: 20px;
}
.detailsDiv {
    :deep(.detailsDialog) {
        border-radius: 4px;
        background: rgba(3, 48, 54, 0.95);
        border: 2px solid rgba(4, 153, 153, 1);
        color: rgba(255, 255, 255, 1);
    }
    :deep().el-dialog__body {
        color: rgba(255, 255, 255, 1) !important;
    }
    .center {
        div {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
    p {
        width: 151px;
        height: 24px;
        opacity: 1;
        background: rgba(217, 231, 255, 0.2);
        text-align: center;
        line-height: 24px;
        margin-right: 50px;
    }
    :deep(.el-dialog__header) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    :deep(.el-dialog__title) {
        color: #fff !important;
    }
}
</style>
<style lang="scss">
.select_city {
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);

    .el-select-dropdown__item.hover {
        background: rgba(2, 31, 26, 0.95);
        box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
    }

    .el-select-dropdown__item {
        color: #fff;
    }
}

.el-select__popper {
    border: none !important;
    background: transparent !important;
}

.el-popper {
    border: none !important;
    background: transparent !important;
}

.el-popper__arrow::before {
    background: rgba(41, 255, 255, 0.7) !important;
}
.el-popper__arrow {
    display: none;
}
</style>