|
|
@@ -3,13 +3,19 @@
|
|
|
<div id="aMap2" class="map"></div>
|
|
|
<!--左上事件列表-->
|
|
|
<div class="event-box">
|
|
|
- <div class="tabs">
|
|
|
- <div class="tab">事件位置</div>
|
|
|
- <el-button type="primary" @click="toSelect">定点选取</el-button>
|
|
|
- </div>
|
|
|
- <div class="event-list">
|
|
|
- <div v-for="(item, index) in eventList" :key="index" class="event-item" @click="selectEvent(item)">
|
|
|
- {{ item.event_title }}
|
|
|
+ <div class="event-box2">
|
|
|
+ <div class="box-header">
|
|
|
+ <div class="header-left">
|
|
|
+ <i class="icon-position" />
|
|
|
+ <div class="text1">事件位置</div>
|
|
|
+ </div>
|
|
|
+ <div class="common-btn-primary3" @click="toSelect">定点选取</div>
|
|
|
+ </div>
|
|
|
+ <div class="event-list">
|
|
|
+ <div v-for="(item, index) in eventList" :key="index" class="event-item" @click="selectEvent(item)">
|
|
|
+ <i :class="!!item.checked ? 'checked2' : 'checked1'" />
|
|
|
+ {{ item.event_title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -21,49 +27,105 @@
|
|
|
</div>
|
|
|
<div v-show="expand" class="list-content">
|
|
|
<div v-for="(item, index) in emergency_resource" :key="index" class="list-item" @click="handleClick(item)">
|
|
|
- <i :class="!!item.checked ? 'checked1' : 'checked2'" />
|
|
|
+ <i :class="!!item.checked ? 'checked2' : 'checked1'" />
|
|
|
<div>{{ item.label }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-show="!!selectData.longitude && !!selectData.latitude" class="search-box">
|
|
|
- <div class="search-title">{{ selectData.event_title }}</div>
|
|
|
- <div class="search-item">
|
|
|
- <div class="text1">选择救灾资源</div>
|
|
|
- <el-select
|
|
|
- v-model="queryParams.dataType"
|
|
|
- class="custom-select select-box"
|
|
|
- placeholder="请选择"
|
|
|
- popper-class="custom-select-popper"
|
|
|
- :teleported="false"
|
|
|
- >
|
|
|
- <el-option v-for="item in disaster_relief_material" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
+ <div class="right-section">
|
|
|
+ <div class="tag-box" @click="showRight = !showRight">
|
|
|
+<!-- <i class="icon" />-->
|
|
|
+ <div class="text1">定点分析>></div>
|
|
|
</div>
|
|
|
- <div class="search-item2">
|
|
|
- <el-input v-model="queryParams.keyword" class="custom-input2" placeholder="请输入关键字搜索" style="width: 200px" />
|
|
|
- <div class="common-btn-primary" @click="getList">搜索</div>
|
|
|
- </div>
|
|
|
- <div class="search-item3">
|
|
|
- <el-checkbox v-model="checked1">自定义距离</el-checkbox>
|
|
|
- <el-input v-model="distance" class="custom-input2" placeholder="自定义距离(公里)" style="width: 200px" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="list2">
|
|
|
- <div>总数: {{ total }}个</div>
|
|
|
- <div class="list-content">
|
|
|
- <div v-for="(item, index) in dataList" :key="index" class="list-item">
|
|
|
- <div class="text1">{{ item.name }}</div>
|
|
|
+ <div v-show="showRight" class="right-box">
|
|
|
+ <div class="scroll">
|
|
|
+ <div v-if="!tempState.address" class="search-box">
|
|
|
<div class="text-box">
|
|
|
- <div class="text2">{{ item.address }}</div>
|
|
|
- <div class="text3" @click="handleRoutes(item)">路线</div>
|
|
|
+ <i class="icon-position2" />
|
|
|
+ <div class="text1" :title="selectData.event_title">{{ selectData.event_title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="search-box">
|
|
|
+ <div class="text-box">
|
|
|
+ <i class="icon-position2" />
|
|
|
+ <div class="text1" :title="tempState.address">{{ tempState.address }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="common-btn-primary4" @click="confirmSelect">确定定位</div>
|
|
|
+ </div>
|
|
|
+ <div class="search-item">
|
|
|
+ <div class="text1">选择救灾资源：</div>
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.dataType"
|
|
|
+ class="custom-select select-box"
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="custom-select-popper"
|
|
|
+ :teleported="false"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in disaster_relief_material" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="search-item2">
|
|
|
+ <el-input v-model="queryParams.keyword" class="custom-input2" placeholder="请输入关键字搜索" />
|
|
|
+ <div class="common-btn-primary4" @click="getList">搜索</div>
|
|
|
+ </div>
|
|
|
+ <div class="search-item3">
|
|
|
+ <el-checkbox v-model="checked1">自定义距离</el-checkbox>
|
|
|
+ <el-input v-model="distance" class="custom-input2" placeholder="自定义距离(公里)" />
|
|
|
+ <div class="common-btn3" @click="getList">确定</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list2">
|
|
|
+ <div class="text-box1">
|
|
|
+ 总数：
|
|
|
+ <div class="gradient-text2">{{ total }}</div>
|
|
|
+ 个
|
|
|
+ </div>
|
|
|
+ <div class="list-content">
|
|
|
+ <div v-for="(item, index) in dataList" :key="index" class="list-item">
|
|
|
+ <div class="text-box2">
|
|
|
+ <div class="text2">{{ item.name }}</div>
|
|
|
+ <div class="text3">{{ item.address }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="operate" @click="handleRoutes(item)">
|
|
|
+ <i class="icon2" />
|
|
|
+ 路线
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="!!routeData && routeData.length > 0" class="route-box">
|
|
|
+ <div class="route-item1">
|
|
|
+ <i class="icon-position3" />
|
|
|
+ <div class="text1">路线始点：</div>
|
|
|
+ <div class="text2" :title="routesAddress">{{ routesAddress }}</div>
|
|
|
+ <i class="icon-close2" @click="showAddress = false" />
|
|
|
+ </div>
|
|
|
+ <div class="route-list">
|
|
|
+ <div v-for="(item, index) in routeData" :key="index" class="route-item2" @click="drawRoute(item)">
|
|
|
+ <div class="text-box1">
|
|
|
+ <div :class="'tag' + index">{{ getTag(index) }}</div>
|
|
|
+ <div class="text1">{{ item.policy }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="route-info">
|
|
|
+ <div class="text-box2">
|
|
|
+ <i class="icon1" />
|
|
|
+ <div class="gradient-text2">{{ item.date[0] }}</div>
|
|
|
+ <div class="text2">小时</div>
|
|
|
+ <div class="gradient-text2">{{ item.date[1] }}</div>
|
|
|
+ <div class="text2">分钟</div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="text-box2">
|
|
|
+ <i class="icon2" />
|
|
|
+ <div class="gradient-text2">{{ item.distance / 1000 }}</div>
|
|
|
+ <div class="text2">公里</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="text2"></div>
|
|
|
- <div v-for="(item, index) in routeData" :key="index" class="route-item" @click="drawRoute(item)">
|
|
|
- {{ item.policy }} | {{ item.distance / 1000 }}公里
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -101,15 +163,18 @@ import {
|
|
|
getWaterloggedRoadsDetails,
|
|
|
getYardSitesDetails
|
|
|
} from '@/api/globalMap/spatialAnalysis';
|
|
|
+import BigNumber from 'bignumber.js';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const { emergency_resource, disaster_relief_material } = toRefs<any>(proxy?.useDict('emergency_resource', 'disaster_relief_material'));
|
|
|
// 应急资源
|
|
|
let expand = ref(true);
|
|
|
-let AMap, map, driving;
|
|
|
-let end = ref([110.925176, 21.678993]);
|
|
|
+let AMap, map, driving, geocoder;
|
|
|
let routeData = ref([]);
|
|
|
let routeLine, startMarker, endMarker;
|
|
|
+let showRight = ref(false);
|
|
|
+let showAddress = ref(true);
|
|
|
+let routesAddress = ref('');
|
|
|
const { getAMap, getMap, creatMask, switchMap, addMarker, clearMarker, showInfo, hideInfo } = useAMap({
|
|
|
el: 'aMap2',
|
|
|
key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
@@ -118,7 +183,7 @@ const { getAMap, getMap, creatMask, switchMap, addMarker, clearMarker, showInfo,
|
|
|
center: [110.925175, 22],
|
|
|
dragEnable: true,
|
|
|
scrollWheel: true,
|
|
|
- plugins: ['AMap.Driving', 'AMap.DistrictSearch', 'AMap.MarkerCluster'],
|
|
|
+ plugins: ['AMap.Driving', 'AMap.DistrictSearch', 'AMap.MarkerCluster', 'AMap.Geocoder'],
|
|
|
// layers: 'satellite',
|
|
|
// 加载完成事件
|
|
|
onLoadCompleted: () => {
|
|
|
@@ -128,16 +193,22 @@ const { getAMap, getMap, creatMask, switchMap, addMarker, clearMarker, showInfo,
|
|
|
switchMap('satellite');
|
|
|
//构造路线导航类
|
|
|
driving = new AMap.Driving({});
|
|
|
+ geocoder = new AMap.Geocoder({
|
|
|
+ // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
+ city: '010'
|
|
|
+ });
|
|
|
},
|
|
|
onMarkerClick: (data) => {
|
|
|
// 多点位
|
|
|
if (data.type === '1') {
|
|
|
let path = [];
|
|
|
- props.pointType.forEach((item) => {
|
|
|
- path.push(item.component);
|
|
|
+ emergency_resource.value.forEach((item) => {
|
|
|
+ if (!!item.checked) {
|
|
|
+ path.push(item.value);
|
|
|
+ }
|
|
|
});
|
|
|
getPointInfoList({
|
|
|
- option: path.toString(),
|
|
|
+ option: data.dataType,
|
|
|
longitude: data.longitude.toString(),
|
|
|
latitude: data.latitude.toString()
|
|
|
}).then((res) => {
|
|
|
@@ -163,7 +234,7 @@ const { getAMap, getMap, creatMask, switchMap, addMarker, clearMarker, showInfo,
|
|
|
const div = document.createElement('div');
|
|
|
div.className = 'point-item point-item-hover';
|
|
|
div.innerHTML =
|
|
|
- '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
|
|
|
+ '<div class="td4">' + getDictLabel(emergency_resource.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
|
|
|
div.addEventListener('click', () => {
|
|
|
handlePointDetails(item);
|
|
|
});
|
|
|
@@ -189,6 +260,11 @@ let selectData = ref({
|
|
|
latitude: ''
|
|
|
});
|
|
|
let selectMarker;
|
|
|
+let tempState = reactive({
|
|
|
+ address: '',
|
|
|
+ longitude: '',
|
|
|
+ latitude: ''
|
|
|
+});
|
|
|
let checked1 = ref(false);
|
|
|
let distance = ref('');
|
|
|
let queryParams = reactive({
|
|
|
@@ -202,17 +278,39 @@ const toSelect = () => {
|
|
|
};
|
|
|
const handleClickMap = (e) => {
|
|
|
map.off('click', handleClickMap);
|
|
|
+ tempState.longitude = e.lnglat.getLng();
|
|
|
+ tempState.latitude = e.lnglat.getLat();
|
|
|
+ geocoder.getAddress([tempState.longitude, tempState.latitude], (status, result) => {
|
|
|
+ if (status === 'complete' && result.info === 'OK') {
|
|
|
+ tempState.address = result.regeocode.formattedAddress;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ showRight.value = true;
|
|
|
+};
|
|
|
+const confirmSelect = () => {
|
|
|
selectEvent(
|
|
|
{
|
|
|
- longitude: e.lnglat.getLng(),
|
|
|
- latitude: e.lnglat.getLat()
|
|
|
+ event_title: tempState.address,
|
|
|
+ longitude: tempState.longitude,
|
|
|
+ latitude: tempState.latitude
|
|
|
},
|
|
|
true
|
|
|
);
|
|
|
};
|
|
|
// 选中事件
|
|
|
const selectEvent = (item, unFitView) => {
|
|
|
+ eventList.value.forEach((item2) => {
|
|
|
+ if (item2.event_id === item.event_id) {
|
|
|
+ item2.checked = true;
|
|
|
+ } else {
|
|
|
+ item2.checked = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
selectData.value = item;
|
|
|
+ tempState.address = '';
|
|
|
+ tempState.longitude = '';
|
|
|
+ tempState.latitude = '';
|
|
|
+ showRight.value = true;
|
|
|
if (!!selectMarker) {
|
|
|
selectMarker.setMap(null);
|
|
|
selectMarker = null;
|
|
|
@@ -232,9 +330,12 @@ const selectEvent = (item, unFitView) => {
|
|
|
map.setFitView([selectMarker]);
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
const handleRoutes = (item) => {
|
|
|
const start = [item.longitude, item.latitude];
|
|
|
const end = [selectData.value.longitude, selectData.value.latitude];
|
|
|
+ showAddress.value = true;
|
|
|
+ routesAddress.value = item.address;
|
|
|
calculateRoutes(start, end, 0);
|
|
|
};
|
|
|
// 计算并展示三条路线
|
|
|
@@ -256,6 +357,7 @@ const calculateRoutes = (start, end, index) => {
|
|
|
if (index === 0) {
|
|
|
routeData.value = [];
|
|
|
}
|
|
|
+ route.date = formatDate(route.time);
|
|
|
routeData.value.push(route);
|
|
|
}
|
|
|
|
|
|
@@ -328,6 +430,35 @@ const parseRouteToPath = (route) => {
|
|
|
|
|
|
return path;
|
|
|
};
|
|
|
+function formatDate(seconds: number) {
|
|
|
+ // 将秒数转换为BigNumber
|
|
|
+ const secondsBn = new BigNumber(seconds);
|
|
|
+
|
|
|
+ // 计算小时数
|
|
|
+ const hoursBn = secondsBn.dividedBy(3600).integerValue(BigNumber.ROUND_DOWN);
|
|
|
+ // 计算剩余的秒数，然后转换为分钟数
|
|
|
+ const remainingSecondsBn = secondsBn.minus(hoursBn.times(3600));
|
|
|
+ const minutesBn = remainingSecondsBn.dividedBy(60).integerValue();
|
|
|
+
|
|
|
+ // 将BigNumber转换为字符串，并使用padStart添加前导零
|
|
|
+ const hours = hoursBn.toString();
|
|
|
+
|
|
|
+ const minutes = minutesBn.toString();
|
|
|
+
|
|
|
+ // 返回包含小时和分钟的数组
|
|
|
+ return [hours, minutes];
|
|
|
+}
|
|
|
+const getTag = (index) => {
|
|
|
+ let tag = '路线' + index;
|
|
|
+ if (index === 0) {
|
|
|
+ tag = '路线A';
|
|
|
+ } else if (index === 1) {
|
|
|
+ tag = '路线B';
|
|
|
+ } else if (index === 2) {
|
|
|
+ tag = '路线C';
|
|
|
+ }
|
|
|
+ return tag;
|
|
|
+};
|
|
|
const handlePointDetails = (data) => {
|
|
|
let methodList = {
|
|
|
'1': getEmergencyExpertDetails,
|
|
|
@@ -580,6 +711,7 @@ onUnmounted(() => {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
.map {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -591,75 +723,393 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
.event-box {
|
|
|
+ box-sizing: border-box;
|
|
|
position: absolute;
|
|
|
top: 10px;
|
|
|
left: 10px;
|
|
|
- width: 280px;
|
|
|
- min-height: 200px;
|
|
|
- background-color: #213567;
|
|
|
color: #ffffff;
|
|
|
- .tabs {
|
|
|
- padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 301px;
|
|
|
+ height: 8px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/decoration3.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 300px;
|
|
|
+ height: 8px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/decoration4.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .event-box2 {
|
|
|
+ width: 290px;
|
|
|
+ height: 206px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/box3.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- .tab {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 134px;
|
|
|
- height: 66px;
|
|
|
- background: url('@/assets/images/common/btnPrimary3.png') no-repeat center center;
|
|
|
- background-size: 100% 100%;
|
|
|
- color: #ffffff;
|
|
|
+ flex-direction: column;
|
|
|
+ .box-header {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 10px;
|
|
|
+ .header-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .icon-position {
|
|
|
+ display: inline-block;
|
|
|
+ width: 19px;
|
|
|
+ height: 22px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/position.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 134px;
|
|
|
+ height: 66px;
|
|
|
+ background: url('@/assets/images/common/btnPrimary3.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .event-list {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- max-height: 250px;
|
|
|
- overflow-y: auto;
|
|
|
- .event-item {
|
|
|
- cursor: pointer;
|
|
|
- padding: 5px 10px;
|
|
|
- &:hover {
|
|
|
- background-color: #335293;
|
|
|
+ .event-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow-y: auto;
|
|
|
+ .event-item {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 5px 10px;
|
|
|
+ .checked1 {
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/checked1.png') no-repeat;
|
|
|
+ }
|
|
|
+ .checked2 {
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/checked2.png') no-repeat;
|
|
|
+ }
|
|
|
+ .checked1,
|
|
|
+ .checked2 {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: #335293;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .search-box {
|
|
|
+ .right-section {
|
|
|
position: absolute;
|
|
|
right: 10px;
|
|
|
top: 10px;
|
|
|
- color: #ffffff;
|
|
|
- background-color: #17255a;
|
|
|
- width: 280px;
|
|
|
- height: 500px;
|
|
|
- .search-title {
|
|
|
- font-size: 16px;
|
|
|
- color: #91ecf3;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .tag-box {
|
|
|
+ width: 46px;
|
|
|
+ height: 144px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/box4.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 12px 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .right-box {
|
|
|
+ color: #ffffff;
|
|
|
+ width: 407px;
|
|
|
+ height: 602px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/box5.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 20px 15px;
|
|
|
+ .scroll {
|
|
|
+ width: 100%;
|
|
|
+ height: 562px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .search-box {
|
|
|
+ width: 380px;
|
|
|
+ height: 57px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/box6.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .text-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .icon-position2 {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: inline-block;
|
|
|
+ width: 46px;
|
|
|
+ height: 50px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/position2.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #f7f8fb;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .common-btn-primary4 {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-item {
|
|
|
+ margin: 6px 0 3px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .custom-select {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-item2 {
|
|
|
+ margin: 3px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .custom-input2 {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .common-btn-primary4 {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: -12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-item3 {
|
|
|
+ margin: 3px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .el-checkbox {
|
|
|
+ color: #8fa8be;
|
|
|
+ margin-right: 10px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .custom-input2 {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .common-btn3 {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list2 {
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #1c356d;
|
|
|
+ color: #ebf5f7;
|
|
|
+ .text-box1 {
|
|
|
+ font-size: 14px;
|
|
|
+ .gradient-text2 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: BEBAS-1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-content {
|
|
|
+ height: 210px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .list-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 7px 0;
|
|
|
+ border-bottom: 1px solid #4574d5;
|
|
|
+ .text-box2 {
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .text3 {
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operate {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: transparent;
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon2 {
|
|
|
+ display: inline-block;
|
|
|
+ width: 33px;
|
|
|
+ height: 33px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/icon2.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .route-box {
|
|
|
+ .route-item1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #1d366e;
|
|
|
+ padding: 0 5px;
|
|
|
+ margin-top: 6px;
|
|
|
+ .icon-position3 {
|
|
|
+ display: inline-block;
|
|
|
+ width: 23px;
|
|
|
+ height: 26px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/position3.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #cfe4fe;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #f1fbff;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .icon-close2 {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/close.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .route-item2 {
|
|
|
+ width: 100%;
|
|
|
+ background: #1f2c4e;
|
|
|
+ padding: 5px;
|
|
|
+ margin-top: 6px;
|
|
|
+ .text-box1 {
|
|
|
+ display: flex;
|
|
|
+ .tag0 {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #e65d63;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .tag1 {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #f0b13c;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .tag2 {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #6bc26b;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .route-info {
|
|
|
+ display: flex;
|
|
|
+ background-color: #2b3858;
|
|
|
+ border: 1px solid #2e5174;
|
|
|
+ padding: 3px 5px;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .text-box2 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 150px;
|
|
|
+ .icon1 {
|
|
|
+ display: inline-block;
|
|
|
+ width: 14px;
|
|
|
+ height: 13px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/icon3.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .gradient-text2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: BEBAS-1;
|
|
|
+ margin: 0 3px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #95a9c1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ width: 1px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #5a6885;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.list {
|
|
|
position: absolute;
|
|
|
bottom: 10px;
|
|
|
left: 10px;
|
|
|
- width: 240px;
|
|
|
- background-color: #213567;
|
|
|
- //&::after {
|
|
|
- // content: '';
|
|
|
- // display: inline-block;
|
|
|
- //}
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 177px;
|
|
|
+ height: 8px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/decoration2.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 177px;
|
|
|
+ height: 8px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/decoration1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
.list-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -667,41 +1117,55 @@ onUnmounted(() => {
|
|
|
padding: 5px 10px;
|
|
|
color: #fff;
|
|
|
cursor: pointer;
|
|
|
+ width: 162px;
|
|
|
+ height: 52px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/box1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
.icon-down {
|
|
|
- background: url('@/assets/images/menu/down.png') no-repeat;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/down.png') no-repeat;
|
|
|
}
|
|
|
.icon-up {
|
|
|
- background: url('@/assets/images/menu/up.png') no-repeat;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/down.png') no-repeat;
|
|
|
+ transform: rotateX(180deg);
|
|
|
}
|
|
|
.icon-down,
|
|
|
.icon-up {
|
|
|
- width: 18px;
|
|
|
- height: 10px;
|
|
|
+ width: 16px;
|
|
|
+ height: 9px;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
.list-content {
|
|
|
+ width: 161px;
|
|
|
+ height: 314px;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/box2.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 5px;
|
|
|
.list-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
cursor: pointer;
|
|
|
- padding: 5px 10px;
|
|
|
+ padding: 7.5px 10px;
|
|
|
&:hover {
|
|
|
- background-color: #335293;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/active.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
.checked1 {
|
|
|
- background: url('@/assets/images/menu/checked-box2.png') no-repeat;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/checked1.png') no-repeat;
|
|
|
}
|
|
|
.checked2 {
|
|
|
- background: url('@/assets/images/menu/checked-box.png') no-repeat;
|
|
|
+ background: url('@/assets/images/electronicDisasterMapManage/checked2.png') no-repeat;
|
|
|
}
|
|
|
.checked1,
|
|
|
.checked2 {
|
|
|
display: inline-block;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 5px;
|
|
|
}
|
