2657 lines
110 KiB
Vue
Executable File
2657 lines
110 KiB
Vue
Executable File
<template>
|
||
<div class="center">
|
||
<div ref="cesiumContainer" style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||
<div class="leftWra">
|
||
<div class="leftTop">
|
||
<div class="title">
|
||
<span>设备类型选择</span>
|
||
</div>
|
||
<div class="types">
|
||
<div width="100%" class="types_left">
|
||
<img width="90" src="@/assets/images/spore.png" alt="" />
|
||
<p
|
||
@click="
|
||
e => {
|
||
sporeClick(e);
|
||
}
|
||
"
|
||
class="sele_types"
|
||
>
|
||
智能孢子捕捉分析
|
||
</p>
|
||
</div>
|
||
<div width="100%" class="types_center">
|
||
<img width="90" src="@/assets/images/insect.png" alt="" />
|
||
<p
|
||
@click="
|
||
e => {
|
||
insectClick(e);
|
||
}
|
||
"
|
||
class="sele_types"
|
||
>
|
||
虫情监测仪
|
||
</p>
|
||
</div>
|
||
<div width="100%" class="types_right">
|
||
<img width="90" src="@/assets/images/soil.png" alt="" />
|
||
<p
|
||
@click="
|
||
e => {
|
||
soilClick(e);
|
||
}
|
||
"
|
||
class="sele_types"
|
||
>
|
||
土壤墒情、土质
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="leftcenter">
|
||
<div class="title">
|
||
<span>设备照片</span>
|
||
</div>
|
||
<div class="imgdiv">
|
||
<img
|
||
src="https://img.js.design/assets/img/641d73a7cece21d6b61bedf9.png#d27dd8c8c5369101dca2dcf160e5bba9"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="leftbottom">
|
||
<div class="title">
|
||
<span>智能孢子监测数据</span>
|
||
<p @click="visible = true">
|
||
历史数据
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div class="tableDiv">
|
||
<el-table max-height="200px" :data="tableData.arr" stripe style="width: 100%">
|
||
<el-table-column prop="devCode" label="设备编号" />
|
||
<el-table-column prop="pictureTime" label="监测时间" />
|
||
<el-table-column prop="warning" label="预警情况" />
|
||
<el-table-column prop="pictureName" label="照片">
|
||
<template #default="scope">
|
||
<el-image
|
||
style="width: 100%; height: 100px"
|
||
:src="scope"
|
||
:preview-src-list="imageBox"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="leftFoldDiv" @click="leftFoldClick()">
|
||
<el-tooltip
|
||
class="box-item"
|
||
:show-arrow="false"
|
||
:disabled="leftWraFlag"
|
||
hide-after="0"
|
||
show-after="200"
|
||
effect="dark"
|
||
content="展开"
|
||
placement="top"
|
||
>
|
||
<img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
:disabled="!leftWraFlag"
|
||
:show-arrow="false"
|
||
class="box-item"
|
||
show-after="200"
|
||
hide-after="0"
|
||
effect="dark"
|
||
content="收起"
|
||
placement="top"
|
||
>
|
||
<img
|
||
class="imgrotate"
|
||
v-if="leftWraFlag"
|
||
src="@/assets/images/close1.png"
|
||
alt=""
|
||
/>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="rightWra">
|
||
<div class="rightTop">
|
||
<div class="title">
|
||
<span>墒情、土质监测数据</span>
|
||
</div>
|
||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||
<div ref="Phdiv" class="Phdiv"></div>
|
||
|
||
<div class="depth">
|
||
<p class="SelectedDiv">0cm</p>
|
||
<p>-10cm</p>
|
||
<p>-20cm</p>
|
||
<p>-30cm</p>
|
||
</div>
|
||
<div ref="soilDiv" class="soilDiv"></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="bottom_center">
|
||
<div class="left_bottom">
|
||
<div class="title">
|
||
<span>设备照片</span>
|
||
</div>
|
||
<div class="imgdiv">
|
||
<img
|
||
src="https://img.js.design/assets/img/641d73b4634e77963ddc9e3c.png#34e63fa85ea624d67ab959d24318b0e9"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="right_bottom">
|
||
<div class="title">
|
||
<span>虫情监测数据</span>
|
||
<p
|
||
@click="
|
||
Deta(
|
||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
|
||
)
|
||
"
|
||
>
|
||
历史数据
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div class="tableDiv">
|
||
<el-table max-height="200px" :data="tableData.arr" stripe style="width: 100%">
|
||
<el-table-column prop="devCode" label="设备编号" />
|
||
<el-table-column prop="pictureTime" label="监测时间" />
|
||
<el-table-column prop="warning" label="预警情况" />
|
||
<el-table-column prop="pictureName" label="照片">
|
||
<template #default="scope">
|
||
<el-image
|
||
style="width: 100%; height: 100px"
|
||
:src="scope"
|
||
:preview-src-list="imageBox"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</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>{{ clickInfoMap.name }}：</div>
|
||
<div>{{ clickInfoMap.value }}亩</div>
|
||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||
</div>
|
||
<div id="pop">
|
||
<div v-for="(item, index) in townZuowu.label" :key="index">
|
||
<div>{{ item.crop }}：</div>
|
||
<div>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</div>
|
||
</div>
|
||
<div v-if="townZuowu.XZQMC">
|
||
<div>村名：</div>
|
||
<div>{{ townZuowu.XZQMC }}</div>
|
||
</div>
|
||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||
</div>
|
||
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
|
||
<el-dialog v-model="visible" :show-close="false">
|
||
<template #header="{ close, titleId, titleClass }">
|
||
<div class="my-header">
|
||
<h4 :id="titleId" :class="titleClass">历史数据查询</h4>
|
||
<div class="buttonbox">
|
||
<el-button type="primary">
|
||
<span style="vertical-align: middle">查询</span>
|
||
</el-button>
|
||
<el-button type="primary">
|
||
<span style="vertical-align: middle">下载</span>
|
||
</el-button>
|
||
<el-button type="primary">
|
||
<span style="vertical-align: middle">重置</span>
|
||
</el-button>
|
||
 
|
||
<el-icon @click="close"><Close /></el-icon>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="select_div">
|
||
<div class="slele_time">
|
||
<div class="time_on">
|
||
开始时间：
|
||
<el-date-picker v-model="value1" type="datetime" placeholder="请选择" />
|
||
</div>
|
||
 
|
||
<div class="time_end">
|
||
结束时间：
|
||
<el-date-picker v-model="value2" type="datetime" placeholder="请选择" />
|
||
</div>
|
||
</div>
|
||
<div class="device">
|
||
<el-select v-model="deviceValue" class="m-2" placeholder="请选择">
|
||
<el-option
|
||
popper-class="device_item"
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="tableDiv">
|
||
<el-table max-height="200px" :data="tableData.arr" style="width: 100%">
|
||
<el-table-column prop="date" label="设备编号" />
|
||
<el-table-column prop="name" label="监测时间" />
|
||
<el-table-column prop="address" label="预警情况">
|
||
<template #default="scope">
|
||
<div style="background-color: red">
|
||
{{ scope.row.name }}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="address" label="照片" />
|
||
</el-table>
|
||
<div class="block">
|
||
<el-pagination background layout="prev, pager, next" :total="50" />
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||
// import * as turf from '@turf/turf';
|
||
import { useEcharts } from '@/hooks/useEcharts';
|
||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||
import { getSpore } from '@/api/pestis/pestis.js';
|
||
import axios from 'axios';
|
||
import 'echarts-gl';
|
||
import $ from 'jquery';
|
||
import { download } from '@/utils/request';
|
||
import { ElButton, ElDialog } from 'element-plus';
|
||
import { CircleCloseFilled } from '@element-plus/icons-vue';
|
||
|
||
const visible = ref(false); //历史数据弹框
|
||
let viewer = ref(null);
|
||
const cesiumContainer = ref(null);
|
||
const farmlandDiv = ref(null);
|
||
const Phdiv = ref(null);
|
||
const soilDiv = ref(null);
|
||
const ProgressBarDiv = ref(null);
|
||
const value = ref('370211');
|
||
const leftProgressBarDiv = ref(null);
|
||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||
let OptionArr = reactive({ arr: [] });
|
||
const clickInfoMap = ref({ name: '', value: '' });
|
||
const checkedCities = ref([]);
|
||
const formLandRef = ref([]);
|
||
const flag = ref(false);
|
||
let leftWraFlag = ref(true);
|
||
let rightWraFlag = ref(true);
|
||
const value1 = ref(''); //开始时间
|
||
const value2 = ref(''); //结束时间
|
||
const deviceValue = ref(''); //设备选择
|
||
const options = [
|
||
{
|
||
value: '设备1',
|
||
label: '设备1',
|
||
},
|
||
{
|
||
value: '设备2',
|
||
label: '设备2',
|
||
},
|
||
];
|
||
watch(
|
||
() => Township.arr,
|
||
val => {
|
||
console.log('val:', val);
|
||
}
|
||
);
|
||
//行政区划数据
|
||
var data = {
|
||
title: [],
|
||
};
|
||
let dd = {
|
||
小麦: [],
|
||
玉米: [],
|
||
大豆: [],
|
||
地瓜: [],
|
||
花生: [],
|
||
蓝莓: [],
|
||
茶叶: [],
|
||
马铃薯: [],
|
||
白菜和萝卜: [],
|
||
其他: [],
|
||
};
|
||
|
||
//表格数据
|
||
let tableData =reactive({arr:[]}) ;
|
||
|
||
// 组件挂载完成后执行
|
||
onMounted(() => {
|
||
getSpores(); //请求
|
||
getaArea(); //面积
|
||
getTownships();
|
||
getvillages(); //村
|
||
//地图
|
||
initMap();
|
||
farmland();
|
||
getFarmland();
|
||
Ph();
|
||
soil();
|
||
map();
|
||
getSpores()
|
||
});
|
||
|
||
/*-------------地图------------------------*/
|
||
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';
|
||
//加载地图服务
|
||
// let map = new Cesium.WebMapServiceImageryProvider({
|
||
// url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
||
// layers: 'shuzisannong:huangdaoqu_town', //图层名
|
||
// parameters: {
|
||
// service: 'WMS',
|
||
// format: 'image/png',
|
||
// transparent: true, //是否透明
|
||
// },
|
||
// });
|
||
// viewer.imageryLayers.addImageryProvider(map);
|
||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||
duration: 2,
|
||
});
|
||
|
||
// 图层点击事件
|
||
layerClick();
|
||
// 蒙版
|
||
mbHandle();
|
||
|
||
//加载黄岛区村级地图服务
|
||
// Cesium.GeoJsonDataSource.load(
|
||
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson',
|
||
// {
|
||
// stroke: Cesium.Color.fromCssColorString('red'), //轮廓颜色
|
||
// fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
|
||
// strokeWidth: 3, //轮廓宽度 clampToGround: true,//是否贴地
|
||
// }
|
||
// ).then(function (dataSource) {
|
||
// // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
|
||
// viewer.dataSources.add(dataSource); //添加
|
||
// viewer.flyTo(dataSource, {
|
||
// duration: 5,
|
||
// offset: {
|
||
// heading: 0.0,
|
||
// pitch: -90, //保持垂直视角
|
||
// },
|
||
// }); //移动到该位置
|
||
// });
|
||
//加载黄岛区镇级地图服务
|
||
// Cesium.GeoJsonDataSource.load(
|
||
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||
// {
|
||
// stroke: Cesium.Color.fromCssColorString('#fff'), //轮廓颜色
|
||
// fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
|
||
// strokeWidth: 3, //轮廓宽度 clampToGround: true,//是否贴地
|
||
// }
|
||
// ).then(function (dataSource) {
|
||
// // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
|
||
// viewer.dataSources.add(dataSource); //添加
|
||
// viewer.flyTo(dataSource, {
|
||
// duration: 5,
|
||
// offset: {
|
||
// heading: 0.0,
|
||
// pitch: -90, //保持垂直视角
|
||
// },
|
||
// }); //移动到该位置
|
||
// });
|
||
|
||
// axios({
|
||
// method: 'get',
|
||
// url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||
// })
|
||
// .then(res => {
|
||
// res.data.features.forEach(item => {
|
||
// addBoundaryHandle(item.geometry.coordinates, '');
|
||
// });
|
||
// })
|
||
// .catch(error => {});
|
||
|
||
//作物分类面积提取地图服务
|
||
// let map2 = new Cesium.WebMapServiceImageryProvider({
|
||
// url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
||
// layers: 'shuzisannong:fenlei', //图层名
|
||
// parameters: {
|
||
// service: 'WMS',
|
||
// format: 'image/png',
|
||
// CQL_FILTER: `crop=${city_code}`,
|
||
// transparent: true, //是否透明
|
||
// },
|
||
// });
|
||
// viewer.imageryLayers.addImageryProvider(map2);
|
||
|
||
// Cesium.GeoJsonDataSource.load(
|
||
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=50&outputFormat=application%2Fjson',
|
||
// {
|
||
// stroke: Cesium.Color.fromCssColorString('rgba(165,214,63,1)'), //轮廓颜色
|
||
// fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
|
||
// strokeWidth: 3, //轮廓宽度 clampToGround: true,//是否贴地
|
||
// }
|
||
// ).then(function (dataSource) {
|
||
// // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
|
||
// viewer.dataSources.add(dataSource); //添加
|
||
// viewer.flyTo(dataSource, {
|
||
// duration: 5,
|
||
// offset: {
|
||
// heading: 0.0,
|
||
// pitch: -90, //保持垂直视角
|
||
// },
|
||
// }); //移动到该位置
|
||
// });
|
||
//全球注记
|
||
// let zhujiLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||
// url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1',
|
||
// layer: 'tdtImgBasicLayer',
|
||
// style: 'default',
|
||
// format: 'image/jpeg',
|
||
// tileMatrixSetID: 'GoogleMapsCompatible',
|
||
// show: false,
|
||
// });
|
||
// viewer.imageryLayers.addImageryProvider(zhujiLayer);
|
||
|
||
// viewer.camera.flyTo(
|
||
// {
|
||
// destination: new Cesium.Cartesian3.fromDegrees(104.9, 36.35, 8000000),
|
||
// duration: 0,
|
||
// },
|
||
// {
|
||
// offset: {
|
||
// heading: Cesium.Math.toRadians(0.0),
|
||
// pitch: Cesium.Math.toRadians(-25),
|
||
// },
|
||
// }
|
||
// );
|
||
}
|
||
|
||
// 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) {
|
||
if (XZDM !== newData.properties.XZDM) {
|
||
//防止
|
||
XZDM = newData.properties.XZDM;
|
||
value.value = XZDM; //
|
||
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);
|
||
}
|
||
} else {
|
||
removeWms(['village_CQL']);
|
||
// 移除框框
|
||
hiddenOverlayChart(); // 清除监听事件
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
}
|
||
|
||
//智能孢子捕捉点击
|
||
|
||
const sporeClick = e => {
|
||
if (e.target.className === 'sele_types') {
|
||
e.target.className = '';
|
||
} else {
|
||
e.target.className = 'sele_types';
|
||
}
|
||
};
|
||
|
||
//虫情监测点击事件
|
||
const insectClick = e => {
|
||
let bottom = document.querySelector('.bottom_center');
|
||
if (e.target.className === 'sele_types') {
|
||
e.target.className = '';
|
||
bottom.style.display = 'none';
|
||
} else {
|
||
e.target.className = 'sele_types';
|
||
bottom.style.display = 'flex';
|
||
}
|
||
};
|
||
|
||
//土壤点击事件
|
||
const soilClick = e => {
|
||
let rightWra = document.querySelector('.rightWra');
|
||
if (e.target.className === 'sele_types') {
|
||
e.target.className = '';
|
||
|
||
rightWra.style.display = 'none';
|
||
} else {
|
||
e.target.className = 'sele_types';
|
||
rightWra.style.display = 'block';
|
||
}
|
||
};
|
||
|
||
let XZQDM = '';
|
||
// 村点击高亮
|
||
function villageClick(layers, xy, level, cartographic) {
|
||
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'];
|
||
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; //保存数据
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 添加村
|
||
// CQL_FILTER:筛选的语句
|
||
// customName地图服务自定义属性名
|
||
function addvillage(CQL_FILTER, customName) {
|
||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||
url: `http://121.36.229.60:9080/geoserver/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 leftFoldClick() {
|
||
leftWraFlag.value = !leftWraFlag.value;
|
||
if (leftWraFlag.value) {
|
||
let leftWra = document.querySelector('.leftWra');
|
||
leftWra.style.transform = 'translate(0,0)';
|
||
} else {
|
||
let leftWra = document.querySelector('.leftWra');
|
||
leftWra.style.transform = 'translate(-107%,0)';
|
||
}
|
||
}
|
||
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 getSpores = () => {
|
||
getSpore().then(res => {
|
||
tableData.arr = res.data;
|
||
console.log(tableData);
|
||
});
|
||
};
|
||
//镇
|
||
const getTownships = () => {
|
||
getTownship().then(res => {
|
||
Township.arr = res.features;
|
||
Township.arr.unshift({
|
||
bbox: [119.5091, 35.5671, 120.3285, 36.1455],
|
||
properties: {
|
||
XZDM: '370211',
|
||
XZMC: '全部',
|
||
},
|
||
});
|
||
let arr = [...res.features];
|
||
let brr = [];
|
||
arr.splice(0, 1);
|
||
arr.forEach(item => {
|
||
brr.push(item.properties.XZMC);
|
||
});
|
||
data.title = [...Object.values(brr)];
|
||
});
|
||
};
|
||
//村
|
||
const getvillages = () => {
|
||
getvillage().then(res => {
|
||
Township.brr = res.features;
|
||
});
|
||
};
|
||
//面积
|
||
const getaArea = () => {
|
||
getareas().then(res => {
|
||
Township.crr = res.features;
|
||
data.title.forEach((item, index) => {
|
||
let town = res.features.map(i => {
|
||
if (item === i.properties.town) {
|
||
return i.properties;
|
||
}
|
||
});
|
||
Object.keys(dd).forEach(it => {
|
||
const index = town.findIndex(a => a && a.crop === it);
|
||
if (index > -1) {
|
||
dd[it].push(town[index].Shape_Area);
|
||
} else {
|
||
dd[it].push(null);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
};
|
||
|
||
/*-------------echarts--------------*/
|
||
var baozi =
|
||
'data:image/png;base64,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';
|
||
var chong =
|
||
'data:image/png;base64,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';
|
||
var tu =
|
||
'data:image/png;base64,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';
|
||
|
||
function map() {
|
||
const myChart = echarts.init(cesiumContainer.value);
|
||
var uploadedDataURL = 'http://140.249.23.64:10000/jnSmartPark/js/huangdao.json';
|
||
var icon1 = baozi;
|
||
myChart.showLoading();
|
||
$.getJSON(uploadedDataURL, function (geoJson) {
|
||
echarts.registerMap('hebei', geoJson);
|
||
myChart.hideLoading();
|
||
var geoCoordMap = {
|
||
泊里镇: [119.77662, 35.6745341],
|
||
海青镇: [119.569741, 35.659232],
|
||
王台镇: [120.012972, 36.0579441],
|
||
灵珠山街道: [120.085354, 36.0163451],
|
||
辛安街道: [120.139688, 36.039265],
|
||
琅琊镇: [119.858827, 35.686819],
|
||
滨海街道: [119.977144, 35.821489],
|
||
黄岛街道: [120.223051, 36.044854],
|
||
珠山街道: [119.952206, 35.901178],
|
||
珠海街道: [119.969568, 35.868121],
|
||
长江路街道: [120.156758, 35.969159],
|
||
红石崖街道: [120.095262, 36.101767],
|
||
薛家岛街道: [120.249532, 35.980284],
|
||
藏马镇: [119.815722, 35.756631],
|
||
张家楼镇: [119.876292, 35.793926],
|
||
六汪镇: [119.784986, 35.944079],
|
||
大场镇: [119.638675, 35.674932],
|
||
大村镇: [119.72593, 35.805443],
|
||
宝山镇: [119.895833, 36.001432],
|
||
铁山街道: [119.90574, 35.932106],
|
||
隐珠街道: [120.020412, 35.841401],
|
||
灵山卫街道: [120.120558, 35.931005],
|
||
};
|
||
var data = [
|
||
{ name: '泊里镇', value: 199 },
|
||
{ name: '海青镇', value: 39 },
|
||
{ name: '王台镇', value: 152 },
|
||
{ name: '灵珠山街道', value: 299 },
|
||
{ name: '辛安街道', value: 89 },
|
||
{ name: '琅琊镇', value: 52 },
|
||
{ name: '滨海街道', value: 9 },
|
||
{ name: '黄岛街道', value: 352 },
|
||
{ name: '珠山街道', value: 99 },
|
||
{ name: '珠海街道', value: 39 },
|
||
{ name: '长江路街道', value: 480 },
|
||
{ name: '红石崖街道', value: 199 },
|
||
{ name: '薛家岛街道', value: 39 },
|
||
{ name: '藏马镇', value: 152 },
|
||
{ name: '张家楼镇', value: 299 },
|
||
{ name: '六汪镇', value: 89 },
|
||
{ name: '大场镇', value: 52 },
|
||
{ name: '大村镇', value: 9 },
|
||
{ name: '宝山镇', value: 352 },
|
||
{ name: '铁山街道', value: 99 },
|
||
{ name: '隐珠街道', value: 39 },
|
||
{ name: '灵山卫街道', value: 480 },
|
||
];
|
||
var max = 480,
|
||
min = 9; // todo
|
||
var maxSize4Pin = 100,
|
||
minSize4Pin = 20;
|
||
|
||
var convertData = function (data) {
|
||
var res = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
var geoCoord = geoCoordMap[data[i].name];
|
||
if (geoCoord) {
|
||
res.push({
|
||
name: data[i].name,
|
||
value: geoCoord.concat(data[i].value),
|
||
});
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
|
||
let option = {
|
||
backgroundColor: '#1D346F',
|
||
title: {
|
||
text: '',
|
||
subtext: '',
|
||
x: 'center',
|
||
textStyle: {
|
||
color: '#ccc',
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (params) {
|
||
if (params.componentSubType == 'scatter') {
|
||
return params.name + ' : ' + params.value;
|
||
} else {
|
||
return '';
|
||
}
|
||
},
|
||
},
|
||
|
||
visualMap: {
|
||
show: false,
|
||
min: 0,
|
||
max: 500,
|
||
left: 'left',
|
||
top: 'bottom',
|
||
text: ['高', '低'], // 文本，默认为数值文本
|
||
calculable: true,
|
||
seriesIndex: [1],
|
||
inRange: {
|
||
// color: ['#3B5077', '#031525'] // 蓝黑
|
||
// color: ['#ffc0cb', '#800080'] // 红紫
|
||
// color: ['#3C3B3F', '#605C3C'] // 黑绿
|
||
// color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
|
||
// color: ['#23074d', '#cc5333'] // 紫红
|
||
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
||
color: ['#1488CC', '#2B32B2'], // 浅蓝
|
||
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
||
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
||
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
||
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
||
},
|
||
},
|
||
|
||
geo: {
|
||
show: true,
|
||
map: 'hebei',
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'inside',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
},
|
||
roam: false,
|
||
itemStyle: {
|
||
areaColor: 'red',
|
||
borderColor: '#fff',
|
||
areaColor: '#30B07E', // 区域颜色
|
||
borderWidth: 0.5,
|
||
},
|
||
emphasis: {
|
||
// 高亮时
|
||
itemStyle: {
|
||
areaColor: '#69EDB7',
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'inside',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 9,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: 'map',
|
||
map: 'shandong',
|
||
geoIndex: 0,
|
||
aspectScale: 0.75, //长宽比
|
||
showLegendSymbol: true, // 存在legend时显示
|
||
label: {
|
||
show: true,
|
||
normal: {
|
||
show: true,
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
},
|
||
roam: false,
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#1D346F',
|
||
borderColor: '#D79D3D',
|
||
},
|
||
emphasis: {
|
||
areaColor: '#0f2c70',
|
||
},
|
||
},
|
||
animation: false,
|
||
data: data,
|
||
},
|
||
{
|
||
name: '点',
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
symbol: 'image://' + icon1,
|
||
symbolSize: [40, 40],
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// position: 'inside',
|
||
// textStyle: {
|
||
// color: 'red',
|
||
// fontSize: 9,
|
||
// },
|
||
// formatter(value) {
|
||
// return value.data.value[2];
|
||
// },
|
||
// },
|
||
// },
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#1D346F',
|
||
borderColor: '#D79D3D',
|
||
},
|
||
emphasis: {
|
||
areaColor: '#0f2c70',
|
||
},
|
||
},
|
||
data: convertData(data),
|
||
showEffectOn: 'render',
|
||
rippleEffect: {
|
||
brushType: 'stroke',
|
||
},
|
||
hoverAnimation: true,
|
||
zlevel: 6,
|
||
},
|
||
{
|
||
name: 'Top 5',
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
data: convertData(
|
||
data
|
||
.sort(function (a, b) {
|
||
return b.value - a.value;
|
||
})
|
||
.slice(0, 11)
|
||
),
|
||
symbolSize: [1, 1],
|
||
showEffectOn: 'render',
|
||
rippleEffect: {
|
||
brushType: 'stroke',
|
||
},
|
||
hoverAnimation: true,
|
||
// label: {
|
||
// normal: {
|
||
// formatter: '{b}',
|
||
// position: 'right',
|
||
// show: true,
|
||
// },
|
||
// },
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#1D346F',
|
||
borderColor: '#D79D3D',
|
||
},
|
||
emphasis: {
|
||
areaColor: '#0f2c70',
|
||
},
|
||
},
|
||
zlevel: 1,
|
||
},
|
||
],
|
||
};
|
||
useEcharts(myChart, option);
|
||
});
|
||
}
|
||
|
||
function farmland() {
|
||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||
var option = {
|
||
grid: {
|
||
top: '15%',
|
||
left: '17%',
|
||
right: '2%',
|
||
bottom: '14%',
|
||
},
|
||
legend: {
|
||
data: ['EC值'],
|
||
inactiveColor: 'rgba(92,200,255,0.35)',
|
||
icon: 'roundRect',
|
||
top: 0,
|
||
right: 0,
|
||
itemWidth: 20,
|
||
itemHeight: 7,
|
||
textStyle: {
|
||
color: '#FFF',
|
||
},
|
||
show: true,
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
xAxis: {
|
||
data: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'transparent', //底部边框颜色
|
||
},
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff', //底部文字颜色
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: 'EC值(mS/cm) ',
|
||
nameTextStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 14,
|
||
},
|
||
type: 'value',
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.2)', //网格线的颜色
|
||
width: 1,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'transparent', //左边框颜色
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
fontSize: 12,
|
||
textStyle: {
|
||
color: '#ADD6FF', //左文字颜色
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: 'EC值',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)',
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
// color: '#00FFE3',//渐变1
|
||
color: 'rgba(43, 224, 152, 1)', //渐变1
|
||
},
|
||
{
|
||
offset: 1,
|
||
// color: '#4693EC',//渐变2
|
||
color: 'rgba(185, 250, 224, 1)', //渐变2
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||
z: 0,
|
||
zlevel: 0,
|
||
// label: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// fontSize: 14,
|
||
// color: '#fff', //柱状顶部文字颜色
|
||
// formatter: function (params) {
|
||
// return '20%';
|
||
// },
|
||
// },
|
||
},
|
||
{
|
||
type: 'pictorialBar',
|
||
barWidth: 20,
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(2, 31, 26, 0.85)', //数据的间隔颜色
|
||
},
|
||
},
|
||
symbolRepeat: 'fixed',
|
||
symbolMargin: 3,
|
||
symbol: 'rect',
|
||
symbolSize: [30, 4],
|
||
symbolPosition: 'end',
|
||
symbolOffset: [0, 0],
|
||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||
z: 1,
|
||
zlevel: 0,
|
||
},
|
||
],
|
||
};
|
||
|
||
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);
|
||
}
|
||
function Ph() {
|
||
const PhDivIntance = echarts.init(Phdiv.value);
|
||
let dataC1 = [20, 30, 60, 40, 50, 30];
|
||
let dataC2 = [20, 30, 60, 40, 50, 30];
|
||
let dataC3 = [20, 30, 60, 40, 50, 30];
|
||
let xData = [
|
||
'2023/03/0814:52:00',
|
||
'2023/03/0814:52:00',
|
||
'2023/03/0814:52:00',
|
||
'2023/03/0814:52:00',
|
||
];
|
||
|
||
var fontColor = '#30eee9';
|
||
let option = {
|
||
backgroundColor: 'transparent',
|
||
grid: {
|
||
left: '15%',
|
||
right: '2%',
|
||
top: '15%',
|
||
bottom: '17%',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
lineStyle: {
|
||
color: '#57617B',
|
||
},
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
},
|
||
},
|
||
offset: 12,
|
||
axisTick: {
|
||
show: false,
|
||
|
||
alignWithLabel: true,
|
||
lineStyle: {
|
||
color: '#dddddd',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//x轴文字的配置
|
||
show: true,
|
||
interval: 0, //使x轴文字显示全
|
||
textStyle: {
|
||
color: 'rgba(219, 225, 255, 1)',
|
||
},
|
||
formatter: function (params) {
|
||
var newParamsName = '';
|
||
var paramsNameNumber = params.length;
|
||
var provideNumber = 10; //一行显示几个字
|
||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
||
if (paramsNameNumber > provideNumber) {
|
||
for (var p = 0; p < rowNumber; p++) {
|
||
var tempStr = '';
|
||
var start = p * provideNumber;
|
||
var end = start + provideNumber;
|
||
if (p == rowNumber - 1) {
|
||
tempStr = params.substring(start, paramsNameNumber);
|
||
} else {
|
||
tempStr = params.substring(start, end) + '\n';
|
||
}
|
||
newParamsName += tempStr;
|
||
}
|
||
} else {
|
||
newParamsName = params;
|
||
}
|
||
return newParamsName;
|
||
},
|
||
},
|
||
|
||
data: xData,
|
||
},
|
||
yAxis: {
|
||
name: 'PH值(ph)',
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#dddddd',
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.2)', //网格线的颜色
|
||
width: 1,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 16,
|
||
},
|
||
boundaryGap: ['20%', '20%'],
|
||
},
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
stack: '总量',
|
||
smooth: true,
|
||
symbol: 'none',
|
||
showSymbol: false,
|
||
symbolSize: 8,
|
||
itemStyle: {
|
||
normal: {
|
||
areaStyle: {
|
||
//color: '#94C9EC'
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
{
|
||
offset: 0.4,
|
||
color: 'rgba(163, 198, 255, 0.4)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(163, 198, 255, 0.01)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
markPoint: {
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'red',
|
||
},
|
||
},
|
||
},
|
||
data: dataC1,
|
||
},
|
||
],
|
||
};
|
||
useEcharts(PhDivIntance, option);
|
||
}
|
||
function soil() {
|
||
const soilDivIntance = echarts.init(soilDiv.value);
|
||
var time = ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00'];
|
||
var sportData = [688, 108, 2288, 188, 929, 3108, 1008];
|
||
var sportTime = [1140, 2135, 125, 140, 1130, 138, 120];
|
||
let option = {
|
||
// backgroundColor: '#2C313E',
|
||
legend: {
|
||
icon: 'rect',
|
||
top: 7,
|
||
left: 'center',
|
||
itemWidth: 20,
|
||
itemHeight: 10,
|
||
itemGap: 30,
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
top: '15%',
|
||
left: '5%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: time,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
},
|
||
},
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
//坐标轴刻度相关设置。
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: 'PH值(ph)',
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#dddddd',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)', //左侧数标
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#ccc',
|
||
type: 'solid',
|
||
opacity: 1,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '土壤湿度(%RH)',
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#dddddd',
|
||
},
|
||
},
|
||
position: 'right',
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)', //右侧数标
|
||
},
|
||
formatter: '{value}',
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '土壤温度',
|
||
type: 'line',
|
||
data: sportTime,
|
||
symbolSize: 1,
|
||
// symbol: 'circle',
|
||
itemStyle: {
|
||
// 设置symbol的颜色
|
||
normal: {
|
||
color: 'rgba(252, 186, 211, 1)',
|
||
},
|
||
},
|
||
|
||
smooth: true,
|
||
yAxisIndex: 0,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: 'rgba(252, 186, 211, 1)',
|
||
},
|
||
},
|
||
{
|
||
name: '土壤湿度',
|
||
type: 'line',
|
||
data: sportData,
|
||
symbolSize: 1,
|
||
yAxisIndex: 1,
|
||
// symbol: 'circle',
|
||
itemStyle: {
|
||
// 设置symbol的颜色
|
||
normal: {
|
||
color: 'rgba(168, 216, 234, 1)',
|
||
},
|
||
},
|
||
smooth: true,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: 'rgba(168, 216, 234, 1)',
|
||
},
|
||
},
|
||
],
|
||
};
|
||
useEcharts(soilDivIntance, option);
|
||
}
|
||
|
||
// 添加wms
|
||
function addWms(layers, customName) {
|
||
let map = new Cesium.WebMapServiceImageryProvider({
|
||
url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
|
||
layers: layers, //图层名
|
||
parameters: {
|
||
service: 'WMS',
|
||
format: 'image/png',
|
||
transparent: true, //是否透明
|
||
// CQL_FILTER: `crop in (${name})`,
|
||
},
|
||
});
|
||
map.customName = customName; //自己定义各种属性
|
||
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
|
||
if (customName.indexOf('gbznt') > -1) {
|
||
// viewer.imageryLayers.lower(dd);//将图层下移一层
|
||
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
|
||
viewer.imageryLayers.raise(dd); //将图层上移一层
|
||
}
|
||
}
|
||
//返回
|
||
function back() {
|
||
removeWms(['gbznt'], true);
|
||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||
duration: 2,
|
||
});
|
||
flag.value = false;
|
||
}
|
||
// 图表点击事件
|
||
function ChartClick(item) {
|
||
console.log('item:', item);
|
||
// 移除作物
|
||
removeWms(['huangdaoqu_town'], true);
|
||
removeWms(['tl'], true);
|
||
let layername = 'shuzisannong:farmland';
|
||
|
||
// 判断是否存在避免重复添加
|
||
let cz = false;
|
||
const layers = viewer.imageryLayers._layers;
|
||
for (let f = layers.length - 1; f >= 0; f--) {
|
||
if (
|
||
layers[f] &&
|
||
layers[f]._imageryProvider.customName &&
|
||
layers[f]._imageryProvider.customName === layername + 'gbznt'
|
||
) {
|
||
cz = true;
|
||
}
|
||
}
|
||
if (!cz) {
|
||
// 添加高标准农田服务
|
||
addWms(layername, layername + 'gbznt');
|
||
}
|
||
// 定位到地块
|
||
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],
|
||
it.bbox[1],
|
||
it.bbox[2],
|
||
it.bbox[3]
|
||
),
|
||
duration: 2,
|
||
});
|
||
}
|
||
});
|
||
flag.value = true;
|
||
|
||
townZuowu.value = {
|
||
label: [
|
||
{ crop: '小麦', Shape_Area: '53000' },
|
||
{ crop: '地瓜', Shape_Area: '50000' },
|
||
],
|
||
};
|
||
console.log(townZuowu.label);
|
||
showOverlayChart({ x: 642, y: 312 });
|
||
}
|
||
|
||
/*--------------------------------------------------------------------------------------------*/
|
||
function getAreaFenlei() {
|
||
let fl = fenleiRef.value;
|
||
console.log('fl:', fl);
|
||
axios({
|
||
url:
|
||
serverAPI.geoserverUrl +
|
||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||
})
|
||
.then(res => {
|
||
console.log('res1111:', res);
|
||
let data = res.data.features;
|
||
data.forEach((item, index) => {
|
||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||
item.bbox[0],
|
||
item.bbox[1],
|
||
item.bbox[2],
|
||
item.bbox[3]
|
||
);
|
||
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
||
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
||
let latitude = Cesium.Math.toDegrees(center.latitude);
|
||
|
||
if (item.properties.XZDM === '370211011') {
|
||
//灵山卫街道
|
||
longitude = 120.0863;
|
||
latitude = 35.941;
|
||
} else if (item.properties.XZDM === '370211003') {
|
||
//薛家岛街道
|
||
longitude = 120.243682;
|
||
latitude = 35.97123201;
|
||
}
|
||
const townData = fl[item.properties.XZMC];
|
||
let label = [];
|
||
if (townData) {
|
||
label = townData.map((it, inex) => {
|
||
// let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
|
||
// return dd
|
||
return it.properties;
|
||
});
|
||
}
|
||
// label = label.join(' ')
|
||
// console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
|
||
// 添加点
|
||
viewer.entities.add({
|
||
name: 'point' + item.properties.XZDM,
|
||
position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
||
point: new Cesium.PointGraphics({
|
||
show: true,
|
||
pixelSize: 10,
|
||
// heightReference: Cesium.HeightReference.NONE,
|
||
color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
|
||
outlineColor: new Cesium.Color(0, 0, 0, 0),
|
||
outlineWidth: 0,
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
|
||
}),
|
||
// label: {
|
||
// show: false,
|
||
// text: label.join(' '),
|
||
// font: '12px sans-serif',
|
||
// fillColor: Cesium.Color.WHITE,
|
||
// showBackground: true,
|
||
// backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
|
||
// // style: Cesium.LabelStyle.FILL,
|
||
// outlineWidth: 3,
|
||
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
|
||
// pixelOffset: new Cesium.Cartesian2(-80, -10),
|
||
// },
|
||
info: {
|
||
label: label,
|
||
...item.properties,
|
||
// 经纬度，以便监听
|
||
lon: longitude,
|
||
lat: latitude,
|
||
},
|
||
});
|
||
});
|
||
})
|
||
.catch(err => {});
|
||
}
|
||
let fenleiRef = ref({});
|
||
function mbHandle() {
|
||
axios({
|
||
url:
|
||
serverAPI.geoserverUrl +
|
||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
|
||
})
|
||
.then(res => {
|
||
let features = res.data.features;
|
||
let town = {};
|
||
// 按镇分类
|
||
features.forEach(item => {
|
||
let key = item.properties.town;
|
||
if (town[key]) {
|
||
town[key].push(item);
|
||
} else {
|
||
town[key] = [item];
|
||
}
|
||
});
|
||
fenleiRef.value = town;
|
||
getAreaFenlei();
|
||
})
|
||
.catch(err => {});
|
||
}
|
||
|
||
// 地图移动时弹窗跟随
|
||
function infoWindowPostRender() {
|
||
// let viewer = viewers.value;
|
||
if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
|
||
//经纬度转为世界坐标
|
||
|
||
const gisPosition = Cesium.Cartesian3.fromDegrees(
|
||
Number(townZuowu.value.lon),
|
||
Number(townZuowu.value.lat),
|
||
0
|
||
); //转化为屏幕坐标
|
||
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||
viewer.scene,
|
||
gisPosition
|
||
);
|
||
|
||
if (Cesium.defined(windowPosition)) {
|
||
const pop = document.getElementById('pop');
|
||
pop.style.top = windowPosition.y - 10 + 'px';
|
||
pop.style.left = windowPosition.x + 10 + 'px';
|
||
}
|
||
}
|
||
}
|
||
|
||
// 隐藏弹窗
|
||
function hiddenOverlayChart() {
|
||
// 移除各种高亮
|
||
XZDM = '';
|
||
XZQDM = '';
|
||
removeWms(['village_CQL']);
|
||
removeWms(['aaa']);
|
||
|
||
deleteEntityByName('villageLine');
|
||
deleteEntityByName('townLine');
|
||
|
||
const pop = document.getElementById('pop');
|
||
pop.style.display = 'none'; // 清除监听事件
|
||
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||
// 重定位
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||
duration: 2,
|
||
});
|
||
removeWms(['gbznt'], true);
|
||
// addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||
flag.value = false;
|
||
}
|
||
//显示弹窗
|
||
function showOverlayChart(position) {
|
||
console.log(position);
|
||
const pop = document.getElementById('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;
|
||
}
|
||
|
||
/*-------------------------------------------------------------------------------------------*/
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$height: calc(100vh - 110px);
|
||
|
||
.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;
|
||
|
||
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: 110px;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.leftWra {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 20px;
|
||
height: $height;
|
||
width: 23%;
|
||
background: rgba(2, 31, 26, 0.85);
|
||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||
transition: transform 1s;
|
||
.leftFoldDiv {
|
||
width: 30px;
|
||
height: 30px;
|
||
position: absolute;
|
||
right: -14%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 30px;
|
||
color: #ccc;
|
||
}
|
||
.leftTop {
|
||
width: 100%;
|
||
height: 22%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.types {
|
||
width: 100%;
|
||
height: 165px;
|
||
display: flex;
|
||
div {
|
||
flex: 1;
|
||
}
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
letter-spacing: 0px;
|
||
line-height: 20.27px;
|
||
color: rgba(41, 255, 237, 1);
|
||
text-align: center;
|
||
p {
|
||
height: 34px;
|
||
width: 90%;
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
// background: linear-gradient(
|
||
// 180deg,
|
||
// rgba(16, 111, 111, 1) 0%,
|
||
// rgba(47, 214, 214, 1) 100%
|
||
// );
|
||
border: 1px solid rgba(23, 194, 180, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 5px 5px 5px 5px;
|
||
margin-left: 5px;
|
||
overflow: hidden;
|
||
// white-space: nowrap;
|
||
// text-overflow: ellipsis;
|
||
// word-break: keep-all;
|
||
}
|
||
.sele_types {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(16, 111, 111, 1) 0%,
|
||
rgba(47, 214, 214, 1) 100%
|
||
);
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
.leftcenter {
|
||
width: 100%;
|
||
height: 30%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 20px;
|
||
.imgdiv {
|
||
width: 100%;
|
||
height: calc(100% - 50px);
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 14px;
|
||
}
|
||
}
|
||
.leftbottom {
|
||
width: 100%;
|
||
height: 38%;
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-top: 13px;
|
||
.tableDiv {
|
||
// background: rgba(255, 255, 255, 0.05);
|
||
width: 85%;
|
||
height: 100%;
|
||
padding: 5px 10px 5px 10px;
|
||
color: rgba(255, 255, 255, 1);
|
||
.el-table {
|
||
--el-table-tr-bg-color: none;
|
||
--el-table-border-color: none;
|
||
::v-deep .el-table__body tr.el-table__row--striped td {
|
||
background: rgba(38, 255, 255, 0.01);
|
||
}
|
||
// ::v-deep .el-table__row {
|
||
// background: linear-gradient(
|
||
// 90deg,
|
||
// rgba(38, 255, 255, 0.15) 0%,
|
||
// rgba(38, 255, 255, 0.01) 100%
|
||
// );
|
||
// }
|
||
|
||
::v-deep .el-table__body tr:hover > td {
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(38, 255, 255, 0.15) 0%,
|
||
rgba(38, 255, 255, 0.01) 100%
|
||
) !important;
|
||
}
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
.el-checkbox-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
:deep(.ones) {
|
||
width: 100%;
|
||
height: 171;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
--el-table-tr-bg-color: null;
|
||
--el-table-border-color: null;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rightWra {
|
||
position: absolute;
|
||
top: 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;
|
||
.rightFoldDiv {
|
||
width: 30px;
|
||
height: 30px;
|
||
position: absolute;
|
||
left: -8%;
|
||
top: 50%;
|
||
transform: translate(0, -50%);
|
||
font-size: 30px;
|
||
color: #ccc;
|
||
}
|
||
.rightTop {
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.farmlandDiv {
|
||
width: 100%;
|
||
height: 30%;
|
||
opacity: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.Phdiv {
|
||
width: 100%;
|
||
display: flex;
|
||
height: 30%;
|
||
justify-content: center;
|
||
}
|
||
.depth {
|
||
width: 90%;
|
||
height: 26px;
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 1);
|
||
margin-top: 20px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(16, 111, 111, 0.1) 0%,
|
||
rgba(47, 214, 214, 0.1) 100%
|
||
);
|
||
|
||
border: 1px solid rgba(23, 194, 180, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
p {
|
||
flex: 1;
|
||
text-align: center;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.SelectedDiv {
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(16, 111, 111, 1) 0%,
|
||
rgba(47, 214, 214, 1) 100%
|
||
);
|
||
}
|
||
}
|
||
.soilDiv {
|
||
width: 100%;
|
||
display: flex;
|
||
height: 30%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.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;
|
||
|
||
.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;
|
||
}
|
||
|
||
:deep(.el-input__inner) {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
: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);
|
||
width: 20%;
|
||
.el-input__inner {
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
.block {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.legend {
|
||
position: absolute;
|
||
right: 28%;
|
||
bottom: 18%;
|
||
width: 129px;
|
||
height: 338px;
|
||
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: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
|
||
.bottom_center {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
width: calc(100% - 50% - (1vw * 2));
|
||
min-width: 380px;
|
||
bottom: 6%;
|
||
height: 30%;
|
||
opacity: 1;
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 0.6);
|
||
border: 1px solid rgba(4, 153, 153, 1);
|
||
display: flex;
|
||
.left_bottom {
|
||
width: 50%;
|
||
}
|
||
.right_bottom {
|
||
width: 50%;
|
||
}
|
||
.el-table {
|
||
--el-table-tr-bg-color: none;
|
||
--el-table-border-color: none;
|
||
::v-deep .el-table__body tr.el-table__row--striped td {
|
||
background: rgba(38, 255, 255, 0.01);
|
||
}
|
||
// ::v-deep .el-table__row {
|
||
// background: linear-gradient(
|
||
// 90deg,
|
||
// rgba(38, 255, 255, 0.15) 0%,
|
||
// rgba(38, 255, 255, 0.01) 100%
|
||
// );
|
||
// }
|
||
|
||
::v-deep .el-table__body tr:hover > td {
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(38, 255, 255, 0.15) 0%,
|
||
rgba(38, 255, 255, 0.01) 100%
|
||
) !important;
|
||
}
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
.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);
|
||
}
|
||
.imgdiv {
|
||
width: 100%;
|
||
height: calc(100% - 50px);
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
.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, 0.6);
|
||
display: none;
|
||
// justify-content: flex-start;
|
||
// align-items: flex-end;
|
||
padding: 30px 8px 20px 8px;
|
||
|
||
& > div:nth-child(1) {
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
// margin-top: 20px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
& > 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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
:deep(.el-select__popper.el-popper) {
|
||
}
|
||
|
||
:deep(.el-dialog) {
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
background: rgba(3, 48, 54, 0.95);
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
:deep(.el-dialog__header) {
|
||
opacity: 1;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||
padding: 10px;
|
||
}
|
||
.my-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
color: rgba(255, 255, 255, 1);
|
||
.buttonbox {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
:deep(.el-dialog__header) {
|
||
margin-right: 0;
|
||
.my-header {
|
||
align-items: center;
|
||
.el-dialog__title {
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
display: none;
|
||
}
|
||
.select_div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
.slele_time {
|
||
display: flex;
|
||
align-items: center;
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.device {
|
||
width: 105px;
|
||
}
|
||
}
|
||
.tableDiv {
|
||
// background: rgba(255, 255, 255, 0.05);
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 5px 10px 5px 10px;
|
||
color: rgba(255, 255, 255, 1);
|
||
.el-table {
|
||
--el-table-tr-bg-color: none;
|
||
--el-table-border-color: none;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
margin: 20px auto;
|
||
}
|
||
</style>
|