Skip to content

E
east-nanjing-new
Commit 743a138d authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

暂存

parent 4cb02bc5
Show whitespace changes
Inline Side-by-side
Showing with 169 additions and 67 deletions
src/App.vue
View file @ 743a138d
......@@ -33,7 +33,7 @@ export default defineComponent({
src url(./assets/font/zcool.ttf)
html, body
background rgba(0,0,0,0.5)
background #001220
font-family DIN, Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
......
src/assets/images/weihailu.png
View replaced file @ 4cb02bc5 View file @ 743a138d
src/assets/images/weihailu.png

664 KB | W: | H:

src/assets/images/weihailu.png

258 KB | W: | H:

src/assets/images/weihailu.png
src/assets/images/weihailu.png
src/assets/images/weihailu.png
src/assets/images/weihailu.png
  • 2-up
  • Swipe
  • Onion skin
src/components/MyComponent/MyMap/my-map.vue
View file @ 743a138d
<template>
<div id="MapContainer" />
<div id="MapContainer" :style="`width:${width}`" />
</template>
<script lang="ts">
......@@ -25,6 +25,10 @@ export default defineComponent({
type: Object as PropType<{ [key: string]: unknown }>,
default: null,
},
width: {
type: String as PropType<string>,
default: '67vw',
},
},
emits: ['complete', 'event'],
setup(props, ctx) {
......@@ -39,21 +43,24 @@ export default defineComponent({
viewMode: '3D',
center: [1019.614669, 54.167243],
// center: [-135.98002789627407, -722.1597065437004],
zooms: [5, 10],
zoom: 7,
zooms: [8, 12],
zoom: 8,
pitch: 45,
mapStyle: 'smap://styles/dark',
showBuildingBlock: true,
...config,
...props.config,
}).on(SMap.MapEvent.maploaded, () => {
map.enableMouseEvent(false)
setMouseEvent(false)
// setBuildingBlock()
ctx.emit('complete', map)
addListener()
hideCommunity()
})
}
function setMouseEvent(val: boolean) {
map.enableMouseEvent(val)
}
function layer(name: string) {
return map.getLayer(name)
}
......@@ -109,13 +116,16 @@ export default defineComponent({
console.error('传入的坐标点不能为空')
return
}
console.log('focus', x, y)
curMapType.value === '3D'
? map.setZoomAndCenter(zoom, [+x, +y, 0])
: map.setZoomAndCenter(zoom, [+x, +y])
}
function zoom(type: string) {
if (type === 'in') map.zoomIn()
else map.zoomOut()
}
// 添加边界
function addBoundary({
name = '',
......@@ -247,6 +257,8 @@ export default defineComponent({
return {
initMap,
focus,
zoom,
setMouseEvent,
layer,
setBuildingBlock,
hideCommunity,
......@@ -266,7 +278,6 @@ export default defineComponent({
<style lang="stylus" scoped>
#MapContainer
position fixed
width 100%
height 100vh
top 0
left 0
......
src/store/index.ts
View file @ 743a138d
......@@ -65,6 +65,7 @@ export interface GlobalStateProps {
curView: ViewType
curMapType: string
showCommunityPoints: boolean
mapDragable: boolean
readonly zhenxing: any
readonly weihai: any
readonly workArea1: any
......
src/store/mutations.ts
View file @ 743a138d
......@@ -26,6 +26,9 @@ export default {
SET_SHOW_COMMUNITY_POINTS(state: GlobalStateProps, val: boolean): void {
state.showCommunityPoints = val
},
SET_MAP_DRAGABLE(state: GlobalStateProps, val: boolean): void {
state.mapDragable = val
},
SET_PROPERTY_SUMMARY(
state: GlobalStateProps,
val: { [key: string]: number }
......
src/store/state.ts
View file @ 743a138d
......@@ -5,6 +5,7 @@ export default {
curMapType: '2D',
curView: { name: '南京东路街道', type: 'street' },
showCommunityPoints: false,
mapDragable: false,
viewOptions: [
{ name: '南京东路街道', type: 'street' },
{ name: '第一工作站', type: 'work1', id: '01001' },
......@@ -60,7 +61,7 @@ export default {
y: -660.07,
},
id: '01001',
center: [361.095476, -559.449126],
center: [57.65912693980181, -545.9925561181099],
paths: [
[-448.329953822261, -293.460812442785],
[-431.7521211874291, -671.2658974800385],
......@@ -105,7 +106,7 @@ export default {
y: 678.9654976442117,
},
id: '01002',
center: [1291.532466, 175.263969],
center: [494.2089963530598, 170.15832727829968],
paths: [
[62.564369398678764, 740.5887328698475],
[137.63177213765096, 581.9293660719472],
......@@ -140,7 +141,7 @@ export default {
x: -57.84609277641425,
y: 261.561716873108,
},
center: [609.931363, 342.166777],
center: [59.44810057514178, 386.009149840996],
id: '01003',
paths: [
[-827.6197677404292, 863.6615701613555],
......
src/view/community.vue
View file @ 743a138d
......@@ -12,8 +12,7 @@
<m-map
ref="map"
:config="{
center: [-75.5563452697323, -718.3061904627932],
zoom: 8,
zoom: 10,
}"
@complete="handleComplete"
@event="handleMapClick"
......@@ -37,19 +36,55 @@
<SiteSelector />
<div class="operates">
<a-tooltip placement="left">
<img src="@/assets/images/map-btn5.png" @click="rotateAngle" />
<img
draggable="false"
src="@/assets/images/map-btn5.png"
@click="rotateAngle"
/>
<template #title>旋转90度</template>
</a-tooltip>
<a-tooltip placement="left">
<img src="@/assets/images/map-btn4.png" @click="showMonitor = true" />
<img
draggable="false"
src="@/assets/images/map-btn4.png"
@click="showMonitor = true"
/>
<template #title>电瓶车入梯报警</template>
</a-tooltip>
<a-tooltip placement="left">
<img src="@/assets/images/map-btn6.png" @click="showCommunityPoints" />
<img
draggable="false"
src="@/assets/images/map-btn6.png"
@click="showCommunityPoints"
/>
<template #title>
{{ isCommunityPointsShowNow ? '隐藏' : '显示' }}小区点
</template>
</a-tooltip>
<a-tooltip placement="left">
<img
draggable="false"
src="@/assets/images/zoom-in.png"
@click="zoomMap('in')"
/>
<template #title> 放大地图 </template>
</a-tooltip>
<a-tooltip placement="left">
<img
draggable="false"
src="@/assets/images/zoom-out.png"
@click="zoomMap('out')"
/>
<template #title> 缩小地图 </template>
</a-tooltip>
<a-tooltip placement="left">
<img
draggable="false"
src="@/assets/images/map-btn8.png"
@click="setMapDrag"
/>
<template #title> 开启/关闭地图拖拽 </template>
</a-tooltip>
</div>
<m-modal
v-model="showMonitor"
......@@ -68,11 +103,27 @@
<p class="title">[ {{ drawerInfo.relationName }} ]</p>
<div v-if="drawerInfo.afterPhoto">
<p>整改后</p>
<img :src="drawerInfo.afterPhoto" />
<img
:src="
drawerInfo.afterPhoto.replace(
'http://zhongbang.omniview.pro/' ||
'https://zhongbang.omniview.pro/',
prefix
)
"
/>
</div>
<div v-if="drawerInfo.beforPhoto">
<p>整改前</p>
<img :src="drawerInfo.beforPhoto" />
<img
:src="
drawerInfo.beforPhoto.replace(
'http://zhongbang.omniview.pro/' ||
'https://zhongbang.omniview.pro/',
prefix
)
"
/>
</div>
</div>
</m-card>
......@@ -104,6 +155,7 @@ export default defineComponent({
name: 'Main',
components: { LeftSection, RightSection, SiteSelector, VideoComponent },
setup() {
const prefix = computed(() => api.SOURCE_URL)
const rotation = ref(0)
const rotateAngle = () => {
rotation.value += 90
......@@ -168,25 +220,19 @@ export default defineComponent({
if (!curId.value) return
const result: any = {
'527635870583459840': {
zoom: 9.7608,
zoom: 11,
layer: () =>
(map.value.layer('model_white_zhenxing2').visible = true),
'0': [-135.98002789627407, -722.1597065437004],
'90': [-261.131359, -858.028878],
'180': [-404.248674, -746.05425],
'270': [-276.2336, -653.842881],
center: [-275.8968464073082, -748.2824253933684],
},
'527635870583459841': {
zoom: 10,
zoom: 11,
layer: () => (map.value.layer('model_white_WEIHAI33').visible = true),
'0': [-38.73075358777865, -569.7527629458657],
'90': [-136.813679, -682.12363],
'180': [-275.05377, -587.065673],
'270': [-187.394221, -483.549497],
center: [-177.8293302195628, -588.2622422909122],
},
}
const cur = result[curId.value as string]
map.value.focus(...cur[rotation.value], cur.zoom)
map.value.focus(...cur.center, cur.zoom)
return cur
}
const showDrawer = ref(false)
......@@ -315,7 +361,16 @@ export default defineComponent({
message.success('短信发送成功！')
}
}
const zoomMap = (type: string) => {
map.value.zoom(type)
}
const dragAble = ref(false)
const setMapDrag = () => {
dragAble.value = !dragAble.value
map.value.setMouseEvent(dragAble.value)
}
return {
prefix,
rotation,
rotateAngle,
loading,
......@@ -333,6 +388,8 @@ export default defineComponent({
handleAlarm,
isCommunityPointsShowNow,
showCommunityPoints,
zoomMap,
setMapDrag,
}
},
})
......
src/view/community/community-photo.vue
View file @ 743a138d
......@@ -5,7 +5,10 @@
:key="item.name"
:style="`background:url(${
item.photo &&
item.photo.replace('http://zhongbang.omniview.pro/', prefix)
item.photo.replace(
'http://zhongbang.omniview.pro/' || 'https://zhongbang.omniview.pro/',
prefix
)
}) 100% / 100% 100% no-repeat`"
@click="handleClick(item.video)"
>
......@@ -58,26 +61,26 @@ export default defineComponent({
if (curId.value === '527635870583459840') {
// 振兴小区
return [
{
name: '重庆北路177弄64号',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AQCAEc3pAASC2UqtXWs052.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AVyAanZkApsdVDHEGc0527.mp4',
},
{
name: '重庆北路后门',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AXyAIUKZAAIFC2qNmKI384.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AaCAPxQuAJBKkDzXu6A359.mp4',
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9PlmAH8-oAEmHxWhriqw954.mov',
},
{
name: '大沽路大门',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AYmAT-A1AAMElShNriM149.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AbiAQSm8AFcZgGM-DsE721.mp4',
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9QE6AckoPAEM3swvgmFQ182.mov',
},
{
name: '重庆北路177弄64号',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AQCAEc3pAASC2UqtXWs052.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AVyAanZkApsdVDHEGc0527.mp4',
},
]
}
......@@ -87,21 +90,21 @@ export default defineComponent({
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5GdOAW6qQAAvNhxSqO-g179.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB8_neAFTSLAfLx1EXkWbg945.mp4',
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9OkmAFxVMAS7MAmRH2Xc004.mp4',
},
{
name: '62弄朝东',
photo:
'https://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AKeAStEUAYtR_B1xies646.mp4',
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9QIiAaz9fAS3gvWsrxYQ927.mp4',
},
{
name: '62弄朝南',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5KrOAVcluAAnbZjB7fNA165.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KrSAB6piAV39_CAFs0Y956.mp4',
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9P1mALYigATKoQQw6Y8k841.mp4',
},
]
})
......
src/view/community/left-section.vue
View file @ 743a138d
......@@ -232,14 +232,14 @@ export default defineComponent({
.info
display flex
height .8rem
height .9rem
margin .05rem 0
>div
flex 1
color #ccc
text-align justify
&:first-child
flex .56
flex 0.8
$center()
background url('@/assets/images/border3.png') 50% 50% / 100% 100% no-repeat
margin-right .1rem
......
src/view/components/map-btns.vue
View file @ 743a138d
......@@ -14,13 +14,10 @@
</div>
</template>
</a-tooltip>
<img
v-else
:key="btn.key"
:src="btn.icon"
draggable="false"
@click="handleClick(btn.key)"
/>
<a-tooltip v-else :key="btn.key" placement="right">
<img :src="btn.icon" draggable="false" @click="handleClick(btn.key)" />
<template #title>{{ btn.title }}</template>
</a-tooltip>
</template>
</div>
<m-modal v-model="searchModal" title="搜索" width="30%" offset="-70%">
......@@ -68,24 +65,30 @@ import btn4 from '@/assets/images/map-btn4.png'
import btn5 from '@/assets/images/map-btn5.png'
import btn6 from '@/assets/images/map-btn6.png'
import btn7 from '@/assets/images/map-btn7.png'
import btn8 from '@/assets/images/map-btn8.png'
import d2 from '@/assets/images/2d.png'
import d3 from '@/assets/images/3d.png'
import zoomIn from '@/assets/images/zoom-in.png'
import zoomOut from '@/assets/images/zoom-out.png'
import store from '@/store'
export default defineComponent({
name: 'MapBtns',
emits: ['full', 'change'],
emits: ['full', 'change', 'zoom'],
setup(_, ctx) {
const btns = computed(() => {
const mapType =
store.state.curMapType === '2D'
? { key: '3D', icon: d3 }
: { key: '2D', icon: d2 }
? { key: '3D', icon: d3, title: '开启3D地图' }
: { key: '2D', icon: d2, title: '开启2D地图' }
const list = [
// { key: 'search', icon: btn1 },
{ key: 'full', icon: btn2 },
{ key: 'points', icon: btn6 },
{ key: 'in', icon: zoomIn, title: '放大地图' },
{ key: 'out', icon: zoomOut, title: '缩小地图' },
{ key: 'full', icon: btn2, title: '全屏' },
{ key: 'points', icon: btn6, title: '显示/隐藏小区点' },
{ key: 'polyline', icon: btn7 },
{ key: 'dragable', icon: btn8, title: '开启/关闭拖拽功能' },
// { key: '', icon: btn4 },
// { key: '', icon: btn5 },
// { key: '', icon: btn6 },
......@@ -109,12 +112,18 @@ export default defineComponent({
case 'search':
searchModal.value = true
break
case 'in':
case 'out':
ctx.emit('zoom', key)
break
case 'points':
store.commit(
'SET_SHOW_COMMUNITY_POINTS',
!store.state.showCommunityPoints
)
break
case 'dragable':
store.commit('SET_MAP_DRAGABLE', !store.state.mapDragable)
default:
break
}
......@@ -294,7 +303,7 @@ $bg = rgba(6,34,67,.4)
transition left .3s ease
&.full
left .05rem
>img
img
display block
width .2rem
height @width
......
src/view/components/video-component.vue
View file @ 743a138d
......@@ -41,7 +41,10 @@ export default defineComponent({
() => props.videoSrc && props.videoSrc.indexOf('m3u8') >= 0
)
const isMP4 = computed(
() => props.videoSrc && props.videoSrc.indexOf('mp4') >= 0
() =>
props.videoSrc &&
(props.videoSrc.indexOf('mp4') >= 0 ||
props.videoSrc.indexOf('mov') >= 0)
)
const init = () => {
if (!videoRef.value) return
......
src/view/hooks/useSwitchMap.ts
View file @ 743a138d
......@@ -13,6 +13,12 @@ export default function useSwitchMap(map: any) {
},
{ immediate: true }
)
watch(
() => store.state.mapDragable,
(val) => {
map.value.setMouseEvent(val)
}
)
watch(
() => store.state.showCommunityPoints,
(val) => {
......@@ -38,20 +44,19 @@ export default function useSwitchMap(map: any) {
switch (type) {
case 'work1':
show && showPoints({ gridId: store.state.workArea1.id })
map.value.focus(...store.state.workArea1.center, 7.660867453405492)
map.value.focus(...store.state.workArea1.center, 8)
break
case 'work2':
show && showPoints({ gridId: store.state.workArea2.id })
map.value.focus(...store.state.workArea2.center, 7)
map.value.focus(...store.state.workArea2.center, 8)
break
case 'work3':
show && showPoints({ gridId: store.state.workArea3.id })
map.value.focus(...store.state.workArea3.center, 7)
map.value.focus(...store.state.workArea3.center, 8)
break
case 'street':
show && showPoints()
map.value.focus(990.973466, 10.295931, 7)
// map.value.focus(1019.614669, 54.167243, 6.5)
map.value.focus(207.9006154792994, 71.67111885454233, 8)
break
default:
break
......@@ -105,8 +110,12 @@ export default function useSwitchMap(map: any) {
}
)
}
const handleZoom = (type: string) => {
map.value.zoom(type)
}
return {
handleMapComplete,
selectArea,
handleZoom,
}
}
src/view/main.vue
View file @ 743a138d
......@@ -6,7 +6,7 @@
gap="0.05rem"
>
<m-title area="title">南东城运</m-title>
<m-map ref="map" @complete="handleMapComplete" />
<m-map ref="map" width="71vw" @complete="handleMapComplete" />
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<Command v-show="'street' === curViewType && !fullScreen" area="left" />
</m-animate>
......@@ -38,7 +38,11 @@
/>
</m-animate>
<ViewSelector />
<MapBtns @change="selectArea" @full="fullScreen = $event" />
<MapBtns
@change="selectArea"
@full="fullScreen = $event"
@zoom="handleZoom"
/>
<m-drawer v-model="showDrawer">
<CaseDrawer />
<!-- <PopulationDrawer /> -->
......@@ -100,7 +104,7 @@ export default defineComponent({
await nextTick()
map.value.initMap({ viewMode: '2D' })
})
const { handleMapComplete, selectArea } = useSwitchMap(map)
const { handleMapComplete, selectArea, handleZoom } = useSwitchMap(map)
return {
map,
curViewType,
......@@ -110,6 +114,7 @@ export default defineComponent({
showDrawer,
handleMapComplete,
selectArea,
handleZoom,
}
},
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment