5847 lines
268 KiB
Vue
Executable File
5847 lines
268 KiB
Vue
Executable File
<template>
|
||
<div class="fatherDiv">
|
||
<div class="centerBox">
|
||
<div ref="cesiumContainer" style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||
<div class="leftWra">
|
||
<div class="leftTop">
|
||
<div class="title">
|
||
<span>设备类型选择</span>
|
||
<p @click="ShowAll">展示全部</p>
|
||
</div>
|
||
<div class="types">
|
||
<div width="100%" class="types_left">
|
||
<img width="90" src="@/assets/images/insect.png" alt="" />
|
||
<p
|
||
@click="
|
||
e => {
|
||
sporeClick(e);
|
||
}
|
||
"
|
||
:class="brightFlag == 1 || brightFlag == 4 ? 'sele_types' : ''"
|
||
>
|
||
智能孢子仪
|
||
</p>
|
||
</div>
|
||
<div width="100%" class="types_center">
|
||
<img width="90" src="@/assets/images/spore.png" alt="" />
|
||
<p
|
||
@click="
|
||
e => {
|
||
insectClick(e);
|
||
}
|
||
"
|
||
:class="brightFlag == 2 || brightFlag == 4 ? '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="brightFlag == 3 || brightFlag == 4 ? 'sele_types' : ''"
|
||
>
|
||
土壤墒情、土质
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="brightFlag == 4 || brightFlag == 1" class="leftbottom">
|
||
<div class="title">
|
||
<span>智能孢子监测数据</span>
|
||
<p @click="bugarrsVisible">
|
||
历史数据
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div class="tableDiv">
|
||
<el-table
|
||
max-height="100%"
|
||
height="100%"
|
||
:data="tableData.arrs"
|
||
stripe
|
||
style="width: 100%"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
>
|
||
<el-table-column width="90" prop="devCode" label="设备编号" />
|
||
<el-table-column prop="pictureTime" label="监测时间">
|
||
<template #default="scope">
|
||
<div>{{ handleDate(scope.row.pictureTime) }}</div>
|
||
<div>{{ handleTime(scope.row.pictureTime) }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
class="red"
|
||
prop="warning"
|
||
width="52"
|
||
:filters="[
|
||
{ text: '有', value: '有' },
|
||
{ text: '无', value: '无' },
|
||
]"
|
||
:filter-method="filterHandler"
|
||
label="预警情况"
|
||
>
|
||
<template #default="scope">
|
||
<span
|
||
v-if="scope.row.warning === '有'"
|
||
style="
|
||
background-color: rgba(255, 62, 57, 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;
|
||
border-radius: 2px;
|
||
"
|
||
>
|
||
{{ scope.row.warning }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="picturePath" label="照片">
|
||
<template #default="scope">
|
||
<div v-if="scope.row.warning === '无'">
|
||
<image-preview
|
||
append-to-body
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:zoom-rate="1.2"
|
||
fit="cover"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</image-preview>
|
||
</div>
|
||
<div v-if="scope.row.warning === '有'">
|
||
<el-image
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:fit="fit"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div v-if="brightFlag == 2" class="leftbottom">
|
||
<div class="title">
|
||
<span>实时监测数据</span>
|
||
<p @click="bugarrsVisibles">
|
||
历史数据
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div class="tableDiv">
|
||
<el-table
|
||
@cell-click="cellClick"
|
||
max-height="100%"
|
||
height="100%"
|
||
:data="bugarrtime"
|
||
stripe
|
||
style="width: 100%"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
>
|
||
<el-table-column width="90" prop="devCode" label="设备编号" />
|
||
<el-table-column prop="pictureTime" label="监测时间">
|
||
<template #default="scope">
|
||
<div>{{ handleDate(scope.row.pictureTime) }}</div>
|
||
<div>{{ handleTime(scope.row.pictureTime) }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
class="red"
|
||
prop="warning"
|
||
width="52"
|
||
:filters="[
|
||
{ text: '有', value: '有' },
|
||
{ text: '无', value: '无' },
|
||
]"
|
||
:filter-method="filterHandler"
|
||
label="预警情况"
|
||
>
|
||
<template #default="scope">
|
||
<span
|
||
v-if="scope.row.warning === '有'"
|
||
style="
|
||
background-color: rgba(255, 62, 57, 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;
|
||
border-radius: 2px;
|
||
"
|
||
>
|
||
{{ scope.row.warning }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="picturePath" label="照片">
|
||
<template #default="scope">
|
||
<div v-if="scope.row.warning === '无'">
|
||
<image-preview
|
||
append-to-body
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:zoom-rate="1.2"
|
||
fit="cover"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</image-preview>
|
||
</div>
|
||
<div v-if="scope.row.warning === '有'">
|
||
<el-image
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:fit="fit"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div v-if="brightFlag == 3" class="leftbottom">
|
||
<div class="title">
|
||
<span>设备监测信息列表</span>
|
||
<p @click="bugarrsVisibless">
|
||
历史数据
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div class="tableDiv">
|
||
<el-table
|
||
max-height="100%"
|
||
height="100%"
|
||
:data="soilAll"
|
||
stripe
|
||
style="width: 100%"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
>
|
||
<el-table-column label="监测数值" type="expand">
|
||
<template #default="props">
|
||
<div class="selectdiv" m="4">
|
||
<p>
|
||
0cm湿度:
|
||
<span
|
||
v-if="
|
||
props.row.soilHumidity1 < 5 ||
|
||
props.row.soilHumidity1 > 60
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilHumidity1 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilHumidity1 }}</span>
|
||
</p>
|
||
<p>
|
||
-10cm湿度:
|
||
<span
|
||
v-if="
|
||
props.row.soilHumidity2 < 0 ||
|
||
props.row.soilHumidity2 > 30
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilHumidity2 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilHumidity2 }}</span>
|
||
</p>
|
||
<p>
|
||
-20cm湿度:
|
||
<span
|
||
v-if="
|
||
props.row.soilHumidity3 < 0 ||
|
||
props.row.soilHumidity3 > 30
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilHumidity3 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilHumidity3 }}</span>
|
||
</p>
|
||
<p>
|
||
-30cm湿度:
|
||
<span
|
||
v-if="
|
||
props.row.soilHumidity4 < 0 ||
|
||
props.row.soilHumidity4 > 40
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilHumidity4 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilHumidity4 }}</span>
|
||
</p>
|
||
<p>
|
||
-40cm湿度:
|
||
<span
|
||
v-if="
|
||
props.row.soilHumidity5 < 0 ||
|
||
props.row.soilHumidity5 > 40
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilHumidity5 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilHumidity5 }}</span>
|
||
</p>
|
||
<p>
|
||
0cm温度:
|
||
<span
|
||
v-if="
|
||
props.row.soilTemperature1 < -10 ||
|
||
props.row.soilTemperature1 > 40
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilTemperature1 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilTemperature1 }}</span>
|
||
</p>
|
||
<p>
|
||
-10cm温度:
|
||
<span
|
||
v-if="
|
||
props.row.soilTemperature2 < -5 ||
|
||
props.row.soilTemperature2 > 40
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilTemperature2 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilTemperature2 }}</span>
|
||
</p>
|
||
<p>
|
||
-20cm温度:
|
||
<span
|
||
v-if="
|
||
props.row.soilTemperature3 < 0 ||
|
||
props.row.soilTemperature3 > 30
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilTemperature3 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilTemperature3 }}</span>
|
||
</p>
|
||
<p>
|
||
-30cm温度:
|
||
<span
|
||
v-if="
|
||
props.row.soilTemperature4 < 0 ||
|
||
props.row.soilTemperature4 > 30
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilTemperature4 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilTemperature4 }}</span>
|
||
</p>
|
||
<p>
|
||
-40cm温度:
|
||
<span
|
||
v-if="
|
||
props.row.soilTemperature5 < 0 ||
|
||
props.row.soilTemperature5 > 30
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilTemperature5 }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilTemperature5 }}</span>
|
||
</p>
|
||
<p>
|
||
PH值:
|
||
<span
|
||
v-if="
|
||
props.row.soilPh < 5.5 || props.row.soilPh > 7.5
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilPh }}
|
||
</span>
|
||
<span v-else>{{ props.row.soilPh }}</span>
|
||
</p>
|
||
<p>
|
||
EC值:
|
||
<span
|
||
v-if="
|
||
props.row.soilEc < 0 || props.row.soilEc > 0.2
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ props.row.soilEc }}
|
||
</span>
|
||
<span>{{ props.row.soilEc }}</span>
|
||
</p>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column width="90" prop="devCode" label="设备编号" />
|
||
<el-table-column
|
||
class="red"
|
||
prop="warning"
|
||
width="52"
|
||
:filters="[
|
||
{ text: '有', value: '有' },
|
||
{ text: '无', value: '无' },
|
||
]"
|
||
:filter-method="filterHandler"
|
||
label="预警情况"
|
||
>
|
||
<template #default="scope">
|
||
<span
|
||
v-if="scope.row.warning === '有'"
|
||
style="
|
||
background-color: rgba(255, 62, 57, 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;
|
||
border-radius: 2px;
|
||
"
|
||
>
|
||
{{ scope.row.warning }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="dataTime" label="监测时间">
|
||
<template #default="scope">
|
||
<div>{{ handleDate(scope.row.dataTime) }}</div>
|
||
<div>{{ handleTime(scope.row.dataTime) }}</div>
|
||
</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" v-show="brightFlags">
|
||
<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="active == '1' ? 'SelectedDiv' : ''" @click="depthclick(1)">
|
||
0cm
|
||
</p>
|
||
<p :class="active == '2' ? 'SelectedDiv' : ''" @click="depthclick(2)">
|
||
-10cm
|
||
</p>
|
||
<p :class="active == '3' ? 'SelectedDiv' : ''" @click="depthclick(3)">
|
||
-20cm
|
||
</p>
|
||
<p :class="active == '4' ? 'SelectedDiv' : ''" @click="depthclick(4)">
|
||
-30cm
|
||
</p>
|
||
<p :class="active == '5' ? 'SelectedDiv' : ''" @click="depthclick(5)">
|
||
-40cm
|
||
</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" v-show="bottomFlags">
|
||
<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="bugarrsVisibles">
|
||
历史数据
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div class="tableDiv">
|
||
<el-table
|
||
max-height="100%"
|
||
height="100%"
|
||
:data="bugarr"
|
||
stripe
|
||
style="width: 100%"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
@cell-click="cellClick"
|
||
>
|
||
<el-table-column width="90" prop="devCode" label="设备编号" />
|
||
<el-table-column prop="pictureTime" label="监测时间">
|
||
<template #default="scope">
|
||
<div>{{ handleDate(scope.row.pictureTime) }}</div>
|
||
<div>{{ handleTime(scope.row.pictureTime) }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
class="red"
|
||
prop="warning"
|
||
width="52"
|
||
:filters="[
|
||
{ text: '有', value: '有' },
|
||
{ text: '无', value: '无' },
|
||
]"
|
||
:filter-method="filterHandler"
|
||
label="预警情况"
|
||
>
|
||
<template #default="scope">
|
||
<span
|
||
v-if="scope.row.warning === '有'"
|
||
style="
|
||
background-color: rgba(255, 62, 57, 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;
|
||
border-radius: 2px;
|
||
"
|
||
>
|
||
{{ scope.row.warning }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="picturePath" label="照片">
|
||
<template #default="scope">
|
||
<div v-if="scope.row.warning === '无'">
|
||
<image-preview
|
||
append-to-body
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:zoom-rate="1.2"
|
||
fit="cover"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</image-preview>
|
||
</div>
|
||
<div v-if="scope.row.warning === '有'">
|
||
<el-image
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:fit="fit"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="bottonFold" @click="bottomFoldClick">
|
||
<el-tooltip
|
||
:disabled="bottomFold"
|
||
:show-arrow="false"
|
||
hide-after="0"
|
||
show-after="200"
|
||
class="box-item"
|
||
effect="dark"
|
||
content="展开"
|
||
placement="top"
|
||
>
|
||
<img v-if="!bottomFold" src="@/assets/images/open2.png" alt="" />
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
:disabled="!bottomFold"
|
||
:show-arrow="false"
|
||
hide-after="0"
|
||
show-after="200"
|
||
class="box-item"
|
||
effect="dark"
|
||
content="收起"
|
||
placement="top"
|
||
>
|
||
<img
|
||
class="imgrotate"
|
||
v-if="bottomFold"
|
||
src="@/assets/images/open2.png"
|
||
alt=""
|
||
/>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="tool">
|
||
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
|
||
<span><img src="@/assets/images/amplify.png" alt="" /></span>
|
||
<span><img src="@/assets/images/reduce.png" alt="" /></span>
|
||
<span><img src="@/assets/images/measure.png" alt="" /></span>
|
||
<span><img src="@/assets/images/face.png" alt="" /></span>
|
||
<span><img src="@/assets/images/position.png" alt="" /></span>
|
||
</div>
|
||
<div id="popup" class="ol-popup">
|
||
<div class="pophead" style="width: 100%; height: 0px">
|
||
<div
|
||
id="popup-title"
|
||
style="
|
||
font: bold 15px sans-serif;
|
||
align: left;
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 8px;
|
||
color: #000000;
|
||
"
|
||
></div>
|
||
<a
|
||
href="#"
|
||
id="popup-closer"
|
||
class="ol-popup-closer"
|
||
style="color: #8e908c"
|
||
></a>
|
||
</div>
|
||
<div id="popup-content" style="padding: 10px"></div>
|
||
</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>
|
||
<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 }">
|
||
<div class="my-header">
|
||
<h4 :id="titleId" :class="titleClass">历史数据查询</h4>
|
||
<div class="buttonbox">
|
||
<el-button type="primary" @click="query">
|
||
<span style="vertical-align: middle">查询</span>
|
||
</el-button>
|
||
<el-button type="primary" @click="ondownload()">
|
||
<span style="vertical-align: middle">下载</span>
|
||
</el-button>
|
||
<el-button type="primary" @click="resetting">
|
||
<span style="vertical-align: middle">重置</span>
|
||
</el-button>
|
||
 
|
||
<el-icon style="cursor: pointer" @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 class="flag">
|
||
预警情况：
|
||
<el-select v-model="value3" class="m-2" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in flagarr"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</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
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
:data="pagingarr"
|
||
stripe
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column prop="id" label="编号" />
|
||
<el-table-column prop="devCode" label="设备号" />
|
||
<el-table-column prop="pictureTime" label="监测时间" />
|
||
<el-table-column class="red" prop="warning" width="52" label="预警情况">
|
||
<template #default="scope">
|
||
<span
|
||
v-if="scope.row.warning === '有'"
|
||
style="
|
||
background-color: rgba(255, 62, 57, 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: 5px 10px;
|
||
border-radius: 2px;
|
||
"
|
||
>
|
||
{{ scope.row.warning }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="picturePath" label="照片">
|
||
<template #default="scope">
|
||
<div v-if="scope.row.warning === '无'">
|
||
<image-preview
|
||
append-to-body
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:zoom-rate="1.2"
|
||
fit="cover"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</image-preview>
|
||
</div>
|
||
<div v-if="scope.row.warning === '有'">
|
||
<el-image
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:fit="fit"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block">
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
@current-change="handleCurrentChange"
|
||
:total="tableData.arr.length"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog destroy-on-close v-model="visibles" :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" @click="querys">
|
||
<span style="vertical-align: middle">查询</span>
|
||
</el-button>
|
||
<el-button type="primary" @click="ondownload2">
|
||
<span style="vertical-align: middle">下载</span>
|
||
</el-button>
|
||
<el-button @click="resettings" type="primary">
|
||
<span style="vertical-align: middle">重置</span>
|
||
</el-button>
|
||
 
|
||
<el-icon style="cursor: pointer" @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 class="flag">
|
||
预警情况：
|
||
<el-select v-model="value3" class="m-2" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in flagarr"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</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
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
:data="bugarrs"
|
||
stripe
|
||
style="width: 100%"
|
||
@cell-click="cellClick"
|
||
>
|
||
<el-table-column prop="id" label="编号" />
|
||
<el-table-column prop="devCode" label="设备号" />
|
||
<el-table-column prop="pictureTime" label="监测时间" />
|
||
<el-table-column class="red" prop="warning" width="52" label="预警情况">
|
||
<template #default="scope">
|
||
<span
|
||
v-if="scope.row.warning === '有'"
|
||
style="
|
||
background-color: rgba(255, 62, 57, 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: 5px 10px;
|
||
border-radius: 2px;
|
||
"
|
||
>
|
||
{{ scope.row.warning }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="picturesMark2O1List" label="害虫名称">
|
||
<template #default="scope">
|
||
<span
|
||
v-for="(item, index) in scope.row.picturesMark2O1List"
|
||
:key="index"
|
||
>
|
||
{{
|
||
scope.row.picturesMark2O1List.length > 0
|
||
? item.pestName
|
||
: '无'
|
||
}},
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="pictureTime" label="害虫个数">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.picturesMark2O1List.length }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="picturePath" label="照片">
|
||
<template #default="scope">
|
||
<div v-if="scope.row.warning === '无'">
|
||
<image-preview
|
||
append-to-body
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:zoom-rate="1.2"
|
||
fit="cover"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</image-preview>
|
||
</div>
|
||
<div v-if="scope.row.warning === '有'">
|
||
<el-image
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.picturePath"
|
||
:fit="fit"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block">
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
@current-change="handleCurrentChanges"
|
||
:total="bugarr.length"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog destroy-on-close v-model="visibless" :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" @click="queryss">
|
||
<span style="vertical-align: middle">查询</span>
|
||
</el-button>
|
||
<el-button type="primary" @click="ondownload3">
|
||
<span style="vertical-align: middle">下载</span>
|
||
</el-button>
|
||
<el-button @click="resettingss" type="primary">
|
||
<span style="vertical-align: middle">重置</span>
|
||
</el-button>
|
||
 
|
||
<el-icon style="cursor: pointer" @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 class="flag">
|
||
预警情况：
|
||
<el-select v-model="value3" class="m-2" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in flagarr"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</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
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
:data="soilArr"
|
||
stripe
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column prop="dataTime" label="日期" />
|
||
<el-table-column prop="soilTemperature1" label="0cm温度（℃）" />
|
||
<el-table-column prop="soilTemperature2" label="-10cm温度" />
|
||
<el-table-column prop="soilTemperature3" label="-20cm温度" />
|
||
<el-table-column prop="soilTemperature4" label="-30cm温度" />
|
||
<el-table-column prop="soilTemperature5" label="-40温度" />
|
||
<el-table-column prop="soilHumidity1" width="80" label="0cm湿度(%rh)" />
|
||
<el-table-column prop="soilHumidity2" label="-10cm湿度" />
|
||
<el-table-column prop="soilHumidity3" label="-20cm湿度" />
|
||
<el-table-column prop="soilHumidity4" label="-30cm湿度" />
|
||
<el-table-column prop="soilHumidity5" label="-40cm湿度" />
|
||
<el-table-column prop="soilPh" width="70" label="PH值（ph）" />
|
||
<el-table-column prop="soilEc" width="70" label="EC值(S/cm)" />
|
||
|
||
<el-table-column class="red" prop="warning" width="52" label="预警情况">
|
||
<template #default="scope">
|
||
<span
|
||
v-if="scope.row.warning === '有'"
|
||
style="
|
||
background-color: rgba(255, 62, 57, 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;
|
||
border-radius: 2px;
|
||
"
|
||
>
|
||
{{ scope.row.warning }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block">
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
@current-change="handleCurrentChangess"
|
||
:total="soilAll.length"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<div class="modelDiv">
|
||
<el-dialog destroy-on-close v-model="dialogTableVisible" title="预警情况">
|
||
<image-preview
|
||
append-to-body
|
||
:src="gridData.picturePath"
|
||
:zoom-rate="1.2"
|
||
fit="cover"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</image-preview>
|
||
|
||
<!-- <el-image :src="gridData.picturePath">
|
||
<template #placeholder>
|
||
<div class="image-slot">
|
||
Loading
|
||
<span class="dot">...</span>
|
||
</div>
|
||
</template>
|
||
</el-image> -->
|
||
<div class="center">
|
||
<div class="header">识别结果</div>
|
||
<div v-for="(item, index) in gridArr" :key="index">
|
||
<span>害虫名称：{{ index }}</span>
|
||
<span>害虫个数：{{ item }}</span>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
<div class="tabulation">
|
||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||
<el-tab-pane label="全部" name="全部"></el-tab-pane>
|
||
<el-tab-pane label="智能孢子仪" name="智能孢子仪" />
|
||
<el-tab-pane label="虫情监测仪" name="虫情监测仪" />
|
||
<el-tab-pane label="土壤墒情、土质" name="土壤墒情、土质" />
|
||
</el-tabs>
|
||
<div class="tabulationCente">
|
||
<div class="left">
|
||
<p>
|
||
当前选择 ：
|
||
<span style="color: rgba(100, 195, 164, 1)">{{ label2 }}</span>
|
||
</p>
|
||
|
||
<el-tree
|
||
:data="devicesArr"
|
||
: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="有" />
|
||
<el-option label="无" value="无" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item style="width: 300px" 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">
|
||
<img src="@/assets/images/dow.png" alt="" />
|
||
下载
|
||
</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 class="chartModeFather">
|
||
<div class="tableBox" v-show="SwitchFlag">
|
||
<el-table
|
||
:data="tableNewData"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
header-row-class-name="tabth"
|
||
height="80%"
|
||
highlight-current-row
|
||
>
|
||
<el-table-column fixed="left" width="160" 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
|
||
v-for="(item, index) in tableItem"
|
||
:key="index"
|
||
:label="item.lable"
|
||
width="120"
|
||
>
|
||
<template #default="scope">
|
||
<div v-if="label3 == '虫情监测仪'">
|
||
<span
|
||
v-if="scope.row.warning === '有'"
|
||
style="color: red"
|
||
>
|
||
<span
|
||
v-for="(value, key) in scope.row.obj"
|
||
:key="key"
|
||
>
|
||
{{ key }}：{{ value }}只
|
||
<br />
|
||
</span>
|
||
<!-- {{
|
||
scope.row.picturesMark2O1List[0].pestName +
|
||
':' +
|
||
scope.row.picturesMark2O1List.length
|
||
}}个 -->
|
||
</span>
|
||
<span v-else>
|
||
{{ scope.row.warning }}
|
||
</span>
|
||
</div>
|
||
<div v-if="label3 == '土壤墒情、土质'">
|
||
<span
|
||
v-if="
|
||
scope.row.style &&
|
||
scope.row.style.includes(item.value)
|
||
"
|
||
style="color: red"
|
||
>
|
||
{{ scope.row[item.value] }}
|
||
</span>
|
||
<span v-else>
|
||
{{ scope.row[item.value] }}
|
||
</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作">
|
||
<template #default="scope">
|
||
<span
|
||
style="color: rgba(100, 195, 164, 1); cursor: pointer"
|
||
@click="onDetail(scope.row)"
|
||
>
|
||
查看详情
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="example-pagination-block">
|
||
共{{ tabulation.length }}条
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:total="tabulation.length"
|
||
:current-page="tabulationcurrentPage"
|
||
:page-size="tabulationpageSize"
|
||
@current-change="tabulationCurrentChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div v-show="!SwitchFlag" class="chartMode">
|
||
<div v-if="label3 == '土壤墒情、土质'" class="depth">
|
||
<p
|
||
:class="active == '1' ? 'SelectedDiv' : ''"
|
||
@click="depthclick(1)"
|
||
>
|
||
0cm
|
||
</p>
|
||
<p
|
||
:class="active == '2' ? 'SelectedDiv' : ''"
|
||
@click="depthclick(2)"
|
||
>
|
||
-10cm
|
||
</p>
|
||
<p
|
||
:class="active == '3' ? 'SelectedDiv' : ''"
|
||
@click="depthclick(3)"
|
||
>
|
||
-20cm
|
||
</p>
|
||
<p
|
||
:class="active == '4' ? 'SelectedDiv' : ''"
|
||
@click="depthclick(4)"
|
||
>
|
||
-30cm
|
||
</p>
|
||
<p
|
||
:class="active == '5' ? 'SelectedDiv' : ''"
|
||
@click="depthclick(5)"
|
||
>
|
||
-40cm
|
||
</p>
|
||
<p
|
||
:class="active == '6' ? 'SelectedDiv' : ''"
|
||
@click="depthclick(6)"
|
||
>
|
||
EC值
|
||
</p>
|
||
<p
|
||
:class="active == '7' ? 'SelectedDiv' : ''"
|
||
@click="depthclick(7)"
|
||
>
|
||
PH值
|
||
</p>
|
||
</div>
|
||
<div
|
||
v-show="label3 == '土壤墒情、土质'"
|
||
ref="chartModeDiv"
|
||
class="chartModeDiv"
|
||
></div>
|
||
<div class="tableBoxs" v-if="label3 !== '土壤墒情、土质'">
|
||
<div class="insectDiv">
|
||
<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 == '有'"
|
||
>
|
||
<span
|
||
v-for="(value, key) in item.obj"
|
||
:key="key"
|
||
>
|
||
{{ key }}:{{ value }}只
|
||
<br />
|
||
</span>
|
||
</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">
|
||
共{{ tabulation.length }}条
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:total="tabulation.length"
|
||
:current-page="tabulationcurrentPage"
|
||
:page-size="tabulationpageSize"
|
||
@current-change="tabulationCurrentChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="centent">
|
||
<div class="arrow" @click="foldClick">
|
||
<p v-if="!flags">
|
||
<img style="width: 300%" src="@/assets/images/shouhui.png" />
|
||
</p>
|
||
<p v-if="flags">
|
||
<img style="width: 300%" src="@/assets/images/zhankai.png" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div v-show="!flags" class="cesiumContainersDiv">
|
||
<div id="cesiumContainers" class="detailed"></div>
|
||
<div id="pops">
|
||
<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="hiddenOverlayCharts">X</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog
|
||
v-model="DetailVisible"
|
||
title="监测结果详情"
|
||
width="35%"
|
||
:before-close="handleClose"
|
||
>
|
||
<div v-if="label3 !== '土壤墒情、土质'" class="rowContent">
|
||
<div class="rowContentTop">
|
||
<div class="rowContentchildren">
|
||
<p>
|
||
{{ DetailArr.devCode }}
|
||
<span
|
||
v-if="DetailArr.warning == '有'"
|
||
style="background: rgba(212, 48, 48, 1)"
|
||
>
|
||
有预警
|
||
</span>
|
||
<span
|
||
v-if="DetailArr.warning == '无'"
|
||
style="background: rgba(67, 207, 124, 1)"
|
||
>
|
||
无预警
|
||
</span>
|
||
</p>
|
||
<span>{{ DetailArr.pictureTime }}</span>
|
||
</div>
|
||
<div v-if="DetailArr.warning == '有'">
|
||
<span v-if="label3 == '虫情监测仪'">
|
||
<span v-for="(value, key) in DetailArr.obj" :key="key">
|
||
{{ key }}:{{ value }}只,
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<image-preview
|
||
v-if="label3 !== '土壤墒情、土质'"
|
||
append-to-body
|
||
:src="`${DetailArr.picturePath}`"
|
||
:zoom-rate="1.2"
|
||
fit="cover"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</image-preview>
|
||
</div>
|
||
<div class="rowContent_bottom" v-if="label3 == '土壤墒情、土质'">
|
||
<div class="rowContentTop">
|
||
<div class="rowContentchildren">
|
||
<p>
|
||
<span
|
||
style="
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: rgba(100, 195, 164, 1);
|
||
margin-left: 0;
|
||
"
|
||
>
|
||
土壤墒情
|
||
</span>
|
||
<span
|
||
v-if="DetailArr.warning == '有'"
|
||
style="background: rgba(212, 48, 48, 1)"
|
||
>
|
||
有预警
|
||
</span>
|
||
<span
|
||
v-if="DetailArr.warning == '无'"
|
||
style="background: rgba(67, 207, 124, 1)"
|
||
>
|
||
无预警
|
||
</span>
|
||
</p>
|
||
<span>{{ DetailArr.dataTime }}</span>
|
||
</div>
|
||
<div v-if="DetailArr.warning == '有'">
|
||
<span
|
||
v-for="(item, index) in DetailArr.style"
|
||
:key="index"
|
||
style="font-size: 16px; font-weight: 00"
|
||
>
|
||
 
|
||
{{ dictionary[item] }} :
|
||
<span style="color: red; font-size: 18px; font-weight: 700">
|
||
{{ DetailArr[item] }}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<p style="margin-left: 15px; font-size: 16px; font-weight: 700">土壤湿度</p>
|
||
<div class="rowContentTop">
|
||
<div>
|
||
<div class="rowContentTopChildren">
|
||
<div>
|
||
0cm湿度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilHumidity1 >= 5 ||
|
||
DetailArr.soilHumidity1 <= 60
|
||
"
|
||
>
|
||
{{ DetailArr.soilHumidity1 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilHumidity1 }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
-10cm湿度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilHumidity2 >= 0 ||
|
||
DetailArr.soilHumidity2 <= 30
|
||
"
|
||
>
|
||
{{ DetailArr.soilHumidity2 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilHumidity2 }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
-20cm湿度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilHumidity3 >= 0 ||
|
||
DetailArr.soilHumidity3 <= 30
|
||
"
|
||
>
|
||
{{ DetailArr.soilHumidity3 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilHumidity3 }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
-30cm湿度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilHumidity4 >= 0 ||
|
||
DetailArr.soilHumidity4 <= 40
|
||
"
|
||
>
|
||
{{ DetailArr.soilHumidity4 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilHumidity4 }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
-40cm湿度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilHumidity5 >= 0 ||
|
||
DetailArr.soilHumidity5 <= 40
|
||
"
|
||
>
|
||
{{ DetailArr.soilHumidity5 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilHumidity5 }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="margin-left: 15px; font-size: 16px; font-weight: 700">土壤温度</p>
|
||
<div class="rowContentTop">
|
||
<div>
|
||
<div class="rowContentTopChildren">
|
||
<div>
|
||
0cm温度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilTemperature1 >= -10 &&
|
||
DetailArr.soilTemperature1 <= 40
|
||
"
|
||
>
|
||
{{ DetailArr.soilTemperature1 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilTemperature1 }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
-10cm温度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilTemperature2 >= -5 &&
|
||
DetailArr.soilTemperature2 <= 40
|
||
"
|
||
>
|
||
{{ DetailArr.soilTemperature2 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilTemperature2 }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
-20cm温度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilTemperature3 >= 0 &&
|
||
DetailArr.soilTemperature3 <= 30
|
||
"
|
||
>
|
||
{{ DetailArr.soilTemperature3 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilTemperature3 }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
-30cm温度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilTemperature4 >= 0 &&
|
||
DetailArr.soilTemperature4 <= 30
|
||
"
|
||
>
|
||
{{ DetailArr.soilTemperature4 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilTemperature4 }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
-40cm温度(℃):
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="
|
||
DetailArr.soilTemperature5 >= 0 &&
|
||
DetailArr.soilTemperature5 <= 30
|
||
"
|
||
>
|
||
{{ DetailArr.soilTemperature5 }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilTemperature5 }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="margin-left: 15px; font-size: 16px; font-weight: 700">土质</p>
|
||
<div class="rowContentTop">
|
||
<div>
|
||
<div class="rowContentTopChildren">
|
||
<div>
|
||
土壤EC值:
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="DetailArr.soilEc >= 0 && DetailArr.soilEc <= 0.2"
|
||
>
|
||
{{ DetailArr.soilEc }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilEc }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
土壤PH值:
|
||
<span
|
||
style="
|
||
color: rgba(67, 207, 124, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-if="DetailArr.soilPh > 5.5 && DetailArr.soilPh < 7.5"
|
||
>
|
||
{{ DetailArr.soilPh }}
|
||
</span>
|
||
<span
|
||
style="
|
||
color: rgba(212, 48, 48, 1);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
"
|
||
v-else
|
||
>
|
||
{{ DetailArr.soilPh }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</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 { downLoadFile } from '@/utils/download.js';
|
||
import { useEcharts } from '@/hooks/useEcharts';
|
||
// import MapInit from '.././components/tiandituapi/tianditu_api.js'
|
||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||
import {
|
||
getSpore,
|
||
getfindAllSoil,
|
||
getinsect,
|
||
getsporeEquipment,
|
||
detectionLightsEquipment,
|
||
getsporeEquipmentCondition,
|
||
getequipmentCondition,
|
||
geteqLightEquipmentCondition,
|
||
soilEquipment,
|
||
getdeviceNumber,
|
||
getfindAllSoilTb,
|
||
} from '@/api/pestis/pestis.js';
|
||
import axios from 'axios';
|
||
import 'echarts-gl';
|
||
import moment from 'Moment';
|
||
import { useRouter } from 'vue-router';
|
||
import 'leaflet/dist/leaflet.css';
|
||
import L from 'leaflet';
|
||
import iconShadow from '/img/marker/mark.png';
|
||
|
||
let map = L.Map;
|
||
const router = useRouter();
|
||
const visible = ref(false); //孢子历史数据弹框
|
||
const visibles = ref(false); //历史数据弹框
|
||
const url = '@/assets/images/shouhui.png';
|
||
let flags = ref(false);
|
||
const visibless = ref(false);
|
||
let dialogTableVisible = ref(false);
|
||
let viewer = ref(null);
|
||
let viewers = ref(null);
|
||
let viewers2 = ref(null);
|
||
let viewers3 = ref(null);
|
||
let viewers4 = ref(null);
|
||
const cesiumContainer = ref(null);
|
||
const farmlandDiv = ref(null);
|
||
const Phdiv = ref(null);
|
||
const soilDiv = ref(null);
|
||
const value = ref('370211');
|
||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||
let OptionArr = reactive({ arr: [] });
|
||
const clickInfoMap = ref({ name: '', value: '' });
|
||
let soilAll = ref([]);
|
||
const insectarr = ref([]);
|
||
const formLandRef = ref([]);
|
||
const flag = ref(false);
|
||
let brightFlag = ref('4');
|
||
let brightFlags = ref(true);
|
||
let bottomFlags = ref(true);
|
||
let leftWraFlag = ref(true);
|
||
let rightWraFlag = ref(true);
|
||
let bottomFold = ref(true);
|
||
let label1 = ref('');
|
||
let label2 = ref('');
|
||
let label3 = ref('');
|
||
const value1 = ref(''); //开始时间
|
||
const value2 = ref(''); //结束时间
|
||
let value3 = ref(''); //结束时间
|
||
let devicesArr = ref([]); //全部设备编号
|
||
let Site = ref([]); //站点标号
|
||
let SwitchFlag = ref(true);
|
||
let seachData = ref({});
|
||
let tableNewData = ref([]);
|
||
let tabulation = ref([]); //列表模式
|
||
let tableItem = ref([]);
|
||
let DetailVisible = ref(false);
|
||
let center = '';
|
||
let nums = ref(0);
|
||
const flagarr = ref([
|
||
{
|
||
value: '有',
|
||
label: '有',
|
||
},
|
||
{
|
||
value: '无',
|
||
label: '无',
|
||
},
|
||
]);
|
||
const deviceValue = ref(''); //设备选择
|
||
let currentPage = ref(1); //当前页
|
||
let pageSize = ref(5); //每页条数
|
||
let pagingarr = ref([]); //孢子当前页
|
||
let bugarr = ref([]); //孢子总条数
|
||
let bugarrs = ref([]); //虫情当前页
|
||
let bugarrtime = ref([]); //最近三天虫情
|
||
let soilArr = ref([]); //土壤当前页
|
||
let EcTimeArr = ref([]); //ec时间
|
||
let EcArr = ref([]); //ec值
|
||
let PhArr = ref([]); //ph值
|
||
let active = ref('1'); //厘米高亮
|
||
let temperature = ref([]); //温度集合
|
||
let temperature1 = ref([]); //温度集合
|
||
let temperature2 = ref([]); //温度集合
|
||
let temperature3 = ref([]); //温度集合
|
||
let temperature4 = ref([]); //温度集合
|
||
let temperature5 = ref([]); //温度集合
|
||
let humidity = ref([]); //湿度集合
|
||
let humidity1 = ref([]); //湿度集合
|
||
let humidity2 = ref([]); //湿度集合
|
||
let humidity3 = ref([]); //湿度集合
|
||
let humidity4 = ref([]); //湿度集合
|
||
let humidity5 = ref([]); //湿度集合
|
||
let soilPh = ref([]);
|
||
let soilEc = ref([]);
|
||
let popdata = ref({});
|
||
let gridData = ref([]);
|
||
const chartModeDiv = ref(null);
|
||
let tabulationcurrentPage = ref(1); //列表当前页
|
||
let tabulationpageSize = ref(12); //每页条数
|
||
const activeName = ref('全部'); //tabs
|
||
let DetailArr = ref([]);
|
||
let gridArr = ref({});
|
||
|
||
const dictionary = ref({
|
||
soilTemperature1: '0cm温度',
|
||
soilTemperature2: '-10cm温度',
|
||
soilTemperature3: '-20cm温度',
|
||
soilTemperature4: '-30cm温度',
|
||
soilTemperature5: '-40cm温度',
|
||
soilHumidity1: '0cm湿度(%)',
|
||
soilHumidity2: '-10cm湿度(%)',
|
||
soilHumidity3: '-20cm湿度(%)',
|
||
soilHumidity4: '-30cm湿度(%)',
|
||
soilHumidity5: '-40cm湿度(%)',
|
||
soilPh: 'PH值(ph)',
|
||
soilEc: 'EC值(S/cm)',
|
||
});
|
||
|
||
let layers = ref(null); //村
|
||
let iconLayer = ref(null);
|
||
|
||
//搜索
|
||
let formInline = ref({
|
||
yearMonth: '',
|
||
flag: '',
|
||
divisions: '',
|
||
});
|
||
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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';
|
||
//创建多个icon
|
||
|
||
const options = ref([
|
||
{
|
||
value: 'dev10101',
|
||
label: 'dev10101',
|
||
},
|
||
{
|
||
value: 'dev20101',
|
||
label: 'dev20101',
|
||
},
|
||
]);
|
||
watch(
|
||
() => Township.arr,
|
||
val => {
|
||
console.log('val:', val);
|
||
}
|
||
);
|
||
//行政区划数据
|
||
var data = {
|
||
title: [],
|
||
};
|
||
let dd = {
|
||
小麦: [],
|
||
玉米: [],
|
||
大豆: [],
|
||
地瓜: [],
|
||
花生: [],
|
||
蓝莓: [],
|
||
茶叶: [],
|
||
马铃薯: [],
|
||
白菜和萝卜: [],
|
||
其他: [],
|
||
};
|
||
//表格数据
|
||
let tableData = reactive({ arr: [], arrs: [] });
|
||
|
||
// 组件挂载完成后执行
|
||
onMounted(() => {
|
||
initonMounted();
|
||
});
|
||
function initonMounted() {
|
||
/*------------地图---------------- */
|
||
// initMap();
|
||
initmap();
|
||
/*------------请求---------------- */
|
||
getSporestime(); //孢子
|
||
getsporeEquipmentConditions(); //孢子设备信息
|
||
getfindAllSoils(); //土壤
|
||
getinsects(); //虫情
|
||
getaArea(); //面积
|
||
initLeafletMap();
|
||
// getTownships();
|
||
getdeviceNumbers('0'); //所有设备列表
|
||
farmland();
|
||
Ph();
|
||
soil();
|
||
DefaultList(); //默认显示列表模式
|
||
localStorage.setItem(router.currentRoute.value.path, false);
|
||
}
|
||
onUpdated(() => {
|
||
if (localStorage.getItem(router.currentRoute.value.path) == 'true') {
|
||
document.querySelector('.mode').innerText = '列表模式';
|
||
window.document.querySelector('#screenfull').style.display = 'block';
|
||
} else {
|
||
document.querySelector('.mode').innerText = '地图模式';
|
||
window.document.querySelector('#screenfull').style.display = 'none';
|
||
}
|
||
});
|
||
/*-------------地图------------------------*/
|
||
|
||
let maps = ref(null);
|
||
function initmap() {
|
||
maps = new ol.Map({
|
||
target: 'cesiumContainer',
|
||
controls: ol.control
|
||
.defaults({
|
||
attributionOptions: {
|
||
collapsed: true,
|
||
},
|
||
})
|
||
.extend([new ol.supermap.control.Logo(), new ol.control.ScaleLine()]),
|
||
view: new ol.View({
|
||
center: [119.86763411957472, 35.88435182141938],
|
||
zoom: 11,
|
||
projection: 'EPSG:4326',
|
||
}),
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.Tianditu({
|
||
layerType: 'img',
|
||
key: '1d109683f4d84198e37a38c442d68311',
|
||
}),
|
||
}),
|
||
//注记
|
||
// new ol.layer.Tile({
|
||
// source: new ol.source.Tianditu({
|
||
// layerType: 'img',
|
||
// isLabel: true,
|
||
// key: '1d109683f4d84198e37a38c442d68311',
|
||
// }),
|
||
// }),
|
||
],
|
||
});
|
||
cun();
|
||
zhen();
|
||
//滚轮控制村级矢量
|
||
maps.on('moveend', function (e) {
|
||
var zoom = maps.getView().getZoom(); //获取当前地图的缩放级别
|
||
if (zoom >= 13) {
|
||
layers.setVisible(true); //显示图层
|
||
} else {
|
||
layers.setVisible(false);
|
||
}
|
||
});
|
||
alter();
|
||
}
|
||
|
||
const cun = () => {
|
||
layers = new ol.layer.Tile({
|
||
source: new ol.source.TileSuperMapRest({
|
||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
|
||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||
cacheEnabled: false,
|
||
}),
|
||
name: 'huangdaoqu_village',
|
||
projection: 'EPSG:4326', //3857
|
||
zIndex: 9999,
|
||
});
|
||
maps.addLayer(layers);
|
||
// var layersArray = map.getLayers();
|
||
// layersArray.insertAt(999, layers);
|
||
};
|
||
const zhen = () => {
|
||
var layer = new ol.layer.Tile({
|
||
source: new ol.source.TileSuperMapRest({
|
||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
|
||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||
cacheEnabled: false,
|
||
}),
|
||
projection: 'EPSG:4326', //3857
|
||
zIndex: 9999,
|
||
});
|
||
maps.addLayer(layer);
|
||
};
|
||
|
||
// 位置图标显示
|
||
let positionLayer = null;
|
||
let iconStyle = null;
|
||
let iconFeature = null;
|
||
let vectorSource = null;
|
||
const positionIcon = (center, img, name) => {
|
||
iconFeature = new ol.Feature({
|
||
geometry: new ol.geom.Point(center),
|
||
name: name,
|
||
population: 4000,
|
||
rainfall: 500,
|
||
});
|
||
iconStyle = new ol.style.Style({
|
||
image: new ol.style.Icon({
|
||
anchor: [0.5, 46],
|
||
scale: 0.4,
|
||
anchorXUnits: 'fraction',
|
||
anchorYUnits: 'pixels',
|
||
src: img,
|
||
}),
|
||
});
|
||
iconFeature.setStyle(iconStyle);
|
||
vectorSource = new ol.source.Vector({
|
||
features: [iconFeature],
|
||
});
|
||
positionLayer = new ol.layer.Vector({
|
||
source: vectorSource,
|
||
});
|
||
maps.addLayer(positionLayer);
|
||
};
|
||
|
||
// 创建弹框 overlay
|
||
const alter = () => {
|
||
var container = document.getElementById('popup');
|
||
//拿到弹出框内容元素
|
||
var content = document.getElementById('popup-content');
|
||
//拿到弹出框关闭元素
|
||
var popupCloser = document.getElementById('popup-closer');
|
||
//创建弹出框容器
|
||
var overlay1 = new ol.Overlay({
|
||
//设置弹出框的容器
|
||
element: container,
|
||
//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
|
||
autoPan: true,
|
||
autoPanAnimation: {
|
||
duration: 250,
|
||
//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
|
||
},
|
||
});
|
||
//点击图标显示自定义弹出框
|
||
maps.on('click', function (e) {
|
||
console.log(e.coordinate);
|
||
var pixel = maps.getEventPixel(e.originalEvent);
|
||
maps.forEachFeatureAtPixel(pixel, function (feature) {
|
||
var attr = feature.getProperties();
|
||
console.log(attr);
|
||
content.innerHTML =
|
||
'<div>' +
|
||
'<p>设备名称: ' +
|
||
attr.name +
|
||
'</p>' +
|
||
'<p>经度:' +
|
||
attr.geometry.flatCoordinates[0] +
|
||
'</p>' +
|
||
'<p>纬度:' +
|
||
attr.geometry.flatCoordinates[1] +
|
||
'</p>' +
|
||
'</div>';
|
||
overlay1.setPosition(attr.geometry.flatCoordinates);
|
||
maps.addOverlay(overlay1);
|
||
});
|
||
});
|
||
//关闭弹出框操作
|
||
popupCloser.addEventListener('click', function () {
|
||
overlay1.setPosition(undefined);
|
||
});
|
||
};
|
||
|
||
const initLeafletMap = () => {
|
||
map = L.map('cesiumContainers', {
|
||
center: [36.4, 119.166326], // 地图中心
|
||
zoom: 7, //缩放比列
|
||
zoomControl: false, //禁用 + - 按钮
|
||
doubleClickZoom: false, // 禁用双击放大
|
||
attributionControl: false, // 移除右下角leaflet标识
|
||
});
|
||
// 渲染底图
|
||
L.tileLayer(
|
||
'http://t0.tianditu.com/DataServer?T=img_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||
).addTo(map);
|
||
L.tileLayer(
|
||
'http://t0.tianditu.com/DataServer?T=cia_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||
).addTo(map);
|
||
L.Util.requestAnimFrame(map.invalidateSize, map, !1, map._container); //解决首次加载不完全问题
|
||
};
|
||
let townZuowu = ref({ label: [] }); //镇的作物
|
||
|
||
const DefaultList = () => {
|
||
document.querySelector('.mode').innerText = '地图模式';
|
||
window.document.querySelector('.tabulation').style.display = 'block';
|
||
window.document.querySelector('.centerBox').style.display = 'none';
|
||
window.document.querySelector('#screenfull').style.display = 'none';
|
||
};
|
||
|
||
//智能孢子捕捉点击
|
||
|
||
const sporeClick = e => {
|
||
brightFlag.value = '1';
|
||
brightFlags.value = false;
|
||
bottomFlags.value = false;
|
||
getsporeEquipmentConditions();
|
||
};
|
||
|
||
//虫情监测点击事件
|
||
const insectClick = e => {
|
||
brightFlag.value = '2';
|
||
brightFlags.value = false;
|
||
bottomFlags.value = false;
|
||
geteqLightEquipmentConditions();
|
||
};
|
||
|
||
//土壤点击事件
|
||
const soilClick = e => {
|
||
brightFlag.value = '3';
|
||
brightFlags.value = true;
|
||
bottomFlags.value = false;
|
||
getequipmentConditions();
|
||
getfindAllSoils();
|
||
};
|
||
//展示全部
|
||
const ShowAll = () => {
|
||
brightFlag.value = '4';
|
||
bottomFlags.value = true;
|
||
brightFlags.value = true;
|
||
getsporeEquipmentConditions();
|
||
};
|
||
|
||
//孢子切换当前页的容量
|
||
const handleCurrentChange = val => {
|
||
currentPage.value = val;
|
||
pagingarr.value = insectarr.value.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
};
|
||
//列表模式模式切换
|
||
const SwitchMode = () => {
|
||
SwitchFlag.value = !SwitchFlag.value;
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
|
||
|
||
statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||
console.log(document.querySelector('.chartModeFather').offsetWidth);
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px';
|
||
statInfo.style.height =
|
||
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
};
|
||
//创建ICON构造函数，相当于继承于ICON，可以重新设置属性
|
||
var LeafIcon = L.Icon.extend({
|
||
options: {
|
||
// shadowUrl: './icon/leaf-shadow.png', //阴影地址
|
||
iconSize: [50, 50], //图标宽高
|
||
shadowSize: [50, 64], //阴影宽高
|
||
iconAnchor: [22, 94], //图标锚点
|
||
shadowAnchor: [4, 62], //阴影锚点
|
||
popupAnchor: [0, -86], //弹出框弹出位置，相对于图标锚点
|
||
},
|
||
});
|
||
//创建多个icon
|
||
var greenIcon = new LeafIcon({
|
||
iconUrl: iconShadow,
|
||
});
|
||
const handleNodeClick = (data, node, data1, data2) => {
|
||
value1.value = '';
|
||
formInline.value.flag = '';
|
||
if (!data.children) {
|
||
let oriFatherId = node.parent.data;
|
||
label1.value = oriFatherId.label;
|
||
label2.value = data.label;
|
||
console.log(oriFatherId);
|
||
console.log(label2.value);
|
||
console.log(node.parent);
|
||
console.log(nums.value);
|
||
if (nums.value == '0') {
|
||
oriFatherId.children.forEach(item => {
|
||
console.log(item.label, label2.value);
|
||
if (item.label == label2.value) {
|
||
label3.value = label1.value;
|
||
}
|
||
});
|
||
} else {
|
||
// console.log(oriFatherId[0].children[0],label2.value);
|
||
// oriFatherId[0].children.forEach(item => {
|
||
// if (item.label == label2.value) {
|
||
// label3.value = item.label;
|
||
// }
|
||
// });
|
||
console.log(nums.value);
|
||
if (nums.value == '1') {
|
||
label3.value = '智能孢子仪';
|
||
} else if (nums.value == '2') {
|
||
label3.value = '虫情监测仪';
|
||
} else if (nums.value == '3') {
|
||
label3.value = '土壤墒情、土质';
|
||
}
|
||
}
|
||
if (label3.value == '智能孢子仪') {
|
||
getSpore({ equipment: label2.value, whetherToDownload: true }).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 = [];
|
||
});
|
||
// if (viewers.entities) {
|
||
// viewers.entities.removeAll();
|
||
// }
|
||
getsporeEquipmentCondition().then(res => {
|
||
townZuowu.label = res.data;
|
||
// 创建一个Entity对象加图片
|
||
res.data.forEach((item, index) => {
|
||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||
map.setView(center, 17);
|
||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||
.addTo(map)
|
||
.bindPopup(
|
||
`<b>智能孢子仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||
)
|
||
.openPopup();
|
||
});
|
||
});
|
||
} else if (label3.value == '虫情监测仪') {
|
||
getinsect({ equipment: label2.value, whetherToDownload: true }).then(res => {
|
||
tabulation.value = res.data;
|
||
res.data.forEach(item => {
|
||
if (item.warning == '有') {
|
||
item.pestName = item.picturesMark2O1List[0].pestName;
|
||
res.data.forEach(i => {
|
||
let arr = {};
|
||
i.picturesMark2O1List.forEach(item => {
|
||
console.log(item);
|
||
if (!arr[item.pestName]) {
|
||
arr[item.pestName] = 1;
|
||
} else {
|
||
arr[item.pestName] += 1;
|
||
}
|
||
});
|
||
i['obj'] = arr;
|
||
});
|
||
}
|
||
});
|
||
tableNewData.value = res.data.slice(
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value +
|
||
tabulationpageSize.value
|
||
);
|
||
tableItem.value = [
|
||
{
|
||
lable: '预警值',
|
||
value: 'picturesMark201List',
|
||
},
|
||
];
|
||
});
|
||
// if (viewers.entities) {
|
||
// viewers.entities.removeAll();
|
||
// }
|
||
geteqLightEquipmentCondition().then(res => {
|
||
console.log(res.data);
|
||
townZuowu.label = res.data;
|
||
// 创建一个Entity对象加图片
|
||
res.data.forEach((item, index) => {
|
||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||
map.setView(center, 17);
|
||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||
.addTo(map)
|
||
.bindPopup(
|
||
`<b>虫情监测仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||
)
|
||
.openPopup();
|
||
});
|
||
});
|
||
} else if (label3.value == '土壤墒情、土质') {
|
||
getfindAllSoil({ equipment: label2.value, whetherToDownload: true }).then(res => {
|
||
tabulation.value = res.data;
|
||
res.data.forEach(item => {
|
||
item['style'] = [];
|
||
if (item.warning == '有') {
|
||
item.limitExceeded.forEach(i => {
|
||
for (const key in i) {
|
||
if (key !== 'eqSoilId') {
|
||
if (i[key] != null) {
|
||
item['style'].push(key);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
tableNewData.value = res.data.slice(
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value +
|
||
tabulationpageSize.value
|
||
);
|
||
tableItem.value = [
|
||
{
|
||
lable: '0cm湿度(%)',
|
||
value: 'soilHumidity1',
|
||
},
|
||
{
|
||
lable: '-10cm湿度(%)',
|
||
value: 'soilHumidity2',
|
||
},
|
||
{
|
||
lable: '-20cm湿度(%)',
|
||
value: 'soilHumidity3',
|
||
},
|
||
{
|
||
lable: '-30cm湿度(%)',
|
||
value: 'soilHumidity4',
|
||
},
|
||
{
|
||
lable: '-40cm湿度(%)',
|
||
value: 'soilHumidity5',
|
||
},
|
||
{
|
||
lable: '0cm温度',
|
||
value: 'soilTemperature1',
|
||
},
|
||
{
|
||
lable: '-10cm温度',
|
||
value: 'soilTemperature2',
|
||
},
|
||
{
|
||
lable: '-20cm温度',
|
||
value: 'soilTemperature3',
|
||
},
|
||
{
|
||
lable: '-30cm温度',
|
||
value: 'soilTemperature4',
|
||
},
|
||
{
|
||
lable: '-40cm温度',
|
||
value: 'soilTemperature5',
|
||
},
|
||
{
|
||
lable: '-30cm温度',
|
||
value: 'soilTemperature4',
|
||
},
|
||
{
|
||
lable: '-40cm温度',
|
||
value: 'soilTemperature5',
|
||
},
|
||
{
|
||
lable: 'PH值(ph)',
|
||
value: 'soilPh',
|
||
},
|
||
{
|
||
lable: 'EC值(S/cm)',
|
||
value: 'soilEc',
|
||
},
|
||
];
|
||
});
|
||
// if (viewers.entities) {
|
||
// viewers.entities.removeAll();
|
||
// }
|
||
getequipmentCondition().then(res => {
|
||
townZuowu.label = res.data;
|
||
// 创建一个Entity对象加图片
|
||
res.data.forEach((item, index) => {
|
||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||
map.setView(center, 17);
|
||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||
.addTo(map)
|
||
.bindPopup(
|
||
`<b>土壤墒情、土质</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||
)
|
||
.openPopup();
|
||
});
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
//用经纬度控制视角
|
||
const angle = item => {
|
||
let params = {
|
||
lon: item.msLongitude,
|
||
lat: item.msLatitude,
|
||
alt: 10000,
|
||
heading: Cesium.Math.toRadians(0.0),
|
||
pitch: Cesium.Math.toRadians(-90.0),
|
||
roll: 0.0,
|
||
range: 0,
|
||
};
|
||
// viewers.camera.flyTo({
|
||
// // fromDegrees()将经纬度和高程转换为世界坐标
|
||
// destination: Cesium.Cartesian3.fromDegrees(params.lon, params.lat, params.alt),
|
||
// orientation: {
|
||
// // 指向
|
||
// heading: params.heading,
|
||
// // 视角
|
||
// pitch: params.pitch,
|
||
// roll: params.roll,
|
||
// },
|
||
// });
|
||
};
|
||
|
||
const onSubmit = () => {
|
||
console.log(label3.value);
|
||
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,
|
||
equipment: label2.value,
|
||
whetherToDownload: false,
|
||
}).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,
|
||
equipment: label2.value,
|
||
whetherToDownload: false,
|
||
}).then(res => {
|
||
res.data.forEach(item => {
|
||
if (item.warning == '有') {
|
||
item.pestName = item.picturesMark2O1List[0].pestName;
|
||
res.data.forEach(i => {
|
||
let arr = {};
|
||
i.picturesMark2O1List.forEach(item => {
|
||
if (!arr[item.pestName]) {
|
||
arr[item.pestName] = 1;
|
||
} else {
|
||
arr[item.pestName] += 1;
|
||
}
|
||
});
|
||
i['obj'] = arr;
|
||
});
|
||
}
|
||
});
|
||
tabulation.value = res.data;
|
||
tableNewData.value = res.data.slice(
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value +
|
||
tabulationpageSize.value
|
||
);
|
||
console.log(tableNewData.value);
|
||
});
|
||
} else if (label3.value == '土壤墒情、土质') {
|
||
EcTimeArr.value = [];
|
||
EcArr.value = [];
|
||
PhArr.value = [];
|
||
temperature.value = [];
|
||
temperature1.value = [];
|
||
temperature2.value = [];
|
||
temperature3.value = [];
|
||
temperature4.value = [];
|
||
temperature5.value = [];
|
||
humidity.value = [];
|
||
humidity1.value = [];
|
||
humidity2.value = [];
|
||
humidity3.value = [];
|
||
humidity4.value = [];
|
||
humidity5.value = [];
|
||
soilPh.value = [];
|
||
soilEc.value = [];
|
||
getfindAllSoilTb({
|
||
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,
|
||
equipment: label2.value,
|
||
}).then(res => {
|
||
let arr = res.data.reverse();
|
||
arr.forEach((item, index) => {
|
||
EcTimeArr.value.push(item.dataTime);
|
||
EcArr.value.push(item.soilEc);
|
||
PhArr.value.push(Number(item.soilPh));
|
||
temperature.value.push(item.soilTemperature1);
|
||
temperature1.value.push(item.soilTemperature1);
|
||
temperature2.value.push(item.soilTemperature2);
|
||
temperature3.value.push(item.soilTemperature3);
|
||
temperature4.value.push(item.soilTemperature4);
|
||
temperature5.value.push(item.soilTemperature5);
|
||
humidity.value.push(item.soilHumidity1);
|
||
humidity1.value.push(item.soilHumidity1);
|
||
humidity2.value.push(item.soilHumidity2);
|
||
humidity3.value.push(item.soilHumidity3);
|
||
humidity4.value.push(item.soilHumidity4);
|
||
humidity5.value.push(item.soilHumidity5);
|
||
soilPh.value.push(item.soilPh);
|
||
soilEc.value.push(item.soilEc);
|
||
});
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
|
||
statInfo.style.height =
|
||
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width =
|
||
document.querySelector('.chartModeFather').offsetWidth + 'px';
|
||
statInfo.style.height =
|
||
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
});
|
||
getfindAllSoil({
|
||
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,
|
||
equipment: label2.value,
|
||
whetherToDownload: false,
|
||
}).then(res => {
|
||
res.data.forEach(item => {
|
||
item['style'] = [];
|
||
if (item.warning == '有') {
|
||
item.limitExceeded.forEach(i => {
|
||
for (const key in i) {
|
||
if (key !== 'eqSoilId') {
|
||
if (i[key] != null) {
|
||
item['style'].push(key);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
tabulation.value = res.data;
|
||
tableNewData.value = res.data.slice(
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value +
|
||
tabulationpageSize.value
|
||
);
|
||
// res.data.forEach((item, index) => {
|
||
// // EcTimeArr.value.push(item.dataTime);
|
||
// EcArr.value.push(item.soilEc);
|
||
// PhArr.value.push(Number(item.soilPh));
|
||
// // temperature.value.push(item.soilTemperature1);
|
||
// temperature1.value.push(item.soilTemperature1);
|
||
// temperature2.value.push(item.soilTemperature2);
|
||
// temperature3.value.push(item.soilTemperature3);
|
||
// temperature4.value.push(item.soilTemperature4);
|
||
// temperature5.value.push(item.soilTemperature5);
|
||
// // humidity.value.push(item.soilHumidity1);
|
||
// humidity1.value.push(item.soilHumidity1);
|
||
// humidity2.value.push(item.soilHumidity2);
|
||
// humidity3.value.push(item.soilHumidity3);
|
||
// humidity4.value.push(item.soilHumidity4);
|
||
// humidity5.value.push(item.soilHumidity5);
|
||
// soilPh.value.push(item.soilPh);
|
||
// soilEc.value.push(item.soilEc);
|
||
// });
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
|
||
statInfo.style.height =
|
||
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width =
|
||
document.querySelector('.chartModeFather').offsetWidth + 'px';
|
||
statInfo.style.height =
|
||
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
});
|
||
}
|
||
};
|
||
|
||
const tabulationCurrentChange = val => {
|
||
tabulationcurrentPage.value = val;
|
||
tableNewData.value = tabulation.value.slice(
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
|
||
);
|
||
};
|
||
//查看详情
|
||
const onDetail = row => {
|
||
DetailVisible.value = true;
|
||
DetailArr.value = row;
|
||
if (label3 == '虫情监测仪') {
|
||
DetailArr['pestName'] = row.picturesMark2O1List[0].pestName;
|
||
}
|
||
let arr = [];
|
||
if (label3 == '土壤墒情、土质') {
|
||
console.log(DetailArr.limitExceeded);
|
||
}
|
||
console.log(DetailArr);
|
||
};
|
||
|
||
//虫情切换当前页的容量
|
||
const handleCurrentChanges = val => {
|
||
currentPage.value = val;
|
||
bugarrs.value = bugarr.value.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
};
|
||
|
||
//土壤切换当前页的容量
|
||
const handleCurrentChangess = val => {
|
||
currentPage.value = val;
|
||
soilArr.value = soilAll.value.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
};
|
||
//详情
|
||
const cellClick = (row, column, cell, event) => {
|
||
let arr = {};
|
||
row.picturesMark2O1List.forEach(item => {
|
||
console.log(item);
|
||
if (!arr[item.pestName]) {
|
||
arr[item.pestName] = 1;
|
||
} else {
|
||
arr[item.pestName] += 1;
|
||
}
|
||
});
|
||
gridArr.value = arr;
|
||
gridData.value = row;
|
||
if (row.picturesMark2O1List.length > 0) {
|
||
dialogTableVisible.value = true;
|
||
}
|
||
};
|
||
//tabs
|
||
const foldClick = () => {
|
||
flags.value = !flags.value;
|
||
setTimeout(() => {
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
|
||
statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 50 + 'px';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px';
|
||
statInfo.style.height =
|
||
document.querySelector('.chartModeFather').offsetHeight - 50 + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
}, 20);
|
||
};
|
||
|
||
//深度切换
|
||
const depthclick = item => {
|
||
active.value = item;
|
||
switch (item) {
|
||
case 1:
|
||
temperature = temperature1;
|
||
humidity = humidity1;
|
||
break;
|
||
case 2:
|
||
temperature = temperature2;
|
||
humidity = humidity2;
|
||
break;
|
||
case 3:
|
||
temperature = temperature3;
|
||
humidity = humidity3;
|
||
break;
|
||
case 4:
|
||
temperature = temperature4;
|
||
humidity = humidity4;
|
||
break;
|
||
case 5:
|
||
temperature = temperature5;
|
||
humidity = humidity5;
|
||
break;
|
||
case 6:
|
||
temperature = soilEc;
|
||
humidity = [];
|
||
break;
|
||
case 7:
|
||
temperature = soilPh;
|
||
humidity = [];
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
if (localStorage.getItem(router.currentRoute.value.path) == 'true') {
|
||
soil();
|
||
} else {
|
||
chartModes();
|
||
}
|
||
};
|
||
//孢子查询数据
|
||
const query = () => {
|
||
getSpore({
|
||
startTime: value1.value ? time(value1) : null,
|
||
endTime: value2.value ? time(value2) : null,
|
||
early: value3.value,
|
||
equipment: deviceValue.value,
|
||
}).then(res => {
|
||
tableData.arr = res.data;
|
||
insectarr.value = res.data;
|
||
pagingarr.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
});
|
||
};
|
||
|
||
//虫情询数据
|
||
const querys = () => {
|
||
getinsect({
|
||
startTime: value1.value ? time(value1) : null,
|
||
endTime: value2.value ? time(value2) : null,
|
||
early: value3.value,
|
||
equipment: deviceValue.value,
|
||
}).then(res => {
|
||
bugarr.value = res.data;
|
||
// bugarrs.value=res.data
|
||
bugarrs.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
});
|
||
};
|
||
|
||
//土壤查询数据
|
||
const queryss = () => {
|
||
getfindAllSoil({
|
||
startTime: value1.value ? time(value1) : null,
|
||
endTime: value2.value ? time(value2) : null,
|
||
early: value3.value,
|
||
equipment: deviceValue.value,
|
||
}).then(res => {
|
||
soilAll.value = res.data;
|
||
// bugarrs.value=res.data
|
||
soilArr.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
});
|
||
};
|
||
//下载
|
||
const ondownload = () => {
|
||
getSpore({
|
||
startTime: value1.value ? time(value1) : '',
|
||
endTime: value2.value ? time(value2) : '',
|
||
equipment: deviceValue.value,
|
||
early: value3.value,
|
||
whetherToDownload: true,
|
||
}).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||
});
|
||
};
|
||
|
||
const ondownload2 = () => {
|
||
getinsect({
|
||
startTime: value1.value ? time(value1) : '',
|
||
endTime: value2.value ? time(value2) : '',
|
||
equipment: deviceValue.value,
|
||
early: value3.value,
|
||
whetherToDownload: true,
|
||
}).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||
});
|
||
};
|
||
const ondownload3 = () => {
|
||
getfindAllSoil({
|
||
startTime: value1.value ? time(value1) : '',
|
||
endTime: value2.value ? time(value2) : '',
|
||
equipment: deviceValue.value,
|
||
early: value3.value,
|
||
whetherToDownload: true,
|
||
}).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||
});
|
||
};
|
||
const dowcity = () => {
|
||
console.log(tabulation);
|
||
|
||
if (label3.value == '智能孢子仪') {
|
||
getSpore({ equipment: label2.value, whetherToDownload: true }).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||
});
|
||
} else if (label3.value == '虫情监测仪') {
|
||
getinsect({ equipment: label2.value, whetherToDownload: true }).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||
});
|
||
} else if (label3.value == '土壤墒情、土质') {
|
||
getfindAllSoil({ equipment: label2.value, whetherToDownload: true }).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||
});
|
||
}
|
||
};
|
||
|
||
//重置
|
||
const resetting = () => {
|
||
value1.value = '';
|
||
value2.value = '';
|
||
value3.value = '';
|
||
deviceValue.value = '';
|
||
getSpores();
|
||
};
|
||
const resetForm = () => {
|
||
value1.value = '';
|
||
formInline.value.flag = '';
|
||
if (label3.value == '智能孢子仪') {
|
||
getSpore({ equipment: label2.value, whetherToDownload: false }).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({ equipment: label2.value, whetherToDownload: false }).then(res => {
|
||
res.data.forEach(item => {
|
||
if (item.warning == '有') {
|
||
item.pestName = item.picturesMark2O1List[0].pestName;
|
||
res.data.forEach(i => {
|
||
let arr = {};
|
||
i.picturesMark2O1List.forEach(item => {
|
||
console.log(item);
|
||
if (!arr[item.pestName]) {
|
||
arr[item.pestName] = 1;
|
||
} else {
|
||
arr[item.pestName] += 1;
|
||
}
|
||
});
|
||
i['obj'] = arr;
|
||
});
|
||
}
|
||
});
|
||
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({ equipment: label2.value, whetherToDownload: false }).then(res => {
|
||
tabulation.value = res.data;
|
||
tableNewData.value = res.data.slice(
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value +
|
||
tabulationpageSize.value
|
||
);
|
||
});
|
||
getfindAllSoil({
|
||
startTime: moment(new Date()).add('year', 0).format('YYYY-MM-DD'),
|
||
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
whetherToDownload: true,
|
||
}).then(res => {
|
||
tabulation.value = res.data;
|
||
tableNewData.value = res.data.slice(
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value +
|
||
tabulationpageSize.value
|
||
);
|
||
});
|
||
getfindAllSoilTb({
|
||
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,
|
||
equipment: label2.value,
|
||
}).then(res => {
|
||
let arr = res.data.reverse();
|
||
arr.forEach((item, index) => {
|
||
EcTimeArr.value.push(item.dataTime);
|
||
EcArr.value.push(item.soilEc);
|
||
PhArr.value.push(Number(item.soilPh));
|
||
temperature.value.push(item.soilTemperature1);
|
||
temperature1.value.push(item.soilTemperature1);
|
||
temperature2.value.push(item.soilTemperature2);
|
||
temperature3.value.push(item.soilTemperature3);
|
||
temperature4.value.push(item.soilTemperature4);
|
||
temperature5.value.push(item.soilTemperature5);
|
||
humidity.value.push(item.soilHumidity1);
|
||
humidity1.value.push(item.soilHumidity1);
|
||
humidity2.value.push(item.soilHumidity2);
|
||
humidity3.value.push(item.soilHumidity3);
|
||
humidity4.value.push(item.soilHumidity4);
|
||
humidity5.value.push(item.soilHumidity5);
|
||
soilPh.value.push(item.soilPh);
|
||
soilEc.value.push(item.soilEc);
|
||
});
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
|
||
statInfo.style.height =
|
||
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width =
|
||
document.querySelector('.chartModeFather').offsetWidth + 'px';
|
||
statInfo.style.height =
|
||
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
});
|
||
}
|
||
};
|
||
const resettings = () => {
|
||
value1.value = '';
|
||
value2.value = '';
|
||
value3.value = '';
|
||
deviceValue.value = '';
|
||
getinsect().then(res => {
|
||
bugarr.value = res.data;
|
||
// bugarrs.value=res.data
|
||
bugarrs.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
});
|
||
};
|
||
const resettingss = () => {
|
||
value1.value = '';
|
||
value2.value = '';
|
||
value3.value = '';
|
||
deviceValue.value = '';
|
||
getfindAllSoil().then(res => {
|
||
bugarr.value = res.data;
|
||
// bugarrs.value=res.data
|
||
bugarrs.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
});
|
||
};
|
||
|
||
//格式化时间
|
||
const time = value => {
|
||
const dateObj = new Date(value.value);
|
||
// 分别获取年、月、日、小时、分钟、秒数
|
||
const year = dateObj.getFullYear();
|
||
const month = dateObj.getMonth() + 1; // 月份从0开始，需要加1
|
||
const date = dateObj.getDate();
|
||
const hours = dateObj.getHours();
|
||
const minutes = dateObj.getMinutes();
|
||
const seconds = dateObj.getSeconds();
|
||
// 将年、月、日、小时、分钟、秒数拼接成字符串，中间用-和:分隔
|
||
const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${date
|
||
.toString()
|
||
.padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes
|
||
.toString()
|
||
.padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||
return formattedDate;
|
||
};
|
||
|
||
//弹框
|
||
const bugarrsVisible = () => {
|
||
currentPage.value = 1;
|
||
visible.value = true;
|
||
getSpores();
|
||
(value1.value = ''), (value2.value = ''), (deviceValue.value = '');
|
||
getsporeEquipment().then(res => {
|
||
options.value = res.data;
|
||
});
|
||
};
|
||
const bugarrsVisibles = () => {
|
||
currentPage.value = 1;
|
||
visibles.value = true;
|
||
(value1.value = ''), (value2.value = ''), (deviceValue.value = '');
|
||
// getinsects();
|
||
// detectionLightsEquipment().then(res => {
|
||
// options.value = res.data;
|
||
// });
|
||
getinsect().then(res => {
|
||
currentPage.value = 1;
|
||
bugarr.value = res.data;
|
||
// bugarrs.value=res.data
|
||
bugarrs.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
});
|
||
};
|
||
|
||
const bugarrsVisibless = () => {
|
||
visibless.value = true;
|
||
(value1.value = ''), (value2.value = ''), (deviceValue.value = '');
|
||
soilEquipment().then(res => {
|
||
options.value = res.data;
|
||
});
|
||
};
|
||
const filterHandler = (value, row, column) => {
|
||
const property = column['property'];
|
||
return row[property] === value;
|
||
};
|
||
const handleDate = timestamp => {
|
||
var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
||
var Y = date.getFullYear() + '-';
|
||
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
||
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||
return Y + M + D;
|
||
};
|
||
const handleTime = timestamp => {
|
||
var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
||
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
|
||
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
|
||
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
|
||
return h + m + s;
|
||
};
|
||
|
||
let XZQDM = '';
|
||
//折叠
|
||
|
||
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)';
|
||
}
|
||
}
|
||
|
||
function bottomFoldClick() {
|
||
bottomFold.value = !bottomFold.value;
|
||
if (bottomFold.value) {
|
||
console.log(111);
|
||
let bottom_center = document.querySelector('.bottom_center');
|
||
bottom_center.style.transform = 'translate(0,0)';
|
||
} else {
|
||
let bottom_center = document.querySelector('.bottom_center');
|
||
bottom_center.style.transform = 'translate(0,107%)';
|
||
}
|
||
}
|
||
|
||
//tabs
|
||
const handleClick = (tab, event) => {
|
||
tableItem.value = [];
|
||
value1.value = '';
|
||
formInline.value.flag = '';
|
||
if (tab.paneName == '全部') {
|
||
getdeviceNumbers('0'); //所有设备列表
|
||
} else if (tab.paneName == '智能孢子仪') {
|
||
getdeviceNumbers('1'); //所有设备列表
|
||
} else if (tab.paneName == '虫情监测仪') {
|
||
tableItem.value = [
|
||
{
|
||
lable: '预警值',
|
||
value: 'picturesMark201List',
|
||
},
|
||
];
|
||
getdeviceNumbers('2'); //所有设备列表
|
||
} else if (tab.paneName == '土壤墒情、土质') {
|
||
tableItem.value = [
|
||
{
|
||
lable: '0cm湿度(%)',
|
||
value: 'soilHumidity1',
|
||
},
|
||
{
|
||
lable: '-10cm湿度(%)',
|
||
value: 'soilHumidity2',
|
||
},
|
||
{
|
||
lable: '-20cm湿度(%)',
|
||
value: 'soilHumidity3',
|
||
},
|
||
{
|
||
lable: '-30cm湿度(%)',
|
||
value: 'soilHumidity4',
|
||
},
|
||
{
|
||
lable: '-40cm湿度(%)',
|
||
value: 'soilHumidity5',
|
||
},
|
||
{
|
||
lable: '0cm温度',
|
||
value: 'soilTemperature1',
|
||
},
|
||
{
|
||
lable: '-10cm温度',
|
||
value: 'soilTemperature2',
|
||
},
|
||
{
|
||
lable: '-20cm温度',
|
||
value: 'soilTemperature3',
|
||
},
|
||
{
|
||
lable: '-30cm温度',
|
||
value: 'soilTemperature4',
|
||
},
|
||
{
|
||
lable: '-40cm温度',
|
||
value: 'soilTemperature5',
|
||
},
|
||
{
|
||
lable: '-30cm温度',
|
||
value: 'soilTemperature4',
|
||
},
|
||
{
|
||
lable: '-40cm温度',
|
||
value: 'soilTemperature5',
|
||
},
|
||
{
|
||
lable: 'PH值(ph)',
|
||
value: 'soilPh',
|
||
},
|
||
{
|
||
lable: 'EC值(S/cm)',
|
||
value: 'soilEc',
|
||
},
|
||
];
|
||
getdeviceNumbers('3'); //所有设备列表
|
||
}
|
||
};
|
||
|
||
/*------------------接口--------------------*/
|
||
//站点标号
|
||
|
||
//全部设备列表
|
||
const getdeviceNumbers = num => {
|
||
devicesArr.value = [];
|
||
// if (viewers.entities) {
|
||
// viewers.entities.removeAll();
|
||
// }
|
||
getdeviceNumber({ flag: num }).then(res => {
|
||
nums.value = num;
|
||
if (num == 0) {
|
||
label2.value = res.data[0].children[0].children[0].label;
|
||
label3.value = res.data[0].children[0].label;
|
||
} else {
|
||
label2.value = res.data[0].children[0].label;
|
||
}
|
||
if (num == '1') {
|
||
label3.value = '智能孢子仪';
|
||
} else if (num == '2') {
|
||
label3.value = '虫情监测仪';
|
||
} else if (num == '3') {
|
||
label3.value = '土壤墒情、土质';
|
||
}
|
||
|
||
res.data.forEach(item => {
|
||
devicesArr.value.push(item);
|
||
tableNewData.value = res.data.slice(
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value +
|
||
tabulationpageSize.value
|
||
);
|
||
});
|
||
onSubmit();
|
||
if (num == 1 || num == 0) {
|
||
getsporeEquipmentCondition().then(res => {
|
||
townZuowu.label = res.data;
|
||
// 创建一个Entity对象加图片
|
||
res.data.forEach((item, index) => {
|
||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||
map.setView(center, 17);
|
||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||
.addTo(map)
|
||
.bindPopup(
|
||
`<b>智能孢子仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||
)
|
||
.openPopup();
|
||
});
|
||
});
|
||
} else if (num == 2) {
|
||
geteqLightEquipmentCondition().then(res => {
|
||
townZuowu.label = res.data;
|
||
// 创建一个Entity对象加图片
|
||
res.data.forEach((item, index) => {
|
||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||
map.setView(center, 17);
|
||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||
.addTo(map)
|
||
.bindPopup(
|
||
`<b>虫情监测仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||
)
|
||
.openPopup();
|
||
});
|
||
});
|
||
} else if (num == 3) {
|
||
getequipmentCondition().then(res => {
|
||
townZuowu.label = res.data;
|
||
// 创建一个Entity对象加图片
|
||
res.data.forEach((item, index) => {
|
||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||
map.setView(center, 17);
|
||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||
.addTo(map)
|
||
.bindPopup(
|
||
`<b>土壤墒情、土质</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||
)
|
||
.openPopup();
|
||
});
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
//孢子
|
||
const getSpores = () => {
|
||
getSpore().then(res => {
|
||
tableData.arr = res.data;
|
||
tableData.arrs = res.data;
|
||
insectarr.value = res.data;
|
||
pagingarr.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
});
|
||
};
|
||
//最近三天孢子
|
||
const getSporestime = () => {
|
||
getSpore({
|
||
startTime: moment().subtract(3, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
}).then(res => {
|
||
tableData.arrs = res.data;
|
||
insectarr.value = res.data;
|
||
pagingarr.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
});
|
||
};
|
||
//
|
||
//孢子设备信息
|
||
const getsporeEquipmentConditions = () => {
|
||
getsporeEquipmentCondition().then(res => {
|
||
townZuowu.label = res.data;
|
||
if (positionLayer) {
|
||
maps.removeLayer(positionLayer);
|
||
}
|
||
// 创建一个Entity对象加图片
|
||
res.data.forEach((item, index) => {
|
||
console.log(item);
|
||
positionIcon([item.msLongitude, item.msLatitude], chong, item.dev_code);
|
||
});
|
||
});
|
||
};
|
||
//土壤
|
||
const getfindAllSoils = () => {
|
||
getfindAllSoil().then(res => {
|
||
soilAll.value = res.data;
|
||
});
|
||
getfindAllSoil({
|
||
startTime: moment(new Date()).add('year', 0).format('YYYY-MM-DD'),
|
||
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
}).then(res => {
|
||
soilArr.value = soilAll.value.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
res.data.forEach((item, index) => {
|
||
EcTimeArr.value.push(item.dataTime);
|
||
EcArr.value.push(item.soilEc);
|
||
PhArr.value.push(Number(item.soilPh));
|
||
temperature.value.push(item.soilTemperature1);
|
||
temperature1.value.push(item.soilTemperature1);
|
||
temperature2.value.push(item.soilTemperature2);
|
||
temperature3.value.push(item.soilTemperature3);
|
||
temperature4.value.push(item.soilTemperature4);
|
||
temperature5.value.push(item.soilTemperature5);
|
||
humidity.value.push(item.soilHumidity1);
|
||
humidity1.value.push(item.soilHumidity1);
|
||
humidity2.value.push(item.soilHumidity2);
|
||
humidity3.value.push(item.soilHumidity3);
|
||
humidity4.value.push(item.soilHumidity4);
|
||
humidity5.value.push(item.soilHumidity5);
|
||
});
|
||
farmland();
|
||
Ph();
|
||
soil();
|
||
});
|
||
};
|
||
//土壤设备信息
|
||
const getequipmentConditions = () => {
|
||
if (viewer.entities) {
|
||
viewer.entities.removeAll();
|
||
}
|
||
getequipmentCondition().then(res => {
|
||
townZuowu.label = res.data;
|
||
if (positionLayer) {
|
||
maps.removeLayer(positionLayer);
|
||
}
|
||
// // 创建一个Entity对象加图片
|
||
res.data.forEach((item, index) => {
|
||
positionIcon([item.msLongitude, item.msLatitude], tu, item.dev_code);
|
||
});
|
||
});
|
||
};
|
||
//虫子
|
||
const getinsects = () => {
|
||
getinsect({
|
||
startTime: moment().subtract(3, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
}).then(res => {
|
||
console.log(res.data);
|
||
bugarr.value = res.data;
|
||
bugarrtime.value = res.data;
|
||
bugarrs.value = res.data.slice(
|
||
(currentPage.value - 1) * pageSize.value,
|
||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||
);
|
||
});
|
||
};
|
||
|
||
//虫情设备信息
|
||
const geteqLightEquipmentConditions = () => {
|
||
geteqLightEquipmentCondition().then(res => {
|
||
townZuowu.label = res.data;
|
||
// 创建一个Entity对象加图片
|
||
if (positionLayer) {
|
||
maps.removeLayer(positionLayer);
|
||
}
|
||
res.data.forEach((item, index) => {
|
||
positionIcon([item.msLongitude, item.msLatitude], baozi, item.dev_code);
|
||
});
|
||
});
|
||
};
|
||
|
||
//镇
|
||
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 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 farmland() {
|
||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||
var option = {
|
||
grid: {
|
||
top: '15%',
|
||
left: '17%',
|
||
right: '7%',
|
||
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,
|
||
},
|
||
dataZoom: [
|
||
{
|
||
// start: 0,//默认为0
|
||
// end: 100,//默认为100
|
||
type: 'slider',
|
||
show: false,
|
||
zoomLock: true, //禁止拉伸
|
||
// 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
|
||
},
|
||
],
|
||
tooltip: {
|
||
show: true,
|
||
},
|
||
xAxis: {
|
||
data: EcTimeArr._rawValue,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'transparent', //底部边框颜色
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//x轴文字的配置
|
||
show: true,
|
||
interval: 1, //使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;
|
||
},
|
||
},
|
||
},
|
||
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: EcArr._rawValue,
|
||
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: EcArr._rawValue,
|
||
z: 1,
|
||
zlevel: 0,
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
farmlandDivIntance.on('click', function (params) {
|
||
console.log(params.name);
|
||
});
|
||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||
useEcharts(farmlandDivIntance, option);
|
||
}
|
||
function Ph() {
|
||
const PhDivIntance = echarts.init(Phdiv.value);
|
||
let dataC1 = PhArr._rawValue;
|
||
let dataC2 = [20, 30, 60, 40, 50, 30];
|
||
let dataC3 = [20, 30, 60, 40, 50, 30];
|
||
let xData = EcTimeArr._rawValue;
|
||
|
||
var fontColor = '#30eee9';
|
||
let option = {
|
||
backgroundColor: 'transparent',
|
||
grid: {
|
||
left: '15%',
|
||
right: '7%',
|
||
top: '15%',
|
||
bottom: '17%',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
lineStyle: {
|
||
color: '#57617B',
|
||
},
|
||
},
|
||
},
|
||
dataZoom: [
|
||
{
|
||
// start: 0,//默认为0
|
||
// end: 100,//默认为100
|
||
type: 'slider',
|
||
zoomLock: true, //禁止拉伸
|
||
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
|
||
},
|
||
],
|
||
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: 1, //使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 = EcTimeArr._rawValue;
|
||
var sportData = humidity.value;
|
||
var sportTime = temperature.value;
|
||
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: '7%',
|
||
bottom: '15%',
|
||
containLabel: true,
|
||
},
|
||
dataZoom: [
|
||
{
|
||
// start: 0,//默认为0
|
||
// end: 100,//默认为100
|
||
type: 'slider',
|
||
zoomLock: true, //禁止拉伸
|
||
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
|
||
},
|
||
],
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: time,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
},
|
||
interval: 1, //使x轴文字显示全
|
||
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;
|
||
},
|
||
},
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
//坐标轴刻度相关设置。
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: '土壤温度 (℃)',
|
||
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: 3,
|
||
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: 3,
|
||
color: 'rgba(168, 216, 234, 1)',
|
||
},
|
||
},
|
||
],
|
||
};
|
||
useEcharts(soilDivIntance, option);
|
||
}
|
||
|
||
function chartModes() {
|
||
const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
|
||
let leftY = '土壤温度 (℃)';
|
||
let leftYlabel = '';
|
||
let color = 'rgba(255, 235, 59, 1)';
|
||
switch (active.value) {
|
||
case 6:
|
||
leftY = 'EC值(S/cm)';
|
||
leftYlabel = 'EC值';
|
||
color = 'rgba(0, 209, 195, 1)';
|
||
break;
|
||
case 7:
|
||
leftY = 'PH值(ph)';
|
||
leftYlabel = 'PH值';
|
||
color = 'rgba(201, 255, 148, 1)';
|
||
break;
|
||
default:
|
||
leftY = '土壤温度 (℃)';
|
||
leftYlabel = '土壤温度';
|
||
break;
|
||
}
|
||
var time = EcTimeArr._rawValue;
|
||
var sportData = humidity.value;
|
||
var sportTime = temperature.value;
|
||
let ends = (7 / temperature.value.length) * 100;
|
||
let option = {
|
||
color: [color, 'rgba(199, 125, 231, 1)'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
top: '15%',
|
||
left: '5%',
|
||
right: '7%',
|
||
bottom: '15%',
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: '7%',
|
||
x: 'center',
|
||
textStyle: { color: 'black' },
|
||
itemWidth: 20,
|
||
itemHeight: 12.5,
|
||
icon: 'rect',
|
||
backgroundColor: 'transparent',
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
width: '40%',
|
||
zoomLock: true,
|
||
top: '90%',
|
||
start: 0,
|
||
end: ends,
|
||
showDataShadow: false,
|
||
showDetail: false,
|
||
fillerColor: 'rgba(64, 158, 255)',
|
||
borderRadius: '50%',
|
||
moveHandleSize: 0,
|
||
moveHandleStyle: {},
|
||
left: '35%',
|
||
height: 12,
|
||
handleSize: '80%',
|
||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||
handleStyle: {
|
||
borderWidth: 0,
|
||
color: 'rgba(64, 158, 255)',
|
||
},
|
||
},
|
||
{
|
||
type: 'inside',
|
||
},
|
||
],
|
||
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: time,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(102, 102, 102, 1)',
|
||
},
|
||
interval: 0, //使x轴文字显示全
|
||
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;
|
||
},
|
||
},
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
//坐标轴刻度相关设置。
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: leftY,
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(102, 102, 102, 1)',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(102, 102, 102, 1)', //左侧数标
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#ccc',
|
||
type: 'solid',
|
||
opacity: 1,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '土壤湿度(%RH)',
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(102, 102, 102, 1)',
|
||
},
|
||
},
|
||
position: 'right',
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(102, 102, 102, 1)', //右侧数标
|
||
},
|
||
formatter: '{value}',
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: leftYlabel,
|
||
type: 'line',
|
||
data: sportTime,
|
||
symbolSize: 10,
|
||
itemStyle: {
|
||
// 设置symbol的颜色
|
||
normal: {
|
||
color: function (param) {
|
||
//拐点颜色回调
|
||
if (active.value == 1) {
|
||
if (param.value >= -10 && param.value <= 40) {
|
||
return color;
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 2) {
|
||
if (param.value >= -5 <= 40) {
|
||
return color;
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 3) {
|
||
if (param.value >= 0 && param.value <= 30) {
|
||
return color;
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 4) {
|
||
if (param.value >= 0 && param.value <= 30) {
|
||
return color;
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 5) {
|
||
if (param.value >= 0 && param.value <= 30) {
|
||
return color;
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 6) {
|
||
if (param.value >= 0 && param.value <= 0.2) {
|
||
return color;
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 7) {
|
||
if (param.value >= 5.5 && param.value <= 7.5) {
|
||
return color;
|
||
} else {
|
||
return 'red';
|
||
}
|
||
}
|
||
},
|
||
},
|
||
},
|
||
|
||
smooth: true,
|
||
yAxisIndex: 0,
|
||
showSymbol: true,
|
||
symbol: 'circle',
|
||
lineStyle: {
|
||
width: 3,
|
||
color: color,
|
||
},
|
||
},
|
||
{
|
||
name: '土壤湿度',
|
||
type: 'line',
|
||
data: sportData,
|
||
symbolSize: 10,
|
||
yAxisIndex: 1,
|
||
itemStyle: {
|
||
// 设置symbol的颜色
|
||
normal: {
|
||
color: function (param) {
|
||
//拐点颜色回调
|
||
if (active.value == 1) {
|
||
if (param.value >= 5 && param.value <= 60) {
|
||
return 'rgba(199, 125, 231, 1)';
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 2) {
|
||
if (param.value >= 0 <= 30) {
|
||
return 'rgba(199, 125, 231, 1)';
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 3) {
|
||
if (param.value >= 0 && param.value <= 30) {
|
||
return 'rgba(199, 125, 231, 1)';
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 4) {
|
||
if (param.value >= 0 && param.value <= 40) {
|
||
return 'rgba(199, 125, 231, 1)';
|
||
} else {
|
||
return 'red';
|
||
}
|
||
} else if (active.value == 5) {
|
||
if (param.value >= 0 && param.value <= 40) {
|
||
return 'rgba(199, 125, 231, 1)';
|
||
} else {
|
||
return 'red';
|
||
}
|
||
}
|
||
},
|
||
},
|
||
},
|
||
label: {
|
||
color: params => params.color,
|
||
},
|
||
smooth: true,
|
||
showSymbol: true,
|
||
symbol: 'circle',
|
||
lineStyle: {
|
||
width: 3,
|
||
color: 'rgba(199, 125, 231, 1)',
|
||
},
|
||
},
|
||
{
|
||
name: '预警',
|
||
type: 'bar',
|
||
data: [],
|
||
itemStyle: {
|
||
color: 'red', // 设置图例的图形颜色
|
||
},
|
||
},
|
||
],
|
||
};
|
||
useEcharts(ASdivisionDivIntance, option);
|
||
}
|
||
|
||
// 添加wms
|
||
// 添加wms
|
||
function addWms(layers, customName, bottom) {
|
||
let map = new Cesium.WebMapServiceImageryProvider({
|
||
url: serverAPI.geoserverUrl + `/map-${layers}/wms111/`,
|
||
layers: layers + '@' + layers, //图层名
|
||
parameters: {
|
||
service: 'WMS',
|
||
format: 'image/png',
|
||
srs: 'EPSG:4326',
|
||
VERSION: '1.1.1',
|
||
transparent: true, //是否透明
|
||
exceptions: 'application/vnd.ogc.se_inimage',
|
||
},
|
||
});
|
||
map.customName = customName; //自己定义各种属性
|
||
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
|
||
// if (customName.indexOf('gbznt') > -1) {
|
||
// // viewer.imageryLayers.lower(dd);//将图层下移一层
|
||
// viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
|
||
// viewer.imageryLayers.raise(dd); //将图层上移一层
|
||
// }
|
||
if (bottom) {
|
||
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 getAreaFenlei() {
|
||
let fl = fenleiRef.value;
|
||
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 => {
|
||
let data = res.data.features;
|
||
data.forEach((item, index) => {
|
||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||
item.bbox[0],
|
||
item.bbox[1],
|
||
item.bbox[2],
|
||
item.bbox[3]
|
||
);
|
||
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
||
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
||
let latitude = Cesium.Math.toDegrees(center.latitude);
|
||
|
||
if (item.properties.XZDM === '370211011') {
|
||
//灵山卫街道
|
||
longitude = 120.0863;
|
||
latitude = 35.941;
|
||
} else if (item.properties.XZDM === '370211003') {
|
||
//薛家岛街道
|
||
longitude = 120.243682;
|
||
latitude = 35.97123201;
|
||
}
|
||
const townData = fl[item.properties.XZMC];
|
||
let label = [];
|
||
if (townData) {
|
||
label = townData.map((it, inex) => {
|
||
// let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
|
||
// return dd
|
||
return it.properties;
|
||
});
|
||
}
|
||
});
|
||
})
|
||
.catch(err => {});
|
||
}
|
||
let fenleiRef = ref({});
|
||
function mbHandle() {
|
||
axios({
|
||
url:
|
||
serverAPI.geoserverUrl +
|
||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
|
||
})
|
||
.then(res => {
|
||
let features = res.data.features;
|
||
let town = {};
|
||
// 按镇分类
|
||
features.forEach(item => {
|
||
let key = item.properties.town;
|
||
if (town[key]) {
|
||
town[key].push(item);
|
||
} else {
|
||
town[key] = [item];
|
||
}
|
||
});
|
||
fenleiRef.value = town;
|
||
getAreaFenlei();
|
||
})
|
||
.catch(err => {});
|
||
}
|
||
|
||
// 地图移动时弹窗跟随
|
||
function infoWindowPostRender() {
|
||
if (townZuowu.value && townZuowu.label[0].msLongitude && townZuowu.label[0].msLatitude) {
|
||
//经纬度转为世界坐标
|
||
const gisPosition = Cesium.Cartesian3.fromDegrees(
|
||
Number(townZuowu.label[0].msLongitude),
|
||
Number(townZuowu.label[0].msLatitude),
|
||
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 infoWindowPostRenders() {
|
||
// if (townZuowu.value && townZuowu.label[0].msLongitude && townZuowu.label[0].msLatitude) {
|
||
// //经纬度转为世界坐标
|
||
// const gisPosition = Cesium.Cartesian3.fromDegrees(
|
||
// Number(townZuowu.label[0].msLongitude),
|
||
// Number(townZuowu.label[0].msLatitude),
|
||
// 0
|
||
// ); //转化为屏幕坐标
|
||
// var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||
// viewers.scene,
|
||
// gisPosition
|
||
// );
|
||
// if (Cesium.defined(windowPosition)) {
|
||
// const pop = document.getElementById('pops');
|
||
// 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 hiddenOverlayCharts() {
|
||
// 移除各种高亮
|
||
XZDM = '';
|
||
XZQDM = '';
|
||
removeWms(['village_CQL']);
|
||
removeWms(['aaa']);
|
||
|
||
deleteEntityByName('villageLine');
|
||
deleteEntityByName('townLine');
|
||
|
||
const pop = document.getElementById('pops');
|
||
pop.style.display = 'none'; // 清除监听事件
|
||
// viewers.scene.postRender.removeEventListener(infoWindowPostRenders);
|
||
// 重定位
|
||
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) {
|
||
var coordinate = position;
|
||
var pixel = maps.getPixelFromCoordinate(coordinate);
|
||
console.log(pixel); // [259, 297]
|
||
const pop = document.getElementById('pop');
|
||
pop.style.display = 'block';
|
||
pop.style.position = 'absolute';
|
||
pop.style.top = pixel[0] - 10 + 'px';
|
||
pop.style.left = pixel[1] + 10 + 'px';
|
||
pop.style.zIndex = 99;
|
||
console.log(pop);
|
||
}
|
||
function showOverlayCharts(position) {
|
||
var coordinate = position;
|
||
var pixel = maps.getPixelFromCoordinate(coordinate);
|
||
console.log(pixel); // [259, 297]
|
||
const pop = document.getElementById('pops');
|
||
pop.style.display = 'block';
|
||
pop.style.position = 'absolute';
|
||
pop.style.top = pixel[0] - 10 + 'px';
|
||
pop.style.left = pixel[1] + 10 + 'px';
|
||
pop.style.zIndex = 99;
|
||
console.log(pop);
|
||
}
|
||
|
||
/*-------------------------------------------------------------------------------------------*/
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$height: calc(100vh - 110px);
|
||
|
||
.fatherDiv {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.tabulation,
|
||
.centerBox {
|
||
width: 100%;
|
||
height: 98%;
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.el-dialog__body {
|
||
color: #fff;
|
||
}
|
||
.tabulation {
|
||
display: none;
|
||
:deep() .el-dialog {
|
||
background: #fff;
|
||
}
|
||
:deep(.el-dialog__header) {
|
||
opacity: 1;
|
||
border-bottom: 1px solid rgba(219, 219, 219, 1);
|
||
padding: 10px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
.rowContent {
|
||
.rowContentTop {
|
||
border-radius: 8px;
|
||
background: rgba(248, 248, 248, 1);
|
||
padding: 0 15px;
|
||
margin-bottom: 10px;
|
||
.rowContentchildren {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
p {
|
||
display: flex;
|
||
align-items: center;
|
||
color: rgba(100, 195, 164, 1);
|
||
span {
|
||
width: 62px;
|
||
height: 24px;
|
||
opacity: 1;
|
||
border-radius: 0px 8px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
padding: 5px 10px 5px 10px;
|
||
text-align: center;
|
||
margin-left: 20px;
|
||
color: rgba(255, 255, 255, 1);
|
||
line-height: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.rowContent_bottom {
|
||
.rowContentTop {
|
||
border-radius: 8px;
|
||
background: rgba(248, 248, 248, 1);
|
||
padding: 0 15px;
|
||
margin-bottom: 10px;
|
||
.rowContentchildren {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 18px;
|
||
}
|
||
p {
|
||
display: flex;
|
||
align-items: center;
|
||
color: rgba(100, 195, 164, 1);
|
||
span {
|
||
// width: 62px;
|
||
// height: 24px;
|
||
opacity: 1;
|
||
border-radius: 0px 8px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
padding: 5px 10px 5px 10px;
|
||
text-align: center;
|
||
margin-left: 20px;
|
||
color: rgba(255, 255, 255, 1);
|
||
line-height: 14px;
|
||
}
|
||
}
|
||
.rowContentTopChildren {
|
||
font-size: 18px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
div {
|
||
width: 33%;
|
||
text-align: right;
|
||
padding: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.demo-tabs {
|
||
// width: 100%;
|
||
// height: 98%;
|
||
:deep(.el-tabs__nav.is-top) {
|
||
transform: translateX(60px) !important;
|
||
}
|
||
}
|
||
:deep() .demo-tabs > .el-tabs__content {
|
||
padding: 10px;
|
||
color: #6b778c;
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
display: none;
|
||
// width: 100%;
|
||
// height: 93%;
|
||
.el-tab-pane {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
}
|
||
}
|
||
.tabulationCente {
|
||
width: 100%;
|
||
height: 92%;
|
||
display: flex;
|
||
padding: 10px;
|
||
.left {
|
||
width: 15%;
|
||
height: 100%;
|
||
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
|
||
margin-right: 20px;
|
||
font-size: 14px;
|
||
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: 100%;
|
||
height: 100%;
|
||
}
|
||
#pops {
|
||
opacity: 1;
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 0.6);
|
||
display: none;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
padding: 6px 8px 6px 8px;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 14px;
|
||
.content {
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
p {
|
||
width: 100px;
|
||
border-radius: 2px;
|
||
background: rgba(217, 231, 255, 0.2);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
.cancel {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 5px;
|
||
color: rgba(255, 255, 255, 1);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.centent {
|
||
width: 20px;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 99;
|
||
.arrow {
|
||
width: 22px;
|
||
height: 22px;
|
||
// background: #ccc;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translate(-80%, -50%);
|
||
z-index: 99;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.freckle {
|
||
width: 50%;
|
||
flex: 1;
|
||
// background: #ccc;
|
||
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
|
||
:deep(.el-input__wrapper) {
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
border: none;
|
||
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.25);
|
||
width: 20%;
|
||
.el-input__inner {
|
||
color: rgba(170, 170, 170, 1);
|
||
}
|
||
}
|
||
.searchDiv {
|
||
margin: 20px;
|
||
display: flex;
|
||
.modeDiv {
|
||
width: 234px;
|
||
height: 26px;
|
||
opacity: 1;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
// font-weight: 400;
|
||
border: 1px solid #ccc;
|
||
cursor: pointer;
|
||
div {
|
||
flex: 1;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
line-height: 26px;
|
||
}
|
||
.Selected {
|
||
background: rgba(100, 195, 164, 1);
|
||
border-radius: 8px 0px 0px 8px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
.Selecteds {
|
||
background: rgba(100, 195, 164, 1);
|
||
border-radius: 0px 8px 8px 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
.tableBox {
|
||
:deep(
|
||
.el-table .el-table__header-wrapper th,
|
||
.el-table .el-table__fixed-header-wrapper th
|
||
) {
|
||
color: rgba(0, 0, 0, 1);
|
||
}
|
||
height: 93%;
|
||
:deep(.el-table__inner-wrapper) {
|
||
height: 96% !important;
|
||
}
|
||
.example-pagination-block {
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
:deep(.tabth) {
|
||
background-color: rgba(247, 247, 247, 1);
|
||
.el-table-fixed-column--left {
|
||
background: rgba(247, 247, 247, 1) !important;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.chartModeFather {
|
||
width: 100%;
|
||
height: 89%;
|
||
}
|
||
/*设置弹出框样式*/
|
||
.ol-popup {
|
||
position: absolute;
|
||
background-color: #eeeeee;
|
||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
border: 1px solid #cccccc;
|
||
bottom: 12px;
|
||
left: -50px;
|
||
min-width: 280px;
|
||
}
|
||
.ol-popup:after,
|
||
.ol-popup:before {
|
||
top: 100%;
|
||
border: solid transparent;
|
||
content: ' ';
|
||
height: 0;
|
||
width: 0;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
.ol-popup:after {
|
||
border-top-color: #eeeeee;
|
||
border-width: 10px;
|
||
left: 48px;
|
||
margin-left: -10px;
|
||
}
|
||
.ol-popup:before {
|
||
border-top-color: #cccccc;
|
||
border-width: 11px;
|
||
left: 48px;
|
||
margin-left: -11px;
|
||
}
|
||
.ol-popup-closer {
|
||
text-decoration: none;
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 8px;
|
||
}
|
||
.ol-popup-closer:after {
|
||
content: '✖';
|
||
}
|
||
.chartMode {
|
||
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
|
||
color: rgba(0, 0, 0, 1);
|
||
}
|
||
height: 93%;
|
||
:deep(.el-table__inner-wrapper) {
|
||
height: 96% !important;
|
||
}
|
||
.example-pagination-block {
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
:deep(.tabth) {
|
||
background-color: rgba(247, 247, 247, 1);
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tableBoxs {
|
||
width: 100%;
|
||
height: 100%;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.chartModeDiv {
|
||
width: 100%;
|
||
height: 50%;
|
||
}
|
||
.depth {
|
||
width: 50%;
|
||
height: 26px;
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: rgba(102, 102, 102, 1);
|
||
margin-top: 20px;
|
||
cursor: pointer;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(16, 111, 111, 0.1) 0%,
|
||
rgba(47, 214, 214, 0.1) 100%
|
||
);
|
||
|
||
border: 1px solid rgba(228, 231, 237, 1);
|
||
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: rgba(100, 195, 164, 1);
|
||
}
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
cursor: pointer;
|
||
// 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);
|
||
}
|
||
}
|
||
}
|
||
.leftbottom {
|
||
width: 100%;
|
||
height: 75%;
|
||
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: 93%;
|
||
height: 92%;
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.el-table .el-table__cell) {
|
||
//解决图片被其他的表格干扰问题
|
||
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;
|
||
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;
|
||
cursor: pointer;
|
||
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);
|
||
}
|
||
}
|
||
:deep(.el-table__expand-icon) {
|
||
color: #fff;
|
||
}
|
||
.selectdiv {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
p {
|
||
padding: 10px;
|
||
width: 50%;
|
||
}
|
||
}
|
||
.block {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
:deep(.el-table__expanded-cell) {
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(38, 255, 255, 0.15) 0%,
|
||
rgba(38, 255, 255, 0.01) 100%
|
||
) !important;
|
||
}
|
||
.modelDiv {
|
||
:deep(.el-dialog) {
|
||
width: 50%;
|
||
color: #fff;
|
||
.el-dialog__title {
|
||
color: #fff;
|
||
}
|
||
.center {
|
||
color: #fff;
|
||
div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.el-image) {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
}
|
||
.showBox {
|
||
width: 285px;
|
||
height: 173px;
|
||
opacity: 1;
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 0.6);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
padding: 6px 8px 6px 8px;
|
||
}
|
||
.bottom_center {
|
||
position: absolute;
|
||
left: 26%;
|
||
// 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%;
|
||
.tableDiv {
|
||
height: 81%;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
.bottonFold {
|
||
position: absolute;
|
||
left: 47%;
|
||
top: -16%;
|
||
}
|
||
}
|
||
|
||
.tool {
|
||
position: absolute;
|
||
right: 30%;
|
||
top: 8%;
|
||
width: 30px;
|
||
height: 280px;
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
display: none;
|
||
}
|
||
|
||
#popup {
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 1);
|
||
// display: none;
|
||
// justify-content: flex-start;
|
||
// align-items: flex-end;
|
||
// padding: 30px 8px 20px 8px;
|
||
color: #fff;
|
||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||
border: rgba(41, 255, 255, 1);
|
||
}
|
||
|
||
#pop {
|
||
opacity: 1;
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 0.6);
|
||
display: none;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
padding: 6px 8px 6px 8px;
|
||
color: rgba(255, 255, 255, 1);
|
||
.content {
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
p {
|
||
width: 159px;
|
||
border-radius: 2px;
|
||
background: rgba(217, 231, 255, 0.2);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
.cancel {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 5px;
|
||
color: rgba(255, 255, 255, 1);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.back_button {
|
||
position: absolute;
|
||
right: 30%;
|
||
top: 20px;
|
||
}
|
||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||
background: rgba(38, 255, 255, 0.1);
|
||
}
|
||
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
|
||
background: rgba(38, 255, 255, 0.01);
|
||
}
|
||
: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);
|
||
--el-dialog-width: 70%;
|
||
}
|
||
: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">
|
||
.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-between;
|
||
margin-bottom: 10px;
|
||
padding: 0 10px;
|
||
.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;
|
||
}
|
||
.el-popper {
|
||
background: #fff !important;
|
||
}
|
||
</style>
|