Skip to content

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

对接口暂存

parent 36f956ec
Show whitespace changes
Inline Side-by-side
Showing with 313 additions and 123 deletions
src/ajax/api.ts
View file @ 8c46ddd3
......@@ -15,4 +15,10 @@ export default {
GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表
/** 小区屏 */
GET_COMMUNITY_INFO: '/service-special-nandong/bigscreenCommunity/statistical', // 小区档案
GET_COMMUNITY_FACILITY: '/service-special-nandong/communityRelations', // 小区设施
GET_ISSUE_LIST: '/service-special-nandong/management/factors', // 管理要素列表
GET_COMBINE_LIST: '/service-special-nandong/league/linkage', // 联勤联动列表
}
src/ajax/axios.ts
View file @ 8c46ddd3
......@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
(config) => {
// 添加token
config.headers.Authorization =
'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE3Njg3MTY2LCJqdGkiOiIwMTJmNGRlOC1jZTlkLTQ0NzYtYmQzMC0yMGJlZGQyMjE1Y2QiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTc2Nzk5NjY2Mjd9.eZ1fXintx7bEW1xeglW_10yGje4Bx5qpsCeQPo_0VBm3Di2kb01_0nYX98rtJNloIZVv8mSyZC8dG-xqBbF4i8PtrkvphLvEDLs3ztQu1JckLEswumDx7yVjmOaLo2FegvWskltbYpH32nkG4jU9WgAJSV0MLNe2x9q76rlTP8EyrnOYOEwK2KHW6lszEmZf4YeXHkpaF1XzqwSJCRkplKn6Yv4bmdCGiOxCTX8gGxLaatkv4_uH8g6ji4sUjeS_VIXL1UvuOUrPOLGoVvPv0hxsSe3EPP8MJw7NVYWjT8l_DtXWGHF9kuIGFpU4ILrSEsAN1obqxAQYhoynrk8F3Q'
'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMCIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4MzEwOTAxLCJqdGkiOiI5ZTJhNTBiYy0wM2VlLTRiYzAtOTE5ZC1iMmFiZTViNGEyMDMiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTgzMDM3MDEzMTd9.VJSxP0r6E0osthNMnIr5t-HWXtbNmLVkWRF4ZS_9HmwD5qkqAp1mge5Imni8dVpvQ686EbSt4QFLIvzgFY7rGAC0EQvq5VsTghUdtb7uyaRc-YnzTDEWCyXpirgk75Uq53MFkJh82kUlAYlNvsBEA9YPoepL51Rj8BeERA32_mj8KA70AzFEKzfHYVCNcLy0CQ6Q5CVa5UTwINGtieRhpdbBOXCL3FheB65wX8JRh1y4pJGMAS-kpwJgt-uqx9eEavWUICPEsRsAiaZ-RTWRfazM1B6fvLals9NvNnDPdjybUm62AcZrzC5QZNuOBsq0uSkIt-n9Ygkc8DoKgGRVwA'
return config
},
(error) => {
......
src/components/MyComponent/MyMap/my-map.vue
View file @ 8c46ddd3
......@@ -3,14 +3,7 @@
</template>
<script lang="ts">
import {
computed,
defineComponent,
nextTick,
onMounted,
PropType,
ref,
} from 'vue'
import { defineComponent, nextTick, onMounted, PropType } from 'vue'
declare const SMap: any
declare const Plugins: any
......
src/store/actions.ts
View file @ 8c46ddd3
import { ajax, api } from '@/ajax'
import { Dispatch, Commit } from 'vuex'
export default {
initData({ dispatch }: { dispatch: Dispatch }): void {
dispatch('getPropertySummary')
......@@ -34,4 +33,29 @@ export default {
const { content } = (await ajax.get({ url: api.GET_STATION })).data
commit('SET_STATION_LIST', content)
},
/** 小区屏 */
initCommunityData(
{ dispatch }: { dispatch: Dispatch },
query: { id: string }
): void {
dispatch('getCommunityInfo', query)
dispatch('getIssueList', query)
},
async getCommunityInfo({ commit }: { commit: Commit }): Promise<void> {
const { content } = (await ajax.get({ url: api.GET_COMMUNITY_INFO })).data
commit('SET_COMMUNITY_INFO', content[1])
},
async getIssueList(
{ commit }: { commit: Commit },
query: { id: string }
): Promise<void> {
const { content } = (
await ajax.get({
url: api.GET_ISSUE_LIST,
params: { bigscreenCommunityId: query.id },
})
).data
commit('SET_ISSUE_DATA', content)
},
}
src/store/index.ts
View file @ 8c46ddd3
......@@ -8,6 +8,25 @@ export interface ViewType {
name: string
type: 'street' | 'work1' | 'work2' | 'work3' | 'community'
}
export interface CommunityInfoProp {
bigscreenCommunityName: string // 小区名称
chargingPile: number //充电桩
totCommunity: number //小区数
totCmp: number //物业企业数
totForOld: number //为老设施
parkingSpace: number //车棚
totHous: number //总户数
communityList: { sectName: string; sectId: string }[] // 小区列表
icMember: unknown[] // 业委会列表
}
export interface IssueProp {
date: string //日期
securityScore: number //安全
cleanScore: number //干净
orderlyScore: number //有序
totalScore: number //综合评分
}
export interface GlobalStateProps {
showLoading: boolean
curView: ViewType
......@@ -16,6 +35,8 @@ export interface GlobalStateProps {
propertySummary: { [key: string]: number }
caseList: unknown[]
stationList: unknown[]
communityInfo: Partial<CommunityInfoProp>
issueData: IssueProp[]
}
export default createStore<GlobalStateProps>({
state,
......
src/store/mutations.ts
View file @ 8c46ddd3
import { GlobalStateProps, ThemeType, ViewType } from './index'
import {
GlobalStateProps,
ThemeType,
ViewType,
CommunityInfoProp,
IssueProp,
} from './index'
export default {
SET_LOADING(state: GlobalStateProps, val: boolean): void {
......@@ -19,7 +25,14 @@ export default {
SET_CASE_LIST(state: GlobalStateProps, data: unknown[]): void {
state.caseList = data
},
SET_MUTATION_LIST(state: GlobalStateProps, data: unknown[]): void {
SET_STATION_LIST(state: GlobalStateProps, data: unknown[]): void {
state.stationList = data
},
/** 小区页面 */
SET_COMMUNITY_INFO(state: GlobalStateProps, data: CommunityInfoProp): void {
state.communityInfo = data
},
SET_ISSUE_DATA(state: GlobalStateProps, data: IssueProp[]): void {
state.issueData = data
},
}
src/store/state.ts
View file @ 8c46ddd3
......@@ -13,4 +13,6 @@ export default {
propertySummary: {},
caseList: [],
stationList: [],
communityInfo: {},
issueData: [],
} as GlobalStateProps
src/view/community.vue
View file @ 8c46ddd3
......@@ -35,18 +35,31 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { defineComponent, ref, watch } from 'vue'
import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue'
import store from '@/store'
import point from '@/assets/images/point.png'
import { useRoute } from 'vue-router'
export default defineComponent({
name: 'Main',
components: { LeftSection, RightSection },
setup() {
const loading = ref(true)
store.commit('SET_CURRENT_VIEW', { name: '振兴小区', type: 'community' }) // 使标题不显示公共的3个按钮
const initData = (id: string | null) => {
store.dispatch('initCommunityData', {
id: id || '527635870583459840',
})
}
watch(
() => useRoute().query,
(cur) => {
// initData(cur.id)
},
{ deep: true }
)
store.commit('SET_CURRENT_VIEW', { name: '', type: 'community' }) // 使标题不显示公共的3个按钮
const map = ref<any>(null)
const initMap = () => {
const points = map.value.addPoint({
......@@ -57,12 +70,16 @@ export default defineComponent({
})
console.log('points', points)
}
const handleMapClick = (e) => {
const handleMapClick = (e: any) => {
console.log('point-data: ', e)
}
const handleComplete = (instance: any) => {
instance.getLayer('model_white_zhenxing2').visible = true
instance.getLayer('model_white_zhenxing2').opacity = 0.8
// instance.getLayer('model_white_zw').visible = true
// instance.getLayer('model_white_WEIHAI33').visible = true
// instance.getLayer('model_white_zw').opacity = 0.8
// instance.getLayer('model_white_WEIHAI33').opacity = 0.8
let i = -90
map.value.rotate(i)
setTimeout(() => {
......
src/view/community/combine.vue
View file @ 8c46ddd3
......@@ -32,6 +32,7 @@
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Step from '../components/step.vue'
import store from '@/store'
export default defineComponent({
name: 'Combine',
......
src/view/community/left-section.vue
View file @ 8c46ddd3
......@@ -30,29 +30,29 @@
</div>
<div class="buildings">
<div
v-for="item in ['紫光大厦', '文海大楼', '振兴小区', '振华大楼']"
:key="item"
:class="{ on: curBuilding === item }"
@click="curBuilding = item"
v-for="item in buildingList"
:key="item.sectId"
:class="{ on: curBuilding === item.sectId }"
@click="selectBuilding(item.sectId)"
>
{{ item }}
{{ item.sectName }}
</div>
</div>
<div class="address">
<div
v-for="(item, i) in addrList"
:key="i"
:style="`border-left-color: ${getColor(item.type)}`"
:style="`border-left-color: ${getColor(item.classification)}`"
>
<div>
<img :src="getIcon(item.name)" />
<p>{{ item.address }}</p>
<img :src="getIcon(item.relationName)" />
<p>{{ item.sectName }}</p>
</div>
<div class="type">
<span>{{ item.name }}</span>
<span>{{ item.type }}</span>
<span>{{ item.relationName }}</span>
<span>{{ item.classification }}</span>
</div>
<i :style="`background:${getColor(item.type)}`" />
<i :style="`background:${getColor(item.classification)}`" />
</div>
</div>
<div class="industry">
......@@ -61,9 +61,10 @@
业委会
</div>
<div class="content">
<div v-for="item in 3" :key="item">
<p>姓名</p>
<p>XX业委会主任</p>
<div v-for="(item, i) in memberList" :key="i">
<p>{{ item.dirName }}</p>
<p>{{ getDuty(item.dirDuty) }}</p>
<p>{{ item.hocName }}</p>
</div>
</div>
</div>
......@@ -72,7 +73,7 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { computed, defineComponent, ref, watch } from 'vue'
import Brief, { BriefProp } from '@/view/components/brief.vue'
import p1 from '@/assets/images/p1.png'
import p2 from '@/assets/images/p2.png'
......@@ -87,96 +88,107 @@ import type4 from '@/assets/images/type4.png'
import type5 from '@/assets/images/type5.png'
import type6 from '@/assets/images/type6.png'
import type7 from '@/assets/images/type7.png'
import store from '@/store'
import { ajax, api } from '@/ajax'
export default defineComponent({
name: 'LeftSection',
components: { Brief },
setup() {
const summary = ref<BriefProp[]>([
{ name: '小区数', value: 3, icon: p1 },
{ name: '总户数', value: 2715, icon: p2 },
{ name: '物业企业', value: 3, icon: p3 },
{ name: '充电桩', value: 150, icon: p4 },
{ name: '车位', value: 2500, icon: p5 },
{ name: '为老设施', value: 15, icon: p6 },
])
const addrList = ref([
{
name: '封闭',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '门岗',
},
{
name: '有门岗无值班',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '门岗',
},
{
name: '集合',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老',
},
{
name: '助餐',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老',
},
{
name: '助浴',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老',
},
{
name: '充电桩',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '公共',
},
{
name: '停车',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '公共',
},
{
name: '充电桩',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '公共',
const basicData = computed(() => store.state.communityInfo)
const summary = ref<BriefProp[]>([])
const buildingList = ref<unknown[]>([])
const curBuilding = ref<string | null>(null)
const memberList = ref<unknown[]>([])
const addrList = ref([])
watch(
() => basicData.value,
(cur) => {
const {
totCommunity = 0,
totHous = 0,
totCmp = 0,
chargingPile = 0,
parkingSpace = 0,
totForOld = 0,
communityList = [],
} = cur
summary.value = [
{ name: '小区数', value: totCommunity, icon: p1 },
{ name: '总户数', value: totHous, icon: p2 },
{ name: '物业企业', value: totCmp, icon: p3 },
{ name: '充电桩', value: chargingPile, icon: p4 },
{ name: '车棚', value: parkingSpace, icon: p5 },
{ name: '为老设施', value: totForOld, icon: p6 },
]
buildingList.value = communityList
curBuilding.value = communityList && communityList[0].sectId
selectBuilding(curBuilding.value)
},
])
{ deep: true }
)
const getColor = (type: string): string => {
switch (type) {
case '门岗':
return '#826AFA'
case '为老':
return '#FF6161'
case '公共':
case '小区设施':
return '#8ED617'
default:
return '#fff'
}
}
const getIcon = (type: string): unknown => {
const getIcon = (type: string): string => {
if (!type) return type2
if (type.indexOf('集合') >= 0) return type3
if (type.indexOf('助餐') >= 0) return type6
if (type.indexOf('助浴') >= 0) return type7
if (type.indexOf('充电') >= 0) return type1
if (type.indexOf('车棚') >= 0) return type5
if (type.indexOf('垃圾') >= 0) return type4
return type2
}
const getDuty = (type: string): string => {
switch (type) {
case '集合':
return type3
case '助餐':
return type6
case '助浴':
return type7
case '充电桩':
return type1
case '停车':
return type5
case '1':
return '主任'
case '2':
return '预留印鉴副主任'
case '3':
return '副主任'
default:
return type2
return '业委会成员'
}
}
const curBuilding = ref('紫光大厦')
async function selectBuilding(id: string | undefined): Promise<void> {
if (!id) return
curBuilding.value = id
addrList.value = (
await ajax.get({
url: api.GET_COMMUNITY_FACILITY,
params: { sectId: id },
})
).data.content.filter((item: any) => item.classification != '微更新')
memberList.value =
(
buildingList.value &&
(buildingList.value.find(
(b: any) => b.sectId === curBuilding.value
) as any)
).icMember || []
}
return {
summary,
buildingList,
curBuilding,
addrList,
getColor,
getIcon,
curBuilding,
memberList,
getDuty,
selectBuilding,
}
},
})
......@@ -237,6 +249,8 @@ export default defineComponent({
position relative
color #aaa
opacity .8
text-align center
padding 0 .08rem
&:hover
opacity 1
color #fff
......@@ -258,17 +272,21 @@ export default defineComponent({
.address
display flex
flex-wrap wrap
justify-content space-around
>div
display flex
flex-direction column
justify-content space-around
width 48%
padding .03rem .07rem
box-sizing border-box
position relative
margin-bottom .05rem
margin-bottom .06rem
margin-right @margin-bottom
background rgba(33,58,89,.2)
border .01rem solid rgba(91,213,255,.1)
border-left .02rem solid transparent
overflow hidden
min-height .6rem
>div
display flex
align-items center
......@@ -305,15 +323,22 @@ export default defineComponent({
.content
display flex
justify-content space-between
flex-wrap wrap
overflow hidden
>div
flex 1
display flex
flex-direction column
justify-content center
padding 0 .12rem
padding .05rem .08rem
min-height .5rem
width 31%
margin-bottom .05rem
margin-right @margin-bottom
background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
p
&:nth-of-type(2)
font-size .08rem
color #aaa
&:first-child
font-size .09rem
color #fff
</style>
src/view/community/manage-issue.vue
View file @ 8c46ddd3
......@@ -8,7 +8,7 @@
color="rgba(91,213,255,.6)"
>
<span class="sum-txt">
评分 <m-count class="count" :value="92"></m-count>
评分 <m-count class="count" :value="totalValue"></m-count>
</span>
</m-wave>
</div>
......@@ -54,43 +54,45 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { computed, defineComponent, ref, watchEffect } from 'vue'
import { ChartTypes } from '@/components/MyComponent'
import Circle from '../components/circle.vue'
import store from '@/store'
export default defineComponent({
name: 'ManageIssue',
components: { Circle },
setup() {
const counts = ref([
{ name: '安全', value: 59 },
{ name: '干净', value: 85 },
{ name: '有序', value: 99 },
])
const issueData = computed(() => store.state.issueData)
const counts = ref<{ name: string; value: number }[]>([])
const totalValue = ref(0)
watchEffect(() => {
// const {
// securityScore = 0,
// cleanScore = 0,
// orderlyScore = 0,
// totalScore = 0,
// } = issueData.value && issueData.value[0]
// counts.value = [
// { name: '安全', value: securityScore },
// { name: '干净', value: cleanScore },
// { name: '有序', value: orderlyScore },
// ]
// totalValue.value = totalScore
})
const getColor = (count: number) => {
if (count <= 60) return '#FF9C15'
if (count < 90) return '#FFE211'
else return '#19FF2B'
}
const data = ref<ChartTypes.DatasetComponentOption>({
const data = ref({
dimensions: [
{ name: 'date', displayName: '日期' },
{ name: 'safe', displayName: '安全' },
{ name: 'clean', displayName: '干净' },
{ name: 'order', displayName: '有序' },
],
source: [
{ date: '0325', safe: 60, clean: 80, order: 70 },
{ date: '0326', safe: 70, clean: 70, order: 60 },
{ date: '0327', safe: 80, clean: 80, order: 80 },
{ date: '0328', safe: 90, clean: 50, order: 70 },
{ date: '0329', safe: 80, clean: 90, order: 80 },
{ date: '0330', safe: 70, clean: 80, order: 80 },
{ date: '0331', safe: 60, clean: 50, order: 90 },
{ date: '0401', safe: 60, clean: 80, order: 70 },
{ date: '0402', safe: 70, clean: 60, order: 80 },
{ date: '0403', safe: 90, clean: 80, order: 70 },
{ name: 'securityScore', displayName: '安全' },
{ name: 'cleanScore', displayName: '干净' },
{ name: 'orderlyScore', displayName: '有序' },
],
source: issueData.value,
})
const option = ref<ChartTypes.LineOption>({
color: [
......@@ -110,6 +112,7 @@ export default defineComponent({
])
return {
counts,
totalValue,
getColor,
data,
option,
......
src/view/components/map.ts 0 → 100644
View file @ 8c46ddd3
declare const SMap: any
declare const Plugins: any
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
}
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
)
}
})
})
}
}
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