|
|
@@ -0,0 +1,294 @@ |
|
|
|
<template> |
|
|
|
<div class="map__entend"> |
|
|
|
<div v-for="(item,index) in extendList" :key="index" class="extend__container" @click="handleClick(index)"> |
|
|
|
<img :src="selectedTab === index ? `/src/assets/images/${item.selected.path}.png` : `/src/assets/images/${item.path}.png`" alt=""> |
|
|
|
<p :style="{color: selectedTab === index ? item.selected.color : '#eee'}">{{ item.name }}</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="showPatrol" class="portal__modal"> |
|
|
|
<p class="portal__title"> |
|
|
|
<span :class="{'selected': portalTab ==='task'}" @click="handleTabChage('task')">任务</span> |
|
|
|
<span :class="{'selected': portalTab ==='ques'}" @click="handleTabChage('ques')">问题</span> |
|
|
|
</p> |
|
|
|
<div v-show="portalTab ==='task'" class="portal__container"> |
|
|
|
<div class="container__table"> |
|
|
|
<ul> |
|
|
|
<li v-for="(item,index) in taskList" :key="index"> |
|
|
|
<span>{{ formatDate(item.executionStartTime) }}</span> |
|
|
|
<span class="table__name">{{ item.name }}</span> |
|
|
|
<span>{{ statusList[item.status] }}</span> |
|
|
|
<n-popconfirm |
|
|
|
v-if="item.status == 1" |
|
|
|
> |
|
|
|
<template #trigger> |
|
|
|
<span class="table__operate">执行</span> |
|
|
|
</template> |
|
|
|
是否立即开始执行任务? |
|
|
|
</n-popconfirm> |
|
|
|
<span v-else class="table__operate live">直播</span> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div v-show="pageTotal>taskParams.limit" class="container__page"> |
|
|
|
<n-pagination |
|
|
|
v-model:page="taskParams.page" |
|
|
|
v-model:page-size="taskParams.limit" |
|
|
|
v-model:item-count="pageTotal" |
|
|
|
:page-slot="8" |
|
|
|
@update:page="handlePageChange" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-show="portalTab ==='ques'" class="portal__container"> |
|
|
|
<div> |
|
|
|
<n-date-picker |
|
|
|
v-model:value="times" |
|
|
|
format="yyyy-MM-dd" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
type="daterange" |
|
|
|
:is-date-disabled="disablePreviousDate" |
|
|
|
@update:formatted-value="handleDateChange" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="container__checkbox"> |
|
|
|
<n-checkbox-group |
|
|
|
v-model:value="checkedType" |
|
|
|
@update:value="handleRadioChange" |
|
|
|
> |
|
|
|
<div v-for="(item, index) in QUESTION_TYPE" :key="index"> |
|
|
|
<n-checkbox |
|
|
|
:value="item.content" |
|
|
|
:label="item.content" |
|
|
|
style="color: #ffffff" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</n-checkbox-group> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { reactive, toRefs } from 'vue' |
|
|
|
import { startOfDay } from 'date-fns/esm' |
|
|
|
import { getMissionList, getQuestionList } from '@/api/dashboard/index.js' |
|
|
|
import { formatDate } from '@/utils/index.js' |
|
|
|
import { QUESTION_TYPE } from '@/utils/dictionary.js' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'MapExtend', |
|
|
|
setup() { |
|
|
|
const data = reactive({ |
|
|
|
selectedTab: 0, |
|
|
|
extendList: [ |
|
|
|
{ name: '火灾预警', path: 'warning', selected: { color: 'rgba(51, 133, 255, 1)', path: 'warning_select' }}, |
|
|
|
{ name: '森林巡查', path: 'patrol', selected: { color: 'rgba(51, 133, 255, 1)', path: 'patrol_select' }} |
|
|
|
], |
|
|
|
showPatrol: false, |
|
|
|
portalTab: 'task' |
|
|
|
}) |
|
|
|
const task = reactive({ |
|
|
|
taskList: [], |
|
|
|
taskParams: { |
|
|
|
page: 1, |
|
|
|
limit: 10 |
|
|
|
}, |
|
|
|
pageTotal: 1, |
|
|
|
statusList: { |
|
|
|
1: '待执行', |
|
|
|
2: '执行中' |
|
|
|
} |
|
|
|
}) |
|
|
|
const ques = reactive({ |
|
|
|
times: [Date.now() - 7 * 24 * 3600000, Date.now()], |
|
|
|
disablePreviousDate(ts, type, range) { |
|
|
|
const d = 864e5 |
|
|
|
if (type === 'start' && range !== null) { |
|
|
|
return startOfDay(range[1]).valueOf() - startOfDay(ts).valueOf() >= d * 8 || ts > Date.now() |
|
|
|
} |
|
|
|
if (type === 'end' && range !== null) { |
|
|
|
return startOfDay(ts).valueOf() - startOfDay(range[0]).valueOf() >= d * 8 || ts > Date.now() |
|
|
|
} |
|
|
|
return ts > Date.now() |
|
|
|
}, |
|
|
|
checkedType: QUESTION_TYPE.value?.map((item) => item.content) || null, |
|
|
|
QUESTION_TYPE |
|
|
|
}) |
|
|
|
|
|
|
|
const handleClick = (index) => { |
|
|
|
data.selectedTab = index |
|
|
|
if (index === 1) { |
|
|
|
if (!data.showPatrol) { |
|
|
|
queryTaskList() |
|
|
|
} |
|
|
|
data.showPatrol = true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const queryTaskList = async() => { |
|
|
|
const res = await getMissionList(task.taskParams) |
|
|
|
if (res.code === 0) { |
|
|
|
task.taskList = res.data.records |
|
|
|
task.pageTotal = res.data.total |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @description: |
|
|
|
* @return {*} |
|
|
|
*/ |
|
|
|
const handleTabChage = (type) => { |
|
|
|
data.portalTab = type |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @description: |
|
|
|
* @return {*} |
|
|
|
*/ |
|
|
|
const handlePageChange = () => { |
|
|
|
queryTaskList() |
|
|
|
} |
|
|
|
|
|
|
|
const handleDateChange = (value) => { |
|
|
|
console.log(ques.times) |
|
|
|
} |
|
|
|
const handleRadioChange = async() => { |
|
|
|
const params = { |
|
|
|
startTime: ques.times[0], |
|
|
|
endTime: ques.times[1] |
|
|
|
} |
|
|
|
const res = await getQuestionList(params) |
|
|
|
} |
|
|
|
return { |
|
|
|
...toRefs(data), |
|
|
|
...toRefs(task), |
|
|
|
...toRefs(ques), |
|
|
|
handleClick, |
|
|
|
queryTaskList, |
|
|
|
formatDate, |
|
|
|
handleTabChage, |
|
|
|
handlePageChange, |
|
|
|
handleDateChange, |
|
|
|
handleRadioChange |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
<style scoped lang='scss'> |
|
|
|
.map__entend{ |
|
|
|
display: flex; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.extend__container{ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
width: 66px; |
|
|
|
height: 66px; |
|
|
|
opacity: 1; |
|
|
|
border-radius: 3px; |
|
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
|
margin-right: 15px; |
|
|
|
cursor: pointer; |
|
|
|
img{ |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
} |
|
|
|
p{ |
|
|
|
font-size: 14px; |
|
|
|
text-align: center; |
|
|
|
color: #eee; |
|
|
|
} |
|
|
|
} |
|
|
|
.portal__modal { |
|
|
|
position: absolute; |
|
|
|
width: 400px; |
|
|
|
height: 428px; |
|
|
|
top: 100px; |
|
|
|
border-radius: 1px; |
|
|
|
background: rgba(0, 0, 0, 1); |
|
|
|
padding: 0 5px 5px; |
|
|
|
animation: scale-up-tr 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; |
|
|
|
.portal__title{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
line-height: 35px; |
|
|
|
span{ |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
font-size: 16px; |
|
|
|
color: #eee; |
|
|
|
cursor: pointer; |
|
|
|
&.selected{ |
|
|
|
color: #63acff, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.portal__container{ |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 35px); |
|
|
|
padding: 10px; |
|
|
|
background: #2c2c2c; |
|
|
|
.container__table{ |
|
|
|
height: 330px; |
|
|
|
color: #eeeeee; |
|
|
|
li{ |
|
|
|
line-height: 32px; |
|
|
|
font-size: 14px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
.table__name{ |
|
|
|
width: 140px; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
.table__operate{ |
|
|
|
cursor: pointer; |
|
|
|
color: #27e024; |
|
|
|
&.live{ |
|
|
|
color: #4f92ff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep(.container__page){ |
|
|
|
.n-pagination{ |
|
|
|
.n-pagination-item { |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
.n-checkbox__label { |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
.n-pagination-item--button{ |
|
|
|
background: transparent; |
|
|
|
&:hover{ |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep(.container__checkbox){ |
|
|
|
margin: 15px 0 0 5px; |
|
|
|
.n-checkbox__label{ |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
@keyframes scale-up-tr { |
|
|
|
0% { |
|
|
|
transform: scale(0.5); |
|
|
|
transform-origin: 100% 0%; |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: scale(1); |
|
|
|
transform-origin: 100% 0%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |