Skip to content

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

添加试验测绘院3D地图

parent b39a0e77
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 197 additions and 251 deletions
index.html
View file @ b4ffa26d
......@@ -10,6 +10,8 @@
<body>
<div id="app"></div>
<script src="/SMap.min.js"></script>
<script src="/Plugins.min.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
......
public/Plugins.min.js 0 → 100644
View file @ b4ffa26d
This diff is collapsed.
public/SMap.min.js 0 → 100644
View file @ b4ffa26d
This source diff could not be displayed because it is too large. You can view the blob instead.
src/App.vue
View file @ b4ffa26d
......@@ -51,7 +51,8 @@ html, body
height 100%
overflow hidden
font-size .1rem
background url('@/assets/images/background.jpg') center/cover no-repeat
// background url('@/assets/images/background.jpg') center/cover no-repeat
background #000
color #fff
/* 设置滚动条的样式 */
......
src/ajax/api.ts
View file @ b4ffa26d
......@@ -9,10 +9,10 @@ switch (process.env.NODE_ENV) {
export default {
BASE_URL,
GET_BUILDING: '/service-basicdatasync-ddd/building',
GET_STATION: '/service-special-nandong/workstations',
GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous',
GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees',
GET_COMPANY: '/service-basicdatasync-ddd/propCompanies',
GET_CASE: '/service-special-nandong/compairs',
GET_BUILDING: '/service-basicdatasync-ddd/building', // 门牌幢列表
GET_STATION: '/service-special-nandong/workstations', // 工作站列表
GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous', // 业委会列表
GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表
}
src/ajax/axios.ts
View file @ b4ffa26d
......@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
(config) => {
// 添加token
config.headers.Authorization =
'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE2NzQ5MjI3LCJqdGkiOiJjYjY4YjhmMC1mODM0LTRjMzEtOGEzYS05ZWQ2OTE4OWFjYjYiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTY3NDIwMjc5NzJ9.B2o40R6Tb1jxxcBF9e-MEPNCERDblYtaOoqmHiVgWXJTaZJw_I2i4xFwdmC9wDm1aqWGNHjUPUO9knF3wv_U7g1IwAiVIp_kbk158qjrOBG7C72x5Tl-0DHiCd78nQvDsQiB2rldo9lGh0JF5oD9LgL1iEUsQshJjQlyYMePIS_bYlClQP3uYyNKaFEEZcQH5EqciCIcTLa5y8WtiSzDCnc7fDpNmfDxmb54M39r-2QsxOrtTJ_9QkerzupPCu7XX_GCWqNvtbAV3FuaLYk3sw6jxj07aIe1QOLKAiF233v8T8mPstrp6BNzIBBVDeoHu__XcpyqDJxRNuQXRp-n8w'
'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE3Njg3MTY2LCJqdGkiOiIwMTJmNGRlOC1jZTlkLTQ0NzYtYmQzMC0yMGJlZGQyMjE1Y2QiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTc2Nzk5NjY2Mjd9.eZ1fXintx7bEW1xeglW_10yGje4Bx5qpsCeQPo_0VBm3Di2kb01_0nYX98rtJNloIZVv8mSyZC8dG-xqBbF4i8PtrkvphLvEDLs3ztQu1JckLEswumDx7yVjmOaLo2FegvWskltbYpH32nkG4jU9WgAJSV0MLNe2x9q76rlTP8EyrnOYOEwK2KHW6lszEmZf4YeXHkpaF1XzqwSJCRkplKn6Yv4bmdCGiOxCTX8gGxLaatkv4_uH8g6ji4sUjeS_VIXL1UvuOUrPOLGoVvPv0hxsSe3EPP8MJw7NVYWjT8l_DtXWGHF9kuIGFpU4ILrSEsAN1obqxAQYhoynrk8F3Q'
return config
},
(error) => {
......@@ -32,7 +32,7 @@ Axios.interceptors.response.use(
)
interface ParamsProp {
[propName: string]: any
[propName: string]: unknown
}
interface RequestOptions {
......
src/components/MyComponent/MyForm/my-form.vue
View file @ b4ffa26d
......@@ -137,7 +137,7 @@ export default defineComponent({
.row
display flex
background $table-content-bg
padding .04rem 0
padding .03rem 0
&:nth-child(odd)
background transparent
.col
......
src/components/MyComponent/MyMap/my-map.vue
View file @ b4ffa26d
......@@ -4,118 +4,103 @@
<script lang="ts">
import { computed, defineComponent, nextTick, onMounted, ref } from 'vue'
declare const AMap: any
interface MarkersProp {
x: number | string
y: number | string
}
declare const SMap: any
declare const Plugins: any
export default defineComponent({
name: 'MyMap',
displayName: 'm-map',
emits: ['complete', 'marker-click'],
setup(props, ctx) {
const map = ref<any>(null)
const markers = ref<any[]>([])
const sizeRate = computed(() => Number((screen.height / 800).toFixed(1)))
const injectMapJs = () => {
if (!document.querySelector('#_MapJs')) {
const mapJs = document.createElement('script')
mapJs.src =
'http://webapi.amap.com/maps?v=1.4.15&key=ee2b5d5c0c44c768f1d2593eb4a7dfa6&plugin=Map3D,AMap.DistrictSearch'
mapJs.setAttribute('id', '_MapJs')
mapJs.onload = async () => {
await nextTick()
initMap()
}
document.head.appendChild(mapJs)
}
}
const initWallLayer = (
name = '黄浦区',
color = 'rgba(0,242,255,0.3)',
height = 1500
) => {
const object3DLayer = new AMap.Object3DLayer({ zIndex: 100 })
map.value.add(object3DLayer)
const district = new AMap.DistrictSearch({
subdistrict: 0,
extensions: 'all',
level: 'city',
emits: ['complete', 'event'],
setup(_, ctx) {
let map: any = null
onMounted(async () => {
await nextTick()
initMap()
})
function initMap() {
map = new SMap.Map('MapContainer', {
viewMode: '3D',
center: [1141.75319496382872, -480.0854532701907],
zooms: [6, 9],
zoom: 7,
pitch: 45,
mapStyle: 'smap://styles/dark', // 'smap://styles/dark' 'smap://styles/image'
showBuildingBlock: true,
}).on(SMap.MapEvent.maploaded, () => {
ctx.emit('complete')
hideCommunity()
addListener()
map.getLayer('model_white_zw').visible = true
map.getLayer('model_white_WEIHAI33').visible = true
map.getLayer('model_white_zhenxing2').visible = true
map.getLayer('model_white_zw').opacity = 0.8
map.getLayer('model_white_WEIHAI33').opacity = 0.8
map.getLayer('model_white_zhenxing2').opacity = 0.8
})
district.search(name, function (status, result) {
const wall = new AMap.Object3D.Wall({
path: result.districtList[0].boundaries,
height,
color,
}
function hideCommunity() {
map.hideXQ_Poly()
map.hideMPZ()
map.hideXQ_Point()
}
// function showCommunity() {
// map.showXQ_Poly()
// map.showMPZ()
// map.showXQ_Point()
// }
function addListener() {
// 触发地图点击事件
map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
const { x, y } = eventParamter.mapPoint
console.log([x, y])
view.hitTest(eventParamter).then((res: any) => {
if (res.results && res.results.length > 0) {
ctx.emit(
'event',
res.results[0] && res.results[0].graphic.attributes
)
}
})
wall.backOrFront = 'both'
wall.transparent = true
object3DLayer.add(wall)
})
}
const initMap = () => {
const mapConfig = {
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
showLabel: true,
zoom: 14,
pitch: 50,
rotation: 45,
viewMode: '3D', // 开启3D视图,默认为关闭
buildingAnimation: true, // 楼块出现是否带动画
expandZoomRange: true,
zooms: [10, 20],
center: [121.5112, 31.195],
showIndoorMap: false,
// mapStyle: 'amap://styles/grey',
mapStyle: 'amap://styles/fa9ac17bb73a5cc74c551d8e8162086d',
features: ['bg', 'road', 'building'],
layers: [
new AMap.TileLayer(),
new AMap.Buildings({
zooms: [10, 20],
zIndex: 10,
}),
],
/**
* ------ 聚焦点位 -------
* @param {String} x [必填 - x坐标]
* @param {String} y [必填 - y坐标]
* @param {Number} zoom [可选 - 放大比例（默认为6）]
*/
function focus(x: string | number, y: string | number, zoom = 6) {
if (!map || !x || !y) {
console.error('传入的坐标点不能为空')
return
}
map.value = new AMap.Map('MapContainer', mapConfig).on(
'click',
({ lnglat }) => {
console.log('click-lnglat: ', [lnglat.lng, lnglat.lat])
}
)
initWallLayer()
ctx.emit('complete', true)
map.setZoomAndCenter(zoom, [+x, +y])
}
const addMarkers = (data: MarkersProp[]) => {
map.value.remove(markers.value)
markers.value = data.map((item) => {
const { x, y } = item // TODO
const marker = new AMap.Marker({
position: [+x, +y],
zIndex: 99,
icon: new AMap.Icon({
size: [16 * sizeRate.value, 20 * sizeRate.value],
image: '/src/assets/images/dimond1.png',
}),
extData: { ...item },
}).on('click', () => ctx.emit('marker-click', marker.getExtData()))
return marker
})
map.value.add(markers.value)
}
const focus = (x: number | string, y: number | string, zoom = 18.5) => {
map.value.setZoomAndCenter(zoom, [x, y])
// 添加边界
function addBoundary({
name = '',
weight = 10,
count = 10,
color = 'rgba(51,145,255,.6)',
maskColor = [0, 17, 33, 0.9],
}) {
const boundary = {
boundaryType: 'jd_boundary',
boundaryDefinition: `name like '%${name}%'`,
boundarydistance: weight,
bounarycount: count,
boundaryColor: color,
maskColor: maskColor,
}
const Boundary = new Plugins.MaskBoundary(map.view)
Boundary.add(boundary)
return Boundary
}
onMounted(injectMapJs)
return {
map,
markers,
initWallLayer,
addMarkers,
focus,
addBoundary,
}
},
})
......@@ -124,17 +109,12 @@ export default defineComponent({
<style lang="stylus" scoped>
#MapContainer
position fixed
width 100%
height 100vh
top 0
right 0
bottom 0
left 0
</style>
<style lang="stylus">
.amap-logo
.amap-copyright
display none !important
.amap-icon
img
width 100%
height 100%
.esri-component.esri-attribution.esri-widget
display none
</style>
src/components/MyComponent/MyTitle/my-title.vue
View file @ b4ffa26d
......@@ -81,6 +81,7 @@ export default defineComponent({
background-size cover
background-position center
font-weight bold
z-index 1
.date
z-index 2
position absolute
......
src/main.ts
View file @ b4ffa26d
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from '@/components/MyComponent'
import { Progress, Select, Input, Row, Col } from 'ant-design-vue'
import { Progress, Select, Input } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import './assets/style/reset.styl'
......@@ -10,6 +10,4 @@ createApp(App)
.use(Progress)
.use(Select)
.use(Input)
.use(Row)
.use(Col)
.mount('#app')
src/store/actions.ts
View file @ b4ffa26d
......@@ -4,8 +4,9 @@ import { Dispatch, Commit } from 'vuex'
export default {
initData({ dispatch }: { dispatch: Dispatch }): void {
dispatch('getPropertySummary')
dispatch('getCaseList')
},
// 物业三架马车数据
// 物业三架马车数据 （缺交叉任职数）
async getPropertySummary({ commit }: { commit: Commit }): Promise<void> {
const {
GET_COMMITTEE: url1,
......@@ -19,4 +20,18 @@ export default {
)
commit('SET_PROPERTY_SUMMARY', { num1: +num1, num2: +num2, num3: +num3 })
},
// 案件汇总列表
async getCaseList({ commit }: { commit: Commit }): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_CASE, params: { pageSize: 100 } })
).data
commit('SET_CASE_LIST', content)
},
// 工作站列表
async getStation({ commit }: { commit: Commit }): Promise<void> {
const { content } = (await ajax.get({ url: api.GET_STATION })).data
commit('SET_STATION_LIST', content)
},
}
src/store/index.ts
View file @ b4ffa26d
......@@ -14,6 +14,8 @@ export interface GlobalStateProps {
readonly viewOptions: ViewType[]
curTheme: ThemeType
propertySummary: { [key: string]: number }
caseList: unknown[]
stationList: unknown[]
}
export default createStore<GlobalStateProps>({
state,
......
src/store/mutations.ts
View file @ b4ffa26d
......@@ -10,7 +10,16 @@ export default {
SET_CURRENT_THEME(state: GlobalStateProps, val: ThemeType): void {
state.curTheme = val
},
SET_PROPERTY_SUMMARY(state: GlobalStateProps, val: number[]): void {
SET_PROPERTY_SUMMARY(
state: GlobalStateProps,
val: { [key: string]: number }
): void {
state.propertySummary = val
},
SET_CASE_LIST(state: GlobalStateProps, data: unknown[]): void {
state.caseList = data
},
SET_MUTATION_LIST(state: GlobalStateProps, data: unknown[]): void {
state.stationList = data
},
}
src/store/state.ts
View file @ b4ffa26d
import { GlobalStateProps } from './index'
export default {
showLoading: false,
curView: { name: '南京东路街道', type: 'street' },
......@@ -10,4 +11,6 @@ export default {
],
curTheme: 'manage',
propertySummary: {},
caseList: [],
stationList: [],
} as GlobalStateProps
src/view/components/map-btns.vue
View file @ b4ffa26d
......@@ -31,13 +31,13 @@
>
<div>
<p>
<span>{{ item.type }}</span>
<span>{{ item.troubleType }}</span>
{{ item.address }}
</p>
<p>{{ item.date }}</p>
<p>{{ item.acceptTime }} ~ {{ item.backTime }}</p>
</div>
<div>{{ item.content }}</div>
<div v-if="item.status === 1" class="flag">已结案</div>
<div>{{ item.reportContent }}</div>
<div v-if="item.status === '已结'" class="flag">已结案</div>
<div v-else class="flag">处置中</div>
</div>
</div>
......@@ -45,18 +45,19 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { computed, defineComponent, ref } 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'
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 store from '@/store'
export default defineComponent({
name: 'MapBtns',
emits: ['full'],
setup(props, ctx) {
setup(_, ctx) {
const btns = ref([
{ key: 'search', icon: btn1 },
{ key: 'full', icon: btn2 },
......@@ -82,32 +83,7 @@ export default defineComponent({
}
const searchType = ref('case')
const searchKey = ref('')
const caseList = ref([
{
address: 'XX区XX路XX弄XX号',
date: '2021-01-23 ~ 2021-01-24',
type: '案件分类',
status: 1,
content:
'案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
},
{
address: 'XX区XX路XX弄XX号',
date: '2021-01-23 ~ 2021-01-24',
type: '案件分类',
status: 0,
content:
'案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
},
{
address: 'XX区XX路XX弄XX号',
date: '2021-01-23 ~ 2021-01-24',
type: '案件分类',
status: 0,
content:
'案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
},
])
const caseList = computed(() => store.state.caseList)
return {
btns,
fullScreen,
......
src/view/drawers/case-drawer.vue
View file @ b4ffa26d
......@@ -3,17 +3,35 @@
<m-card title="房屋档案">
<SubTitle>小区信息</SubTitle>
<m-form
:layout="formLayout"
:model="formData"
:size="0.08"
:label-width="1.1"
:template="[
'name:小区名称',
'address:小区地址',
'belong:所属居委会',
'buildingNum:总门牌幢数',
'roomNum:总户数',
'buidlingArea:总建筑面积',
'area:占地面积',
'rang:小区四至范围',
'excludeRang:小区四至范围不包括',
]"
:data="formData"
label-width="1.4rem"
/>
<SubTitle>物业信息</SubTitle>
<m-form
:layout="formLayout"
:model="formData"
:size="0.08"
:label-width="1.1"
:template="[
'name:小区名称',
'address:小区地址',
'belong:所属居委会',
'buildingNum:总门牌幢数',
'roomNum:总户数',
'buidlingArea:总建筑面积',
'area:占地面积',
'rang:小区四至范围',
'excludeRang:小区四至范围不包括',
]"
:data="formData"
label-width="1.4rem"
/>
</m-card>
<m-card title="案件详情">
......@@ -47,62 +65,6 @@ export default defineComponent({
name: 'CaseDrawer',
components: { SubTitle },
setup() {
const formLayout = ref([
{
name: {
label: '小区名称',
width: 24,
},
},
{
address: {
label: '小区地址',
width: 24,
},
},
{
belong: {
label: '所属居委会',
width: 24,
},
},
{
buildingNum: {
label: '总门牌幢数',
width: 24,
},
},
{
roomNum: {
label: '总户数',
width: 24,
},
},
{
buidlingArea: {
label: '总建筑面积',
width: 24,
},
},
{
area: {
label: '占地面积',
width: 24,
},
},
{
rang: {
label: '小区四至范围',
width: 24,
},
},
{
excludeRang: {
label: '小区四至范围不包括',
width: 24,
},
},
])
const formData = ref({
name: '测试文字',
address: '测试文字',
......@@ -144,7 +106,6 @@ export default defineComponent({
},
])
return {
formLayout,
formData,
details,
}
......
src/view/main.vue
View file @ b4ffa26d
......@@ -6,6 +6,7 @@
gap="0.05rem"
>
<m-title area="title" @click="showDrawer = true">南东城运</m-title>
<m-map ref="map" @complete="handleMapComplete" />
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<Command v-show="'street' === curViewType && !fullScreen" area="left" />
</m-animate>
......@@ -39,8 +40,8 @@
<ViewSelector />
<MapBtns @full="fullScreen = $event" />
<m-drawer v-model="showDrawer">
<!-- <CaseDrawer /> -->
<PopulationDrawer />
<CaseDrawer />
<!-- <PopulationDrawer /> -->
</m-drawer>
</m-grid>
</template>
......@@ -94,19 +95,26 @@ export default defineComponent({
])
const fullScreen = ref(false)
const showDrawer = ref(false)
ajax
.get({
url: api.GET_CASE,
})
.then((res) => {
console.log(res)
})
const map = ref<any>(null)
// ajax
// .get({
// url: api.GET_CASE,
// })
// .then((res) => {
// console.log(res)
// })
const handleMapComplete = () => {
console.log('complete', map.value)
map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
}
return {
map,
curViewType,
curTheme,
streetComponentList,
fullScreen,
showDrawer,
handleMapComplete,
}
},
})
......
src/view/right/demand.vue
View file @ b4ffa26d
......@@ -135,29 +135,15 @@ export default defineComponent({
itemWidth: fontSize.value * 0.6,
itemHeight: fontSize.value * 0.8,
},
series: [
{
type: 'bar',
barWidth: '18%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
},
{
type: 'bar',
barWidth: '18%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
},
{
type: 'bar',
barWidth: '18%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
series: [1, 2, 3].map(() => ({
type: 'bar',
barWidth: '18%',
itemStyle: {
borderRadius: 8,
},
],
barGap: 0,
stack: '总量',
})),
})
const pieData = ref([
{
......
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