|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div v-else class="listDetail"> |
|
|
<div v-else class="listDetail"> |
|
|
<n-date-picker |
|
|
<n-date-picker |
|
|
|
|
|
v-model:value="times" |
|
|
:on-update:formatted-value="changeDate" |
|
|
:on-update:formatted-value="changeDate" |
|
|
:default-formatted-value="lastSevenDateList" |
|
|
|
|
|
|
|
|
format="yyyy-MM-dd" |
|
|
|
|
|
value-format="yyyy-MM-dd" |
|
|
type="daterange" |
|
|
type="daterange" |
|
|
|
|
|
|
|
|
:is-date-disabled="disablePreviousDate" |
|
|
:is-date-disabled="disablePreviousDate" |
|
|
style="margin-bottom: 15px" |
|
|
style="margin-bottom: 15px" |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
import { implement } from '@/api/task/index.js' |
|
|
import { implement } from '@/api/task/index.js' |
|
|
import { get as getProjection } from 'ol/proj.js' |
|
|
import { get as getProjection } from 'ol/proj.js' |
|
|
import { getTopLeft, getWidth } from 'ol/extent.js' |
|
|
import { getTopLeft, getWidth } from 'ol/extent.js' |
|
|
|
|
|
import { formatDate } from '@/utils/index.js' |
|
|
const projection = getProjection('EPSG:4326') |
|
|
const projection = getProjection('EPSG:4326') |
|
|
const projectionExtent = projection.getExtent() |
|
|
const projectionExtent = projection.getExtent() |
|
|
const size = getWidth(projectionExtent) / 256 |
|
|
const size = getWidth(projectionExtent) / 256 |
|
|
|
|
|
|
|
|
listShow: false, |
|
|
listShow: false, |
|
|
// 时间范围是一周前至今天 |
|
|
// 时间范围是一周前至今天 |
|
|
efg: '', |
|
|
efg: '', |
|
|
initDate: 0, |
|
|
|
|
|
clickListNum: 0, |
|
|
clickListNum: 0, |
|
|
listIcon: new URL( |
|
|
|
|
|
'../../../assets/images/listChecked.png', |
|
|
|
|
|
import.meta.url |
|
|
|
|
|
).href, |
|
|
|
|
|
|
|
|
|
|
|
airportIcon: new URL( |
|
|
|
|
|
'../../../assets/images/airportChecked.png', |
|
|
|
|
|
import.meta.url |
|
|
|
|
|
).href, |
|
|
|
|
|
listFontStyle: { |
|
|
|
|
|
color: '#666666' |
|
|
|
|
|
}, |
|
|
|
|
|
airportFontStyle: { |
|
|
|
|
|
color: '#1890FF' |
|
|
|
|
|
}, |
|
|
|
|
|
problemPopupShow: false, |
|
|
problemPopupShow: false, |
|
|
tabIndex: 1, |
|
|
tabIndex: 1, |
|
|
page: ref(1), |
|
|
page: ref(1), |
|
|
|
|
|
|
|
|
airportSelected: true, |
|
|
airportSelected: true, |
|
|
problemLayerList: [], |
|
|
problemLayerList: [], |
|
|
airportPopupShow: false, |
|
|
airportPopupShow: false, |
|
|
lastSevenDateList: [], |
|
|
|
|
|
|
|
|
times: null, |
|
|
paginationShow: false |
|
|
paginationShow: false |
|
|
}) |
|
|
}) |
|
|
watch( |
|
|
watch( |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
) |
|
|
) |
|
|
|
|
|
watch(() => data.listChecked, (val) => { |
|
|
|
|
|
if (val) { |
|
|
|
|
|
initSevenDate() |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
const getMapOptions = computed(() => { |
|
|
const getMapOptions = computed(() => { |
|
|
return { |
|
|
return { |
|
|
id: props.id |
|
|
id: props.id |
|
|
|
|
|
|
|
|
data.map.on('click', (evt) => { |
|
|
data.map.on('click', (evt) => { |
|
|
showAirInfo(evt) |
|
|
showAirInfo(evt) |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
// console.log(new Date().getFullYear()) |
|
|
|
|
|
} |
|
|
} |
|
|
// 获取近7天的日期 |
|
|
// 获取近7天的日期 |
|
|
const initSevenDate = () => { |
|
|
const initSevenDate = () => { |
|
|
data.lastSevenDateList = [getDay(-7), getDay(0)] |
|
|
|
|
|
|
|
|
const time = new Date().getTime() |
|
|
|
|
|
data.times = [time - 1000 * 60 * 60 * 24 * 7, time] |
|
|
} |
|
|
} |
|
|
/** |
|
|
/** |
|
|
* 展示机场信息 |
|
|
* 展示机场信息 |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
const changeDate = (value) => { |
|
|
const changeDate = (value) => { |
|
|
if (value) { |
|
|
if (value) { |
|
|
data.lastSevenDateList = value |
|
|
|
|
|
} |
|
|
|
|
|
if (data.initDate == 0) { |
|
|
|
|
|
// 默认加载近7天的问题图层 |
|
|
|
|
|
// 获取近7天的日期 |
|
|
|
|
|
getQuestionInfo(getDay(-7), getDay(0)) |
|
|
|
|
|
} else { |
|
|
|
|
|
getQuestionInfo(value[0], value[1]) |
|
|
getQuestionInfo(value[0], value[1]) |
|
|
|
|
|
} else { |
|
|
|
|
|
getQuestionInfo(getDay(-7), getDay(0)) |
|
|
} |
|
|
} |
|
|
data.initDate += 1 |
|
|
|
|
|
} |
|
|
} |
|
|
// 获取问题图层数据 |
|
|
// 获取问题图层数据 |
|
|
const getQuestionInfo = (startTime, endTime) => { |
|
|
const getQuestionInfo = (startTime, endTime) => { |
|
|
|
|
|
|
|
|
const doHandleMonth = (month) => { |
|
|
const doHandleMonth = (month) => { |
|
|
var m = month |
|
|
var m = month |
|
|
|
|
|
|
|
|
if (month.toString().length == 1) { |
|
|
|
|
|
|
|
|
if (month.toString().length === 1) { |
|
|
m = '0' + month |
|
|
m = '0' + month |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
geometry: new Point(fromLonLat([problem.lng, problem.lat])) |
|
|
geometry: new Point(fromLonLat([problem.lng, problem.lat])) |
|
|
}) |
|
|
}) |
|
|
let icon |
|
|
let icon |
|
|
|
|
|
|
|
|
switch (iitem.type) { |
|
|
switch (iitem.type) { |
|
|
case '002000': |
|
|
case '002000': |
|
|
icon = problemSpot_icon |
|
|
icon = problemSpot_icon |
|
|
|
|
|
|
|
|
data.taskList = res.data.records |
|
|
data.taskList = res.data.records |
|
|
|
|
|
|
|
|
data.pageCount = res.data.pages |
|
|
data.pageCount = res.data.pages |
|
|
if (data.pageCount == 1) { |
|
|
|
|
|
|
|
|
if (data.pageCount === 1) { |
|
|
data.paginationShow = false |
|
|
data.paginationShow = false |
|
|
} else { |
|
|
} else { |
|
|
data.paginationShow = true |
|
|
data.paginationShow = true |
|
|
|
|
|
|
|
|
*/ |
|
|
*/ |
|
|
const showList = () => { |
|
|
const showList = () => { |
|
|
// 判断是不是第一次点击列表按钮 |
|
|
// 判断是不是第一次点击列表按钮 |
|
|
if (data.clickListNum == 0) { |
|
|
|
|
|
// 第一次点击列表按钮会显示问题图层 |
|
|
|
|
|
|
|
|
// if (data.clickListNum === 0) { |
|
|
|
|
|
// // 第一次点击列表按钮会显示问题图层 |
|
|
|
|
|
// changeDate() |
|
|
|
|
|
// data.clickListNum += 1 |
|
|
|
|
|
// } |
|
|
|
|
|
if (data.listChecked) { |
|
|
|
|
|
if (data.problemLayerList.length > 0) { |
|
|
|
|
|
data.problemLayerList.forEach(layer => { |
|
|
|
|
|
if (layer !== null) { |
|
|
|
|
|
data.map.removeLayer(layer) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
data.problemLayerList.length = 0 |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
changeDate() |
|
|
changeDate() |
|
|
} |
|
|
} |
|
|
data.clickListNum += 1 |
|
|
|
|
|
data.listChecked = !data.listChecked |
|
|
data.listChecked = !data.listChecked |
|
|
} |
|
|
} |
|
|
/** |
|
|
/** |