Skip to content

E
east-nanjing-new
Commit 7ee8504d authored by 程卓's avatar 程卓
Browse files
Options

Merge branch 'master' of http://git.omniview.pro/yaominguo/east-nanjing-new

parents 674e54aa d1e41f0d
Hide whitespace changes
Inline Side-by-side
Showing with 5067 additions and 122 deletions
package-lock.json
View file @ 7ee8504d
This source diff could not be displayed because it is too large. You can view the blob instead.
paths.json 0 → 100644
View file @ 7ee8504d
[
{
"name": "第一工作站",
"path": [
[-448.329953822261, -293.460812442785],
[-431.7521211874291, -671.2658974800385],
[-424.4347237401342, -721.1895650357069],
[-398.89824688593046, -803.6322429418965],
[-365.2547551197802, -867.1158334507442],
[-392.5813071687177, -874.8011678318296],
[-403.0902474574316, -1077.6749785273678],
[-353.7288206095779, -1071.1265279304666],
[-235.53838240578477, -1022.8565095154296],
[-110.56798272540209, -1153.1351229372399],
[-93.69249324525651, -1138.2894877772196],
[-68.09400454827903, -1119.6983373136686],
[108.32141989715319, -1078.5720831861604],
[162.94558513506695, -1051.8780519335146],
[319.4097326987787, -1005.952081175323],
[764.5059353911838, -763.8371763725968],
[632.5075268631167, -531.321704831237],
[456.02595645205906, -245.14531867638112],
[265.6661356282508, 118.08284918620457],
[171.38332987513922, 95.29556402830092],
[107.25481620144524, 61.96213147601915],
[43.56451955001853, 9.376088803933783],
[6.621997748308331, -34.25957789448293],
[-61.673711759777404, 39.489039654835494],
[-84.91161630850314, 43.66450373493032],
[-117.17844516507756, 35.95023049388385],
[-268.3674519701745, -19.099749397742613],
[-336.6383567411507, -44.7065063404232],
[-412.38375562778185, -44.284825809562136],
[-452.45167430528585, -55.794223828358156],
[-462.21647248071554, -56.90216875258136],
[-480.70426987297697, -84.93978993199039],
[-448.329953822261, -293.460812442785]
]
},
{
"name": "第二工作站",
"path": [
[62.564369398678764, 740.5887328698475],
[137.63177213765096, 581.9293660719472],
[265.9218724678516, 118.00636791345084],
[633.5446129216658, -540.7909132227782],
[1009.9399620665309, -314.1334937621058],
[1093.7138275309285, -280.9447555096293],
[964.1008078882224, 10.568783246614885],
[884.0476529902461, -20.486747614446926],
[826.2691520165776, 82.29581472151119],
[899.6994421063242, 120.57779232713301],
[826.2278107880617, 251.71216917922004],
[705.7015931731263, 615.2007867814553],
[689.5206363320461, 675.2447870777893],
[684.3364462761659, 756.2487902316288],
[534.3504692208784, 845.4714296144077],
[483.33539323239313, 867.770888275825],
[418.098934634476, 876.5269604754694],
[339.3025530833796, 879.3795052430589],
[278.7872627819655, 867.1094286195723],
[216.4694949172632, 843.7681709995571],
[158.20316744710817, 810.0089237935626],
[69.50142754362844, 745.9134831026813],
[62.564369398678764, 740.5887328698475],
]
},
{
"name": "第三工作站",
"path": [
[-827.6197677404292, 863.6615701613555],
[-708.507420140734, 529.087007783064],
[-544.6473267955473, 184.59055056098282],
[-523.8857618349174, 124.25716166503844],
[-451.3484422811116, -294.9842367135918],
[-152.79862643148, -277.8524316166481],
[-122.5120424208119, -268.7160201146585],
[-84.99074341988057, -211.12768879216264],
[-63.923253368233645, -138.51595502702844],
[-34.306397259521646, -87.17841745611986],
[38.478969665379054, 8.683623226294912],
[107.08887251018473, 60.05423378001592],
[158.0543390244511, 92.77168202741245],
[264.45839297839234, 119.5525298599415],
[171.40755583505143, 467.1165062378942],
[134.7709591243579, 587.717138064158],
[81.23406819640945, 702.8193864978215],
[60.116968670543656, 737.5046772225696],
[-52.52134254357884, 666.753298740646],
[-117.37746183915078, 641.493808117498],
[-151.4095611533494, 632.9609785518389],
[-186.334631003489, 628.7524414889315],
[-237.86233822557006, 637.5911961456075],
[-301.7758775109821, 657.7822521527194],
[-467.37230245383194, 765.9722471785428],
[-527.2261330989933, 795.6221762700677],
[-676.0132145273228, 855.6165670921827],
[-733.4857904099746, 866.563724403164],
[-791.5950212117696, 868.8044189887198],
[-827.6197677404292, 863.6615701613555],
]
}
]
\ No newline at end of file
src/components/MyComponent/MyMap/my-map.vue
View file @ 7ee8504d
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, nextTick, onMounted, PropType } from 'vue' import { computed, defineComponent, nextTick, onMounted, PropType } from 'vue'
import store from '@/store'
declare const SMap: any declare const SMap: any
declare const Plugins: any declare const Plugins: any
...@@ -27,29 +28,35 @@ export default defineComponent({ ...@@ -27,29 +28,35 @@ export default defineComponent({
}, },
emits: ['complete', 'event'], emits: ['complete', 'event'],
setup(props, ctx) { setup(props, ctx) {
const curMapType = computed(() => store.state.curMapType)
let map: any = null let map: any = null
onMounted(async () => { // onMounted(async () => {
await nextTick() // await nextTick()
initMap() // initMap()
}) // })
function initMap() { function initMap(config?: any) {
map = new SMap.Map('MapContainer', { map = new SMap.Map('MapContainer', {
viewMode: '3D', viewMode: '3D',
center: [1141.75319496382872, -480.0854532701907], center: [1019.614669, 54.167243],
// center: [-135.98002789627407, -722.1597065437004],
zooms: [5, 10], zooms: [5, 10],
zoom: 7, zoom: 7,
pitch: 45, pitch: 45,
mapStyle: 'smap://styles/dark', mapStyle: 'smap://styles/dark',
showBuildingBlock: true, showBuildingBlock: true,
...config,
...props.config, ...props.config,
}).on(SMap.MapEvent.maploaded, () => { }).on(SMap.MapEvent.maploaded, () => {
// map.enableMouseEvent(false) // map.enableMouseEvent(false)
setBuildingBlock() // setBuildingBlock()
ctx.emit('complete', map) ctx.emit('complete', map)
addListener() addListener()
// hideCommunity() hideCommunity()
}) })
} }
function layer(name: string) {
return map.getLayer(name)
}
function setBuildingBlock(val = false) { function setBuildingBlock(val = false) {
map.getLayer('model_white_zw').visible = val // 整个街道图层名 map.getLayer('model_white_zw').visible = val // 整个街道图层名
map.getLayer('model_white_zhenxing2').visible = val // 振兴小区名 map.getLayer('model_white_zhenxing2').visible = val // 振兴小区名
...@@ -69,7 +76,7 @@ export default defineComponent({ ...@@ -69,7 +76,7 @@ export default defineComponent({
function setFilter(arr: unknown[], key = 'sect_id') { function setFilter(arr: unknown[], key = 'sect_id') {
if (arr.length === 0) return if (arr.length === 0) return
const valid = arr.map((val) => { const valid = arr.map((val) => {
return `${key} like '${val}'` return `${key} = '${val}'`
}) })
map.setFilter('wg_gis_xq_point', valid.join(' or ')) map.setFilter('wg_gis_xq_point', valid.join(' or '))
map.setFilter('wg_gis_mpz', valid.join(' or ')) map.setFilter('wg_gis_mpz', valid.join(' or '))
...@@ -78,9 +85,8 @@ export default defineComponent({ ...@@ -78,9 +85,8 @@ export default defineComponent({
function addListener() { function addListener() {
// 触发地图点击事件 // 触发地图点击事件
map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => { map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
const { x, y } = eventParamter.mapPoint // const { x, y } = eventParamter.mapPoint
console.log(map.getZoom()) console.log(map.getZoom(), map.getCenter())
console.log([x, y])
view.hitTest(eventParamter).then((res: any) => { view.hitTest(eventParamter).then((res: any) => {
if (res.results && res.results.length > 0) { if (res.results && res.results.length > 0) {
ctx.emit( ctx.emit(
...@@ -102,7 +108,9 @@ export default defineComponent({ ...@@ -102,7 +108,9 @@ export default defineComponent({
console.error('传入的坐标点不能为空') console.error('传入的坐标点不能为空')
return return
} }
map.setZoomAndCenter(zoom, [+x, +y, 0]) curMapType.value === '3D'
? map.setZoomAndCenter(zoom, [+x, +y, 0])
: map.setZoomAndCenter(zoom, [+x, +y])
} }
// 添加边界 // 添加边界
...@@ -129,6 +137,25 @@ export default defineComponent({ ...@@ -129,6 +137,25 @@ export default defineComponent({
function rotate(deg: number) { function rotate(deg: number) {
map.setRotation(deg) map.setRotation(deg)
} }
function cameraTo({
center = [0, 0],
heading = 180,
tilt = 45,
}: {
center: number[]
heading: number
tilt: number
}) {
// map.setPitch(60)
// map.setCenter(0, 0, 0)
// map.setRotation(180)
map.view.goTo({
// center,
heading,
tilt,
})
}
// 将数据转换为符合地图的点数组 // 将数据转换为符合地图的点数组
function getMapPoints({ function getMapPoints({
data = [], data = [],
...@@ -158,14 +185,11 @@ export default defineComponent({ ...@@ -158,14 +185,11 @@ export default defineComponent({
item.communityMiny || item.Y || item.y || item.gpsy, item.communityMiny || item.Y || item.y || item.gpsy,
item.communityMinz || item.Z || item.z || item.gpsz || 0, item.communityMinz || item.Z || item.z || item.gpsz || 0,
], ],
label: null, label: new SMap.Label({
} text: labelKey ? (item[labelKey] || item[key]) + '' : '',
if (labelKey) {
result.label = new SMap.Label({
text: (item[labelKey] || item[key]) + '',
size, size,
color, color,
}) }),
} }
return new SMap.Marker(result) return new SMap.Marker(result)
}) })
...@@ -181,6 +205,7 @@ export default defineComponent({ ...@@ -181,6 +205,7 @@ export default defineComponent({
}: PointProp) { }: PointProp) {
if (!map) return if (!map) return
const points = getMapPoints({ data, key, labelKey, icon, size, color }) const points = getMapPoints({ data, key, labelKey, icon, size, color })
console.log(points)
map.add(points) map.add(points)
return points return points
} }
...@@ -191,14 +216,43 @@ export default defineComponent({ ...@@ -191,14 +216,43 @@ export default defineComponent({
map.remove(points) map.remove(points)
} }
// 添加线状覆盖物
function addPolyLine({
paths,
attributes = {},
strokeColor = 'rgba(51,145,255,.6)',
width = 2,
}: {
paths: any[]
attributes: any
strokeColor: string
width: number
}) {
const polyline = new SMap.Polyline({
path: paths.map((item: any) => new SMap.LngLat(item[0], item[1])),
attributes,
cap: 'square',
strokeColor,
style: 'solid',
lineJoin: 'round',
width,
})
map.add(polyline)
return polyline
}
return { return {
initMap,
focus, focus,
layer,
setBuildingBlock, setBuildingBlock,
hideCommunity, hideCommunity,
showCommunity, showCommunity,
addBoundary, addBoundary,
rotate, rotate,
cameraTo,
addPoint, addPoint,
addPolyLine,
remove, remove,
setFilter, setFilter,
} }
......
src/main.ts
View file @ 7ee8504d
...@@ -2,7 +2,7 @@ import { createApp } from 'vue' ...@@ -2,7 +2,7 @@ import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import MyComponent from '@/components/MyComponent' import MyComponent from '@/components/MyComponent'
import router from '@/router' import router from '@/router'
import { Progress, Select, Input } from 'ant-design-vue' import { Progress, Select, Input, Tooltip, Checkbox } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css' import 'ant-design-vue/dist/antd.css'
import './assets/style/reset.styl' import './assets/style/reset.styl'
...@@ -12,4 +12,6 @@ createApp(App) ...@@ -12,4 +12,6 @@ createApp(App)
.use(Progress) .use(Progress)
.use(Select) .use(Select)
.use(Input) .use(Input)
.use(Tooltip)
.use(Checkbox)
.mount('#app') .mount('#app')
src/store/index.ts
View file @ 7ee8504d
...@@ -63,13 +63,19 @@ export interface DutyDataProp { ...@@ -63,13 +63,19 @@ export interface DutyDataProp {
export interface GlobalStateProps { export interface GlobalStateProps {
showLoading: boolean showLoading: boolean
curView: ViewType curView: ViewType
curMapType: string
readonly zhenxing: any
readonly weihai: any
readonly workArea1: any
readonly workArea2: any
readonly workArea3: any
readonly viewOptions: ViewType[] readonly viewOptions: ViewType[]
readonly communityOptions: ViewType[] readonly communityOptions: ViewType[]
curTheme: ThemeType curTheme: ThemeType
propertySummary: { [key: string]: number } propertySummary: { [key: string]: number }
caseList: unknown[] caseList: unknown[]
pubulicSafeGateSenteryShehuiwuye: { [key: string]: number } pubulicSafeGateSenteryShehuiwuye: { [key: string]: number }[]
pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number } pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number }[]
pubulicSafeMap: unknown[] pubulicSafeMap: unknown[]
pubulicSafeTruePeople: { [key: string]: number } pubulicSafeTruePeople: { [key: string]: number }
pubulicSafeHouse: { [key: string]: any } pubulicSafeHouse: { [key: string]: any }
...@@ -111,6 +117,7 @@ export interface GlobalStateProps { ...@@ -111,6 +117,7 @@ export interface GlobalStateProps {
analysisRank: Partial<DutyDataProp> analysisRank: Partial<DutyDataProp>
moreHappenAddr: Partial<DutyDataProp> moreHappenAddr: Partial<DutyDataProp>
} }
export default createStore<GlobalStateProps>({ export default createStore<GlobalStateProps>({
state, state,
mutations, mutations,
......
src/store/mutations.ts
View file @ 7ee8504d
...@@ -14,6 +14,9 @@ export default { ...@@ -14,6 +14,9 @@ export default {
SET_LOADING(state: GlobalStateProps, val: boolean): void { SET_LOADING(state: GlobalStateProps, val: boolean): void {
state.showLoading = val state.showLoading = val
}, },
SET_MAP_TYPE(state: GlobalStateProps, val: string): void {
state.curMapType = val
},
SET_CURRENT_VIEW(state: GlobalStateProps, val: ViewType): void { SET_CURRENT_VIEW(state: GlobalStateProps, val: ViewType): void {
state.curView = val state.curView = val
}, },
......
src/store/state.ts
View file @ 7ee8504d
...@@ -2,6 +2,7 @@ import { GlobalStateProps } from './index' ...@@ -2,6 +2,7 @@ import { GlobalStateProps } from './index'
export default { export default {
showLoading: false, showLoading: false,
curMapType: '2D',
curView: { name: '南京东路街道', type: 'street' }, curView: { name: '南京东路街道', type: 'street' },
viewOptions: [ viewOptions: [
{ name: '南京东路街道', type: 'street' }, { name: '南京东路街道', type: 'street' },
...@@ -14,11 +15,135 @@ export default { ...@@ -14,11 +15,135 @@ export default {
{ name: '威海路62弄', type: '527635870583459841' }, { name: '威海路62弄', type: '527635870583459841' },
], ],
curTheme: 'manage', curTheme: 'manage',
zhenxing: { paths: [] },
weihai: { paths: [] },
workArea1: {
workStation: {
name: '第一',
address: '武胜路481号',
x: -136.67,
y: -660.07,
},
id: '01001',
center: [893.507386, -466.674359],
paths: [
[-448.329953822261, -293.460812442785],
[-431.7521211874291, -671.2658974800385],
[-424.4347237401342, -721.1895650357069],
[-398.89824688593046, -803.6322429418965],
[-365.2547551197802, -867.1158334507442],
[-392.5813071687177, -874.8011678318296],
[-403.0902474574316, -1077.6749785273678],
[-353.7288206095779, -1071.1265279304666],
[-235.53838240578477, -1022.8565095154296],
[-110.56798272540209, -1153.1351229372399],
[-93.69249324525651, -1138.2894877772196],
[-68.09400454827903, -1119.6983373136686],
[108.32141989715319, -1078.5720831861604],
[162.94558513506695, -1051.8780519335146],
[319.4097326987787, -1005.952081175323],
[764.5059353911838, -763.8371763725968],
[632.5075268631167, -531.321704831237],
[456.02595645205906, -245.14531867638112],
[265.6661356282508, 118.08284918620457],
[171.38332987513922, 95.29556402830092],
[107.25481620144524, 61.96213147601915],
[43.56451955001853, 9.376088803933783],
[6.621997748308331, -34.25957789448293],
[-61.673711759777404, 39.489039654835494],
[-84.91161630850314, 43.66450373493032],
[-117.17844516507756, 35.95023049388385],
[-268.3674519701745, -19.099749397742613],
[-336.6383567411507, -44.7065063404232],
[-412.38375562778185, -44.284825809562136],
[-452.45167430528585, -55.794223828358156],
[-462.21647248071554, -56.90216875258136],
[-480.70426987297697, -84.93978993199039],
[-448.329953822261, -293.460812442785],
],
},
workArea2: {
workStation: {
name: '第二',
address: '',
x: 382.4793321452691,
y: 678.9654976442117,
},
id: '01002',
center: [1291.532466, 175.263969],
paths: [
[62.564369398678764, 740.5887328698475],
[137.63177213765096, 581.9293660719472],
[265.9218724678516, 118.00636791345084],
[633.5446129216658, -540.7909132227782],
[1009.9399620665309, -314.1334937621058],
[1093.7138275309285, -280.9447555096293],
[964.1008078882224, 10.568783246614885],
[884.0476529902461, -20.486747614446926],
[826.2691520165776, 82.29581472151119],
[899.6994421063242, 120.57779232713301],
[826.2278107880617, 251.71216917922004],
[705.7015931731263, 615.2007867814553],
[689.5206363320461, 675.2447870777893],
[684.3364462761659, 756.2487902316288],
[534.3504692208784, 845.4714296144077],
[483.33539323239313, 867.770888275825],
[418.098934634476, 876.5269604754694],
[339.3025530833796, 879.3795052430589],
[278.7872627819655, 867.1094286195723],
[216.4694949172632, 843.7681709995571],
[158.20316744710817, 810.0089237935626],
[69.50142754362844, 745.9134831026813],
[62.564369398678764, 740.5887328698475],
],
},
workArea3: {
workStation: {
name: '第三',
address: '',
x: -57.84609277641425,
y: 261.561716873108,
},
center: [609.931363, 342.166777],
id: '01003',
paths: [
[-827.6197677404292, 863.6615701613555],
[-708.507420140734, 529.087007783064],
[-544.6473267955473, 184.59055056098282],
[-523.8857618349174, 124.25716166503844],
[-451.3484422811116, -294.9842367135918],
[-152.79862643148, -277.8524316166481],
[-122.5120424208119, -268.7160201146585],
[-84.99074341988057, -211.12768879216264],
[-63.923253368233645, -138.51595502702844],
[-34.306397259521646, -87.17841745611986],
[38.478969665379054, 8.683623226294912],
[107.08887251018473, 60.05423378001592],
[158.0543390244511, 92.77168202741245],
[264.45839297839234, 119.5525298599415],
[171.40755583505143, 467.1165062378942],
[134.7709591243579, 587.717138064158],
[81.23406819640945, 702.8193864978215],
[60.116968670543656, 737.5046772225696],
[-52.52134254357884, 666.753298740646],
[-117.37746183915078, 641.493808117498],
[-151.4095611533494, 632.9609785518389],
[-186.334631003489, 628.7524414889315],
[-237.86233822557006, 637.5911961456075],
[-301.7758775109821, 657.7822521527194],
[-467.37230245383194, 765.9722471785428],
[-527.2261330989933, 795.6221762700677],
[-676.0132145273228, 855.6165670921827],
[-733.4857904099746, 866.563724403164],
[-791.5950212117696, 868.8044189887198],
[-827.6197677404292, 863.6615701613555],
],
},
propertySummary: {}, propertySummary: {},
caseList: [], caseList: [],
stationInfo: {}, stationInfo: {},
pubulicSafeGateSenteryShehuiwuye: {}, pubulicSafeGateSenteryShehuiwuye: [],
pubulicSafeGateSenteryZhiguangongfang: {}, pubulicSafeGateSenteryZhiguangongfang: [],
pubulicSafeMap: [], pubulicSafeMap: [],
pubulicSafeTruePeople: {}, pubulicSafeTruePeople: {},
pubulicSafeHouse: {}, pubulicSafeHouse: {},
......
src/view/community.vue
View file @ 7ee8504d
<template> <template>
<m-loader v-if="loading" background="#000"> <!-- <m-loader v-if="loading" background="#000">
<p style="color: #fff; margin-top: 0.3rem">地图初始化…</p> <p style="color: #fff; margin-top: 0.3rem">地图初始化…</p>
</m-loader> </m-loader> -->
<m-grid <m-grid
:template="['title title title', 'left . right']" :template="['title title title', 'left . right']"
columns="16vw auto 49vw" columns="16vw auto 49vw"
rows="0.4rem auto" rows="0.4rem auto"
gap="0.05rem" gap="0.05rem"
> >
<m-title area="title"> 南东城运{{ title }} </m-title> <m-title area="title" @click="test"> 南东城运{{ title }} </m-title>
<m-map <m-map
ref="map" ref="map"
:config="{ center: [-75.5563452697323, -718.3061904627932], zoom: 8 }" :config="{
center: [-75.5563452697323, -718.3061904627932],
zoom: 8,
}"
@complete="handleComplete" @complete="handleComplete"
@event="handleMapClick" @event="handleMapClick"
/> />
...@@ -32,7 +35,7 @@ ...@@ -32,7 +35,7 @@
</div> </div>
</div> </div>
<SiteSelector /> <SiteSelector />
<m-drawer v-model="showDrawer"> <m-drawer v-model="showDrawer" width="32vw">
<div class="community-device"> <div class="community-device">
<p>类型：{{ drawerInfo.key }}</p> <p>类型：{{ drawerInfo.key }}</p>
<p>地点：{{ drawerInfo.relationName }}</p> <p>地点：{{ drawerInfo.relationName }}</p>
...@@ -50,7 +53,7 @@ ...@@ -50,7 +53,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue' import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
import LeftSection from '@/view/community/left-section.vue' import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue' import RightSection from '@/view/community/right-section.vue'
import SiteSelector from '@/view/community/site-selector.vue' import SiteSelector from '@/view/community/site-selector.vue'
...@@ -70,6 +73,11 @@ export default defineComponent({ ...@@ -70,6 +73,11 @@ export default defineComponent({
name: 'Main', name: 'Main',
components: { LeftSection, RightSection, SiteSelector }, components: { LeftSection, RightSection, SiteSelector },
setup() { setup() {
const test = () => {
console.log('go')
map.value.cameraTo({})
map.value.cameraTo({})
}
const loading = ref(true) const loading = ref(true)
const title = computed( const title = computed(
() => store.state.communityInfo.bigscreenCommunityName () => store.state.communityInfo.bigscreenCommunityName
...@@ -80,15 +88,17 @@ export default defineComponent({ ...@@ -80,15 +88,17 @@ export default defineComponent({
const initData = (id: unknown) => { const initData = (id: unknown) => {
store.dispatch('initCommunityData', id) store.dispatch('initCommunityData', id)
} }
onMounted(() => { const map = ref<any>(null)
onMounted(async () => {
curId.value = route.query.id || communityOptions.value[0].type curId.value = route.query.id || communityOptions.value[0].type
initData(curId.value) initData(curId.value)
store.commit( store.commit(
'SET_CURRENT_VIEW', 'SET_CURRENT_VIEW',
communityOptions.value.find((item) => item.type == curId.value) communityOptions.value.find((item) => item.type == curId.value)
) // 使标题不显示公共的3个按钮 ) // 使标题不显示公共的3个按钮
await nextTick()
map.value.initMap()
}) })
const map = ref<any>(null)
const points = ref<any>(null) const points = ref<any>(null)
const initMapPoints = (key: string, data: any[]) => { const initMapPoints = (key: string, data: any[]) => {
const getIcon = (type: string) => { const getIcon = (type: string) => {
...@@ -96,7 +106,7 @@ export default defineComponent({ ...@@ -96,7 +106,7 @@ export default defineComponent({
if (type.indexOf('充电') >= 0) return point5 if (type.indexOf('充电') >= 0) return point5
if (type.indexOf('电梯加装') >= 0) return point3 if (type.indexOf('电梯加装') >= 0) return point3
if (type.indexOf('垃圾箱') >= 0) return point6 if (type.indexOf('垃圾箱') >= 0) return point6
if (type.indexOf('助老') >= 0) return point7 // TODO 看是否是“助老” if (type.indexOf('助') >= 0) return point7
return point4 // 默认为美丽家园-微更新 return point4 // 默认为美丽家园-微更新
} }
const pointData = data.map((item: any) => { const pointData = data.map((item: any) => {
...@@ -122,36 +132,46 @@ export default defineComponent({ ...@@ -122,36 +132,46 @@ export default defineComponent({
drawerInfo.value = e drawerInfo.value = e
showDrawer.value = true showDrawer.value = true
} }
const handleComplete = (instance: any) => { const handleComplete = () => {
let center = [-135.98002789627407, -722.1597065437004] let center = [-135.98002789627407, -722.1597065437004]
// let center = [-75.5563452697323, -718.3061904627932] // let center = [-75.5563452697323, -718.3061904627932]
let zoom = 9.7608 let zoom = 9.7608
map.value.layer('model_white_zw').visible = false
if (curId.value === '527635870583459841') { if (curId.value === '527635870583459841') {
instance.getLayer('model_white_WEIHAI33').visible = true map.value.layer('model_white_WEIHAI33').visible = true
instance.getLayer('model_white_WEIHAI33').opacity = 1
center = [-38.73075358777865, -569.7527629458657] center = [-38.73075358777865, -569.7527629458657]
zoom = 10 zoom = 10
} else { } else {
instance.getLayer('model_white_zhenxing2').visible = true map.value.layer('model_white_zhenxing2').visible = true
instance.getLayer('model_white_zhenxing2').opacity = 0.8
} }
let i = -90 loading.value = false
map.value.rotate(i) map.value.focus(...center, zoom)
setTimeout(() => { // let i = -90
loading.value = false // map.value.rotate(i)
setTimeout(() => { // setTimeout(() => {
const timer = setInterval(() => { // setTimeout(() => {
i += 2 // map.value.cameraTo({})
if (i > 0) { // setTimeout(() => {
setTimeout(() => { // map.value.rotate(180)
map.value.focus(...center, zoom) // map.value.focus(...center, zoom)
}, 500) // })
clearInterval(timer) // }, 1000)
} // }, 5000)
map.value.rotate(i) // setTimeout(() => {
}, 2) // loading.value = false
}, 1000) // setTimeout(() => {
}, 7000) // const timer = setInterval(() => {
// i += 15
// if (i > 0) {
// setTimeout(() => {
// map.value.focus(...center, zoom)
// }, 500)
// clearInterval(timer)
// }
// map.value.rotate(i)
// }, 0)
// }, 1000)
// }, 7000)
} }
const btns = ref([ const btns = ref([
{ name: '美丽家园', key: '微更新' }, { name: '美丽家园', key: '微更新' },
...@@ -166,6 +186,8 @@ export default defineComponent({ ...@@ -166,6 +186,8 @@ export default defineComponent({
{ name: '监控设施', key: '监控' }, { name: '监控设施', key: '监控' },
] ]
} }
// 点击下方分类撒点
const curBtn = ref<string | null>(null) const curBtn = ref<string | null>(null)
const handleClick = async (key: string) => { const handleClick = async (key: string) => {
map.value.remove(points.value) map.value.remove(points.value)
...@@ -174,7 +196,7 @@ export default defineComponent({ ...@@ -174,7 +196,7 @@ export default defineComponent({
map.value.showCommunity() map.value.showCommunity()
return return
} }
const { content } = ( const pointList = (
await ajax.get({ await ajax.get({
url: api.GET_COMMUNITY_FACILITY, url: api.GET_COMMUNITY_FACILITY,
params: { params: {
...@@ -183,14 +205,26 @@ export default defineComponent({ ...@@ -183,14 +205,26 @@ export default defineComponent({
pageSize: 1000, pageSize: 1000,
}, },
}) })
).data ).data.content
initMapPoints(key, content) if (key === '小区设施') {
const { content } = (
await ajax.get({
url: api.GET_COMMUNITY_FACILITY,
params: {
bigscreenCommunityId: curId.value,
classification: '为老设施',
pageSize: 1000,
},
})
).data
pointList.push(...content)
}
initMapPoints(key, pointList)
map.value.hideCommunity() map.value.hideCommunity()
// map.value.setFilter(['1408241008852645'])
// map.value.showCommunity()
curBtn.value = key curBtn.value = key
} }
return { return {
test,
loading, loading,
title, title,
map, map,
...@@ -210,8 +244,9 @@ export default defineComponent({ ...@@ -210,8 +244,9 @@ export default defineComponent({
@import '../components/MyComponent/main.styl' @import '../components/MyComponent/main.styl'
.community-device .community-device
$full() $full()
overflow hidden
img img
width 50% width 3rem
.btns .btns
position fixed position fixed
z-index 9999 z-index 9999
......
src/view/community/community-photo.vue
View file @ 7ee8504d
...@@ -24,6 +24,7 @@ import photo2 from '@/assets/images/community2.png' ...@@ -24,6 +24,7 @@ import photo2 from '@/assets/images/community2.png'
import photo3 from '@/assets/images/community3.png' import photo3 from '@/assets/images/community3.png'
import { ajax } from '@/ajax' import { ajax } from '@/ajax'
import VideoComponent from '../components/video-component.vue' import VideoComponent from '../components/video-component.vue'
import video from '@/assets/images/video.mp4'
export default defineComponent({ export default defineComponent({
name: 'CommunityPhoto', name: 'CommunityPhoto',
...@@ -32,13 +33,15 @@ export default defineComponent({ ...@@ -32,13 +33,15 @@ export default defineComponent({
const showModal = ref(false) const showModal = ref(false)
const src = ref<string | null>(null) const src = ref<string | null>(null)
const handleClick = async (id: string) => { const handleClick = async (id: string) => {
if (!id) return // if (!id) return
const [{ remark2 }] = ( // const [{ remark2 }] = (
await ajax.get({ // await ajax.get({
url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`, // url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
}) // })
).data // ).data
src.value = remark2 // src.value = remark2
src.value =
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KNmAWXGgAfLx1DPNngc885.mp4'
showModal.value = true showModal.value = true
} }
return { return {
......
src/view/community/left-section.vue
View file @ 7ee8504d
...@@ -193,7 +193,7 @@ export default defineComponent({ ...@@ -193,7 +193,7 @@ export default defineComponent({
(buildingList.value.find( (buildingList.value.find(
(b: any) => b.sectId === curBuilding.value (b: any) => b.sectId === curBuilding.value
) as any) ) as any)
).icMember || [] ).icMember.sort((a: any, b: any) => +a.dirDuty - +b.dirDuty) || []
} }
return { return {
healthVal, healthVal,
......
src/view/components/map-btns.vue
View file @ 7ee8504d
<template> <template>
<div class="map-btns" :class="{ full: fullScreen }"> <div class="map-btns" :class="{ full: fullScreen }">
<img <!-- <a-checkbox-group :option="options" @change="handleChange" /> -->
v-for="btn in btns" <template v-for="btn in btns">
:key="btn.key" <a-tooltip v-if="btn.key === 'home'" :key="btn.key" placement="right">
:src="btn.icon" <img :key="btn.key" :src="btn.icon" draggable="false" />
draggable="false" <template v-if="options.length > 0" #title>
@click="handleClick(btn.key)" <div class="btns-tip">
/> <a-checkbox-group :options="options" @change="handleChange" />
</div>
</template>
</a-tooltip>
<img
v-else
:key="btn.key"
:src="btn.icon"
draggable="false"
@click="handleClick(btn.key)"
/>
</template>
</div> </div>
<m-modal v-model="searchModal" title="搜索"> <m-modal v-model="searchModal" title="搜索">
<div id="modal-search-bar"> <div id="modal-search-bar">
...@@ -52,24 +63,39 @@ import btn3 from '@/assets/images/map-btn3.png' ...@@ -52,24 +63,39 @@ import btn3 from '@/assets/images/map-btn3.png'
import btn4 from '@/assets/images/map-btn4.png' import btn4 from '@/assets/images/map-btn4.png'
import btn5 from '@/assets/images/map-btn5.png' import btn5 from '@/assets/images/map-btn5.png'
import btn6 from '@/assets/images/map-btn6.png' import btn6 from '@/assets/images/map-btn6.png'
import d2 from '@/assets/images/2d.png'
import d3 from '@/assets/images/3d.png'
import store from '@/store' import store from '@/store'
export default defineComponent({ export default defineComponent({
name: 'MapBtns', name: 'MapBtns',
emits: ['full'], emits: ['full', 'change'],
setup(_, ctx) { setup(_, ctx) {
const btns = ref([ const btns = computed(() => {
{ key: 'search', icon: btn1 }, const mapType =
{ key: 'full', icon: btn2 }, store.state.curMapType === '2D'
{ key: '', icon: btn3 }, ? { key: '3D', icon: d3 }
{ key: '', icon: btn4 }, : { key: '2D', icon: d2 }
{ key: '', icon: btn5 }, const list = [
{ key: '', icon: btn6 }, { key: 'search', icon: btn1 },
]) { key: 'full', icon: btn2 },
{ key: 'home', icon: btn3 },
{ key: '', icon: btn4 },
{ key: '', icon: btn5 },
{ key: '', icon: btn6 },
]
return [mapType, ...list]
})
const fullScreen = ref(false) const fullScreen = ref(false)
const searchModal = ref(false) const searchModal = ref(false)
const handleClick = (key: string) => { const handleClick = (key: string) => {
switch (key) { switch (key) {
case '3D':
store.commit('SET_MAP_TYPE', key)
break
case '2D':
store.commit('SET_MAP_TYPE', key)
break
case 'full': case 'full':
fullScreen.value = !fullScreen.value fullScreen.value = !fullScreen.value
ctx.emit('full', fullScreen.value) ctx.emit('full', fullScreen.value)
...@@ -84,6 +110,23 @@ export default defineComponent({ ...@@ -84,6 +110,23 @@ export default defineComponent({
const searchType = ref('case') const searchType = ref('case')
const searchKey = ref('') const searchKey = ref('')
const caseList = computed(() => store.state.caseList) const caseList = computed(() => store.state.caseList)
const options = computed(() => {
const result: { [key: string]: any } = {
street: [
{ label: '第一工作站', value: 'workArea1' },
{ label: '第二工作站', value: 'workArea2' },
{ label: '第三工作站', value: 'workArea3' },
],
work1: [
{ label: '振兴小区', value: 'zhenxing' },
{ label: '威海路62弄', value: 'weihai' },
],
}
return result[store.state.curView.type] || []
})
const handleChange = (e: any) => {
ctx.emit('change', e)
}
return { return {
btns, btns,
fullScreen, fullScreen,
...@@ -92,6 +135,8 @@ export default defineComponent({ ...@@ -92,6 +135,8 @@ export default defineComponent({
searchType, searchType,
searchKey, searchKey,
caseList, caseList,
options,
handleChange,
} }
}, },
}) })
...@@ -102,7 +147,11 @@ export default defineComponent({ ...@@ -102,7 +147,11 @@ export default defineComponent({
$border = .01rem solid rgba(91,213,255,.3) $border = .01rem solid rgba(91,213,255,.3)
$bg = rgba(6,34,67,.4) $bg = rgba(6,34,67,.4)
.btns-tip *
color #fff !important
font-size .1rem
.ant-checkbox-group-item
display block
#modal-search-bar #modal-search-bar
width 100% width 100%
position relative position relative
......
src/view/components/video-component.vue
View file @ 7ee8504d
...@@ -35,7 +35,10 @@ export default defineComponent({ ...@@ -35,7 +35,10 @@ export default defineComponent({
setup(props) { setup(props) {
const videoRef = ref<any | null>(null) const videoRef = ref<any | null>(null)
const isVideo = computed( const isVideo = computed(
() => props.videoSrc && props.videoSrc.indexOf('m3u8') >= 0 () =>
props.videoSrc &&
(props.videoSrc.indexOf('m3u8') >= 0 ||
props.videoSrc.indexOf('mp4') >= 0)
) )
const init = () => { const init = () => {
if (!videoRef.value) return if (!videoRef.value) return
......
src/view/hooks/useSwitchMap.ts 0 → 100644
View file @ 7ee8504d
import { ref, watch, computed } from 'vue'
import { ajax, api } from '@/ajax'
import store from '@/store'
export default function useSwitchMap(map: any) {
const curMapType = computed(() => store.state.curMapType)
const curViewType = computed(() => store.state.curView.type)
watch(
() => curMapType.value,
(type) => {
if (!map.value) return
map.value.initMap({ viewMode: type })
},
{ immediate: true }
)
watch(
() => curViewType.value,
(type) => {
setPoints(type)
if (curMapType.value === '2D') return
store.commit('SET_MAP_TYPE', '2D')
}
)
// 根据条件显示小区点
function setPoints(type: string) {
switch (type) {
case 'work1':
showPoints({ gridId: store.state.workArea1.id })
map.value.focus(...store.state.workArea1.center, 7)
break
case 'work2':
showPoints({ gridId: store.state.workArea2.id })
map.value.focus(...store.state.workArea2.center, 7)
break
case 'work3':
showPoints({ gridId: store.state.workArea3.id })
map.value.focus(...store.state.workArea3.center, 7)
break
case 'street':
showPoints()
map.value.focus(1019.614669, 54.167243, 6.5)
break
default:
break
}
}
async function showPoints(params = {}) {
const { content } = (
await ajax.get({ url: api.GET_COMMUNITY_IDS, params })
).data
map.value.setFilter(content)
map.value.showCommunity()
}
const handleMapComplete = async () => {
map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
setPoints(curViewType.value)
if (curMapType.value === '3D') {
if (curViewType.value === 'work1') {
map.value.layer('model_white_zw').visible = false
map.value.layer('model_white_dyjd').visible = true // 第一街道名
} else {
map.value.layer('model_white_zw').visible = true
map.value.layer('model_white_dyjd').visible = false
}
}
}
// 工作站勾边
const areaLines = ref([])
const selectArea = (e: any) => {
map.value.remove(areaLines.value)
areaLines.value = e.map(
(
name:
| 'workArea1'
| 'workArea2'
| 'workArea3'
| 'zhenxing'
| 'weihai'
| null
) => {
if (!name) return
return map.value.addPolyLine({
paths: store.state[name].paths,
strokeColor: '#FF6161',
})
}
)
}
return {
handleMapComplete,
selectArea,
}
}
src/view/main.vue
View file @ 7ee8504d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
rows="0.4rem auto" rows="0.4rem auto"
gap="0.05rem" gap="0.05rem"
> >
<m-title area="title" @click="showDrawer = false">南东城运</m-title> <m-title area="title">南东城运</m-title>
<m-map ref="map" @complete="handleMapComplete" /> <m-map ref="map" @complete="handleMapComplete" />
<m-animate enter="fadeInLeft" leave="fadeOutLeft"> <m-animate enter="fadeInLeft" leave="fadeOutLeft">
<Command v-show="'street' === curViewType && !fullScreen" area="left" /> <Command v-show="'street' === curViewType && !fullScreen" area="left" />
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
/> />
</m-animate> </m-animate>
<ViewSelector /> <ViewSelector />
<MapBtns @full="fullScreen = $event" /> <MapBtns @change="selectArea" @full="fullScreen = $event" />
<m-drawer v-model="showDrawer"> <m-drawer v-model="showDrawer">
<CaseDrawer /> <CaseDrawer />
<!-- <PopulationDrawer /> --> <!-- <PopulationDrawer /> -->
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue' import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
import ManageBasic from './left/manage-basic.vue' import ManageBasic from './left/manage-basic.vue'
import Command from './left/command.vue' import Command from './left/command.vue'
import PublicWork from './right/public-work.vue' import PublicWork from './right/public-work.vue'
...@@ -59,6 +59,7 @@ import MapBtns from './components/map-btns.vue' ...@@ -59,6 +59,7 @@ import MapBtns from './components/map-btns.vue'
import CaseDrawer from './drawers/case-drawer.vue' import CaseDrawer from './drawers/case-drawer.vue'
import PopulationDrawer from './drawers/population-drawer.vue' import PopulationDrawer from './drawers/population-drawer.vue'
import store from '@/store' import store from '@/store'
import useSwitchMap from './hooks/useSwitchMap'
export default defineComponent({ export default defineComponent({
name: 'Main', name: 'Main',
...@@ -75,7 +76,6 @@ export default defineComponent({ ...@@ -75,7 +76,6 @@ export default defineComponent({
PopulationDrawer, PopulationDrawer,
}, },
setup() { setup() {
// store.commit('SET_CURRENT_VIEW', { name: '南京东路街道', type: 'street' })
store.dispatch('initData') store.dispatch('initData')
const curViewType = computed(() => store.state.curView.type) const curViewType = computed(() => store.state.curView.type)
const curTheme = computed(() => store.state.curTheme) const curTheme = computed(() => store.state.curTheme)
...@@ -96,41 +96,20 @@ export default defineComponent({ ...@@ -96,41 +96,20 @@ export default defineComponent({
const fullScreen = ref(false) const fullScreen = ref(false)
const showDrawer = ref(false) const showDrawer = ref(false)
const map = ref<any>(null) const map = ref<any>(null)
const mapInstance = ref<any>(null) onMounted(async () => {
await nextTick()
// watch( map.value.initMap({ viewMode: '2D' })
// () => curViewType.value, })
// (val) => { const { handleMapComplete, selectArea } = useSwitchMap(map)
// if (!val || !mapInstance.value) return
// if (val === 'work1') {
// mapInstance.value.getLayer('model_white_dyjd').visible = true // 第一街道名
// mapInstance.value.getLayer('model_white_dyjd').opacity = 0.8
// mapInstance.value.getLayer('model_white_zw').visible = false
// } else {
// mapInstance.value.getLayer('model_white_zw').visible = true
// mapInstance.value.getLayer('model_white_zw').opacity = 0.8
// }
// },
// { immediate: true }
// )
const handleMapComplete = (instance: any) => {
instance.getLayer('model_white_dyjd').visible = true
instance.getLayer('model_white_dyjd').opacity = 0.8
// instance.getLayer('model_white_zw').visible = true
// instance.getLayer('model_white_zw').opacity = 0.8
map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
mapInstance.value = instance
}
return { return {
map, map,
mapInstance,
curViewType, curViewType,
curTheme, curTheme,
streetComponentList, streetComponentList,
fullScreen, fullScreen,
showDrawer, showDrawer,
handleMapComplete, handleMapComplete,
selectArea,
} }
}, },
}) })
......
src/view/right/complain.vue
View file @ 7ee8504d
...@@ -58,6 +58,7 @@ import Tabs, { TabsProp } from '../components/tabs.vue' ...@@ -58,6 +58,7 @@ import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue' import SubTitle from '../components/sub-title.vue'
import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue' import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue'
import moment from 'moment' import moment from 'moment'
import { ChartTypes } from '@/components/MyComponent'
import store from '@/store' import store from '@/store'
export default defineComponent({ export default defineComponent({
...@@ -213,7 +214,7 @@ export default defineComponent({ ...@@ -213,7 +214,7 @@ export default defineComponent({
{ name: '15-16', data1: 150, data2: 100 }, { name: '15-16', data1: 150, data2: 100 },
], ],
}) })
const chartOption = ref<ECOption>({ const chartOption = ref<ChartTypes.ECOption>({
color: ['#9B88F9', 'gold'], color: ['#9B88F9', 'gold'],
legend: { legend: {
right: '1%', right: '1%',
......
tsconfig.json
View file @ 7ee8504d
...@@ -17,5 +17,5 @@ ...@@ -17,5 +17,5 @@
} }
}, },
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules", "dist"] "exclude": ["node_modules", "dist", "public"]
} }
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