|
|
|
@@ -5,6 +5,26 @@ |
|
|
|
<p :style="{color: selectedTab === index ? item.selected.color : '#eee'}">{{ item.name }}</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="showWarning" class="warning__modal"> |
|
|
|
<div class="warning__container"> |
|
|
|
<div class="container__checkbox"> |
|
|
|
<n-checkbox-group |
|
|
|
v-model:value="checkedWarn" |
|
|
|
@update:value="handleWarnChange" |
|
|
|
> |
|
|
|
<div v-for="(item, index) in warnList" :key="index" class="warn__item"> |
|
|
|
<img :src="item.icon" alt=""> |
|
|
|
<n-checkbox |
|
|
|
:value="item.value" |
|
|
|
:label="item.label" |
|
|
|
/> |
|
|
|
<span>{{ item.num }}</span> |
|
|
|
</div> |
|
|
|
</n-checkbox-group> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="showPatrol" class="portal__modal"> |
|
|
|
<p class="portal__title"> |
|
|
|
<span :class="{'selected': portalTab ==='task'}" @click="handleTabChage('task')">任务</span> |
|
|
|
@@ -52,14 +72,13 @@ |
|
|
|
</div> |
|
|
|
<div class="container__checkbox"> |
|
|
|
<n-checkbox-group |
|
|
|
v-model:value="checkedType" |
|
|
|
@update:value="handleRadioChange" |
|
|
|
v-model:value="checkedQues" |
|
|
|
@update:value="handleQuesChange" |
|
|
|
> |
|
|
|
<div v-for="(item, index) in QUESTION_TYPE" :key="index"> |
|
|
|
<n-checkbox |
|
|
|
:value="item.content" |
|
|
|
:label="item.content" |
|
|
|
style="color: #ffffff" |
|
|
|
:value="item.value" |
|
|
|
:label="item.label" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</n-checkbox-group> |
|
|
|
@@ -70,15 +89,29 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { reactive, toRefs } from 'vue' |
|
|
|
import { onMounted, reactive, toRefs } from 'vue' |
|
|
|
import { startOfDay } from 'date-fns/esm' |
|
|
|
import { getMissionList, getQuestionList } from '@/api/dashboard/index.js' |
|
|
|
import { cameraList } from '@/api/basic/monitor.js' |
|
|
|
import { materialList } from '@/api/basic/material.js' |
|
|
|
import { formatDate } from '@/utils/index.js' |
|
|
|
import { QUESTION_TYPE } from '@/utils/dictionary.js' |
|
|
|
|
|
|
|
import personnel_icon from '@/assets/images/personnelActivities.png' |
|
|
|
import problemSpot_icon from '@/assets/images/problemSpot.png' |
|
|
|
import deadTree_icon from '@/assets/images/deadTree.png' |
|
|
|
import fireHazard_icon from '@/assets/images/fireHazard.png' |
|
|
|
import camera from '@/assets/icon/camera.png' |
|
|
|
import materials from '@/assets/icon/materials.png' |
|
|
|
import personnel from '@/assets/icon/personnel.png' |
|
|
|
const ICON_LIST = { |
|
|
|
'002000': problemSpot_icon, |
|
|
|
'002001': deadTree_icon, |
|
|
|
'002003': personnel_icon, |
|
|
|
'002004': fireHazard_icon |
|
|
|
} |
|
|
|
export default { |
|
|
|
name: 'MapExtend', |
|
|
|
emits: [], |
|
|
|
emits: ['send'], |
|
|
|
setup(props, { emit }) { |
|
|
|
const data = reactive({ |
|
|
|
selectedTab: 0, |
|
|
|
@@ -86,9 +119,18 @@ export default { |
|
|
|
{ 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' }} |
|
|
|
], |
|
|
|
showWarning: true, |
|
|
|
showPatrol: false, |
|
|
|
portalTab: 'task' |
|
|
|
}) |
|
|
|
const warn = reactive({ |
|
|
|
warnList: [ |
|
|
|
{ icon: camera, label: '监控分布', value: 1, num: 0, list: [] }, |
|
|
|
{ icon: materials, label: '消防物资', value: 2, num: 0, list: [] } |
|
|
|
// { icon: personnel, label: '防护人员', value: 3, num: 0, list: [] } |
|
|
|
], |
|
|
|
checkedWarn: [1, 2] |
|
|
|
}) |
|
|
|
const task = reactive({ |
|
|
|
taskList: [], |
|
|
|
taskParams: { |
|
|
|
@@ -113,20 +155,36 @@ export default { |
|
|
|
} |
|
|
|
return ts > Date.now() |
|
|
|
}, |
|
|
|
checkedType: QUESTION_TYPE.value?.map((item) => item.content) || null, |
|
|
|
checkedQues: QUESTION_TYPE.value?.map((item) => item.value) || null, |
|
|
|
message: null, |
|
|
|
QUESTION_TYPE |
|
|
|
}) |
|
|
|
|
|
|
|
/** |
|
|
|
* @description: 点击面板 |
|
|
|
* @param {*} index 0火灾预警，1森林巡查 |
|
|
|
* @return {*} |
|
|
|
*/ |
|
|
|
const handleClick = (index) => { |
|
|
|
data.selectedTab = index |
|
|
|
if (index === 1) { |
|
|
|
if (!data.showPatrol) { |
|
|
|
queryTaskList() |
|
|
|
const times = [formatDate(ques.times[0]), formatDate(ques.times[1])] |
|
|
|
handleDateChange(times) |
|
|
|
} |
|
|
|
data.showPatrol = true |
|
|
|
data.showWarning = false |
|
|
|
} else { |
|
|
|
getWarnList() |
|
|
|
data.showWarning = true |
|
|
|
data.showPatrol = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @description: 查询问题列表 |
|
|
|
* @return {*} |
|
|
|
*/ |
|
|
|
const queryTaskList = async() => { |
|
|
|
const res = await getMissionList(task.taskParams) |
|
|
|
if (res.code === 0) { |
|
|
|
@@ -136,7 +194,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @description: |
|
|
|
* @description: 切换tab |
|
|
|
* @return {*} |
|
|
|
*/ |
|
|
|
const handleTabChage = (type) => { |
|
|
|
@@ -144,26 +202,73 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @description: |
|
|
|
* @description: 切换分页 |
|
|
|
* @return {*} |
|
|
|
*/ |
|
|
|
const handlePageChange = () => { |
|
|
|
queryTaskList() |
|
|
|
} |
|
|
|
|
|
|
|
const handleDateChange = (value) => { |
|
|
|
console.log(ques.times) |
|
|
|
} |
|
|
|
const handleRadioChange = async() => { |
|
|
|
/** |
|
|
|
* @description: 切换时间 |
|
|
|
* @param {*} value |
|
|
|
* @return {*} |
|
|
|
*/ |
|
|
|
const handleDateChange = async(value) => { |
|
|
|
const params = { |
|
|
|
startTime: ques.times[0], |
|
|
|
endTime: ques.times[1] |
|
|
|
startTime: value[0], |
|
|
|
endTime: value[1] |
|
|
|
} |
|
|
|
const res = await getQuestionList(params) |
|
|
|
emit('test', res.data) |
|
|
|
if (res.code === 0) { |
|
|
|
ques.message = res.data?.map((item) => { |
|
|
|
item.icon = ICON_LIST[item.type] |
|
|
|
return item |
|
|
|
}) |
|
|
|
emit('send', { tabs: data.selectedTab, data: ques.message, type: ques.checkedQues }) |
|
|
|
} else { |
|
|
|
ques.message = null |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const getWarnList = async() => { |
|
|
|
Promise.all([await cameraList(), await materialList()]) |
|
|
|
.then(([camera, maertral]) => { |
|
|
|
warn.warnList[0].num = camera?.data?.length || 0 |
|
|
|
warn.warnList[0].list = camera?.data || [] |
|
|
|
warn.warnList[1].num = maertral?.data?.length || 0 |
|
|
|
warn.warnList[1].list = maertral?.data || [] |
|
|
|
emit('send', { tabs: data.selectedTab, data: warn.warnList, type: warn.checkedWarn }) |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @description: 变更火灾预警选择 |
|
|
|
* @param {*} value |
|
|
|
* @return {*} |
|
|
|
*/ |
|
|
|
const handleWarnChange = async(value) => { |
|
|
|
emit('send', { tabs: data.selectedTab, data: warn.warnList, type: value }) |
|
|
|
} |
|
|
|
/** |
|
|
|
* @description: 变更僧林巡查问题选择 |
|
|
|
* @param {*} value |
|
|
|
* @return {*} |
|
|
|
*/ |
|
|
|
const handleQuesChange = async(value) => { |
|
|
|
emit('send', { tabs: data.selectedTab, data: ques.message, type: value }) |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getWarnList() |
|
|
|
}) |
|
|
|
|
|
|
|
return { |
|
|
|
...toRefs(data), |
|
|
|
...toRefs(warn), |
|
|
|
...toRefs(task), |
|
|
|
...toRefs(ques), |
|
|
|
handleClick, |
|
|
|
@@ -172,7 +277,8 @@ export default { |
|
|
|
handleTabChage, |
|
|
|
handlePageChange, |
|
|
|
handleDateChange, |
|
|
|
handleRadioChange |
|
|
|
handleWarnChange, |
|
|
|
handleQuesChange |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@@ -205,7 +311,35 @@ export default { |
|
|
|
color: #eee; |
|
|
|
} |
|
|
|
} |
|
|
|
.portal__modal { |
|
|
|
.warning__modal{ |
|
|
|
position: absolute; |
|
|
|
white-space: nowrap; |
|
|
|
top: 100px; |
|
|
|
border-radius: 1px; |
|
|
|
background: rgba(0, 0, 0, 1); |
|
|
|
padding: 5px; |
|
|
|
color: #E8E8E8; |
|
|
|
animation: scale-up-tl 0.4s cubic-bezier(0.39,0.575,0.565,1.000) both; |
|
|
|
.warning__container{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 10px; |
|
|
|
background: #2c2c2c; |
|
|
|
} |
|
|
|
.warn__item{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
::v-deep(.container__checkbox){ |
|
|
|
.n-checkbox{ |
|
|
|
margin: 0 10px |
|
|
|
} |
|
|
|
.n-checkbox__label{ |
|
|
|
color: #E8E8E8; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.portal__modal{ |
|
|
|
position: absolute; |
|
|
|
width: 400px; |
|
|
|
height: 428px; |
|
|
|
@@ -213,7 +347,7 @@ export default { |
|
|
|
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; |
|
|
|
animation: scale-up-tl 0.4s cubic-bezier(0.39,0.575,0.565,1.000) both; |
|
|
|
.portal__title{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@@ -259,6 +393,12 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep(.container__checkbox){ |
|
|
|
margin: 15px 0 0 5px; |
|
|
|
.n-checkbox__label{ |
|
|
|
color: #E8E8E8; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep(.container__page){ |
|
|
|
.n-pagination{ |
|
|
|
@@ -276,20 +416,36 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep(.container__checkbox){ |
|
|
|
margin: 15px 0 0 5px; |
|
|
|
.n-checkbox__label{ |
|
|
|
color: #ffffff; |
|
|
|
::v-deep(.n-checkbox.n-checkbox--checked){ |
|
|
|
.n-checkbox-box{ |
|
|
|
background-color: #C4C4C4; |
|
|
|
} |
|
|
|
.n-checkbox-box__border{ |
|
|
|
border-color: #C4C4C4; |
|
|
|
} |
|
|
|
.check-icon{ |
|
|
|
fill: #252525; |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep(.n-checkbox:hover){ |
|
|
|
.n-checkbox-box__border{ |
|
|
|
border-color: #C4C4C4; |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep(.n-checkbox:focus:not(:active)){ |
|
|
|
.n-checkbox-box .n-checkbox-box__border{ |
|
|
|
border-color: #C4C4C4; |
|
|
|
box-shadow: 0 0 0 2px rgba(196, 196, 196, 0.3); |
|
|
|
} |
|
|
|
} |
|
|
|
@keyframes scale-up-tr { |
|
|
|
0% { |
|
|
|
transform: scale(0.5); |
|
|
|
transform-origin: 100% 0%; |
|
|
|
@keyframes scale-up-tl { |
|
|
|
0%{ |
|
|
|
transform:scale(0.5); |
|
|
|
transform-origin:0 0; |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: scale(1); |
|
|
|
transform-origin: 100% 0%; |
|
|
|
100%{ |
|
|
|
transform:scale(1); |
|
|
|
transform-origin:0 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
