Skip to content

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

暂存

parent d1e41f0d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 253 additions and 121 deletions
dist/assets/circle.a297956a.js 0 → 100644
View file @ 32659ad5
import{d as e,p as a,g as r,a as t,o as l,b as s,F as o,l as n,f as c,e as d,t as u,h as i,n as p,j as f,c as y,m as v}from"./vendor.b3cff52c.js";var g=e({name:"Brief",props:{list:{type:Array,required:!0},color:{type:String,default:null},size:{type:String,default:"0.22rem"}}});const h=i("data-v-9f6ed916");a("data-v-9f6ed916");const m={class:"brief-container"},w={key:1},k={class:"count-group"},b=p(" / ");r();const A=h(((e,a,r,i,p,f)=>{const y=t("m-count");return l(),s("div",m,[(l(!0),s(o,null,n(e.list,(a=>(l(),s("div",{key:a.name},[a.icon?(l(),s("img",{key:0,src:a.icon,style:`width:${e.size};height:${e.size}`},null,12,["src"])):c("",!0),Array.isArray(a.value)?(l(),s("div",w,[d("div",k,[d(y,{class:"count yellow",value:a.value[0]},null,8,["value"]),b,d(y,{class:"count",value:a.value[1]},null,8,["value"])]),d("p",null,u(a.name),1)])):(l(),s("div",{key:2,class:{center:!a.icon}},[d(y,{class:"count yellow",style:{color:e.color},value:a.value},null,8,["style","value"]),d("p",null,u(a.name),1)],2))])))),128))])}));g.render=A,g.__scopeId="data-v-9f6ed916";var F=e({name:"Circle",props:{type:{type:String,default:"circle"},color:{type:[String,Array],default:["#0094FF","#1DF9FF"]},value:{type:Number,default:0},name:{type:String,default:""},showInfo:{type:Boolean,default:!0},rate:{type:Number,default:1.8},strokeWidth:{type:Number,default:6},gapDegree:{type:Number,default:0}},setup(e){const a=f(null),r=y((()=>Array.isArray(e.color)?{"0%":e.color[0],"100%":e.color[1]}:e.color)),t=y((()=>a.value?a.value.clientWidth/(e.rate||1.8):0));return{circleWrapperRef:a,strokeColor:r,width:t}}});const S=i("data-v-fb0eadd2");a("data-v-fb0eadd2");const W={ref:"circleWrapperRef",class:"circle-wrapper"};r();const _=S(((e,a,r,o,n,c)=>{const i=t("a-progress");return l(),s("div",W,[d(i,{width:e.width,"stroke-color":e.strokeColor,percent:e.value,type:e.type,"show-info":e.showInfo,"stroke-width":e.strokeWidth,"gap-degree":e.gapDegree},null,8,["width","stroke-color","percent","type","show-info","stroke-width","gap-degree"]),v(e.$slots,"default",{},(()=>[d("p",null,u(e.name),1)]))],512)}));F.render=_,F.__scopeId="data-v-fb0eadd2";export{g as _,F as a};
dist/assets/circle.c81b9ce0.css 0 → 100644
View file @ 32659ad5
.brief-container[data-v-9f6ed916]{display:flex;align-items:center}.brief-container .count[data-v-9f6ed916]{font-size:.12rem}.brief-container .count.yellow[data-v-9f6ed916]{font-size:.14rem;color:#ffd400}.brief-container>div[data-v-9f6ed916]{display:flex;align-items:center;flex:1;margin-left:.05rem}.brief-container>div>img[data-v-9f6ed916]{margin-right:.05rem}.brief-container>div>div[data-v-9f6ed916]{font-weight:700}.brief-container>div>div p[data-v-9f6ed916]{color:#ccc}.brief-container>div>div.center[data-v-9f6ed916]{text-align:center}.circle-wrapper[data-v-fb0eadd2]{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.circle-wrapper>p[data-v-fb0eadd2]{margin-top:.1rem;font-size:.12rem;font-weight:700}
\ No newline at end of file
dist/assets/community.09758b24.css 0 → 100644
View file @ 32659ad5
This diff is collapsed.
dist/assets/community.c6b1cf94.js 0 → 100644
View file @ 32659ad5
This diff is collapsed.
dist/assets/index.1864dedb.js 0 → 100644
View file @ 32659ad5
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/index.66409abe.js deleted 100644 → 0
View file @ d1e41f0d
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/index.097e7037.css → dist/assets/index.bbfc0b74.css
View file @ 32659ad5
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/main.596b99bb.js 0 → 100644
View file @ 32659ad5
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/main.abc6a7b0.css 0 → 100644
View file @ 32659ad5
This diff is collapsed.
dist/assets/vendor.b3cff52c.js 0 → 100644
View file @ 32659ad5
This diff is collapsed.
dist/assets/vendor.fb6b006a.js deleted 100644 → 0
View file @ d1e41f0d
This diff is collapsed.
dist/index.html
View file @ 32659ad5
......@@ -3,22 +3,19 @@
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南京东路街道</title>
<script src="./SMap.min.js"></script>
<script src="./Plugins.min.js"></script>
<script src="./hls.js"></script>
<script type="module" crossorigin src="./assets/index.66409abe.js"></script>
<link rel="modulepreload" href="./assets/vendor.fb6b006a.js">
<link rel="stylesheet" href="./assets/index.097e7037.css">
<script type="module" crossorigin src="./assets/index.1864dedb.js"></script>
<link rel="modulepreload" href="./assets/vendor.b3cff52c.js">
<link rel="stylesheet" href="./assets/index.bbfc0b74.css">
</head>
<body>
<div id="app"></div>
<!-- <script src="/SMap.min.js"></script>
<script src="/Plugins.min.js"></script>
<script src="/hls.js"></script> -->
</body>
......
index.html
View file @ 32659ad5
......@@ -6,13 +6,13 @@
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南京东路街道</title>
<script src="/SMap.min.js"></script>
<script src="/Plugins.min.js"></script>
<script src="/hls.js"></script>
</head>
<body>
<div id="app"></div>
<script src="/SMap.min.js"></script>
<script src="/Plugins.min.js"></script>
<script src="/hls.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
......
src/App.vue
View file @ 32659ad5
<template>
<router-view :key="$route.fullPath" />
<m-loader v-if="showLoading" />
<m-loader v-show="showLoading" />
</template>
<script lang="ts">
......
src/components/MyComponent/MyCount/my-count.vue
View file @ 32659ad5
......@@ -53,6 +53,9 @@ export default defineComponent({
duration: +props.speed,
}
onMounted(() => {
if (isNaN(endValue.value)) {
endValue.value = 0
}
const countUp = new CountUp(
countRef.value as HTMLElement,
endValue.value,
......
src/components/MyComponent/MyLoader/my-loader.vue
View file @ 32659ad5
<template>
<teleport to="#MyLoader">
<!-- <teleport to="#MyLoader"> -->
<div class="my-loader-mask" :style="`background:${background}`">
<div class="my-loader">
<div class="outer" />
......@@ -8,12 +8,12 @@
</div>
<slot />
</div>
</teleport>
<!-- </teleport> -->
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import useDOMCreate from '@/hooks/useDOMCreate'
// import useDOMCreate from '@/hooks/useDOMCreate'
export default defineComponent({
name: 'MyLoader',
displayName: 'm-loader',
......@@ -23,9 +23,9 @@ export default defineComponent({
default: 'rgba(0,0,0,0.3)',
},
},
setup() {
useDOMCreate('MyLoader')
},
// setup() {
// useDOMCreate('MyLoader')
// },
})
</script>
......
src/components/MyComponent/MyMap/my-map.vue
View file @ 32659ad5
......@@ -47,7 +47,7 @@ export default defineComponent({
...config,
...props.config,
}).on(SMap.MapEvent.maploaded, () => {
// map.enableMouseEvent(false)
map.enableMouseEvent(false)
// setBuildingBlock()
ctx.emit('complete', map)
addListener()
......@@ -108,6 +108,8 @@ 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])
......
src/components/MyComponent/MyWave/my-wave.vue
View file @ 32659ad5
......@@ -8,8 +8,16 @@
boxShadow: `0 0 .08rem 0 ${color} inset`,
}"
>
<div class="before" :style="{ top: `${percent}%`, background: color }" />
<div class="after" :style="{ top: `${percent}%`, background: color }" />
<div
v-if="value"
class="before"
:style="{ top: `${percent}%`, background: color }"
/>
<div
v-if="value"
class="after"
:style="{ top: `${percent}%`, background: color }"
/>
<slot>
<p><m-count :value="value" /> %</p>
</slot>
......
src/router/routes.ts
View file @ 32659ad5
import Main from '@/view/main.vue'
import CommunityView from '@/view/community.vue'
const Main = () => import('@/view/main.vue')
const CommunityView = () => import('@/view/community.vue')
export default [
{ name: 'main', path: '/', component: Main },
......
src/store/state.ts
View file @ 32659ad5
......@@ -15,8 +15,42 @@ export default {
{ name: '威海路62弄', type: '527635870583459841' },
],
curTheme: 'manage',
zhenxing: { paths: [] },
weihai: { paths: [] },
zhenxing: {
paths: [
[-394.9643478722986, -682.7008812875049],
[-392.71331797961386, -676.0304740664822],
[-388.88512021905166, -669.9078381232936],
[-381.1708469780052, -664.8890129814765],
[-326.4453957302277, -658.5038602372127],
[-304.60275764390985, -657.5571461042011],
[-225.16351998939285, -654.7707473022369],
[-219.35507738292432, -655.8352839365185],
[-214.4437394352484, -657.6770356668969],
[-209.1231233252662, -662.528428833225],
[-206.0307994322851, -666.8341177831445],
[-153.432354391645, -823.1866440298637],
[-153.70313943842342, -829.8508500666092],
[-155.41259923755138, -834.0573200680908],
[-159.34001594655143, -838.5593798534603],
[-164.15006788436364, -840.605770664992],
[-322.5944602939818, -861.0696787803082],
[-330.93505314704254, -859.6227357822555],
[-337.9630619947269, -851.2986794206012],
[-368.02640337140963, -789.8986868289493],
[-382.76455133728894, -745.7689924497688],
[-394.9147383980797, -686.646901549337],
[-394.9643478722986, -682.7008812875049],
],
},
weihai: {
paths: [
[-195.08054152916526, -563.6474449384453],
[-162.7258625619948, -623.3421118538208],
[-133.68985071392945, -603.4838527362609],
[-168.5456740063052, -546.0991269642052],
[-195.08054152916526, -563.6474449384453],
],
},
workArea1: {
workStation: {
name: '第一',
......@@ -25,7 +59,7 @@ export default {
y: -660.07,
},
id: '01001',
center: [893.507386, -466.674359],
center: [361.095476, -559.449126],
paths: [
[-448.329953822261, -293.460812442785],
[-431.7521211874291, -671.2658974800385],
......
src/view/community.vue
View file @ 32659ad5
......@@ -8,7 +8,7 @@
rows="0.4rem auto"
gap="0.05rem"
>
<m-title area="title" @click="test"> 南东城运{{ title }} </m-title>
<m-title area="title"> 南东城运{{ title }} </m-title>
<m-map
ref="map"
:config="{
......@@ -35,10 +35,15 @@
</div>
</div>
<SiteSelector />
<img
class="rotate-btn"
src="@/assets/images/map-btn5.png"
@click="rotateAngle"
/>
<m-drawer v-model="showDrawer" width="32vw">
<div class="community-device">
<p>类型：{{ drawerInfo.key }}</p>
<p>地点：{{ drawerInfo.relationName }}</p>
<p>名称：{{ drawerInfo.relationName }}</p>
<div v-if="drawerInfo.beforPhoto">
<p>改造前</p>
<img :src="drawerInfo.beforPhoto" />
......@@ -73,10 +78,17 @@ export default defineComponent({
name: 'Main',
components: { LeftSection, RightSection, SiteSelector },
setup() {
const test = () => {
console.log('go')
map.value.cameraTo({})
map.value.cameraTo({})
const rotation = ref(0)
const rotateAngle = () => {
rotation.value += 90
if (rotation.value >= 360) {
rotation.value = 0
}
map.value.rotate(rotation.value)
setTimeout(() => {
focusCenterAndAddLayer()
}, 1000)
// map.value.cameraTo({ heading: rotation.value })
}
const loading = ref(true)
const title = computed(
......@@ -101,12 +113,13 @@ export default defineComponent({
})
const points = ref<any>(null)
const initMapPoints = (key: string, data: any[]) => {
const getIcon = (type: string) => {
const getIcon = (classification: string, type: string) => {
if (classification === '摄像头') return point
if (classification === '为老设施') return point7
if (type.indexOf('车棚') >= 0) return point2
if (type.indexOf('充电') >= 0) return point5
if (type.indexOf('电梯加装') >= 0) return point3
if (type.indexOf('垃圾箱') >= 0) return point6
if (type.indexOf('助') >= 0) return point7
return point4 // 默认为美丽家园-微更新
}
const pointData = data.map((item: any) => {
......@@ -115,7 +128,7 @@ export default defineComponent({
name: item.id,
x: position && +position[0],
y: position && +position[1],
icon: getIcon(item.relationName),
icon: getIcon(item.classification, item.relationName),
})
})
console.log(pointData)
......@@ -125,6 +138,31 @@ export default defineComponent({
data: pointData,
})
}
function focusCenterAndAddLayer() {
if (!curId.value) return
const result: any = {
'527635870583459840': {
zoom: 9.7608,
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],
},
'527635870583459841': {
zoom: 10,
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],
},
}
const cur = result[curId.value as string]
map.value.focus(...cur[rotation.value], cur.zoom)
return cur
}
const showDrawer = ref(false)
const drawerInfo = ref<any>({})
const handleMapClick = (e: any) => {
......@@ -132,36 +170,42 @@ export default defineComponent({
drawerInfo.value = e
showDrawer.value = true
}
async function showCommunityPoints() {
const { content } = (
await ajax.get({
url: api.GET_COMMUNITY_IDS,
params: { bigscreenCommunityId: curId.value },
})
).data
map.value.setFilter(content)
map.value.showCommunity()
}
const handleComplete = () => {
let center = [-135.98002789627407, -722.1597065437004]
// let center = [-75.5563452697323, -718.3061904627932]
let zoom = 9.7608
map.value.layer('model_white_zw').visible = false
if (curId.value === '527635870583459841') {
map.value.layer('model_white_WEIHAI33').visible = true
center = [-38.73075358777865, -569.7527629458657]
zoom = 10
} else {
map.value.layer('model_white_zhenxing2').visible = true
}
showCommunityPoints()
focusCenterAndAddLayer().layer()
loading.value = false
map.value.focus(...center, zoom)
// let i = -90
// map.value.rotate(i)
// setTimeout(() => {
// loading.value = false
// setTimeout(() => {
// map.value.cameraTo({ heading: 180 })
// setTimeout(() => {
// map.value.cameraTo({})
// map.value.cameraTo({ heading: 360 })
// setTimeout(() => {
// map.value.rotate(180)
// map.value.focus(...center, zoom)
// })
// }, 1000)
// }, 5000)
// })
// }, 2000)
// }, 7000)
// let i = -90
// map.value.rotate(i)
// setTimeout(() => {
// loading.value = false
// setTimeout(() => {
// const timer = setInterval(() => {
// i += 15
// i += 10
// if (i > 0) {
// setTimeout(() => {
// map.value.focus(...center, zoom)
......@@ -169,21 +213,21 @@ export default defineComponent({
// clearInterval(timer)
// }
// map.value.rotate(i)
// }, 0)
// }, 100)
// }, 1000)
// }, 7000)
// }, 5000)
}
const btns = ref([
{ name: '美丽家园', key: '微更新' },
{ name: '周边设施', key: '小区设施' },
{ name: '监控设施', key: '监控' },
{ name: '监控设施', key: '摄像头' },
])
if (curId.value === '527635870583459841') {
btns.value = [
{ name: '美丽家园', key: '微更新' },
{ name: '加装电梯', key: '电梯加装' },
{ name: '周边设施', key: '小区设施' },
{ name: '监控设施', key: '监控' },
{ name: '监控设施', key: '摄像头' },
]
}
......@@ -193,7 +237,7 @@ export default defineComponent({
map.value.remove(points.value)
if (curBtn.value === key) {
curBtn.value = null
map.value.showCommunity()
showCommunityPoints()
return
}
const pointList = (
......@@ -224,7 +268,8 @@ export default defineComponent({
curBtn.value = key
}
return {
test,
rotation,
rotateAngle,
loading,
title,
map,
......@@ -242,6 +287,18 @@ export default defineComponent({
<style lang="stylus" scoped>
@import '../components/MyComponent/main.styl'
.rotate-btn
width .2rem
height @width
position fixed
right calc(49vw + .1rem)
top .45rem
z-index 999
cursor pointer
transition transform .3s ease
&:hover
transform-origin right top
transform scale(1.2)
.community-device
$full()
overflow hidden
......
src/view/community/left-section.vue
View file @ 32659ad5
......@@ -146,9 +146,9 @@ export default defineComponent({
)
const getColor = (type: string): string => {
switch (type) {
case '门岗':
case '摄像头':
return '#826AFA'
case '为老':
case '为老设施':
return '#FF6161'
case '小区设施':
return '#8ED617'
......@@ -159,7 +159,7 @@ export default defineComponent({
const getIcon = (type: string): string => {
if (!type) return type2
if (type.indexOf('集合') >= 0) return type3
if (type.indexOf('助餐') >= 0) return type6
if (type.indexOf('餐') >= 0) return type6
if (type.indexOf('助浴') >= 0) return type7
if (type.indexOf('充电') >= 0) return type1
if (type.indexOf('车棚') >= 0) return type5
......@@ -291,12 +291,13 @@ export default defineComponent({
.address
display flex
flex-wrap wrap
flex 1
height 3rem
overflow-y auto
>div
display flex
flex-direction column
justify-content space-around
width 48.2%
width 48%
padding .03rem .05rem
box-sizing border-box
position relative
......
src/view/components/map-btns.vue
View file @ 32659ad5
......@@ -6,7 +6,11 @@
<img :key="btn.key" :src="btn.icon" draggable="false" />
<template v-if="options.length > 0" #title>
<div class="btns-tip">
<a-checkbox-group :options="options" @change="handleChange" />
<a-checkbox-group
v-model:value="checkboxValues"
:options="options"
@change="handleChange"
/>
</div>
</template>
</a-tooltip>
......@@ -56,7 +60,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { computed, defineComponent, ref, watch } from 'vue'
import btn1 from '@/assets/images/map-btn1.png'
import btn2 from '@/assets/images/map-btn2.png'
import btn3 from '@/assets/images/map-btn3.png'
......@@ -124,9 +128,15 @@ export default defineComponent({
}
return result[store.state.curView.type] || []
})
const checkboxValues = ref([])
const handleChange = (e: any) => {
ctx.emit('change', e)
checkboxValues.value = e
}
watch(
[() => store.state.curView.type, () => store.state.curMapType],
() => (checkboxValues.value = [])
)
return {
btns,
fullScreen,
......@@ -136,6 +146,7 @@ export default defineComponent({
searchKey,
caseList,
options,
checkboxValues,
handleChange,
}
},
......
src/view/hooks/useSwitchMap.ts
View file @ 32659ad5
......@@ -17,6 +17,9 @@ export default function useSwitchMap(map: any) {
() => curViewType.value,
(type) => {
setPoints(type)
if (areaLines.value && areaLines.value.length > 0) {
map.value.remove(areaLines.value)
}
if (curMapType.value === '2D') return
store.commit('SET_MAP_TYPE', '2D')
}
......@@ -27,7 +30,7 @@ export default function useSwitchMap(map: any) {
switch (type) {
case 'work1':
showPoints({ gridId: store.state.workArea1.id })
map.value.focus(...store.state.workArea1.center, 7)
map.value.focus(...store.state.workArea1.center, 7.660867453405492)
break
case 'work2':
showPoints({ gridId: store.state.workArea2.id })
......@@ -39,7 +42,8 @@ export default function useSwitchMap(map: any) {
break
case 'street':
showPoints()
map.value.focus(1019.614669, 54.167243, 6.5)
map.value.focus(990.973466, 10.295931, 7)
// map.value.focus(1019.614669, 54.167243, 6.5)
break
default:
break
......
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