up
This commit is contained in:
@ -14,36 +14,63 @@
|
||||
value-format="YYYY-MM-DD"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
/>
|
||||
:disabledDate="disabledDateFun"
|
||||
>
|
||||
<template #default="cell">
|
||||
<div class="cell" :class="{ current: cell.isCurrent }">
|
||||
<span class="text">{{ cell.text }}</span>
|
||||
<span v-if="isHoliday(cell)" class="holiday" />
|
||||
</div>
|
||||
</template>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<div
|
||||
style="
|
||||
width: 3px;
|
||||
height: 19px;
|
||||
opacity: 1;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
margin-right: 12px;
|
||||
"
|
||||
></div>
|
||||
<span>预警信息发布</span>
|
||||
</div>
|
||||
<div class="farmlandDiv">
|
||||
<div class="radioDiv">
|
||||
预警范围：
|
||||
<el-radio-group @change="onclick()" v-model="radio1" class="ml-4">
|
||||
<el-radio :label="5000" size="large" style="color: white">5km</el-radio>
|
||||
<el-radio :label="10000" size="large" style="color: white">
|
||||
10km
|
||||
</el-radio>
|
||||
<el-radio :label="5000" size="large">5km</el-radio>
|
||||
<el-radio :label="10000" size="large">10km</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="selectDiv">
|
||||
站点名称:
|
||||
<el-select popper-class="select_city" v-model="zdmcValue" placeholder="请选择">
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
style="width: 76%"
|
||||
v-model="zdmcValue"
|
||||
placeholder="请选择"
|
||||
teleported="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in zdmcList"
|
||||
:key="item.msName"
|
||||
:label="item.msName"
|
||||
:value="item.msName"
|
||||
:title="item.msName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="selectDiv" style="margin-top: 10px">
|
||||
<div class="selectDiv" style="margin-top: 10px">
|
||||
预警情况:
|
||||
<el-select popper-class="select_city" v-model="warnValue" placeholder="请选择">
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
style="width: 76%"
|
||||
v-model="warnValue"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warnList"
|
||||
:key="item.flag"
|
||||
@ -59,10 +86,12 @@
|
||||
|
||||
<el-table
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center', color: 'white' }"
|
||||
:header-cell-style="{
|
||||
'text-align': 'center',
|
||||
color: 'rgba(102, 102, 102, 1)',
|
||||
}"
|
||||
:data="pageData"
|
||||
style="width: 100%"
|
||||
max-height="470px"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="20" />
|
||||
@ -94,32 +123,31 @@
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-tooltip
|
||||
:disabled="!rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
<el-icon v-if="rightWraFlag">
|
||||
<img src="@/assets/images/shouhuis.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="!rightWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
<el-icon v-if="!rightWraFlag">
|
||||
<img src="@/assets/images/zhankaiss.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,6 +200,8 @@ import {
|
||||
meteorologicalsPeople,
|
||||
meteorology,
|
||||
zdmc,
|
||||
getSeeWarning,
|
||||
getSeeWarningData,
|
||||
} from '@/api/meteorological/monitor/information.js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import 'echarts-gl';
|
||||
@ -208,17 +238,22 @@ let dic = {
|
||||
重度干热风: { color: 'rgba(234, 165, 93, 1)', disabled: false },
|
||||
};
|
||||
const warnValue = ref();
|
||||
const holidays = ref([]);
|
||||
|
||||
const isHoliday = ({ dayjs }) => {
|
||||
return holidays.value.includes(dayjs.format('YYYY-MM-DD'));
|
||||
};
|
||||
function query() {
|
||||
getmeteorology();
|
||||
}
|
||||
let code=window.localStorage.getItem('deptName')
|
||||
let code = window.localStorage.getItem('deptName');
|
||||
function reset() {
|
||||
value.value = getYesterday().toJSON().substr(0, 10);
|
||||
// value.value = getYesterday().toJSON().substr(0, 10);
|
||||
radio1.value = 5000;
|
||||
zdmcValue.value = '';
|
||||
warnValue.value = '';
|
||||
getmeteorology();
|
||||
meteorologicals();
|
||||
}
|
||||
|
||||
const warnList = [
|
||||
@ -236,6 +271,23 @@ const warnList = [
|
||||
},
|
||||
];
|
||||
|
||||
const disabledDateFun = time => {
|
||||
const currentDate = new Date();
|
||||
currentDate.setHours(0, 0, 0, 0); // Set hours, minutes, seconds, and milliseconds to 0
|
||||
if (time.getTime() > currentDate.getTime()) {
|
||||
return {
|
||||
disabled: true,
|
||||
style: {
|
||||
// Define your disabled date style here
|
||||
color: 'red',
|
||||
textDecoration: 'line-through',
|
||||
// Add more CSS properties as needed
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return false; // Enable dates in the past or today
|
||||
}
|
||||
};
|
||||
const rules = reactive({
|
||||
power: [
|
||||
{
|
||||
@ -313,10 +365,10 @@ function updatePagedData() {
|
||||
// );
|
||||
|
||||
function getIcon(val) {
|
||||
if (val === '轻度干旱') return ganhan1;
|
||||
if (val === '中度干旱') return ganhan2;
|
||||
if (val === '严重干旱') return ganhan3;
|
||||
if (val === '特大干旱') return ganhan4;
|
||||
if (val === '轻度热干风') return ganhan1;
|
||||
if (val === '中度热干风') return ganhan2;
|
||||
if (val === '严重热干风') return ganhan3;
|
||||
if (val === '特大热干风') return ganhan4;
|
||||
if (val === '无灾害') return ganhan0;
|
||||
}
|
||||
|
||||
@ -335,25 +387,22 @@ let map = ref(null);
|
||||
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/CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'huangdaoqu_village',
|
||||
name: 'CJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
map.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/XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'XJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
@ -364,12 +413,14 @@ let layers = ref(null); //村
|
||||
onMounted(() => {
|
||||
value.value = getYesterday().toJSON().substr(0, 10);
|
||||
getmeteorology();
|
||||
getSeeWarningDatas();
|
||||
getSeeWarnings();
|
||||
//地图
|
||||
initMap();
|
||||
|
||||
meteorologicals();
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
});
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
@ -387,6 +438,7 @@ function getmeteorology() {
|
||||
flag: 4,
|
||||
msName: zdmcValue.value,
|
||||
warning: warnValue.value,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -394,7 +446,7 @@ function getmeteorology() {
|
||||
}
|
||||
|
||||
function getZdmc() {
|
||||
zdmc().then(res => {
|
||||
zdmc({ divisions: code }).then(res => {
|
||||
zdmcList.value = res.data;
|
||||
});
|
||||
}
|
||||
@ -414,10 +466,11 @@ function initMap() {
|
||||
}),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Tianditu({
|
||||
layerType: 'img',
|
||||
key: '1d109683f4d84198e37a38c442d68311',
|
||||
source: new ol.source.XYZ({
|
||||
url: `${serverAPI.tiandituLayers}`,
|
||||
projection: serverAPI.tiandituLayers == 'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'?'EPSG:4326':'EPSG:3857',
|
||||
}),
|
||||
preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
|
||||
}),
|
||||
],
|
||||
});
|
||||
@ -498,9 +551,9 @@ function initMap() {
|
||||
<div class="info-window">
|
||||
<div class="close-btn" ><span>站点信息</span><img src="${guanbi}" alt=""/> </div>
|
||||
<div class="content" style="color:white;font-size: 16px">
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>名称:</span><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>经度:</span><span>${clickInformationData.lon}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>维度:</span><span>${clickInformationData.lat}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">名称:</div><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">经度:</div><span>${clickInformationData.lon}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">纬度:</div><span>${clickInformationData.lat}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -526,9 +579,9 @@ function initMap() {
|
||||
<div class="info-window" >
|
||||
<div class="close-btn" ><span>人员信息</span><img src="${guanbi}" alt=""/> </div>
|
||||
<div class="content" style="color:white;font-size: 16px">
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>姓名:</span><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>手机:</span><span>${clickInformationData.phone}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>位置:</span><span>${clickInformationData.region}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">姓名:</div><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">手机:</div><span>${clickInformationData.phone}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">位置:</div><span>${clickInformationData.region}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -632,7 +685,7 @@ function rightFoldClick() {
|
||||
rightWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
}
|
||||
}
|
||||
|
||||
@ -644,6 +697,7 @@ const onclick = () => {
|
||||
data: value.value,
|
||||
alertRange: radio1.value,
|
||||
flag: 4,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -663,7 +717,7 @@ const meteorologicals = () => {
|
||||
map.removeLayer(personIconLayer.value[i]);
|
||||
}
|
||||
personIconLayer.value = [];
|
||||
getmeteorologyEquipment({ flag: 4, data: value.value }).then(res => {
|
||||
getmeteorologyEquipment({ flag: 4, data: value.value ,divisions:code }).then(res => {
|
||||
informationData.value = res.data;
|
||||
for (const i in informationData.value) {
|
||||
const centerLonLat = [
|
||||
@ -690,7 +744,7 @@ const meteorologicals = () => {
|
||||
// 为圆形创建一个样式
|
||||
const circleStyle = new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgb(255,255,0)',
|
||||
color: dic[informationData.value[i].warning] && dic[informationData.value[i].warning].color,
|
||||
width: 2,
|
||||
}),
|
||||
});
|
||||
@ -761,7 +815,12 @@ const meteorologicals = () => {
|
||||
}
|
||||
});
|
||||
|
||||
meteorologicalsPeople({ flag: 4, alertRange: radio1.value, data: value.value ,divisions:code}).then(res => {
|
||||
meteorologicalsPeople({
|
||||
flag: 4,
|
||||
alertRange: radio1.value,
|
||||
data: value.value,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
peopleData.value = res.data;
|
||||
|
||||
for (const i in peopleData.value) {
|
||||
@ -824,6 +883,7 @@ const selectTime = () => {
|
||||
data: value.value,
|
||||
alertRange: radio1.value,
|
||||
flag: 4,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -855,11 +915,35 @@ const getmeteorologicalFreezes = () => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
});
|
||||
};
|
||||
const getSeeWarnings = () => {
|
||||
getSeeWarning({ flag: 4, divisions: code }).then(res => {
|
||||
if (res.data.length < 1) {
|
||||
ElMessage({
|
||||
message: '近1周暂无预警',
|
||||
type: 'success',
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
message: `近1周${res.data.length}次预警`,
|
||||
type: 'warning',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const getSeeWarningDatas = () => {
|
||||
let arr = [];
|
||||
getSeeWarningData({ flag: 4, divisions: code }).then(res => {
|
||||
arr = [];
|
||||
res.data.forEach(item => {
|
||||
arr.push(item.dataTime);
|
||||
});
|
||||
holidays.value = arr;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$height: calc(100vh - 100px);
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -869,55 +953,41 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: url('@/assets/images/title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 110% 100%;
|
||||
color: #fff;
|
||||
width: 90%;
|
||||
margin: 15px;
|
||||
height: 37px;
|
||||
border-radius: 3px 3px, 0px, 0px;
|
||||
background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 45px;
|
||||
padding-left: 46px;
|
||||
line-height: 37px;
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid rgba(23, 194, 180, 1);
|
||||
background: rgba(41, 255, 255, 0.1);
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 80%;
|
||||
width: 95%;
|
||||
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%
|
||||
);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 120px;
|
||||
width: 79px;
|
||||
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);
|
||||
border-radius: 4px;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -928,33 +998,48 @@ $height: calc(100vh - 100px);
|
||||
.ol-overlaycontainer-stopevent {
|
||||
.overlay1 div:first-child {
|
||||
.info-window {
|
||||
padding: 10px;
|
||||
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
.close-btn {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22px;
|
||||
background: url('@/assets/images/top.png');
|
||||
padding: 3px 0 3px 40px;
|
||||
padding: 3px 0 3px 20px;
|
||||
img {
|
||||
margin-right: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: auto 10px;
|
||||
}
|
||||
border-radius: 8px;
|
||||
color: rgba(100, 195, 164, 1);
|
||||
background: rgba(100, 195, 164, 0.05);
|
||||
}
|
||||
|
||||
.content {
|
||||
background: url('@/assets/images/bottom.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.line {
|
||||
background: url('@/assets/images/chande.png');
|
||||
padding-left: 20px;
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label {
|
||||
color: rgba(63, 161, 128, 1);
|
||||
}
|
||||
span {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
display: block;
|
||||
min-width: 160px;
|
||||
background: rgba(100, 195, 164, 0.1);
|
||||
box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
|
||||
text-align: center;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -966,16 +1051,17 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.rightWra {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 23%;
|
||||
height: $height;
|
||||
height: calc(100vh - 98px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0 0 15px 6px rgba(41, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
|
||||
0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
|
||||
transition: transform 1s;
|
||||
|
||||
.farmlandHeader {
|
||||
@ -984,7 +1070,6 @@ $height: calc(100vh - 100px);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin: 20px 0;
|
||||
padding: 0 10px;
|
||||
|
||||
@ -992,16 +1077,8 @@ $height: calc(100vh - 100px);
|
||||
.el-input__wrapper {
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
background: transparent
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(38, 212, 191, 0.5) 0%,
|
||||
rgba(43, 186, 186, 0.5) 25.69%,
|
||||
rgba(45, 165, 181, 0.5) 66.67%,
|
||||
rgba(54, 111, 168, 0.5) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(137, 211, 245, 1);
|
||||
background: rgba(100, 195, 164, 0.75);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
@ -1011,19 +1088,20 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.rightFoldDiv {
|
||||
width: 30px;
|
||||
width: 28px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: -8%;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
transform: translate(-100%, -50%);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 88%;
|
||||
height: calc(100% - 72px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1036,8 +1114,8 @@ $height: calc(100vh - 100px);
|
||||
width: 95%;
|
||||
flex-direction: column;
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
height: 100%;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
height: calc(100% - 67px);
|
||||
|
||||
:deep(.el-table--fit) {
|
||||
height: 90%;
|
||||
@ -1059,26 +1137,26 @@ $height: calc(100vh - 100px);
|
||||
::v-deep .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
background: transparent
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(38, 212, 191, 0.5) 0%,
|
||||
rgba(43, 186, 186, 0.5) 25.69%,
|
||||
rgba(45, 165, 181, 0.5) 66.67%,
|
||||
rgba(54, 111, 168, 0.5) 100%
|
||||
);
|
||||
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(219, 219, 219, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
width: 70%;
|
||||
.el-input__inner {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.btws {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
justify-content: center;
|
||||
|
||||
.el-button {
|
||||
color: white;
|
||||
@ -1086,17 +1164,15 @@ $height: calc(100vh - 100px);
|
||||
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
}
|
||||
|
||||
.bt1 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
background: rgba(100, 195, 164, 1);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
}
|
||||
|
||||
.bt2 {
|
||||
background: rgba(22, 94, 102, 1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(219, 219, 219, 1);
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1129,7 +1205,7 @@ $height: calc(100vh - 100px);
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-border-color: none;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||||
@ -1183,7 +1259,6 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
@ -1198,25 +1273,29 @@ $height: calc(100vh - 100px);
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 25%;
|
||||
bottom: 7%;
|
||||
bottom: 60px;
|
||||
width: 129px;
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
|
||||
// height: 50px;
|
||||
:deep(.el-collapse-item__header) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
font-size: 14px;
|
||||
.el-icon {
|
||||
color: rgba(100, 195, 164, 1);
|
||||
}
|
||||
}
|
||||
|
||||
//--el-collapse-content-bg-color {
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
//}
|
||||
--el-collapse-content-bg-color {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__content) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
padding: 0 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
@ -1224,12 +1303,20 @@ $height: calc(100vh - 100px);
|
||||
--el-collapse-border-color: none;
|
||||
--el-collapse-content-bg-color: none;
|
||||
|
||||
// opacity: 1;
|
||||
// border-radius: 4px;
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
// padding: 10px 10px 10px 10px;
|
||||
p {
|
||||
margin: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 0;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
}
|
||||
@ -1242,32 +1329,60 @@ $height: calc(100vh - 100px);
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 0;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// :deep(.el-checkbox__label) {
|
||||
// color: #fff;
|
||||
// }
|
||||
:deep(.el-checkbox__label) {
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.cell {
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cell .text {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cell.current .text {
|
||||
background: #626aef;
|
||||
color: #fff;
|
||||
}
|
||||
.cell .holiday {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--el-color-danger);
|
||||
border-radius: 50%;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.disabled {
|
||||
color: var(--el-datepicker-off-text-color) !important;
|
||||
cursor:not-allowed !important;
|
||||
}
|
||||
.select_city {
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(2, 31, 26, 0.95);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
background: #fff;
|
||||
}
|
||||
.el-select__popper {
|
||||
border: none !important;
|
||||
@ -1276,10 +1391,18 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.el-popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
background: #fff !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
display: none;
|
||||
}
|
||||
.el-select-dropdown {
|
||||
position: absolute !important;
|
||||
left: 0;
|
||||
background: #fff !important;
|
||||
border: 1px solid #ccc;
|
||||
max-width: 230px;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -14,36 +14,63 @@
|
||||
value-format="YYYY-MM-DD"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
/>
|
||||
:disabledDate="disabledDateFun"
|
||||
>
|
||||
<template #default="cell">
|
||||
<div class="cell" :class="{ current: cell.isCurrent }">
|
||||
<span class="text">{{ cell.text }}</span>
|
||||
<span v-if="isHoliday(cell)" class="holiday" />
|
||||
</div>
|
||||
</template>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<div
|
||||
style="
|
||||
width: 3px;
|
||||
height: 19px;
|
||||
opacity: 1;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
margin-right: 12px;
|
||||
"
|
||||
></div>
|
||||
<span>预警信息发布</span>
|
||||
</div>
|
||||
<div class="farmlandDiv">
|
||||
<div class="radioDiv">
|
||||
预警范围：
|
||||
<el-radio-group @change="onclick()" v-model="radio1" class="ml-4">
|
||||
<el-radio :label="5000" size="large" style="color: white">5km</el-radio>
|
||||
<el-radio :label="10000" size="large" style="color: white">
|
||||
10km
|
||||
</el-radio>
|
||||
<el-radio :label="5000" size="large">5km</el-radio>
|
||||
<el-radio :label="10000" size="large">10km</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="selectDiv">
|
||||
站点名称:
|
||||
<el-select popper-class="select_city" v-model="zdmcValue" placeholder="请选择">
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
v-model="zdmcValue"
|
||||
placeholder="请选择"
|
||||
style="width: 76%"
|
||||
teleported="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in zdmcList"
|
||||
:key="item.msName"
|
||||
:label="item.msName"
|
||||
:value="item.msName"
|
||||
:title="item.msName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="selectDiv" style="margin-top: 10px">
|
||||
预警情况:
|
||||
<el-select popper-class="select_city" v-model="warnValue" placeholder="请选择">
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
v-model="warnValue"
|
||||
placeholder="请选择"
|
||||
style="width: 76%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warnList"
|
||||
:key="item.flag"
|
||||
@ -59,10 +86,12 @@
|
||||
|
||||
<el-table
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center', color: 'white' }"
|
||||
:header-cell-style="{
|
||||
'text-align': 'center',
|
||||
color: 'rgba(102, 102, 102, 1)',
|
||||
}"
|
||||
:data="pageData"
|
||||
style="width: 100%"
|
||||
max-height="470px"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="20" />
|
||||
@ -94,32 +123,31 @@
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-tooltip
|
||||
:disabled="!rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
<el-icon v-if="rightWraFlag">
|
||||
<img src="@/assets/images/shouhuis.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="!rightWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
<el-icon v-if="!rightWraFlag">
|
||||
<img src="@/assets/images/zhankaiss.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,6 +200,8 @@ import {
|
||||
meteorologicalsPeople,
|
||||
meteorology,
|
||||
zdmc,
|
||||
getSeeWarning,
|
||||
getSeeWarningData,
|
||||
} from '@/api/meteorological/monitor/information.js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import 'echarts-gl';
|
||||
@ -208,18 +238,42 @@ let dic = {
|
||||
严重干旱: { color: 'rgba(234, 165, 93, 1)', disabled: false },
|
||||
特大干旱: { color: 'rgba(215, 25, 28, 1)', disabled: false },
|
||||
};
|
||||
|
||||
const warnValue = ref();
|
||||
|
||||
const holidays = ref([]);
|
||||
|
||||
const isHoliday = ({ dayjs }) => {
|
||||
return holidays.value.includes(dayjs.format('YYYY-MM-DD'));
|
||||
};
|
||||
const disabledDateFun = time => {
|
||||
const currentDate = new Date();
|
||||
currentDate.setHours(0, 0, 0, 0); // Set hours, minutes, seconds, and milliseconds to 0
|
||||
if (time.getTime() > currentDate.getTime()) {
|
||||
return {
|
||||
disabled: true,
|
||||
style: {
|
||||
// Define your disabled date style here
|
||||
color: 'red',
|
||||
textDecoration: 'line-through',
|
||||
// Add more CSS properties as needed
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return false; // Enable dates in the past or today
|
||||
}
|
||||
};
|
||||
function query() {
|
||||
getmeteorology();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
value.value = getYesterday().toJSON().substr(0, 10);
|
||||
// value.value = getYesterday().toJSON().substr(0, 10);
|
||||
radio1.value = 5000;
|
||||
zdmcValue.value = '';
|
||||
warnValue.value = '';
|
||||
getmeteorology();
|
||||
meteorologicals();
|
||||
}
|
||||
|
||||
const warnList = [
|
||||
@ -340,25 +394,26 @@ let map = ref(null);
|
||||
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/CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
`/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'huangdaoqu_village',
|
||||
name: 'CJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
map.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/XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
`/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'XJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
@ -369,12 +424,14 @@ let layers = ref(null); //村
|
||||
onMounted(() => {
|
||||
value.value = getYesterday().toJSON().substr(0, 10);
|
||||
getmeteorology();
|
||||
getSeeWarnings();
|
||||
getSeeWarningDatas();
|
||||
//地图
|
||||
initMap();
|
||||
|
||||
meteorologicals();
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
});
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
@ -384,7 +441,7 @@ let alterData = ref([]);
|
||||
let newArr = ref([]);
|
||||
const zdmcList = ref([]);
|
||||
const zdmcValue = ref('');
|
||||
let code=window.localStorage.getItem('deptName')
|
||||
let code = window.localStorage.getItem('deptName');
|
||||
|
||||
function getmeteorology() {
|
||||
meteorology({
|
||||
@ -393,6 +450,7 @@ function getmeteorology() {
|
||||
flag: 1,
|
||||
msName: zdmcValue.value,
|
||||
warning: warnValue.value,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -400,7 +458,7 @@ function getmeteorology() {
|
||||
}
|
||||
|
||||
function getZdmc() {
|
||||
zdmc().then(res => {
|
||||
zdmc({ divisions: code }).then(res => {
|
||||
zdmcList.value = res.data;
|
||||
});
|
||||
}
|
||||
@ -420,10 +478,15 @@ function initMap() {
|
||||
}),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Tianditu({
|
||||
layerType: 'img',
|
||||
key: '1d109683f4d84198e37a38c442d68311',
|
||||
source: new ol.source.XYZ({
|
||||
url: `${serverAPI.tiandituLayers}`,
|
||||
projection:
|
||||
serverAPI.tiandituLayers ==
|
||||
'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'
|
||||
? 'EPSG:4326'
|
||||
: 'EPSG:3857',
|
||||
}),
|
||||
preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
|
||||
}),
|
||||
],
|
||||
});
|
||||
@ -504,9 +567,9 @@ function initMap() {
|
||||
<div class="info-window">
|
||||
<div class="close-btn" ><span>站点信息</span><img src="${guanbi}" alt=""/> </div>
|
||||
<div class="content" style="color:white;font-size: 16px">
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>名称:</span><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>经度:</span><span>${clickInformationData.lon}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>维度:</span><span>${clickInformationData.lat}</span></div>
|
||||
<div class="line" style="margin-top: 10px">" <div class="label">名称:</div><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px">" <div class="label">经度:</div><span>${clickInformationData.lon}</span></div>
|
||||
<div class="line" style="margin-top: 10px">" <div class="label">纬度:</div><span>${clickInformationData.lat}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -532,9 +595,9 @@ function initMap() {
|
||||
<div class="info-window" >
|
||||
<div class="close-btn" ><span>人员信息</span><img src="${guanbi}" alt=""/> </div>
|
||||
<div class="content" style="color:white;font-size: 16px">
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>姓名:</span><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>手机:</span><span>${clickInformationData.phone}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>位置:</span><span>${clickInformationData.region}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">姓名:</div><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">手机:</div><span>${clickInformationData.phone}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">位置:</div><span>${clickInformationData.region}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -638,7 +701,7 @@ function rightFoldClick() {
|
||||
rightWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
}
|
||||
}
|
||||
|
||||
@ -650,6 +713,7 @@ const onclick = () => {
|
||||
data: value.value,
|
||||
alertRange: radio1.value,
|
||||
flag: 1,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -669,7 +733,7 @@ const meteorologicals = () => {
|
||||
map.removeLayer(personIconLayer.value[i]);
|
||||
}
|
||||
personIconLayer.value = [];
|
||||
getmeteorologyEquipment({ flag: 1, data: value.value }).then(res => {
|
||||
getmeteorologyEquipment({ flag: 1, data: value.value, divisions: code }).then(res => {
|
||||
informationData.value = res.data;
|
||||
for (const i in informationData.value) {
|
||||
const centerLonLat = [
|
||||
@ -696,7 +760,9 @@ const meteorologicals = () => {
|
||||
// 为圆形创建一个样式
|
||||
const circleStyle = new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgb(255,255,0)',
|
||||
color:
|
||||
dic[informationData.value[i].warning] &&
|
||||
dic[informationData.value[i].warning].color,
|
||||
width: 2,
|
||||
}),
|
||||
});
|
||||
@ -767,7 +833,12 @@ const meteorologicals = () => {
|
||||
}
|
||||
});
|
||||
|
||||
meteorologicalsPeople({ flag: 1, alertRange: radio1.value, data: value.value ,divisions:code}).then(res => {
|
||||
meteorologicalsPeople({
|
||||
flag: 1,
|
||||
alertRange: radio1.value,
|
||||
data: value.value,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
peopleData.value = res.data;
|
||||
|
||||
for (const i in peopleData.value) {
|
||||
@ -830,6 +901,7 @@ const selectTime = () => {
|
||||
data: value.value,
|
||||
alertRange: radio1.value,
|
||||
flag: 1,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -839,7 +911,6 @@ const selectTime = () => {
|
||||
const subText = () => {
|
||||
//发送短信
|
||||
getsendSms(multipleSelection.value).then(res => {
|
||||
console.log(res.data);
|
||||
if (res.data.code == 'OK') {
|
||||
ElMessage({
|
||||
message: '发送成功',
|
||||
@ -862,11 +933,36 @@ const getmeteorologicalFreezes = () => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
const getSeeWarnings = () => {
|
||||
getSeeWarning({ flag: 1, divisions: code }).then(res => {
|
||||
if (res.data.length < 1) {
|
||||
ElMessage({
|
||||
message: '近1周暂无预警',
|
||||
type: 'success',
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
message: `近1周${res.data.length}次预警`,
|
||||
type: 'warning',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const getSeeWarningDatas = () => {
|
||||
let arr = [];
|
||||
getSeeWarningData({ flag: 1, divisions: code }).then(res => {
|
||||
arr = [];
|
||||
res.data.forEach(item => {
|
||||
arr.push(item.dataTime);
|
||||
});
|
||||
holidays.value = arr;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$height: calc(100vh - 100px);
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -876,55 +972,41 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: url('@/assets/images/title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 110% 100%;
|
||||
color: #fff;
|
||||
width: 90%;
|
||||
margin: 15px;
|
||||
height: 37px;
|
||||
border-radius: 3px 3px, 0px, 0px;
|
||||
background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 45px;
|
||||
padding-left: 46px;
|
||||
line-height: 37px;
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid rgba(23, 194, 180, 1);
|
||||
background: rgba(41, 255, 255, 0.1);
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 80%;
|
||||
width: 95%;
|
||||
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%
|
||||
);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 120px;
|
||||
width: 79px;
|
||||
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);
|
||||
border-radius: 4px;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -935,33 +1017,48 @@ $height: calc(100vh - 100px);
|
||||
.ol-overlaycontainer-stopevent {
|
||||
.overlay1 div:first-child {
|
||||
.info-window {
|
||||
padding: 10px;
|
||||
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
.close-btn {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22px;
|
||||
background: url('@/assets/images/top.png');
|
||||
padding: 3px 0 3px 40px;
|
||||
padding: 3px 0 3px 20px;
|
||||
img {
|
||||
margin-right: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: auto 10px;
|
||||
}
|
||||
border-radius: 8px;
|
||||
color: rgba(100, 195, 164, 1);
|
||||
background: rgba(100, 195, 164, 0.05);
|
||||
}
|
||||
|
||||
.content {
|
||||
background: url('@/assets/images/bottom.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.line {
|
||||
background: url('@/assets/images/chande.png');
|
||||
padding-left: 20px;
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label {
|
||||
color: rgba(63, 161, 128, 1);
|
||||
}
|
||||
span {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
display: block;
|
||||
min-width: 160px;
|
||||
background: rgba(100, 195, 164, 0.1);
|
||||
box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
|
||||
text-align: center;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -973,25 +1070,24 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.rightWra {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 23%;
|
||||
height: $height;
|
||||
height: calc(100vh - 98px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0 0 15px 6px rgba(41, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
|
||||
0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
|
||||
transition: transform 1s;
|
||||
|
||||
.farmlandHeader {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin: 20px 0;
|
||||
padding: 0 10px;
|
||||
|
||||
@ -999,16 +1095,8 @@ $height: calc(100vh - 100px);
|
||||
.el-input__wrapper {
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
background: transparent
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(38, 212, 191, 0.5) 0%,
|
||||
rgba(43, 186, 186, 0.5) 25.69%,
|
||||
rgba(45, 165, 181, 0.5) 66.67%,
|
||||
rgba(54, 111, 168, 0.5) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(137, 211, 245, 1);
|
||||
background: rgba(100, 195, 164, 0.75);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
@ -1018,34 +1106,33 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.rightFoldDiv {
|
||||
width: 30px;
|
||||
width: 28px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: -8%;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
transform: translate(-100%, -50%);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 88%;
|
||||
height: calc(100% - 72px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.farmlandDiv {
|
||||
// background: rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
width: 95%;
|
||||
flex-direction: column;
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
height: 100%;
|
||||
|
||||
color: rgba(51, 51, 51, 1);
|
||||
height: calc(100% - 67px);
|
||||
:deep(.el-table--fit) {
|
||||
height: 90%;
|
||||
}
|
||||
@ -1066,26 +1153,26 @@ $height: calc(100vh - 100px);
|
||||
::v-deep .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
background: transparent
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(38, 212, 191, 0.5) 0%,
|
||||
rgba(43, 186, 186, 0.5) 25.69%,
|
||||
rgba(45, 165, 181, 0.5) 66.67%,
|
||||
rgba(54, 111, 168, 0.5) 100%
|
||||
);
|
||||
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(219, 219, 219, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
width: 70%;
|
||||
.el-input__inner {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.btws {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
justify-content: center;
|
||||
|
||||
.el-button {
|
||||
color: white;
|
||||
@ -1093,17 +1180,15 @@ $height: calc(100vh - 100px);
|
||||
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
}
|
||||
|
||||
.bt1 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
background: rgba(100, 195, 164, 1);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
}
|
||||
|
||||
.bt2 {
|
||||
background: rgba(22, 94, 102, 1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(219, 219, 219, 1);
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1136,7 +1221,7 @@ $height: calc(100vh - 100px);
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-border-color: none;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||||
@ -1205,25 +1290,29 @@ $height: calc(100vh - 100px);
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 25%;
|
||||
bottom: 7%;
|
||||
bottom: 60px;
|
||||
width: 129px;
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
|
||||
// height: 50px;
|
||||
:deep(.el-collapse-item__header) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
font-size: 14px;
|
||||
.el-icon {
|
||||
color: rgba(100, 195, 164, 1);
|
||||
}
|
||||
}
|
||||
|
||||
//--el-collapse-content-bg-color {
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
//}
|
||||
--el-collapse-content-bg-color {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__content) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
padding: 0 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
@ -1231,12 +1320,20 @@ $height: calc(100vh - 100px);
|
||||
--el-collapse-border-color: none;
|
||||
--el-collapse-content-bg-color: none;
|
||||
|
||||
// opacity: 1;
|
||||
// border-radius: 4px;
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
// padding: 10px 10px 10px 10px;
|
||||
p {
|
||||
margin: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 0;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
}
|
||||
@ -1249,32 +1346,56 @@ $height: calc(100vh - 100px);
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 0;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// :deep(.el-checkbox__label) {
|
||||
// color: #fff;
|
||||
// }
|
||||
:deep(.el-checkbox__label) {
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.cell {
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cell .text {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cell.current .text {
|
||||
background: #626aef;
|
||||
color: #fff;
|
||||
}
|
||||
.cell .holiday {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--el-color-danger);
|
||||
border-radius: 50%;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(2, 31, 26, 0.95);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
background: #fff;
|
||||
}
|
||||
.el-select__popper {
|
||||
border: none !important;
|
||||
@ -1283,10 +1404,22 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.el-popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
background: #fff !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
display: none;
|
||||
}
|
||||
.disabled {
|
||||
color: var(--el-datepicker-off-text-color) !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
.el-select-dropdown {
|
||||
position: absolute !important;
|
||||
left: 0;
|
||||
background: #fff !important;
|
||||
border: 1px solid #ccc;
|
||||
max-width: 230px;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -47,12 +47,12 @@
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }"
|
||||
header-row-class-name="tabth"
|
||||
height="80%"
|
||||
height="90%"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column prop="dataTime" label="日期" width="160">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.dataTime}}</div>
|
||||
<div>{{ scope.row.dataTime }}</div>
|
||||
<!-- <div>{{ handleDate(scope.row.dataTime) }}</div>
|
||||
<div>{{ handleTime(scope.row.dataTime) }}</div> -->
|
||||
</template>
|
||||
@ -72,11 +72,11 @@
|
||||
/>
|
||||
</el-table>
|
||||
<div class="example-pagination-block">
|
||||
共{{ tabulation.length }}条
|
||||
共{{ tabulation }}条
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tabulation.length"
|
||||
:total="Number(tabulation)"
|
||||
:current-page="tabulationcurrentPage"
|
||||
:page-size="tabulationpageSize"
|
||||
@current-change="tabulationCurrentChange"
|
||||
@ -193,7 +193,7 @@ let formInline = ref({
|
||||
});
|
||||
let flags = ref(false);
|
||||
let tabulationcurrentPage = ref(1); //列表当前页
|
||||
let tabulationpageSize = ref(11); //每页条数
|
||||
let tabulationpageSize = ref(14); //每页条数
|
||||
let center = null; // 指定中心点
|
||||
let chartData = ref({
|
||||
airTemperature: [], //空气温度
|
||||
@ -219,14 +219,13 @@ const data = reactive({
|
||||
onMounted(() => {
|
||||
getmeteorologicals();
|
||||
initLeafletMap();
|
||||
getmeteorologys();
|
||||
getMeteorologyTbs();
|
||||
});
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
window.document.querySelector('#screenfull').style.display = 'none';
|
||||
});
|
||||
|
||||
let baseLayers = null;
|
||||
const initLeafletMap = () => {
|
||||
//加载地图
|
||||
map = L.map('cesiumContainers', {
|
||||
@ -235,20 +234,58 @@ const initLeafletMap = () => {
|
||||
zoomControl: false, //禁用 + - 按钮
|
||||
doubleClickZoom: false, // 禁用双击放大
|
||||
attributionControl: false, // 移除右下角leaflet标识
|
||||
maxZoom: 16,
|
||||
crs: serverAPI.tiandituzhuji=='http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng' ? L.CRS.EPSG4326 : L.CRS.EPSG3857
|
||||
});
|
||||
// 渲染底图
|
||||
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);
|
||||
map._onResize();
|
||||
// 创建底图图层
|
||||
let imgBaseLayer = null;
|
||||
let ciaBaseLayer = null;
|
||||
if (
|
||||
serverAPI.tiandituzhuji ==
|
||||
'http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'
|
||||
) {
|
||||
imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
|
||||
maxZoom: 20,
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
});
|
||||
|
||||
ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
|
||||
maxZoom: 20,
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
});
|
||||
} else {
|
||||
// 创建底图图层
|
||||
imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
|
||||
// maxZoom: 20,
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
});
|
||||
|
||||
ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
|
||||
// maxZoom: 20,
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
});
|
||||
}
|
||||
// 将底图图层添加到地图
|
||||
imgBaseLayer.addTo(map);
|
||||
ciaBaseLayer.addTo(map);
|
||||
baseLayers = {
|
||||
'Image Base Map': imgBaseLayer,
|
||||
'CIA Base Map': ciaBaseLayer,
|
||||
};
|
||||
L.Util.requestAnimFrame(map.invalidateSize, map, !1, map._container); //解决首次加载不完全问题
|
||||
};
|
||||
|
||||
/*-----------接口---------------*/
|
||||
const getmeteorologicals = () => {
|
||||
getmeteorological({ divisions: code }).then(res => {
|
||||
label2.value = res.data[0].children[0].label;
|
||||
city.value = res.data[0].children[0].label;
|
||||
getmeteorologys();
|
||||
res.data.forEach(item => {
|
||||
devicesArr.value.push(item);
|
||||
});
|
||||
@ -256,96 +293,142 @@ const getmeteorologicals = () => {
|
||||
};
|
||||
const getmeteorologys = () => {
|
||||
getmeteorology({
|
||||
msName: city.value,
|
||||
whetherToDownload: false,
|
||||
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,
|
||||
divisions: code,
|
||||
pageNums:tabulationcurrentPage.value,
|
||||
pageSizes:tabulationpageSize.value
|
||||
}).then(res => {
|
||||
tabulation.value = res.data[0] && res.data[0].pageCount;
|
||||
tableNewData.value = res.data
|
||||
});
|
||||
getMeteorologyTbs();
|
||||
// getMeteorological({ divisions: code }).then(res => {
|
||||
// map.eachLayer(layer => {
|
||||
// // 检查图层是否为底图
|
||||
// const isBaseLayer = Object.values(baseLayers).includes(layer);
|
||||
// // 如果不是底图，删除图层
|
||||
// if (!isBaseLayer) {
|
||||
// map.removeLayer(layer);
|
||||
// }
|
||||
// });
|
||||
// res.data.forEach(item => {
|
||||
// center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
// map.setView(center, 17);
|
||||
// L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
// .addTo(map)
|
||||
// .bindPopup(
|
||||
// `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
// )
|
||||
// .openPopup();
|
||||
// });
|
||||
// });
|
||||
};
|
||||
const getMeteorologyTbs = () => {
|
||||
getMeteorologyTb({
|
||||
name: city.value,
|
||||
whetherToDownload: false,
|
||||
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,
|
||||
divisions: window.localStorage.getItem('divisions'),
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
tabulation.value = res.data;
|
||||
tableNewData.value = res.data.slice(
|
||||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
|
||||
);
|
||||
});
|
||||
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
map.setView(center, 17);
|
||||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
.addTo(map)
|
||||
.bindPopup(
|
||||
`<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
)
|
||||
.openPopup();
|
||||
});
|
||||
});
|
||||
};
|
||||
const getMeteorologyTbs = () => {
|
||||
(chartData.value['airTemperature'] = []), //空气温度
|
||||
(chartData.value['airHumidity'] = []), //空气湿度
|
||||
(chartData.value['windSpeed'] = []), //风速
|
||||
(chartData.value['windDirection'] = []), //风向
|
||||
(chartData.value['rainfall'] = []), //雨量
|
||||
(chartData.value['atmosphericPressure'] = []), //大气压力
|
||||
(chartData.value['evaporation'] = []), //蒸发
|
||||
(chartData.value['lightIntensity'] = []), //光照强度
|
||||
(chartData.value['sunlightHours'] = []), //日照时数
|
||||
(chartData.value['photosyntheticEffectiveRadiation'] = []), //光合有效
|
||||
(chartData.value['dataTimeArr'] = []),
|
||||
getMeteorologyTb({
|
||||
name: city.value,
|
||||
whetherToDownload: false,
|
||||
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,
|
||||
}).then(res => {
|
||||
(chartData.value['airTemperature'] = []), //空气温度
|
||||
(chartData.value['airHumidity'] = []), //空气湿度
|
||||
(chartData.value['windSpeed'] = []), //风速
|
||||
(chartData.value['windDirection'] = []), //风向
|
||||
(chartData.value['rainfall'] = []), //雨量
|
||||
(chartData.value['atmosphericPressure'] = []), //大气压力
|
||||
(chartData.value['evaporation'] = []), //蒸发
|
||||
(chartData.value['lightIntensity'] = []), //光照强度
|
||||
(chartData.value['sunlightHours'] = []), //日照时数
|
||||
(chartData.value['photosyntheticEffectiveRadiation'] = []), //光合有效
|
||||
(chartData.value['dataTimeArr'] = []),
|
||||
res.data.forEach(item => {
|
||||
chartData.value['airTemperature'].unshift(item.airTemperature);
|
||||
chartData.value['airHumidity'].unshift(item.airHumidity);
|
||||
chartData.value['windSpeed'].unshift(item.windSpeed);
|
||||
chartData.value['windDirection'].unshift(item.windDirection);
|
||||
chartData.value['rainfall'].unshift(item.rainfall);
|
||||
chartData.value['atmosphericPressure'].unshift(item.atmosphericPressure);
|
||||
chartData.value['evaporation'].unshift(item.evaporation);
|
||||
chartData.value['lightIntensity'].unshift(item.lightIntensity);
|
||||
chartData.value['sunlightHours'].unshift(item.sunlightHours);
|
||||
chartData.value['photosyntheticEffectiveRadiation'].unshift(
|
||||
chartData.value['airTemperature'].push(item.airTemperature);
|
||||
chartData.value['airHumidity'].push(item.airHumidity);
|
||||
chartData.value['windSpeed'].push(item.windSpeed);
|
||||
chartData.value['windDirection'].push(item.windDirection);
|
||||
chartData.value['rainfall'].push(item.rainfall);
|
||||
chartData.value['atmosphericPressure'].push(item.atmosphericPressure);
|
||||
chartData.value['evaporation'].push(item.evaporation);
|
||||
chartData.value['lightIntensity'].push(item.lightIntensity);
|
||||
chartData.value['sunlightHours'].push(item.sunlightHours);
|
||||
chartData.value['photosyntheticEffectiveRadiation'].push(
|
||||
item.photosyntheticEffectiveRadiation
|
||||
);
|
||||
chartData.value['dataTimeArr'].unshift(item.dataTime);
|
||||
chartData.value['dataTimeArr'].push(item.dataTime);
|
||||
});
|
||||
chart();
|
||||
});
|
||||
chart();
|
||||
});
|
||||
};
|
||||
/*------------事件----------------*/
|
||||
watch(
|
||||
() => label2.value,
|
||||
(val, oldVal) => {
|
||||
getMeteorological({ divisions: code }).then(res => {
|
||||
map.eachLayer(layer => {
|
||||
// 检查图层是否为底图
|
||||
const isBaseLayer = Object.values(baseLayers).includes(layer);
|
||||
// 如果不是底图，删除图层
|
||||
if (!isBaseLayer) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
res.data.forEach(item => {
|
||||
if (item.msName == label2.value) {
|
||||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
map.setView(center, 17);
|
||||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
.addTo(map)
|
||||
.bindPopup(
|
||||
`<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
)
|
||||
.openPopup();
|
||||
}
|
||||
});
|
||||
});
|
||||
getMeteorologyTbs();
|
||||
}
|
||||
);
|
||||
//树结构
|
||||
const handleNodeClick = (data, node, data1, data2) => {
|
||||
label2.value = data.label;
|
||||
formInline.value.flag = '';
|
||||
// let oriFatherId = node.parent.parent.data;
|
||||
// label1.value = oriFatherId.label;
|
||||
// getCameraNames(label2.value);
|
||||
city.value = label2.value;
|
||||
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.msName == label2.value) {
|
||||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
map.setView(center, 17);
|
||||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
.addTo(map)
|
||||
.bindPopup(
|
||||
`<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
)
|
||||
.openPopup();
|
||||
}
|
||||
});
|
||||
});
|
||||
tabulationcurrentPage.value = 1;
|
||||
if (!data.children) {
|
||||
label2.value = data.label;
|
||||
formInline.value.flag = '';
|
||||
value1.value = [];
|
||||
city.value = label2.value;
|
||||
// getMeteorological({ divisions: code }).then(res => {
|
||||
// map.eachLayer(layer => {
|
||||
// // 检查图层是否为底图
|
||||
// const isBaseLayer = Object.values(baseLayers).includes(layer);
|
||||
// // 如果不是底图，删除图层
|
||||
// if (!isBaseLayer) {
|
||||
// map.removeLayer(layer);
|
||||
// }
|
||||
// });
|
||||
// res.data.forEach(item => {
|
||||
// if (item.msName == label2.value) {
|
||||
// center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
// map.setView(center, 17);
|
||||
// L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
// .addTo(map)
|
||||
// .bindPopup(
|
||||
// `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
// )
|
||||
// .openPopup();
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
getmeteorologys();
|
||||
}
|
||||
};
|
||||
|
||||
//查询
|
||||
const onSubmit = e => {
|
||||
tabulationcurrentPage.value = 1;
|
||||
getmeteorologys();
|
||||
getMeteorologyTbs();
|
||||
chart();
|
||||
@ -395,10 +478,17 @@ const foldClick = () => {
|
||||
//分页
|
||||
const tabulationCurrentChange = val => {
|
||||
tabulationcurrentPage.value = val;
|
||||
tableNewData.value = tabulation.value.slice(
|
||||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
|
||||
);
|
||||
getmeteorology({
|
||||
msName: city.value,
|
||||
whetherToDownload: false,
|
||||
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,
|
||||
divisions: code,
|
||||
pageNums:tabulationcurrentPage.value,
|
||||
pageSizes:tabulationpageSize.value
|
||||
}).then(res => {
|
||||
tableNewData.value = res.data
|
||||
});
|
||||
};
|
||||
//时间换行
|
||||
const handleDate = timestamp => {
|
||||
@ -419,6 +509,7 @@ const handleTime = timestamp => {
|
||||
const resetForm = () => {
|
||||
value1.value = '';
|
||||
formInline.value.flag = '';
|
||||
tabulationcurrentPage.value=1
|
||||
getmeteorologys();
|
||||
};
|
||||
//图表切换
|
||||
@ -432,6 +523,7 @@ const dowcity = () => {
|
||||
whetherToDownload: true,
|
||||
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,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||||
});
|
||||
@ -837,10 +929,10 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
.chartModeFather {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
height: calc(100% - 140px);
|
||||
.chartDiv {
|
||||
width: 100% !important;
|
||||
height: 89% !important;
|
||||
height: calc(100% - 26px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -989,15 +1081,16 @@ $height: calc(100vh - 100px);
|
||||
) {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
height: 93%;
|
||||
height: 100%;
|
||||
:deep(.el-table__inner-wrapper) {
|
||||
height: 96% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.example-pagination-block {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
:deep(.tabth) {
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
@ -1042,9 +1135,9 @@ $height: calc(100vh - 100px);
|
||||
) {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
height: 93%;
|
||||
height: 100%;
|
||||
:deep(.el-table__inner-wrapper) {
|
||||
height: 96% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.example-pagination-block {
|
||||
font-size: 14px;
|
||||
@ -1146,6 +1239,15 @@ $height: calc(100vh - 100px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node) {
|
||||
//el-tree 换行展示
|
||||
white-space: normal; //关键代码!!!!!!!!!
|
||||
.el-tree-node__content {
|
||||
height: 100%;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.video {
|
||||
|
||||
Reference in New Issue
Block a user