Browse Source

444

tags/v1.1.0^2
unknown 1 year ago
parent
commit
94f80a4984
2 changed files with 181 additions and 169 deletions
  1. +180
    -165
      src/views/dashboard/components/OneMap.vue
  2. +1
    -4
      src/views/dashboard/components/ProblemInfo.vue

+ 180
- 165
src/views/dashboard/components/OneMap.vue View File

@@ -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 {

+ 1
- 4
src/views/dashboard/components/ProblemInfo.vue View File

@@ -66,10 +66,7 @@ export default {
})

watch(() => props.detail, (value) => {
if (value) {
// console.log(value)
// console.log(props.detail)

if (JSON.stringify(value) !== '{}') {
const fileImageList = value.fileMarkerUrl.split(',')
data.fileImageList = []
fileImageList.map((item) => {

Loading…
Cancel
Save