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"
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user