-
-
-
-
-
-
-
-
-
-
-
- 查询
- 重置
-
- 下载
-
-
-
-
-
表格模式
-
图表模式
+
+
+
+
+
+ 设备：
+
{{ popdata.dev_code }}
+
+
+ 经度：
+
{{ popdata.msLongitude }}
+
+
+ 纬度：
+
{{ popdata.msLatitude }}
+
+
+ 设备状况：
+
+
+ {{ popdata.equipment }}
+
+
+ {{ popdata.equipment }}
+
+
+
+
X
-
-
-
-
-
-
-
-
- 当前选择 ：
- {{ label2 }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 查询
- 重置
-
- 下载
-
-
-
-
-
-
-
-
-
-
-
-
-
- 当前选择 ：
- {{ label2 }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 查询
- 重置
-
- 下载
-
-
-
-
-
-
-
-
@@ -1361,13 +1285,11 @@ const value2 = ref(''); //结束时间
let value3 = ref(''); //结束时间
let devicesArr = ref([]); //全部设备编号
let Site = ref([]); //站点标号
+let SwitchFlag = ref(true);
let seachData = ref({});
-let tableNewData=ref([])
+let tableNewData = ref([]);
+let tabulation = ref([]); //列表模式
let tableItem = ref([
- {
- lable: '监测时间',
- value: 'dateTime',
- },
{
lable: '预警情况',
value: 'excelName',
@@ -1409,6 +1331,8 @@ let humidity4 = ref([]); //湿度集合
let humidity5 = ref([]); //湿度集合
let popdata = ref({});
let gridData = ref([]);
+let tabulationcurrentPage = ref(1); //列表当前页
+let tabulationpageSize = ref(13); //每页条数
const activeName = ref('first'); //tabs
const treeData = [
@@ -1605,85 +1529,12 @@ function initMap() {
...mapOption,
}),
});
- viewers2 = new Cesium.Viewer('cesiumContainers2', {
- 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,
- }),
- });
- viewers3 = new Cesium.Viewer('cesiumContainers3', {
- 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,
- }),
- });
- viewers4 = new Cesium.Viewer('cesiumContainers4', {
- 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,
- }),
- });
// 去除logo
viewer.cesiumWidget.creditContainer.style.display = 'none';
viewers.cesiumWidget.creditContainer.style.display = 'none';
- viewers2.cesiumWidget.creditContainer.style.display = 'none';
- viewers3.cesiumWidget.creditContainer.style.display = 'none';
- viewers4.cesiumWidget.creditContainer.style.display = 'none';
+
addWms('shuzisannong:huangdaoqu_town', 'tl');
+ addWmss('shuzisannong:huangdaoqu_town', 'tl');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 0,
@@ -1692,18 +1543,6 @@ function initMap() {
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 0,
});
- viewers2.camera.flyTo({
- destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
- duration: 0,
- });
- viewers3.camera.flyTo({
- destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
- duration: 0,
- });
- viewers4.camera.flyTo({
- destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
- duration: 0,
- });
// 图层点击事件
// layerClick();
@@ -1733,6 +1572,30 @@ function initMap() {
viewer.scene.postRender.addEventListener(infoWindowPostRender);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+ var handlers = new Cesium.ScreenSpaceEventHandler(viewers.canvas);
+ handlers.setInputAction(function (event) {
+ var pickedObject = viewers.scene.pick(event.position);
+ if (
+ Cesium.defined(pickedObject) &&
+ pickedObject.id instanceof Cesium.Entity &&
+ pickedObject.id.billboard
+ ) {
+ var position = pickedObject.id.position.getValue(viewers.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);
+ viewers.scene.postRender.addEventListener(infoWindowPostRender);
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// data数据数组
@@ -1977,8 +1840,25 @@ const handleCurrentChange = val => {
(currentPage.value - 1) * pageSize.value + pageSize.value
);
};
+//列表模式模式切换
+const SwitchMode = () => {
+ SwitchFlag.value = !SwitchFlag.value;
+ const statInfo = chartModeDiv.value; // 获取图表元素
+ statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
+ statInfo.style.height = window.innerHeight - 100 + 'px';
+ const myChart = echarts.init(statInfo);
+ // 设置宽度自适应
+ window.addEventListener('resize', () => {
+ statInfo.style.width = window.innerWidth - 200 + 'px';
+ statInfo.style.height = window.innerHeight - 200 + 'px';
+ myChart.resize();
+ });
+ chartModes();
+};
//树结构
const handleNodeClick = (data, node, data1, data2) => {
+ value1.value = '';
+ formInline.value.flag = '';
if (!data.children) {
let oriFatherId = node.parent.parent.data;
label1.value = oriFatherId.label;
@@ -1995,30 +1875,183 @@ const handleNodeClick = (data, node, data1, data2) => {
});
if (label3.value == '智能孢子仪') {
getSpore().then(res => {
- tableNewData.value=res.data
+ tabulation.value = res.data;
+ tableNewData.value = res.data.slice(
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
+ tabulationpageSize.value
+ );
+
tableItem.value = [
- {
- lable: '监测时间',
- value: 'pictureTime',
- },
{
lable: '预警情况',
value: 'warning',
},
];
});
+ if (viewers.entities) {
+ viewers.entities.removeAll();
+ }
+ getsporeEquipmentCondition().then(res => {
+ townZuowu.label = res.data;
+ // 创建一个Entity对象加图片
+ res.data.forEach((item, index) => {
+ viewers.entities.add({
+ name: item.dev_code,
+ position: Cesium.Cartesian3.fromDegrees(
+ parseFloat(item.msLongitude),
+ parseFloat(item.msLatitude)
+ ),
+ billboard: {
+ image: chong,
+ 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贴地类型
+ },
+ });
+ });
+ });
} else if (label3.value == '虫情监测仪') {
getinsect().then(res => {
+ tabulation.value = res.data;
+ tableNewData.value = res.data.slice(
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
+ tabulationpageSize.value
+ );
+
+ tableItem.value = [
+ {
+ lable: '预警情况',
+ value: 'warning',
+ },
+ ];
+ });
+ if (viewers.entities) {
+ viewers.entities.removeAll();
+ }
+ geteqLightEquipmentCondition().then(res => {
console.log(res.data);
+ townZuowu.label = res.data;
+ // 创建一个Entity对象加图片
+ res.data.forEach((item, index) => {
+ viewers.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贴地类型
+ },
+ });
+ });
});
} else if (label3.value == '土壤土质') {
getfindAllSoil().then(res => {
- console.log(res.data);
+ tabulation.value = res.data;
+ tableNewData.value = res.data.slice(
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
+ tabulationpageSize.value
+ );
+
+ tableItem.value = [
+ {
+ lable: '预警情况',
+ value: 'warning',
+ },
+ ];
+ });
+ if (viewers.entities) {
+ viewers.entities.removeAll();
+ }
+ getequipmentCondition().then(res => {
+ townZuowu.label = res.data;
+ // 创建一个Entity对象加图片
+ res.data.forEach((item, index) => {
+ viewers.entities.add({
+ name: item.dev_code,
+ position: Cesium.Cartesian3.fromDegrees(
+ parseFloat(item.msLongitude),
+ parseFloat(item.msLatitude)
+ ),
+ billboard: {
+ image: tu,
+ 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贴地类型
+ },
+ });
+ });
});
}
}
};
+const onSubmit = () => {
+ if (label3.value == '智能孢子仪') {
+ getSpore({
+ startTime: value1.value[0]
+ ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss')
+ : null,
+ endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
+ early: formInline.value.flag,
+ }).then(res => {
+ tabulation.value = res.data;
+ tableNewData.value = res.data.slice(
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
+ tabulationpageSize.value
+ );
+ });
+ } else if (label3.value == '虫情监测仪') {
+ getinsect({
+ startTime: value1.value[0]
+ ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss')
+ : null,
+ endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
+ early: formInline.value.flag,
+ }).then(res => {
+ tabulation.value = res.data;
+ tableNewData.value = res.data.slice(
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
+ tabulationpageSize.value
+ );
+ });
+ } else if (label3.value == '土壤土质') {
+ getfindAllSoil().then(res => {
+ tabulation.value = res.data;
+ tableNewData.value = res.data.slice(
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
+ tabulationpageSize.value
+ );
+ });
+ }
+};
+
+const tabulationCurrentChange = val => {
+ tabulationcurrentPage.value = val;
+ tableNewData.value = tabulation.value.slice(
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
+ );
+};
+
//虫情切换当前页的容量
const handleCurrentChanges = val => {
currentPage.value = val;
@@ -2172,6 +2205,30 @@ const resetting = () => {
deviceValue.value = '';
getSpores();
};
+const resetForm = () => {
+ value1.value = '';
+ formInline.value.flag = '';
+ if (label3 == '智能孢子仪') {
+ getSpore().then(res => {
+ tabulation.value = res.data;
+ tableNewData.value = res.data.slice(
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
+ tabulationpageSize.value
+ );
+ });
+ } else if (label3 == '虫情监测仪') {
+ getinsect().then(res => {
+ tabulation.value = res.data;
+ tableNewData.value = res.data.slice(
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
+ (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
+ tabulationpageSize.value
+ );
+ });
+ } else if (label3 == '土壤土质') {
+ }
+};
const resettings = () => {
value1.value = '';
value2.value = '';
@@ -3256,6 +3313,26 @@ function addWms(layers, customName) {
viewer.imageryLayers.raise(dd); //将图层上移一层
}
}
+
+function addWmss(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 = viewers.imageryLayers.addImageryProvider(map); //添加图层
+ if (customName.indexOf('gbznt') > -1) {
+ // viewer.imageryLayers.lower(dd);//将图层下移一层
+ viewers.imageryLayers.lowerToBottom(dd); //将图层移到最底层
+ viewers.imageryLayers.raise(dd); //将图层上移一层
+ }
+}
//返回
function back() {
removeWms(['gbznt'], true);
@@ -3388,6 +3465,7 @@ function showOverlayChart(position) {
pop.style.top = position.y - 10 + 'px';
pop.style.left = position.x + 10 + 'px';
pop.style.zIndex = 99;
+ console.log(pop);
}
/*-------------------------------------------------------------------------------------------*/
@@ -3480,7 +3558,7 @@ $height: calc(100vh - 110px);
height: 100%;
display: flex;
.left {
- width: 25%;
+ width: 15%;
height: 100%;
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
margin-right: 20px;
@@ -3488,8 +3566,15 @@ $height: calc(100vh - 110px);
color: rgba(0, 0, 0, 1);
padding: 10px 20px;
}
+ .cesiumContainersDiv{
+ width: 30%;
+ height: 100%;
+ background: #ccc;
+ box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
+ position: relative;
+ }
.detailed {
- width: 60%;
+ width: 100%;
height: 100%;
background: #ccc;
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
@@ -3510,8 +3595,8 @@ $height: calc(100vh - 110px);
}
}
.freckle {
- width: 100%;
- height: 100%;
+ width: 50%;
+ flex: 1;
// background: #ccc;
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
:deep(.el-input__wrapper) {
@@ -3522,7 +3607,7 @@ $height: calc(100vh - 110px);
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.25);
width: 20%;
.el-input__inner {
- color: rgba(255, 255, 255, 1);
+ color: rgba(170, 170, 170, 1);
}
}
.searchDiv {
@@ -3566,11 +3651,12 @@ $height: calc(100vh - 110px);
) {
color: rgba(0, 0, 0, 1);
}
- height: 90%;
+ height: 80%;
:deep(.el-table__inner-wrapper) {
height: 96% !important;
}
.example-pagination-block {
+ font-size: 14px;
display: flex;
align-items: center;
justify-content: flex-end;
@@ -3578,6 +3664,30 @@ $height: calc(100vh - 110px);
:deep(.tabth) {
background-color: rgba(247, 247, 247, 1);
}
+ .insectDiv {
+ width: 100%;
+ height: 90%;
+ overflow: hidden;
+ .gutters {
+ width: 100%;
+ height: 100%;
+ overflow-y: scroll;
+ .ins {
+ position: relative;
+ .yj {
+ color: rgba(255, 255, 255, 1);
+ position: absolute;
+ font-size: 14px;
+ border-radius: 0px 30px, 0px, 30px;
+ top: 0;
+ right: 0;
+ text-align: center;
+ line-height: 24px;
+ padding: 1px 5px;
+ }
+ }
+ }
+ }
}
}
}
@@ -3718,7 +3828,28 @@ $height: calc(100vh - 110px);
//解决图片被其他的表格干扰问题
position: unset;
}
+.time {
+ font-size: 12px;
+ color: #999;
+}
+.bottom {
+ // margin-top: 13px;
+ line-height: 12px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.button {
+ padding: 0;
+ min-height: auto;
+}
+
+.image {
+ width: 100%;
+ display: block;
+}
.rightWra {
position: absolute;
top: 10px;