Skip to content

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

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

parents e6ca2db5 38bd947c
Expand all Show whitespace changes
Inline Side-by-side
Showing with 577 additions and 299 deletions
dist/Plugins.min.js 0 → 100644
View file @ f3d3fdad
This diff is collapsed.
dist/SMap.min.js 0 → 100644
View file @ f3d3fdad
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/index.6cf63887.css → dist/assets/index.097e7037.css
View file @ f3d3fdad
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/index.66409abe.js 0 → 100644
View file @ f3d3fdad
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/index.a7e6b4b7.js deleted 100644 → 0
View file @ e6ca2db5
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/assets/vendor.51f58a60.js deleted 100644 → 0
View file @ e6ca2db5
This diff is collapsed.
dist/assets/vendor.fb6b006a.js 0 → 100644
View file @ f3d3fdad
This diff is collapsed.
dist/hls.js 0 → 100644
View file @ f3d3fdad
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/index.html
View file @ f3d3fdad
......@@ -3,16 +3,22 @@
<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 type="module" crossorigin src="./assets/index.a7e6b4b7.js"></script>
<link rel="modulepreload" href="./assets/vendor.51f58a60.js">
<link rel="stylesheet" href="./assets/index.6cf63887.css">
<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">
</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 @ f3d3fdad
......@@ -12,6 +12,7 @@
<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>
......
public/SMap.min.js
View file @ f3d3fdad
This source diff could not be displayed because it is too large. You can view the blob instead.
public/hls.js 0 → 100644
View file @ f3d3fdad
This source diff could not be displayed because it is too large. You can view the blob instead.
src/App.vue
View file @ f3d3fdad
<template>
<router-view />
<router-view :key="$route.fullPath" />
<m-loader v-if="showLoading" />
</template>
......
src/ajax/api.ts
View file @ f3d3fdad
......@@ -34,6 +34,7 @@ export default {
GET_PUBLICSAFE_PARTY: '/service-special-nandong/party', // 党建
GET_PUBLICSAFE_ECONOMIC: '/service-special-nandong/economic', // 经济
/** 小区屏 */
GET_COMMUNITY_IDS: '/service-special-nandong/getSectIdList', // 获取小区id列表
GET_COMMUNITY_INFO: '/service-special-nandong/bigscreenCommunity/statistical', // 小区档案
GET_COMMUNITY_FACILITY: '/service-special-nandong/communityRelations', // 小区设施
GET_ISSUE_LIST: '/service-special-nandong/management/factors', // 管理要素列表
......
src/assets/images/point1.png
View replaced file @ e6ca2db5 View file @ f3d3fdad
src/assets/images/point1.png

36.8 KB | W: | H:

src/assets/images/point1.png

26.1 KB | W: | H:

src/assets/images/point1.png
src/assets/images/point1.png
src/assets/images/point1.png
src/assets/images/point1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/point2.png
View replaced file @ e6ca2db5 View file @ f3d3fdad
src/assets/images/point2.png

22.2 KB | W: | H:

src/assets/images/point2.png

16.2 KB | W: | H:

src/assets/images/point2.png
src/assets/images/point2.png
src/assets/images/point2.png
src/assets/images/point2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/point3.png
View replaced file @ e6ca2db5 View file @ f3d3fdad
src/assets/images/point3.png

22.2 KB | W: | H:

src/assets/images/point3.png

16.8 KB | W: | H:

src/assets/images/point3.png
src/assets/images/point3.png
src/assets/images/point3.png
src/assets/images/point3.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/point4.png
View replaced file @ e6ca2db5 View file @ f3d3fdad
src/assets/images/point4.png

22.5 KB | W: | H:

src/assets/images/point4.png

17.2 KB | W: | H:

src/assets/images/point4.png
src/assets/images/point4.png
src/assets/images/point4.png
src/assets/images/point4.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/point5.png
View replaced file @ e6ca2db5 View file @ f3d3fdad
src/assets/images/point5.png

22.9 KB | W: | H:

src/assets/images/point5.png

15.8 KB | W: | H:

src/assets/images/point5.png
src/assets/images/point5.png
src/assets/images/point5.png
src/assets/images/point5.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/point6.png
View replaced file @ e6ca2db5 View file @ f3d3fdad
src/assets/images/point6.png

22.4 KB | W: | H:

src/assets/images/point6.png

16.1 KB | W: | H:

src/assets/images/point6.png
src/assets/images/point6.png
src/assets/images/point6.png
src/assets/images/point6.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/point7.png
View replaced file @ e6ca2db5 View file @ f3d3fdad
src/assets/images/point7.png

23.2 KB | W: | H:

src/assets/images/point7.png

16.9 KB | W: | H:

src/assets/images/point7.png
src/assets/images/point7.png
src/assets/images/point7.png
src/assets/images/point7.png
  • 2-up
  • Swipe
  • Onion skin
src/components/MyComponent/MyMap/my-map.vue
View file @ f3d3fdad
......@@ -43,17 +43,19 @@ export default defineComponent({
showBuildingBlock: true,
...props.config,
}).on(SMap.MapEvent.maploaded, () => {
// map.enableMouseEvent(false)
setBuildingBlock()
ctx.emit('complete', map)
// 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
// hideCommunity()
})
}
function setBuildingBlock(val = false) {
map.getLayer('model_white_zw').visible = val // 整个街道图层名
map.getLayer('model_white_zhenxing2').visible = val // 振兴小区名
map.getLayer('model_white_WEIHAI33').visible = val // 威海小区名
map.getLayer('model_white_dyjd').visible = val // 第一街道名
}
function hideCommunity() {
map.hideXQ_Poly()
map.hideMPZ()
......@@ -64,11 +66,20 @@ export default defineComponent({
map.showMPZ()
map.showXQ_Point()
}
function setFilter(arr: unknown[], key = 'sect_id') {
if (arr.length === 0) return
const valid = arr.map((val) => {
return `${key} like '${val}'`
})
map.setFilter('wg_gis_xq_point', valid.join(' or '))
map.setFilter('wg_gis_mpz', valid.join(' or '))
map.setFilter('wg_gis_xq_poly', valid.join(' or '))
}
function addListener() {
map.enableMouseEvent(false)
// 触发地图点击事件
map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
const { x, y } = eventParamter.mapPoint
console.log(map.getZoom())
console.log([x, y])
view.hitTest(eventParamter).then((res: any) => {
if (res.results && res.results.length > 0) {
......@@ -170,8 +181,6 @@ export default defineComponent({
}: PointProp) {
if (!map) return
const points = getMapPoints({ data, key, labelKey, icon, size, color })
console.log(points)
map.add(points)
return points
}
......@@ -184,12 +193,14 @@ export default defineComponent({
return {
focus,
setBuildingBlock,
hideCommunity,
showCommunity,
addBoundary,
rotate,
addPoint,
remove,
setFilter,
}
},
})
......
src/store/index.ts
View file @ f3d3fdad
......@@ -6,7 +6,7 @@ import actions from './actions'
export type ThemeType = 'manage' | 'service' | 'safety'
export interface ViewType {
name: string
type: 'street' | 'work1' | 'work2' | 'work3' | 'community'
type: string
id?: string
}
......@@ -56,6 +56,7 @@ export interface GlobalStateProps {
showLoading: boolean
curView: ViewType
readonly viewOptions: ViewType[]
readonly communityOptions: ViewType[]
curTheme: ThemeType
propertySummary: { [key: string]: number }
caseList: unknown[]
......
src/store/state.ts
View file @ f3d3fdad
......@@ -9,6 +9,10 @@ export default {
{ name: '第二工作站', type: 'work2', id: '01002' },
{ name: '第三工作站', type: 'work3', id: '01003' },
],
communityOptions: [
{ name: '振兴小区', type: '527635870583459840' },
{ name: '威海路62弄', type: '527635870583459841' },
],
curTheme: 'manage',
propertySummary: {},
caseList: [],
......
src/view/community.vue
View file @ f3d3fdad
......@@ -31,6 +31,21 @@
<p>{{ btn.name }}</p>
</div>
</div>
<SiteSelector />
<m-drawer v-model="showDrawer">
<div class="community-device">
<p>类型：{{ drawerInfo.key }}</p>
<p>地点：{{ drawerInfo.relationName }}</p>
<div v-if="drawerInfo.beforPhoto">
<p>改造前</p>
<img :src="drawerInfo.beforPhoto" />
</div>
<div v-if="drawerInfo.afterPhoto">
<p>改造后</p>
<img :src="drawerInfo.afterPhoto" />
</div>
</div>
</m-drawer>
</m-grid>
</template>
......@@ -38,6 +53,7 @@
import { computed, defineComponent, onMounted, ref } from 'vue'
import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue'
import SiteSelector from '@/view/community/site-selector.vue'
import store from '@/store'
import point from '@/assets/images/point.png'
import point1 from '@/assets/images/point1.png'
......@@ -52,20 +68,26 @@ import { ajax, api } from '@/ajax'
export default defineComponent({
name: 'Main',
components: { LeftSection, RightSection },
components: { LeftSection, RightSection, SiteSelector },
setup() {
const loading = ref(true)
const title = computed(
() => store.state.communityInfo.bigscreenCommunityName
)
const communityOptions = computed(() => store.state.communityOptions)
const route = useRoute()
const curId = ref<unknown>(null)
const initData = (id: unknown) => {
store.dispatch('initCommunityData', id || '527635870583459840')
store.dispatch('initCommunityData', id)
}
onMounted(() => {
initData(route.query.id)
curId.value = route.query.id || communityOptions.value[0].type
initData(curId.value)
store.commit(
'SET_CURRENT_VIEW',
communityOptions.value.find((item) => item.type == curId.value)
) // 使标题不显示公共的3个按钮
})
store.commit('SET_CURRENT_VIEW', { name: '', type: 'community' }) // 使标题不显示公共的3个按钮
const map = ref<any>(null)
const points = ref<any>(null)
const initMapPoints = (key: string, data: any[]) => {
......@@ -83,39 +105,32 @@ export default defineComponent({
name: item.id,
x: position && +position[0],
y: position && +position[1],
// icon: getIcon(item.relationName),
icon: getIcon(item.relationName),
})
})
console.log(pointData)
points.value = map.value.addPoint({
key: key,
size: [100, 500],
data: [
{
name: '测试',
x: -275.5563452697323,
y: -718.3061904627932,
icon: point4,
},
{
name: '测试',
x: -75.5563452697323,
y: -518.3061904627932,
icon: point,
},
],
data: pointData,
})
}
const showDrawer = ref(false)
const drawerInfo = ref<any>({})
const handleMapClick = (e: any) => {
console.log('point-data: ', e)
drawerInfo.value = e
showDrawer.value = true
}
const handleComplete = (instance: any) => {
let center = [-75.5563452697323, -718.3061904627932]
if (route.query.id === '527635870583459841') {
let center = [-135.98002789627407, -722.1597065437004]
// let center = [-75.5563452697323, -718.3061904627932]
let zoom = 9.7608
if (curId.value === '527635870583459841') {
instance.getLayer('model_white_WEIHAI33').visible = true
instance.getLayer('model_white_WEIHAI33').opacity = 0.8
center = [-75.5563452697323, -518.3061904627932]
instance.getLayer('model_white_WEIHAI33').opacity = 1
center = [-38.73075358777865, -569.7527629458657]
zoom = 10
} else {
instance.getLayer('model_white_zhenxing2').visible = true
instance.getLayer('model_white_zhenxing2').opacity = 0.8
......@@ -129,7 +144,7 @@ export default defineComponent({
i += 2
if (i > 0) {
setTimeout(() => {
map.value.focus(...center, 9)
map.value.focus(...center, zoom)
}, 500)
clearInterval(timer)
}
......@@ -143,7 +158,7 @@ export default defineComponent({
{ name: '周边设施', key: '小区设施' },
{ name: '监控设施', key: '监控' },
])
if (route.query.id === '527635870583459841') {
if (curId.value === '527635870583459841') {
btns.value = [
{ name: '美丽家园', key: '微更新' },
{ name: '加装电梯', key: '电梯加装' },
......@@ -163,7 +178,7 @@ export default defineComponent({
await ajax.get({
url: api.GET_COMMUNITY_FACILITY,
params: {
bigscreenCommunityId: route.query.id,
bigscreenCommunityId: curId.value,
classification: key,
pageSize: 1000,
},
......@@ -171,6 +186,8 @@ export default defineComponent({
).data
initMapPoints(key, content)
map.value.hideCommunity()
// map.value.setFilter(['1408241008852645'])
// map.value.showCommunity()
curBtn.value = key
}
return {
......@@ -178,6 +195,8 @@ export default defineComponent({
title,
map,
handleComplete,
showDrawer,
drawerInfo,
handleMapClick,
btns,
curBtn,
......@@ -189,6 +208,10 @@ export default defineComponent({
<style lang="stylus" scoped>
@import '../components/MyComponent/main.styl'
.community-device
$full()
img
width 50%
.btns
position fixed
z-index 9999
......
src/view/community/combine.vue
View file @ f3d3fdad
......@@ -46,71 +46,13 @@ export default defineComponent({
name: 'Combine',
components: { Step },
setup() {
const curTab = ref('securityList')
const curTab = ref('cleanList')
const tabs = ref([
{ key: 'securityList', name: '安全' },
{ key: 'cleanList', name: '干净' },
{ key: 'orderlyList', name: '有序' },
{ key: 'securityList', name: '安全' },
])
const list = computed(() => store.state.combineData[curTab.value] || [])
// const list = ref([
// {
// name: '振兴小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-03-13 13:23:08',
// cur: 2,
// },
// {
// name: '振兴小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-03-13 13:23:08',
// cur: 3,
// },
// {
// name: '振兴小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-03-13 13:23:08',
// cur: 4,
// },
// {
// name: '振兴小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-03-13 13:23:08',
// cur: 5,
// },
// {
// name: '振兴小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-03-13 13:23:08',
// cur: 2,
// },
// {
// name: '振兴小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-03-13 13:23:08',
// cur: 3,
// },
// {
// name: '振兴小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-03-13 13:23:08',
// cur: 4,
// },
// {
// name: '振兴小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-03-13 13:23:08',
// cur: 5,
// },
// ])
return {
steps: ['发现', '立案', '派遣', '处置', '核查', '结案'],
tabs,
......
src/view/community/community-photo.vue
View file @ f3d3fdad
......@@ -4,27 +4,67 @@
v-for="item in list"
:key="item.name"
:style="`background:url(${item.photo}) 100% / 100% 100% no-repeat`"
@click="handleClick(item.id)"
>
<p>{{ item.name }}</p>
<div class="mask">
<img src="@/assets/images/play.png" />
</div>
</div>
<m-modal v-model="showModal" title="视频" width="50%">
<VideoComponent v-if="showModal" :video-src="src" />
</m-modal>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent, ref } from 'vue'
import photo1 from '@/assets/images/community1.png'
import photo2 from '@/assets/images/community2.png'
import photo3 from '@/assets/images/community3.png'
import { ajax } from '@/ajax'
import VideoComponent from '../components/video-component.vue'
export default defineComponent({
name: 'CommunityPhoto',
components: { VideoComponent },
setup() {
const showModal = ref(false)
const src = ref<string | null>(null)
const handleClick = async (id: string) => {
if (!id) return
const [{ remark2 }] = (
await ajax.get({
url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
})
).data
src.value = remark2
showModal.value = true
}
return {
list: [
{ name: '重庆北路205号入口', photo: photo1 },
{ name: '重庆北路205号道路', photo: photo2 },
{ name: '重庆北路205号电梯', photo: photo3 },
// {
// name: '威海路163',
// photo: photo1,
// id: '05e1a5f24a224d66955ba2d22d6f64d3',
// },
// {
// name: '威海路167',
// photo: photo2,
// id: 'fc82739cb3354262850c715aa9098c83',
// },
// {
// name: '成都北路140',
// photo: photo3,
// id: '3c23b0ecd6bb4d73842617010a84cbcf',
// },
],
handleClick,
showModal,
src,
}
},
})
......@@ -42,6 +82,22 @@ export default defineComponent({
>div
height 32%
position relative
cursor pointer
.mask
$center()
display flex
position absolute
width 100%
height 100%
background-color rgba(0,0,0,0.5)
opacity 0
transition opacity .3s ease-in-out
>img
width .4rem
height @width
&:hover
.mask
opacity 1
>p
position absolute
right 0
......
src/view/community/left-section.vue
View file @ f3d3fdad
......@@ -10,24 +10,24 @@
<img src="@/assets/images/p11.png" />
<div>
<p>健康</p>
<m-count class="count" :value="92" />
<m-count class="count" :value="healthVal" />
</div>
</div>
<div>
<!-- <div>
<img src="@/assets/images/p12.png" />
<div>
<p>疫苗接种率</p>
<m-count class="count" :value="57" />%
</div>
</div> -->
</div>
</div>
</div>
</div>
<di v>
<div>
<Brief :list="summary.slice(0, 3)" size="0.32rem" />
<h1></h1>
<Brief :list="summary.slice(3)" size="0.32rem" />
</di>
</div>
<div class="buildings">
<div
v-for="item in buildingList"
......@@ -101,6 +101,17 @@ export default defineComponent({
const memberList = ref<unknown[]>([])
const addrList = ref([])
const communityName = ref('')
const healthVal = ref(0)
watch(
() => store.state.issueData,
(issueData) => {
if (!issueData || issueData.length === 0) return
const [{ totalScore = 0 }] = issueData
healthVal.value = totalScore
},
{ deep: true, immediate: true }
)
watch(
() => store.state.communityInfo,
......@@ -127,6 +138,8 @@ export default defineComponent({
buildingList.value = communityList
curBuilding.value =
(communityList[0] && communityList[0].sectId) || null
addrList.value = []
memberList.value = []
selectBuilding(curBuilding.value)
},
{ deep: true, immediate: true }
......@@ -183,6 +196,7 @@ export default defineComponent({
).icMember || []
}
return {
healthVal,
communityName,
summary,
buildingList,
......@@ -282,8 +296,8 @@ export default defineComponent({
display flex
flex-direction column
justify-content space-around
width 48%
padding .03rem .07rem
width 48.2%
padding .03rem .05rem
box-sizing border-box
position relative
margin-bottom .06rem
......
src/view/community/manage-issue.vue
View file @ f3d3fdad
......@@ -18,7 +18,7 @@
:value="item.value"
type="dashboard"
:show-info="false"
:color="[getColor(item.value), '#FF0C0C']"
:color="[getColor(item.value), '#F76B1C']"
:rate="1.2"
:stroke-width="8"
:gap-degree="100"
......@@ -54,7 +54,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import { defineComponent, ref, watch } from 'vue'
import { ChartTypes } from '@/components/MyComponent'
import Circle from '../components/circle.vue'
import store from '@/store'
......@@ -121,11 +121,11 @@ export default defineComponent({
},
})
const issues = ref([
{ name: '绿化面积㎡', value: 658 },
{ name: '监控点位', value: 28 },
{ name: '垃圾箱房', value: 15 },
{ name: '非机动车位', value: 150 },
{ name: '物业服务人员', value: 168 },
{ name: '充电桩', value: 3 },
{ name: '监控点位', value: 30 },
{ name: '垃圾箱房', value: 5 },
{ name: '停车棚', value: 3 },
{ name: '物业公司', value: 4 },
])
return {
counts,
......
src/view/community/site-selector.vue 0 → 100644
View file @ f3d3fdad
<template>
<div id="site-selector" class="site-selector">
<a-select
:value="curViewType"
dropdown-class-name="site-selector-drop-down"
@select="handleChange"
>
<a-select-option
v-for="option in options"
:key="option.type"
:value="option.type"
>
{{ option.name }}
</a-select-option>
</a-select>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import store from '@/store'
import { useRouter } from 'vue-router'
export default defineComponent({
name: 'SiteSelector',
setup() {
const curViewType = computed(() => store.state.curView.type)
const options = computed(() => [
...store.state.viewOptions,
...store.state.communityOptions,
])
const router = useRouter()
const handleChange = (type: string) => {
store.commit(
'SET_CURRENT_VIEW',
options.value.find((option) => type === option.type)
)
if (store.state.curView.id) {
store.dispatch('initStationData', store.state.curView.id)
}
if (isNaN(Number(type))) {
// 小区以外的屏
router.push({
name: 'main',
})
} else {
router.push({
name: 'community',
query: { id: type },
})
}
}
return {
curViewType,
options,
handleChange,
}
},
})
</script>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
$bg = rgba(13, 39, 76, .7)
$size = .1rem
$height = .26rem
#site-selector.site-selector
position fixed
top .45rem
left calc(16vw + .1rem)
z-index 99
.ant-select
background $bg
min-width .9rem
.ant-select-selector
min-width .9rem
border-top none
border-left none
border-right none
height $height
.ant-select-selection-item
font-size $size
line-height $height
text-align center
color #fff
font-weight bold
.ant-select-arrow
font-size $size * 0.8
.site-selector-drop-down
&.ant-select-dropdown
background $bg
font-size $size
.ant-select-item
font-size $size
line-height $height / 2
.ant-select-item-option-selected:not(.ant-select-item-option-disabled)
background $bg
font-size $size
</style>
src/view/components/map.ts
View file @ f3d3fdad
declare const SMap: any
declare const Plugins: any
// declare const SMap: any
// declare const Plugins: any
export interface ConfigProp {
el: string
options: MapOptionsProp
sources: string[]
}
// export interface ConfigProp {
// el: string
// options: MapOptionsProp
// sources: string[]
// }
export interface MapOptionsProp {
viewMode?: string
center?: number[]
zooms?: number[]
zoom?: number
pitch?: number
mapStyle?: string
showBuildingBlock?: boolean
}
// export interface MapOptionsProp {
// viewMode?: string
// center?: number[]
// zooms?: number[]
// zoom?: number
// pitch?: number
// mapStyle?: string
// showBuildingBlock?: boolean
// }
class Map {
map: any
config: ConfigProp
constructor(config: ConfigProp) {
this.config = config
}
injectSource(): Promise<unknown[]> {
const promises = this.config.sources.map(
(source: string, index: number) => {
return new Promise((resolve) => {
if (document.getElementById(`_source${index}`)) {
resolve(true)
return
}
const sourceJs = document.createElement('script')
sourceJs.type = 'text/javascript'
sourceJs.src = source
sourceJs.setAttribute('id', `_source${index}`)
document.head.appendChild(sourceJs)
window.onload = () => resolve(true)
})
}
)
return Promise.all(promises)
}
}
// class Map {
// map: any
// config: ConfigProp
// constructor(config: ConfigProp) {
// this.config = config
// }
// injectSource(): Promise<unknown[]> {
// const promises = this.config.sources.map(
// (source: string, index: number) => {
// return new Promise((resolve) => {
// if (document.getElementById(`_source${index}`)) {
// resolve(true)
// return
// }
// const sourceJs = document.createElement('script')
// sourceJs.type = 'text/javascript'
// sourceJs.src = source
// sourceJs.setAttribute('id', `_source${index}`)
// document.head.appendChild(sourceJs)
// window.onload = () => resolve(true)
// })
// }
// )
// return Promise.all(promises)
// }
// }
export class S_Map extends Map {
constructor(config: ConfigProp) {
super(config)
this.injectSource().then(this.initMap)
}
initMap(): void {
this.map = new SMap.Map(this.config.el, this.config.options)
}
onLoaded(cb: (arg: unknown) => void): void {
this.map.on(SMap.MapEvent.maploaded, cb)
}
onZoomChange(cb: (arg: unknown) => void): void {
this.map.on(SMap.MapEvent.zoomchanged, cb)
}
onCenterChange(cb: (arg: unknown) => void): void {
this.map.on(SMap.MapEvent.centerchanged, cb)
}
onBlur(cb: (arg: unknown) => void): void {
this.map.on(SMap.MapEvent.blur, cb)
}
onFocus(cb: (arg: unknown) => void): void {
this.map.on(SMap.MapEvent.focus, cb)
}
onDrag(cb: (arg: unknown) => void): void {
this.map.on(SMap.MapEvent.drag, cb)
}
onClick(cb: (arg: unknown, point: unknown) => void): void {
this.map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
view.hitTest(eventParamter).then((res: any) => {
if (res.results && res.results.length > 0) {
cb(
res.results[0] && res.results[0].graphic.attributes,
eventParamter.mapPoint
)
}
})
})
}
}
// export class S_Map extends Map {
// constructor(config: ConfigProp) {
// super(config)
// this.injectSource().then(this.initMap)
// }
// initMap(): void {
// this.map = new SMap.Map(this.config.el, this.config.options)
// }
// onLoaded(cb: (arg: unknown) => void): void {
// this.map.on(SMap.MapEvent.maploaded, cb)
// }
// onZoomChange(cb: (arg: unknown) => void): void {
// this.map.on(SMap.MapEvent.zoomchanged, cb)
// }
// onCenterChange(cb: (arg: unknown) => void): void {
// this.map.on(SMap.MapEvent.centerchanged, cb)
// }
// onBlur(cb: (arg: unknown) => void): void {
// this.map.on(SMap.MapEvent.blur, cb)
// }
// onFocus(cb: (arg: unknown) => void): void {
// this.map.on(SMap.MapEvent.focus, cb)
// }
// onDrag(cb: (arg: unknown) => void): void {
// this.map.on(SMap.MapEvent.drag, cb)
// }
// onClick(cb: (arg: unknown, point: unknown) => void): void {
// this.map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
// view.hitTest(eventParamter).then((res: any) => {
// if (res.results && res.results.length > 0) {
// cb(
// res.results[0] && res.results[0].graphic.attributes,
// eventParamter.mapPoint
// )
// }
// })
// })
// }
// }
src/view/components/video-component.vue 0 → 100644
View file @ f3d3fdad
<template>
<div class="video-component">
<video
v-if="isVideo"
ref="videoRef"
class="video"
autoplay="autoplay"
controls
>
您的浏览器不支持播放此视频。
</video>
<iframe v-else class="video" :src="videoSrc" frameborder="0" />
</div>
</template>
<script lang="ts">
import {
computed,
defineComponent,
onMounted,
PropType,
ref,
nextTick,
} from 'vue'
declare const Hls: any
export default defineComponent({
name: 'VideoComponent',
props: {
videoSrc: {
type: String as PropType<string>,
required: true,
},
},
setup(props) {
const videoRef = ref<any | null>(null)
const isVideo = computed(
() => props.videoSrc && props.videoSrc.indexOf('m3u8') >= 0
)
const init = () => {
if (!videoRef.value) return
if (Hls.isSupported()) {
const hls = new Hls()
hls.loadSource(props.videoSrc)
hls.attachMedia(videoRef.value)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play()
})
} else if (videoRef.value.canPlayType('application/vnd.apple.mpegurl')) {
videoRef.value.src = props.videoSrc
videoRef.value.addEventListener('canplay', () => {
videoRef.value.play()
})
}
}
onMounted(async () => {
await nextTick()
init()
})
return {
videoRef,
isVideo,
}
},
})
</script>
<style lang="stylus" scoped>
.video-component
.video
width 100%
height 100%
</style>
src/view/components/view-selector.vue
View file @ f3d3fdad
......@@ -30,8 +30,10 @@ export default defineComponent({
'SET_CURRENT_VIEW',
options.value.find((option) => type === option.type)
)
if (store.state.curView.id) {
store.dispatch('initStationData', store.state.curView.id)
}
}
return {
curViewType,
options,
......
src/view/main.vue
View file @ f3d3fdad
......@@ -47,7 +47,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { computed, defineComponent, ref, watch } from 'vue'
import ManageBasic from './left/manage-basic.vue'
import Command from './left/command.vue'
import PublicWork from './right/public-work.vue'
......@@ -59,7 +59,6 @@ import MapBtns from './components/map-btns.vue'
import CaseDrawer from './drawers/case-drawer.vue'
import PopulationDrawer from './drawers/population-drawer.vue'
import store from '@/store'
import { ajax, api } from '@/ajax'
export default defineComponent({
name: 'Main',
......@@ -76,7 +75,7 @@ export default defineComponent({
PopulationDrawer,
},
setup() {
store.commit('SET_CURRENT_VIEW', { name: '南京东路街道', type: 'street' })
// store.commit('SET_CURRENT_VIEW', { name: '南京东路街道', type: 'street' })
store.dispatch('initData')
const curViewType = computed(() => store.state.curView.type)
const curTheme = computed(() => store.state.curTheme)
......@@ -97,22 +96,35 @@ export default defineComponent({
const fullScreen = ref(false)
const showDrawer = ref(false)
const map = ref<any>(null)
const mapInstance = ref<any>(null)
ajax
.get({
url: api.GET_CASE,
})
.then((res) => {
console.log(res)
})
// watch(
// () => curViewType.value,
// (val) => {
// 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_zw').visible = true
instance.getLayer('model_white_zw').opacity = 0.8
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 {
map,
mapInstance,
curViewType,
curTheme,
streetComponentList,
......
src/view/right/business-entry.vue
View file @ f3d3fdad
<template>
<m-card title="业务入口">
<!-- <m-card title="业务入口"> -->
<m-card title="重点工作">
<div class="content">
<div @click="routeTo('527635870583459840')">振兴小区</div>
<div @click="routeTo('527635870583459841')">威海路62弄小区</div>
<div
v-for="entry in entrys"
:key="entry.type"
@click="routeTo(entry.type)"
>
{{ entry.name }}
</div>
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent, computed } from 'vue'
import { useRouter } from 'vue-router'
import store from '@/store'
export default defineComponent({
name: 'BussinessEntry',
setup() {
const entrys = computed(() => store.state.communityOptions)
const router = useRouter()
const routeTo = (id: string) => {
router.push({
......@@ -23,6 +31,7 @@ export default defineComponent({
})
}
return {
entrys,
routeTo,
}
},
......
src/view/right/duty-analysis.vue
View file @ f3d3fdad
......@@ -36,9 +36,9 @@
</div>
</div>
</div>
<div>
<div class="bar-chart">
<SubTitle>居委事件数量</SubTitle>
<div v-if="showChart && barOption.series.length > 0" class="chart bar">
<div v-if="showChart && barOption.series.length > 0" class="chart">
<m-bar :dataset="barData" :option="barOption" />
</div>
<m-empty v-else />
......@@ -46,7 +46,7 @@
<div class="rank">
<SubTitle>分类排行</SubTitle>
<div v-if="rankList.length > 0" class="content">
<m-scroll :length="rankList.length" :limit="3">
<m-scroll :length="rankList.length" :limit="4">
<m-progress
v-for="rank in rankList"
:key="rank.name"
......@@ -94,7 +94,9 @@ export default defineComponent({
{ name: '月', key: 'month' },
])
const curOption = ref('month')
watch([() => curTab.value, () => store.state.curView.id], ([type, id]) => {
watch(
[() => curTab.value, () => store.state.curView.id],
([type, id]) => {
if (!id) return
store.dispatch('getDutyRank', {
gridId: id,
......@@ -112,7 +114,9 @@ export default defineComponent({
gridId: id,
managementType: type,
})
})
},
{ immediate: true }
)
const rankList = computed(() => {
const data = store.state.dutyRanking[curOption.value] || []
......@@ -174,7 +178,7 @@ export default defineComponent({
legend: {
right: '2%',
left: '10%',
top: '-4%',
top: '-2%',
itemWidth: fontSize.value * 0.6,
itemHeight: fontSize.value * 0.6,
},
......@@ -213,7 +217,7 @@ export default defineComponent({
series: [
{
type: 'pie',
radius: [0, '90%'],
radius: [0, '80%'],
center: ['40%', '50%'],
label: {
show: false,
......@@ -265,8 +269,9 @@ export default defineComponent({
border-color @color
background rgba(50,197,255,.2)
.rank
>div
max-height .6rem
min-height 1rem
.content
height 1rem
overflow hidden
.place
.content
......@@ -275,12 +280,14 @@ export default defineComponent({
>div
width 32%
height .6rem
.chart
.bar-chart
height 1.6rem
.chart
width 100%
height 1.2rem
height 90%
.duty-type
width 100%
height .6rem
height .8rem
display flex
.chart
width 25%
......
src/view/right/duty.vue
View file @ f3d3fdad
......@@ -57,17 +57,17 @@ export default defineComponent({
return [
{
name: '综合管理',
value: [comprehensiveNum, comprehensiveEndNum],
value: [comprehensiveEndNum, comprehensiveNum],
icon: icon6,
},
{
name: '街面管理',
value: [streetNum, streetEndNum],
value: [streetEndNum, streetNum],
icon: icon7,
},
{
name: '小区管理',
value: [communityNum, communityEndNum],
value: [communityEndNum, communityNum],
icon: icon8,
},
]
......
src/view/right/public-work.vue
View file @ f3d3fdad
......@@ -6,11 +6,11 @@
</m-card>
<m-card mode="border">
<div class="duty"><Duty /></div>
<div class="neighbor"><NeighborEntry /></div>
<div class="neighbor"><BussinessEntry /></div>
</m-card>
<m-card mode="border">
<div class="analysis"><DutyAnalysis /></div>
<div class="task"><KeyTask /></div>
<!-- <div class="task"><KeyTask /></div> -->
</m-card>
</div>
</template>
......@@ -20,21 +20,22 @@ import { defineComponent } from 'vue'
import Convenient from './convenient.vue'
import BeautyHome from './beauty-home.vue'
import Duty from './duty.vue'
import NeighborEntry from './neighbor-entry.vue'
// import NeighborEntry from './neighbor-entry.vue'
import BussinessEntry from './business-entry.vue'
import DutyAnalysis from './duty-analysis.vue'
import KeyTask from './key-task.vue'
// import KeyTask from './key-task.vue'
export default defineComponent({
name: 'PublicWork',
components: {
Convenient,
BeautyHome,
NeighborEntry,
// NeighborEntry,
BussinessEntry,
Duty,
DutyAnalysis,
KeyTask,
// KeyTask,
},
setup() {},
})
</script>
......
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