|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
|
<div class="container"> |
|
|
|
|
|
<div |
|
|
|
|
|
class="map-container" |
|
|
|
|
|
:="getMapOptions" |
|
|
|
|
|
/> |
|
|
|
|
|
<!-- <div class="layer-management"> |
|
|
|
|
|
<div class="list-manage"> |
|
|
|
|
|
<p>列表</p> |
|
|
|
|
|
<n-switch v-model:value="listShow" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="air-manage"> |
|
|
|
|
|
<p>机场</p> |
|
|
|
|
|
<n-switch v-model:value="airShow" |
|
|
|
|
|
@update:value="airShowHide" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> --> |
|
|
|
|
|
<div |
|
|
|
|
|
|
|
|
|
|
|
id="airOverlay" |
|
|
|
|
|
class="airport-overlay" |
|
|
|
|
|
> |
|
|
|
|
|
<span |
|
|
|
|
|
id="closeAir" |
|
|
|
|
|
class="close-overlay" |
|
|
|
|
|
@click="hideAirInfo" |
|
|
|
|
|
>x</span> |
|
|
|
|
|
<air-info :data="airDetail" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
class="map-container" |
|
|
|
|
|
:="getMapOptions" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
|
|
|
|
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> |
|
|
|
|
|
|
|
|
id="problemOverlay" |
|
|
|
|
|
class="problem-overlay" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-show="listChecked" |
|
|
|
|
|
class="menu" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="tabBar"> |
|
|
<span |
|
|
<span |
|
|
class="close-overlay" |
|
|
|
|
|
@click="hideProblemInfo" |
|
|
|
|
|
>x</span> |
|
|
|
|
|
<problem-info :detail="problemDetail" /> |
|
|
|
|
|
|
|
|
:class="[tabIndex==1?'checkedColor':'uncheckedColor']" |
|
|
|
|
|
style="margin-right:97px" |
|
|
|
|
|
@click="showTask" |
|
|
|
|
|
>任务</span> |
|
|
|
|
|
<span |
|
|
|
|
|
:class="[tabIndex==1?'uncheckedColor':'checkedColor']" |
|
|
|
|
|
@click="showProblem" |
|
|
|
|
|
>问题</span> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
v-show="false" |
|
|
|
|
|
class="task-question" |
|
|
|
|
|
|
|
|
v-if="tabIndex==1" |
|
|
|
|
|
class="listDetail" |
|
|
> |
|
|
> |
|
|
<n-card style="margin-bottom: 16px"> |
|
|
|
|
|
<n-tabs |
|
|
|
|
|
type="line" |
|
|
|
|
|
animated |
|
|
|
|
|
|
|
|
<ul> |
|
|
|
|
|
<li |
|
|
|
|
|
v-for="(item,index) in taskList" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
style="display:flex;font-size:14px" |
|
|
> |
|
|
> |
|
|
<!-- <n-tab-pane name="task" tab="任务"> |
|
|
|
|
|
任务 |
|
|
|
|
|
</n-tab-pane> --> |
|
|
|
|
|
<n-tab-pane |
|
|
|
|
|
name="question" |
|
|
|
|
|
tab="问题" |
|
|
|
|
|
|
|
|
<div style="width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ item.date }} {{ item.taskName }}</div> |
|
|
|
|
|
<div style="width:42px">{{ item.statusInfo }}</div> |
|
|
|
|
|
|
|
|
|
|
|
<n-popconfirm |
|
|
|
|
|
v-if="item.status==1" |
|
|
|
|
|
@positive-click="handlePositiveClick(item)" |
|
|
|
|
|
@negative-click="handleNegativeClick" |
|
|
> |
|
|
> |
|
|
<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="北京" /> |
|
|
|
|
|
<n-checkbox value="Shanghai" label="上海" /> |
|
|
|
|
|
<n-checkbox value="Guangzhou" label="广州" /> |
|
|
|
|
|
<n-checkbox value="Shenzen" label="深圳" /> |
|
|
|
|
|
</n-space> |
|
|
|
|
|
</n-checkbox-group> --> |
|
|
|
|
|
</n-tab-pane> |
|
|
|
|
|
</n-tabs> |
|
|
|
|
|
</n-card> |
|
|
|
|
|
|
|
|
<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> |
|
|
<div |
|
|
<div |
|
|
v-show="listChecked" |
|
|
|
|
|
class="menu" |
|
|
|
|
|
|
|
|
v-else |
|
|
|
|
|
class="listDetail" |
|
|
> |
|
|
> |
|
|
<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" |
|
|
|
|
|
|
|
|
<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" |
|
|
> |
|
|
> |
|
|
<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" |
|
|
|
|
|
@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" |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-for="(item,index) in problemTypeList" |
|
|
|
|
|
:key="index" |
|
|
> |
|
|
> |
|
|
<div |
|
|
|
|
|
v-for="(item,index) in problemTypeList" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
> |
|
|
|
|
|
<n-checkbox |
|
|
|
|
|
:value="item.content" |
|
|
|
|
|
:label="item.content" |
|
|
|
|
|
style="color:#FFFFFF" |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<n-checkbox |
|
|
|
|
|
:value="item.content" |
|
|
|
|
|
:label="item.content" |
|
|
|
|
|
style="color:#FFFFFF" |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</n-checkbox-group> |
|
|
|
|
|
|
|
|
</n-checkbox-group> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</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="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> |
|
|
</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':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> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<span :style="{'color':airportSelected?'#1890FF':'#666666'}">机场</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const initTaskList = () => { |
|
|
const initTaskList = () => { |
|
|
getMissionList({ |
|
|
getMissionList({ |
|
|
page: data.page, |
|
|
page: data.page, |
|
|
limit: 12 |
|
|
|
|
|
|
|
|
limit: 8 |
|
|
}).then(res => { |
|
|
}).then(res => { |
|
|
if (res.code === 0) { |
|
|
if (res.code === 0) { |
|
|
data.taskList = res.data.records |
|
|
data.taskList = res.data.records |
|
|
data.pageCount = res.data.pages |
|
|
data.pageCount = res.data.pages |
|
|
|
|
|
// console.log(data.pageCount, '页数') |
|
|
data.taskList.map((item) => { |
|
|
data.taskList.map((item) => { |
|
|
const arr = item.executionStartTime.split(/[ ]+/)// 以空格分开 |
|
|
const arr = item.executionStartTime.split(/[ ]+/)// 以空格分开 |
|
|
item.taskName = arr[0] + item.name |
|
|
|
|
|
|
|
|
item.date = arr[0] |
|
|
|
|
|
item.taskName = item.name |
|
|
switch (item.status) { |
|
|
switch (item.status) { |
|
|
case 1: |
|
|
case 1: |
|
|
item.statusInfo = '待执行' |
|
|
item.statusInfo = '待执行' |
|
|
|
|
|
|
|
|
.container{ |
|
|
.container{ |
|
|
width:100vw; |
|
|
width:100vw; |
|
|
height:100vh; |
|
|
height:100vh; |
|
|
position:relative; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
position:relative; |
|
|
overflow:hidden; |
|
|
overflow:hidden; |
|
|
} |
|
|
} |
|
|
.map-container { |
|
|
.map-container { |
|
|
width: 100%; |
|
|
|
|
|
height:100%; |
|
|
|
|
|
|
|
|
position:absolute; |
|
|
|
|
|
top:0px; |
|
|
|
|
|
left:0px; |
|
|
|
|
|
right:0px; |
|
|
|
|
|
bottom:0px; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.layer-management { |
|
|
.layer-management { |
|
|
|
|
|
|
|
|
li { |
|
|
li { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
padding: 8px 2px; |
|
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
|
|
|
|
padding: 5px 2px; |
|
|
|
|
|
margin-bottom: 10px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |