up
This commit is contained in:
@@ -3086,38 +3086,6 @@ function chartModes() {
|
||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
// start: 0,//默认为0
|
||||
// end: 100,//默认为100
|
||||
type: 'slider',
|
||||
show: false,
|
||||
// xAxisIndex: [0],
|
||||
handleSize: 0, //滑动条的 左右2个滑动条的大小
|
||||
startValue: 0, // 初始显示值
|
||||
endValue: 6, // 结束显示值
|
||||
height: 10, //组件高度
|
||||
left: '5%', //左边的距离
|
||||
right: '4%', //右边的距离
|
||||
bottom: 5, //底边的距离
|
||||
borderColor: '#000',
|
||||
fillerColor: '#269cdb',
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
|
||||
showDataShadow: false, //是否显示数据阴影 默认auto
|
||||
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
||||
realtime: true, //是否实时更新
|
||||
filterMode: 'filter',
|
||||
},
|
||||
//下面这个属性是里面拖到
|
||||
{
|
||||
type: 'inside',
|
||||
show: true,
|
||||
// xAxisIndex: [0],
|
||||
start: 1, //默认为1
|
||||
end: 100, //默认为100
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
top: 10,
|
||||
left: 10,
|
||||
|
||||
@@ -551,7 +551,7 @@
|
||||
<div>{{ clickInfoMap.value }}亩</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
<div id="pop">
|
||||
<!-- <div id="pop">
|
||||
<div class="content">
|
||||
<div>
|
||||
设备：
|
||||
@@ -579,7 +579,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
|
||||
<el-dialog destroy-on-close v-model="visible" :show-close="false">
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
@@ -1029,8 +1029,8 @@
|
||||
v-model="formInline.flag"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option label="行政区划" value="2" />
|
||||
<el-option label="高标准农田" value="1" />
|
||||
<el-option label="有" value="有" />
|
||||
<el-option label="无" value="无" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 270px" label="监测时间:">
|
||||
@@ -1045,14 +1045,6 @@
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button plain @click="resetForm">重置</el-button>
|
||||
<el-button
|
||||
v-if="!operate"
|
||||
type="primary"
|
||||
text
|
||||
@click="dowcity"
|
||||
>
|
||||
下载
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="modeDiv" @click="SwitchMode">
|
||||
@@ -1060,241 +1052,173 @@
|
||||
<div :class="SwitchFlag ? '' : 'Selecteds'">图表模式</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableBox">
|
||||
<div class="tableBox" v-show="SwitchFlag">
|
||||
<el-table
|
||||
v-if="label3 !== '虫情监测仪'"
|
||||
:data="tableNewData"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }"
|
||||
header-row-class-name="tabth"
|
||||
height="90%"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="80"
|
||||
align="center"
|
||||
label="序号"
|
||||
:index="Nindex"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableItem"
|
||||
:key="index"
|
||||
:prop="item.value"
|
||||
:label="item.lable"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column label="监测时间">
|
||||
<template #default="scope">
|
||||
<span v-if="label3 == '土壤土质'">
|
||||
{{ scope.row.dataTime }}
|
||||
</span>
|
||||
<span v-if="label3 !== '土壤土质'">
|
||||
{{ scope.row.pictureTime }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column class="red" label="预警情况">
|
||||
<template #default="scope">
|
||||
<span
|
||||
v-if="scope.row.warning === '有'"
|
||||
style="
|
||||
background-color: rgba(255, 62, 57, 1);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
padding: 2px 12px 2px 12px;
|
||||
border-radius: 2px;
|
||||
"
|
||||
>
|
||||
{{ scope.row.warning }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
style="
|
||||
background-color: rgba(9, 222, 133, 1);
|
||||
padding: 2px 12px 2px 12px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
border-radius: 2px;
|
||||
"
|
||||
>
|
||||
{{ scope.row.warning }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<span style="color: rgba(100, 195, 164, 1)">
|
||||
查看详情
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="insectDiv" v-if="label3 == '虫情监测仪'">
|
||||
<el-row class="gutters" :gutter="40">
|
||||
<el-col
|
||||
v-for="(item, index) in tableNewData"
|
||||
:key="index"
|
||||
:span="6"
|
||||
>
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<div class="ins">
|
||||
<image-preview
|
||||
append-to-body
|
||||
:src="item.picturePath"
|
||||
:zoom-rate="1.2"
|
||||
fit="cover"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</image-preview>
|
||||
<span
|
||||
v-if="item.warning == '无'"
|
||||
style="
|
||||
background-color: rgba(67, 207, 124, 1);
|
||||
"
|
||||
class="yj"
|
||||
>
|
||||
无预警
|
||||
</span>
|
||||
<span
|
||||
v-if="item.warning == '有'"
|
||||
style="background-color: red"
|
||||
class="yj"
|
||||
>
|
||||
有预警
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 12px">
|
||||
<div class="bottom">
|
||||
<time class="time">
|
||||
{{ item.pictureTime }}
|
||||
</time>
|
||||
</div>
|
||||
<br />
|
||||
<span
|
||||
style="color: red"
|
||||
v-if="item.warning == '有'"
|
||||
>
|
||||
{{ item.picturesMark2O1List[0].pestName }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
style="color: rgba(67, 207, 124, 1)"
|
||||
v-if="item.warning == '无'"
|
||||
>
|
||||
正常
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="example-pagination-block">
|
||||
共{{ insectarr.length }}条
|
||||
共{{ tabulation.length }}条
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="insectarr.length"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
@current-change="handleCurrentChange"
|
||||
:total="tabulation.length"
|
||||
:current-page="tabulationcurrentPage"
|
||||
:page-size="tabulationpageSize"
|
||||
@current-change="tabulationCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chartModeDiv"></div>
|
||||
</div>
|
||||
<div class="centent">
|
||||
<div class="arrow" @click="foldClick"></div>
|
||||
</div>
|
||||
<div id="cesiumContainers" v-show="!flags" class="detailed"></div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="智能孢子仪" name="firsts">
|
||||
<div class="tabulationCente">
|
||||
<div class="left">
|
||||
<p>
|
||||
当前选择 ：
|
||||
<span style="color: rgba(100, 195, 164, 1)">{{ label2 }}</span>
|
||||
</p>
|
||||
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="freckle">
|
||||
<div class="searchDiv">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item style="width: 180px" label="预警情况:">
|
||||
<el-select
|
||||
popper-class="selectCity"
|
||||
v-model="formInline.flag"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option label="行政区划" value="2" />
|
||||
<el-option label="高标准农田" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 270px" label="监测时间:">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="➡️"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button plain @click="resetForm">重置</el-button>
|
||||
<el-button
|
||||
v-if="!operate"
|
||||
type="primary"
|
||||
text
|
||||
@click="dowcity"
|
||||
>
|
||||
下载
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="modeDiv" @click="SwitchMode">
|
||||
<div :class="SwitchFlag ? 'Selected' : ''">表格模式</div>
|
||||
<div :class="SwitchFlag ? '' : 'Selecteds'">图表模式</div>
|
||||
<div v-show="!flags" class="cesiumContainersDiv">
|
||||
<div id="cesiumContainers" class="detailed"></div>
|
||||
<div id="pop">
|
||||
<div class="content">
|
||||
<div>
|
||||
设备：
|
||||
<p>{{ popdata.dev_code }}</p>
|
||||
</div>
|
||||
<div>
|
||||
经度：
|
||||
<p>{{ popdata.msLongitude }}</p>
|
||||
</div>
|
||||
<div>
|
||||
纬度：
|
||||
<p>{{ popdata.msLatitude }}</p>
|
||||
</div>
|
||||
<div>
|
||||
设备状况：
|
||||
<p>
|
||||
<span
|
||||
style="background-color: rgba(67, 207, 124, 1)"
|
||||
v-if="popdata.equipment == '正常'"
|
||||
>
|
||||
{{ popdata.equipment }}
|
||||
</span>
|
||||
<span style="background: red" v-else>
|
||||
{{ popdata.equipment }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centent">
|
||||
<div class="arrow" @click="foldClick"></div>
|
||||
</div>
|
||||
<div id="cesiumContainers2" v-show="!flags" class="detailed"></div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="虫情监测仪" name="second">
|
||||
<div class="tabulationCente">
|
||||
<div class="left">
|
||||
<p>
|
||||
当前选择 ：
|
||||
<span style="color: rgba(100, 195, 164, 1)">{{ label2 }}</span>
|
||||
</p>
|
||||
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="freckle">
|
||||
<div class="searchDiv">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item style="width: 180px" label="预警情况:">
|
||||
<el-select
|
||||
popper-class="selectCity"
|
||||
v-model="formInline.flag"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option label="行政区划" value="2" />
|
||||
<el-option label="高标准农田" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 270px" label="监测时间:">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="➡️"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button plain @click="resetForm">重置</el-button>
|
||||
<el-button
|
||||
v-if="!operate"
|
||||
type="primary"
|
||||
text
|
||||
@click="dowcity"
|
||||
>
|
||||
下载
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="modeDiv" @click="SwitchMode">
|
||||
<div :class="SwitchFlag ? 'Selected' : ''">表格模式</div>
|
||||
<div :class="SwitchFlag ? '' : 'Selecteds'">图表模式</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centent">
|
||||
<div class="arrow" @click="foldClick"></div>
|
||||
</div>
|
||||
<div id="cesiumContainers3" v-show="!flags" class="detailed"></div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="土壤墒情" name="third">
|
||||
<div class="tabulationCente">
|
||||
<div class="left">
|
||||
<p>
|
||||
当前选择 ：
|
||||
<span style="color: rgba(100, 195, 164, 1)">{{ label2 }}</span>
|
||||
</p>
|
||||
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="freckle">
|
||||
<div class="searchDiv">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item style="width: 180px" label="预警情况:">
|
||||
<el-select
|
||||
popper-class="selectCity"
|
||||
v-model="formInline.flag"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option label="行政区划" value="2" />
|
||||
<el-option label="高标准农田" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 270px" label="监测时间:">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="➡️"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button plain @click="resetForm">重置</el-button>
|
||||
<el-button
|
||||
v-if="!operate"
|
||||
type="primary"
|
||||
text
|
||||
@click="dowcity"
|
||||
>
|
||||
下载
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="modeDiv" @click="SwitchMode">
|
||||
<div :class="SwitchFlag ? 'Selected' : ''">表格模式</div>
|
||||
<div :class="SwitchFlag ? '' : 'Selecteds'">图表模式</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centent">
|
||||
<div class="arrow" @click="foldClick"></div>
|
||||
</div>
|
||||
<div id="cesiumContainers4" v-show="!flags" class="detailed"></div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user