|
|
@@ -1,9 +1,10 @@ |
|
|
|
<template> |
|
|
|
<div |
|
|
|
class="map-container" |
|
|
|
:="getMapOptions" |
|
|
|
/> |
|
|
|
<!-- <div class="layer-management"> |
|
|
|
<div class="container"> |
|
|
|
<div |
|
|
|
class="map-container" |
|
|
|
:="getMapOptions" |
|
|
|
/> |
|
|
|
<!-- <div class="layer-management"> |
|
|
|
<div class="list-manage"> |
|
|
|
<p>列表</p> |
|
|
|
<n-switch v-model:value="listShow" /> |
|
|
@@ -14,52 +15,52 @@ |
|
|
|
@update:value="airShowHide" /> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div |
|
|
|
v-show="airportPopupShow" |
|
|
|
id="airOverlay" |
|
|
|
class="airport-overlay" |
|
|
|
> |
|
|
|
<span |
|
|
|
id="closeAir" |
|
|
|
class="close-overlay" |
|
|
|
@click="hideAirInfo" |
|
|
|
>x</span> |
|
|
|
<air-info :data="airDetail" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-show="problemPopupShow" |
|
|
|
id="problemOverlay" |
|
|
|
class="problem-overlay" |
|
|
|
> |
|
|
|
<span |
|
|
|
class="close-overlay" |
|
|
|
@click="hideProblemInfo" |
|
|
|
>x</span> |
|
|
|
<problem-info :detail="problemDetail" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-show="false" |
|
|
|
class="task-question" |
|
|
|
> |
|
|
|
<n-card style="margin-bottom: 16px"> |
|
|
|
<n-tabs |
|
|
|
type="line" |
|
|
|
animated |
|
|
|
> |
|
|
|
<!-- <n-tab-pane name="task" tab="任务"> |
|
|
|
<div |
|
|
|
|
|
|
|
id="airOverlay" |
|
|
|
class="airport-overlay" |
|
|
|
> |
|
|
|
<span |
|
|
|
id="closeAir" |
|
|
|
class="close-overlay" |
|
|
|
@click="hideAirInfo" |
|
|
|
>x</span> |
|
|
|
<air-info :data="airDetail" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
|
|
|
|
id="problemOverlay" |
|
|
|
class="problem-overlay" |
|
|
|
> |
|
|
|
<span |
|
|
|
class="close-overlay" |
|
|
|
@click="hideProblemInfo" |
|
|
|
>x</span> |
|
|
|
<problem-info :detail="problemDetail" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-show="false" |
|
|
|
class="task-question" |
|
|
|
> |
|
|
|
<n-card style="margin-bottom: 16px"> |
|
|
|
<n-tabs |
|
|
|
type="line" |
|
|
|
animated |
|
|
|
> |
|
|
|
<!-- <n-tab-pane name="task" tab="任务"> |
|
|
|
任务 |
|
|
|
</n-tab-pane> --> |
|
|
|
<n-tab-pane |
|
|
|
name="question" |
|
|
|
tab="问题" |
|
|
|
> |
|
|
|
<n-date-picker |
|
|
|
:on-update:formatted-value="abc" |
|
|
|
:default-formatted-value="efg" |
|
|
|
type="daterange" |
|
|
|
:default-value="[Date.now() - 6.048e8, Date.now()]" |
|
|
|
:is-date-disabled="disablePreviousDate" |
|
|
|
/> |
|
|
|
<n-tab-pane |
|
|
|
name="question" |
|
|
|
tab="问题" |
|
|
|
> |
|
|
|
<n-date-picker |
|
|
|
:on-update:formatted-value="abc" |
|
|
|
:default-formatted-value="efg" |
|
|
|
type="daterange" |
|
|
|
:default-value="[Date.now() - 6.048e8, Date.now()]" |
|
|
|
:is-date-disabled="disablePreviousDate" |
|
|
|
/> |
|
|
|
<!-- <n-checkbox-group :value="cities" @update:value="handleUpdateValue"> |
|
|
|
<n-space style="display: block;"> |
|
|
|
<n-checkbox value="Beijing" label="北京" /> |
|
|
@@ -68,131 +69,133 @@ |
|
|
|
<n-checkbox value="Shenzen" label="深圳" /> |
|
|
|
</n-space> |
|
|
|
</n-checkbox-group> --> |
|
|
|
</n-tab-pane> |
|
|
|
</n-tabs> |
|
|
|
</n-card> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-show="listChecked" |
|
|
|
class="menu" |
|
|
|
> |
|
|
|
<div class="tabBar"> |
|
|
|
<span |
|
|
|
:class="[tabIndex==1?'checkedColor':'uncheckedColor']" |
|
|
|
style="margin-right:97px" |
|
|
|
@click="showTask" |
|
|
|
>任务</span> |
|
|
|
<span |
|
|
|
:class="[tabIndex==1?'uncheckedColor':'checkedColor']" |
|
|
|
@click="showProblem" |
|
|
|
>问题</span> |
|
|
|
</n-tab-pane> |
|
|
|
</n-tabs> |
|
|
|
</n-card> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-if="tabIndex==1" |
|
|
|
class="listDetail" |
|
|
|
v-show="listChecked" |
|
|
|
class="menu" |
|
|
|
> |
|
|
|
<ul> |
|
|
|
<li |
|
|
|
v-for="(item,index) in taskList" |
|
|
|
:key="index" |
|
|
|
style="display:flex;font-size:14px" |
|
|
|
> |
|
|
|
<div style="width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ item.taskName }}</div> |
|
|
|
<div style="42px">{{ item.statusInfo }}</div> |
|
|
|
<!-- <div v-if="item.status==1" |
|
|
|
<div class="tabBar"> |
|
|
|
<span |
|
|
|
:class="[tabIndex==1?'checkedColor':'uncheckedColor']" |
|
|
|
style="margin-right:97px" |
|
|
|
@click="showTask" |
|
|
|
>任务</span> |
|
|
|
<span |
|
|
|
:class="[tabIndex==1?'uncheckedColor':'checkedColor']" |
|
|
|
@click="showProblem" |
|
|
|
>问题</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-if="tabIndex==1" |
|
|
|
class="listDetail" |
|
|
|
> |
|
|
|
<ul> |
|
|
|
<li |
|
|
|
v-for="(item,index) in taskList" |
|
|
|
:key="index" |
|
|
|
style="display:flex;font-size:14px" |
|
|
|
> |
|
|
|
<div style="width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ item.taskName }}</div> |
|
|
|
<div style="42px">{{ item.statusInfo }}</div> |
|
|
|
<!-- <div v-if="item.status==1" |
|
|
|
@click="performTask(item)">立即执行</div> --> |
|
|
|
<!-- <n-button v-if="item.status==1" |
|
|
|
<!-- <n-button v-if="item.status==1" |
|
|
|
@click="handleConfirm">立即执行</n-button> --> |
|
|
|
<n-popconfirm |
|
|
|
v-if="item.status==1" |
|
|
|
@positive-click="handlePositiveClick(item)" |
|
|
|
@negative-click="handleNegativeClick" |
|
|
|
> |
|
|
|
<template #trigger> |
|
|
|
<span style="color:#22D33D">立即执行</span> |
|
|
|
</template> |
|
|
|
是否立即开始执行任务? |
|
|
|
</n-popconfirm> |
|
|
|
<div |
|
|
|
v-else |
|
|
|
style="color:#1890FF" |
|
|
|
@click="liveShow(item)" |
|
|
|
>直播</div> |
|
|
|
</li> |
|
|
|
|
|
|
|
</ul> |
|
|
|
<n-pagination |
|
|
|
v-model:page="page" |
|
|
|
:page-count="pageCount" |
|
|
|
:page-slot="7" |
|
|
|
style="color:#FFFFFF;position:absolute;bottom:10px;left:10px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-else |
|
|
|
class="listDetail" |
|
|
|
> |
|
|
|
<n-date-picker |
|
|
|
:on-update:formatted-value="abc" |
|
|
|
:default-formatted-value="efg" |
|
|
|
type="daterange" |
|
|
|
:default-value="[Date.now() - 6.048e8, Date.now()]" |
|
|
|
:is-date-disabled="disablePreviousDate" |
|
|
|
style="margin-bottom:15px" |
|
|
|
/> |
|
|
|
<!-- 多选框 --> |
|
|
|
<n-checkbox-group |
|
|
|
v-model:value="problemTypeSelected" |
|
|
|
@update:value="handleProblemTypeValue" |
|
|
|
<n-popconfirm |
|
|
|
v-if="item.status==1" |
|
|
|
@positive-click="handlePositiveClick(item)" |
|
|
|
@negative-click="handleNegativeClick" |
|
|
|
> |
|
|
|
<template #trigger> |
|
|
|
<span style="color:#22D33D">立即执行</span> |
|
|
|
</template> |
|
|
|
是否立即开始执行任务? |
|
|
|
</n-popconfirm> |
|
|
|
<div |
|
|
|
v-else |
|
|
|
style="color:#1890FF" |
|
|
|
@click="liveShow(item)" |
|
|
|
>直播</div> |
|
|
|
</li> |
|
|
|
|
|
|
|
</ul> |
|
|
|
<n-pagination |
|
|
|
v-model:page="page" |
|
|
|
:page-count="pageCount" |
|
|
|
:page-slot="7" |
|
|
|
style="color:#FFFFFF;position:absolute;bottom:10px;left:10px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-else |
|
|
|
class="listDetail" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-for="(item,index) in problemTypeList" |
|
|
|
:key="index" |
|
|
|
<n-date-picker |
|
|
|
:on-update:formatted-value="abc" |
|
|
|
:default-formatted-value="efg" |
|
|
|
type="daterange" |
|
|
|
:default-value="[Date.now() - 6.048e8, Date.now()]" |
|
|
|
:is-date-disabled="disablePreviousDate" |
|
|
|
style="margin-bottom:15px" |
|
|
|
/> |
|
|
|
<!-- 多选框 --> |
|
|
|
<n-checkbox-group |
|
|
|
v-model:value="problemTypeSelected" |
|
|
|
@update:value="handleProblemTypeValue" |
|
|
|
> |
|
|
|
<n-checkbox |
|
|
|
:value="item.content" |
|
|
|
:label="item.content" |
|
|
|
style="color:#FFFFFF" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-for="(item,index) in problemTypeList" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<n-checkbox |
|
|
|
:value="item.content" |
|
|
|
:label="item.content" |
|
|
|
style="color:#FFFFFF" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
</n-checkbox-group> |
|
|
|
</n-checkbox-group> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="menuControl"> |
|
|
|
<div |
|
|
|
style="border-bottom:1px solid rgba(1122,112,112,0.65)" |
|
|
|
class="item" |
|
|
|
> |
|
|
|
<div @click="showList"> |
|
|
|
<img |
|
|
|
v-if="listChecked==true" |
|
|
|
src="../../../assets/images/listChecked.png" |
|
|
|
> |
|
|
|
<img |
|
|
|
v-else |
|
|
|
src="../../../assets/images/listUnchecked.png" |
|
|
|
> |
|
|
|
</div> |
|
|
|
|
|
|
|
<span :style="{'color':listChecked?'#1890FF':'#666666'}">列表</span> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<div @click="showAirportList"> |
|
|
|
<img |
|
|
|
v-if="airportSelected==true" |
|
|
|
src="../../../assets/images/airportChecked.png" |
|
|
|
> |
|
|
|
<img |
|
|
|
v-else |
|
|
|
src="../../../assets/images/airportUnchecked.png" |
|
|
|
> |
|
|
|
<div class="menuControl"> |
|
|
|
<div |
|
|
|
style="border-bottom:1px solid rgba(1122,112,112,0.65)" |
|
|
|
class="item" |
|
|
|
> |
|
|
|
<div @click="showList"> |
|
|
|
<img |
|
|
|
v-if="listChecked==true" |
|
|
|
src="../../../assets/images/listChecked.png" |
|
|
|
> |
|
|
|
<img |
|
|
|
v-else |
|
|
|
src="../../../assets/images/listUnchecked.png" |
|
|
|
> |
|
|
|
</div> |
|
|
|
|
|
|
|
<span :style="{'color':listChecked?'#1890FF':'#666666'}">列表</span> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<div @click="showAirportList"> |
|
|
|
<img |
|
|
|
v-if="airportSelected==true" |
|
|
|
src="../../../assets/images/airportChecked.png" |
|
|
|
> |
|
|
|
<img |
|
|
|
v-else |
|
|
|
src="../../../assets/images/airportUnchecked.png" |
|
|
|
> |
|
|
|
</div> |
|
|
|
|
|
|
|
<span :style="{'color':airportSelected?'#1890FF':'#666666'}">机场</span> |
|
|
|
<span :style="{'color':airportSelected?'#1890FF':'#666666'}">机场</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
@@ -286,7 +289,7 @@ export default { |
|
|
|
problemTypeSelected: null, |
|
|
|
problemTypeList: [], |
|
|
|
listChecked: false, |
|
|
|
airportSelected: false, |
|
|
|
airportSelected: true, |
|
|
|
problemLayerList: [], |
|
|
|
airportPopupShow: false |
|
|
|
}) |
|
|
@@ -464,8 +467,9 @@ export default { |
|
|
|
data.problemDetail = feature.getProperties() |
|
|
|
// console.log(data.problemDetail, '详情') |
|
|
|
const coord = feature.getProperties().coordinate |
|
|
|
data.problemOverlay.setPosition(coord) |
|
|
|
data.problemPopupShow = true |
|
|
|
data.problemOverlay.setPosition(coord) |
|
|
|
|
|
|
|
data.map.addOverlay(data.problemOverlay) |
|
|
|
|
|
|
|
// data.problemOverlay.setPosition(coord) |
|
|
@@ -490,7 +494,7 @@ export default { |
|
|
|
const hideProblemInfo = () => { |
|
|
|
if (data.map.getOverlayById('problem_overlay')) { |
|
|
|
data.problemDetail = {} |
|
|
|
data.problemPopupShow = false |
|
|
|
|
|
|
|
data.map.removeOverlay(data.problemOverlay) |
|
|
|
} |
|
|
|
} |
|
|
@@ -602,7 +606,7 @@ export default { |
|
|
|
source: new VectorSource({ |
|
|
|
features: Features |
|
|
|
}), |
|
|
|
visible: false |
|
|
|
visible: true |
|
|
|
}) |
|
|
|
|
|
|
|
const obj = { type: item.name, layer: layer } |
|
|
@@ -645,6 +649,10 @@ export default { |
|
|
|
getQuestionType().then(res => { |
|
|
|
if (res.code === 0) { |
|
|
|
data.problemTypeList = res.data |
|
|
|
data.problemTypeSelected = [] |
|
|
|
data.problemTypeList.map((item) => { |
|
|
|
data.problemTypeSelected.push(item.content) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
@@ -658,6 +666,7 @@ export default { |
|
|
|
* |
|
|
|
*/ |
|
|
|
const handleProblemTypeValue = (value) => { |
|
|
|
// console.log(value, '选中的值') |
|
|
|
data.problemLayerList.map((item) => { |
|
|
|
const a = value.indexOf(item.type) |
|
|
|
|
|
|
@@ -750,9 +759,15 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.container{ |
|
|
|
width:100vw; |
|
|
|
height:100vh; |
|
|
|
position:relative; |
|
|
|
overflow:hidden; |
|
|
|
} |
|
|
|
.map-container { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
width: 100%; |
|
|
|
height:100%; |
|
|
|
} |
|
|
|
|
|
|
|
.layer-management { |