Skip to content

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

公共安全右侧接口对接

parent b4ffa26d
Show whitespace changes
Inline Side-by-side
Showing with 1237 additions and 353 deletions
.vscode/settings.json
View file @ 3bbe493c
...@@ -26,4 +26,9 @@ ...@@ -26,4 +26,9 @@
] ]
}, },
"editor.formatOnSave": true, "editor.formatOnSave": true,
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
} }
\ No newline at end of file
src/ajax/api.ts
View file @ 3bbe493c
...@@ -15,4 +15,17 @@ export default { ...@@ -15,4 +15,17 @@ export default {
GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表 GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表 GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表 GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表
GET_PUBLICSAFE_RIGHT_GATE: '/service-special-nandong/ironGate/statistical', // 公共安全-右侧-门岗分布
GET_PUBLICSAFE_RIGHT_SAFEMAP: '/service-special-nandong/peaceMaps', // 公共安全-右侧-平安地图
GET_PUBLICSAFE_TRUE_PEOPLE: '/service-special-nandong/personnel/statistical', // 公共安全-右侧-实有人口
GET_PUBLICSAFE_HOUSE: '/service-basicdatasync-ddd/resource/count', // 公共安全-右侧-居住房屋
GET_PUBLICSAFE_NONRESIDENT:
'/service-basicdatasync-ddd/nonResident/statistical', // 公共安全-右侧-非居房屋
GET_PUBLICSAFE_TRUE_COMPANY: '/service-special-nandong/company/statistical', // 公共安全-右侧-实有单位
GET_PUBLICSAFE_SOS_MATERIAL: '/service-special-nandong/emergencySupplies', // 公共安全-右侧-应急物资储备
GET_PUBLICSAFE_OUTHOUSEWALL:
'/service-special-nandong/inspection/statistical', // 公共安全-右侧-房屋外立面
GET_PUBLICSAFE_BUILDINGS: '/service-special-nandong/inspections', // 公共安全-右侧-重点关注楼宇
GET_PUBLICSAFE_PIEDATA: '/service-special-nandong/inspection/getPie', // 公共安全-右侧-房屋外立面饼图
GET_PUBLICSAFE_NEWFIND: '/service-special-nandong/noAlert', // 公共安全-右侧-最新发现
} }
src/ajax/axios.ts
View file @ 3bbe493c
...@@ -11,7 +11,7 @@ Axios.interceptors.request.use( ...@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
(config) => { (config) => {
// 添加token // 添加token
config.headers.Authorization = config.headers.Authorization =
'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE3Njg3MTY2LCJqdGkiOiIwMTJmNGRlOC1jZTlkLTQ0NzYtYmQzMC0yMGJlZGQyMjE1Y2QiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTc2Nzk5NjY2Mjd9.eZ1fXintx7bEW1xeglW_10yGje4Bx5qpsCeQPo_0VBm3Di2kb01_0nYX98rtJNloIZVv8mSyZC8dG-xqBbF4i8PtrkvphLvEDLs3ztQu1JckLEswumDx7yVjmOaLo2FegvWskltbYpH32nkG4jU9WgAJSV0MLNe2x9q76rlTP8EyrnOYOEwK2KHW6lszEmZf4YeXHkpaF1XzqwSJCRkplKn6Yv4bmdCGiOxCTX8gGxLaatkv4_uH8g6ji4sUjeS_VIXL1UvuOUrPOLGoVvPv0hxsSe3EPP8MJw7NVYWjT8l_DtXWGHF9kuIGFpU4ILrSEsAN1obqxAQYhoynrk8F3Q' 'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4MzA5MjIzLCJqdGkiOiJmODhkY2FhMy1iNGIyLTQ3OGUtYjhmMC1kZTQ5ZWU5NWUxYjciLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTgzMDIwMjM4NzR9.XRQSEkUuLSh8QmqGkXxFs_rL4jUuVKrYBuWa7E2DK2rYROvAe4ROJnyQAw8yKbTnZVWLwcKjPUqgVVr_OCW0MeY00pq8YaphxZTAlDdcQ88aJ_04l1F29w55n4lWZqIzveAQxOw6-U_0vTCHGzgBKHfUlbAMxG2WR54b1BDL32hqNGPjZcs7VoFZGi6sfiAYWKu8v_KeOe13tE5BelRYBxNklWYfG1npU8tKM6O3K1hANFpDmZRVSN70PQox0oiZHwJR_61RUsFPCbh-4qoI2H3fyiQMdrz7zsxakcAb2GGr0GJGoNpSMpg-qkydmIkdV3O_lFzHt4CMY78TZPg2lg'
return config return config
}, },
(error) => { (error) => {
......
src/components/MyComponent/MyModal/my-modal.vue
View file @ 3bbe493c
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
> >
<div <div
class="my-modal" class="my-modal"
:style="`width:${width};transform: translateX(${offset})`" :style="`width:${width};transform: translateX(${offset}) translateY(${translateY})`"
> >
<span class="edge left-top" /> <span class="edge left-top" />
<span class="edge right-top" /> <span class="edge right-top" />
...@@ -72,6 +72,10 @@ export default defineComponent({ ...@@ -72,6 +72,10 @@ export default defineComponent({
type: String as PropType<string>, type: String as PropType<string>,
default: '0', default: '0',
}, },
translateY: {
type: String as PropType<string>,
default: '0',
},
maskClosable: { maskClosable: {
type: Boolean as PropType<boolean>, type: Boolean as PropType<boolean>,
default: true, default: true,
...@@ -98,22 +102,22 @@ export default defineComponent({ ...@@ -98,22 +102,22 @@ export default defineComponent({
right 0 right 0
bottom 0 bottom 0
left 0 left 0
background rgba(0,0,0,0.1) background rgba(0, 0, 0, 0.1)
z-index 9999 z-index 9999
$center() $center()
.my-modal .my-modal
color #fff color #fff
z-index 99999 z-index 99999
padding .04rem padding 0.04rem
background transparent background transparent
position relative position relative
$blur(0.01rem) $blur(0.01rem)
.edge .edge
display block display block
position absolute position absolute
width .1rem width 0.1rem
height @width height @width
border .01rem solid $secondary-color border 0.01rem solid $secondary-color
&.left-top &.left-top
top 0 top 0
left 0 left 0
...@@ -136,38 +140,38 @@ export default defineComponent({ ...@@ -136,38 +140,38 @@ export default defineComponent({
border-top none border-top none
.inner .inner
$blur() $blur()
background rgba(6,34,67,.8) background rgba(6, 34, 67, 0.8)
border .01rem solid rgba(91,213,255,.3) border 0.01rem solid rgba(91, 213, 255, 0.3)
head head
height .28rem height 0.28rem
background url('@/assets/images/modal-head-bg.png') 100% / 100% 100% no-repeat background url('@/assets/images/modal-head-bg.png') 100% / 100% 100% no-repeat
display flex display flex
align-items center align-items center
position relative position relative
>p >p
font-size .14rem font-size 0.14rem
font-family $font-zcool font-family $font-zcool
text-indent .14rem text-indent 0.14rem
line-height 1.5 line-height 1.5
>img >img
width .14rem width 0.14rem
height @width height @width
position absolute position absolute
&:nth-of-type(1) &:nth-of-type(1)
width .24rem width 0.24rem
height @width height @width
left -0.095rem left -0.095rem
&:nth-of-type(2) &:nth-of-type(2)
right .05rem right 0.05rem
cursor pointer cursor pointer
transition transform .3s ease-in-out transition transform 0.3s ease-in-out
&:hover &:hover
transform rotate(180deg) transform rotate(180deg)
.content .content
min-height 30vh min-height 30vh
max-height 80vh max-height 80vh
padding .1rem padding 0.1rem
overflow-y auto overflow-y auto
overflow-x hidden overflow-x hidden
font-size .1rem font-size 0.1rem
</style> </style>
src/store/actions.ts
View file @ 3bbe493c
import { ajax, api } from '@/ajax' import { ajax, api } from '@/ajax'
import { Dispatch, Commit } from 'vuex' import { Dispatch, Commit } from 'vuex'
import inImg from '@/assets/images/in.png'
import china from '@/assets/images/china.png'
import out from '@/assets/images/out.png'
export default { export default {
initData({ dispatch }: { dispatch: Dispatch }): void { initData({ dispatch }: { dispatch: Dispatch }): void {
...@@ -34,4 +37,191 @@ export default { ...@@ -34,4 +37,191 @@ export default {
const { content } = (await ajax.get({ url: api.GET_STATION })).data const { content } = (await ajax.get({ url: api.GET_STATION })).data
commit('SET_STATION_LIST', content) commit('SET_STATION_LIST', content)
}, },
// 公共服务 - 门岗值守 - 社会物业和直管公房数据
async GET_PUBLICSAFE_NEWFIND({ commit }: { commit: Commit }): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_NEWFIND })
).data
console.log(content)
// commit('SET_PUBLICSAFE_NEWFIND', publicHouse)
},
// 公共服务 - 门岗值守 - 社会物业和直管公房数据
async GET_PUBLICSAFE_RIGHT_GATE({
commit,
}: {
commit: Commit
}): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_RIGHT_GATE })
).data
const shehuiwuye: any[] = []
const publicHouse: any[] = []
function formatData(arr: any[], obj: { [x: string]: any }) {
for (const k in obj) {
switch (k) {
case 'isWatch':
arr.push({
index: 3,
name: '值守处',
value: obj[k] || 0,
})
break
case 'isClosed':
arr.push({
index: 1,
name: '已封闭',
value: obj[k] || 0,
})
break
case 'addrNum':
arr.push({
index: 0,
name: '出入口',
value: obj[k] || 0,
})
break
case 'isSentry':
arr.push({
index: 2,
name: '有门岗处',
value: obj[k] || 0,
})
break
default:
break
}
}
arr.sort((a, b) => {
return a.index - b.index
})
}
formatData(shehuiwuye, content.property)
formatData(publicHouse, content.publicHouse)
commit('SET_PUBLICSAFE_GATESENTRY_SHEHUIWUYE', shehuiwuye)
commit('SET_PUBLICSAFE_GATESENTRY_ZHIGUANGONGFANG', publicHouse)
},
// 公共服务 - 门岗值守 - 平安地图
async GET_PUBLICSAFE_RIGHT_SAFEMAP({
commit,
}: {
commit: Commit
}): Promise<void> {
const { content } = (
await ajax.get({
url: api.GET_PUBLICSAFE_RIGHT_SAFEMAP,
params: { pageSize: 1000 },
})
).data
commit('SET_PUBLICSAFE_SAFEMAP', content)
},
// 公共服务 - 实有人口
async GET_PUBLICSAFE_TRUE_PEOPLE({
commit,
}: {
commit: Commit
}): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_TRUE_PEOPLE })
).data
commit('SET_PUBLICSAFE_TRUE_PEOPLE', content)
},
// 公共服务 - 实有房屋
async GET_PUBLICSAFE_HOUSE({ commit }: { commit: Commit }): Promise<void> {
const { content } = (await ajax.get({ url: api.GET_PUBLICSAFE_HOUSE })).data
commit('SET_PUBLICSAFE_HOUSE', content)
const obj = {
spf: 0,
other: 0,
zggf: 0,
}
content.stKind.forEach((item: { stKindName: string; totHous: number }) => {
switch (item.stKindName) {
case '商品房':
obj.spf = item.totHous
break
case '直管公房':
obj.zggf = item.totHous
break
default:
obj.other += item.totHous
break
}
})
commit('SET_PUBLICSAFE_HOUSE_STKIND', content.stKind)
commit('SET_PUBLICSAFE_HOUSE_STKIND', obj)
},
// 公共服务 - 非居房屋
async GET_PUBLICSAFE_NONRESIDENT({
commit,
}: {
commit: Commit
}): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_NONRESIDENT })
).data
commit('SET_PUBLICSAFE_NONRESIDENT', content)
},
// 公共服务 - 实有单位
async GET_PUBLICSAFE_TRUE_COMPANY({
commit,
}: {
commit: Commit
}): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_TRUE_COMPANY })
).data
commit('SET_PUBLICSAFE_TRUE_COMPANY', content)
},
// 公共服务 - 应急物资储备
async GET_PUBLICSAFE_SOS_MATERIAL({
commit,
}: {
commit: Commit
}): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_SOS_MATERIAL })
).data
// console.log(content)
commit('SET_PUBLICSAFE_SOS_MATERIAL', content)
},
// 公共服务 - 房屋外立面
async GET_PUBLICSAFE_OUTHOUSEWALL({
commit,
}: {
commit: Commit
}): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_OUTHOUSEWALL })
).data
console.log(content)
commit('SET_PUBLICSAFE_OUTHOUSEWALL_2019', content[0])
commit('SET_PUBLICSAFE_OUTHOUSEWALL_2020', content[1])
},
// 公共服务 - 重点关注楼宇
async GET_PUBLICSAFE_BUILDINGS({
commit,
}: {
commit: Commit
}): Promise<void> {
const { content } = (
await ajax.get({
url: api.GET_PUBLICSAFE_BUILDINGS,
params: { pageSize: 1000 },
})
).data
console.log(content)
commit('SET_PUBLICSAFE_BUILDINGS', content)
},
// 公共服务 - 房屋外立面饼图
async GET_PUBLICSAFE_PIEDATA({ commit }: { commit: Commit }): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_PUBLICSAFE_PIEDATA })
).data
console.log(content)
commit('SET_PUBLICSAFE_PIEDATA', content)
},
} }
src/store/index.ts
View file @ 3bbe493c
...@@ -16,6 +16,19 @@ export interface GlobalStateProps { ...@@ -16,6 +16,19 @@ export interface GlobalStateProps {
propertySummary: { [key: string]: number } propertySummary: { [key: string]: number }
caseList: unknown[] caseList: unknown[]
stationList: unknown[] stationList: unknown[]
pubulicSafeGateSenteryShehuiwuye: { [key: string]: number }
pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number }
pubulicSafeMap: unknown[]
pubulicSafeTruePeople: { [key: string]: number }
pubulicSafeHouse: { [key: string]: any }
pubulicSafeNonResident: { [key: string]: any }
pubulicSafeHouseStKind: { [key: string]: number }
pubulicSafeTrueCompany: { [key: string]: number }
pubulicSafeSOSMaterail: { [key: string]: number }
pubulicSafeOutHouseWall2019: { [key: string]: number }
pubulicSafeOutHouseWall2020: { [key: string]: number }
pubulicSafeBuildings: unknown[]
pubulicSafePieData: unknown[]
} }
export default createStore<GlobalStateProps>({ export default createStore<GlobalStateProps>({
state, state,
......
src/store/mutations.ts
View file @ 3bbe493c
...@@ -22,4 +22,95 @@ export default { ...@@ -22,4 +22,95 @@ export default {
SET_MUTATION_LIST(state: GlobalStateProps, data: unknown[]): void { SET_MUTATION_LIST(state: GlobalStateProps, data: unknown[]): void {
state.stationList = data state.stationList = data
}, },
SET_PUBLICSAFE_GATESENTRY_SHEHUIWUYE(
// 公共安全-门岗值守-社会物业
state: GlobalStateProps,
data: { [key: string]: number }
): void {
state.pubulicSafeGateSenteryShehuiwuye = data
},
SET_PUBLICSAFE_GATESENTRY_ZHIGUANGONGFANG(
// 公共安全-门岗值守-直管公房
state: GlobalStateProps,
data: { [key: string]: number }
): void {
state.pubulicSafeGateSenteryZhiguangongfang = data
},
SET_PUBLICSAFE_SAFEMAP(
// 公共安全-平安地图
state: GlobalStateProps,
data: unknown[]
): void {
state.pubulicSafeMap = data
},
SET_PUBLICSAFE_TRUE_PEOPLE(
// 公共安全-实有人口
state: GlobalStateProps,
data: { [key: string]: number }
): void {
state.pubulicSafeTruePeople = data
},
SET_PUBLICSAFE_HOUSE(
// 公共安全-居住房屋
state: GlobalStateProps,
data: { [key: string]: any }
): void {
state.pubulicSafeHouse = data
},
SET_PUBLICSAFE_NONRESIDENT(
// 公共安全-非居房屋
state: GlobalStateProps,
data: { [key: string]: any }
): void {
state.pubulicSafeNonResident = data
},
SET_PUBLICSAFE_HOUSE_STKIND(
// 公共安全-居住房屋-stkind
state: GlobalStateProps,
data: { [key: string]: number }
): void {
state.pubulicSafeHouseStKind = data
},
SET_PUBLICSAFE_TRUE_COMPANY(
// 公共安全-实有单位
state: GlobalStateProps,
data: { [key: string]: any }
): void {
state.pubulicSafeTrueCompany = data
},
SET_PUBLICSAFE_SOS_MATERIAL(
// 公共安全-应急物资储备
state: GlobalStateProps,
data: { [key: string]: any }
): void {
state.pubulicSafeSOSMaterail = data
},
SET_PUBLICSAFE_OUTHOUSEWALL_2019(
// 公共安全-房屋外立面
state: GlobalStateProps,
data: { [key: string]: number }
): void {
state.pubulicSafeOutHouseWall2019 = data
},
SET_PUBLICSAFE_OUTHOUSEWALL_2020(
// 公共安全-房屋外立面
state: GlobalStateProps,
data: { [key: string]: number }
): void {
state.pubulicSafeOutHouseWall2020 = data
},
SET_PUBLICSAFE_BUILDINGS(
// 公共安全-重点关注楼宇
state: GlobalStateProps,
data: unknown[]
): void {
state.pubulicSafeBuildings = data
},
SET_PUBLICSAFE_PIEDATA(
// 公共安全-房屋外立面饼图
state: GlobalStateProps,
data: unknown[]
): void {
state.pubulicSafePieData = data
},
} }
src/store/state.ts
View file @ 3bbe493c
...@@ -13,4 +13,17 @@ export default { ...@@ -13,4 +13,17 @@ export default {
propertySummary: {}, propertySummary: {},
caseList: [], caseList: [],
stationList: [], stationList: [],
pubulicSafeGateSenteryShehuiwuye: {},
pubulicSafeGateSenteryZhiguangongfang: {},
pubulicSafeMap: [],
pubulicSafeTruePeople: {},
pubulicSafeHouse: {},
pubulicSafeNonResident: {},
pubulicSafeHouseStKind: {},
pubulicSafeTrueCompany: {},
pubulicSafeSOSMaterail: {},
pubulicSafeOutHouseWall2019: {},
pubulicSafeOutHouseWall2020: {},
pubulicSafeBuildings: [],
pubulicSafePieData: [],
} as GlobalStateProps } as GlobalStateProps
src/view/components/map-btns.vue
View file @ 3bbe493c
...@@ -224,7 +224,7 @@ $bg = rgba(6,34,67,.4) ...@@ -224,7 +224,7 @@ $bg = rgba(6,34,67,.4)
.map-btns .map-btns
position fixed position fixed
bottom .05rem bottom .05rem
left calc(16vw + .1rem) left calc(20vw + .1rem)
transition left .3s ease transition left .3s ease
&.full &.full
left .05rem left .05rem
......
src/view/components/sub-title.vue
View file @ 3bbe493c
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="sub-title"> <div class="sub-title">
<p><slot /></p> <p><slot /></p>
<span /> <span />
<p @click="clickSecTitle"><slot name="secTitle" /></p>
</div> </div>
</template> </template>
...@@ -10,6 +11,16 @@ import { defineComponent } from 'vue' ...@@ -10,6 +11,16 @@ import { defineComponent } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'SubTitle', name: 'SubTitle',
emits: ['clicktit'],
setup(_, ctx) {
function clickSecTitle() {
ctx.emit('clicktit')
}
return {
clickSecTitle,
}
},
}) })
</script> </script>
...@@ -18,14 +29,14 @@ export default defineComponent({ ...@@ -18,14 +29,14 @@ export default defineComponent({
.sub-title .sub-title
display flex display flex
align-items center align-items center
margin .04rem 0 margin 0.04rem 0
p p
color $secondary-color color $secondary-color
margin-right .1rem margin-right 0.1rem
font-weight bold font-weight bold
span span
flex 1 flex 1
display block display block
height .01rem height 0.01rem
background $primary-border background $primary-border
</style> </style>
src/view/components/view-selector.vue
View file @ 3bbe493c
...@@ -50,7 +50,7 @@ $height = .26rem ...@@ -50,7 +50,7 @@ $height = .26rem
#view-selector.view-selector #view-selector.view-selector
position fixed position fixed
top .45rem top .45rem
left calc(16vw + .1rem) left calc(20vw + .1rem)
z-index 99 z-index 99
.ant-select .ant-select
background $bg background $bg
......
src/view/left/command.vue
View file @ 3bbe493c
...@@ -2,10 +2,6 @@ ...@@ -2,10 +2,6 @@
<m-card mode="border"> <m-card mode="border">
<m-card class="card" title="指挥体系"> <m-card class="card" title="指挥体系">
<div class="command"> <div class="command">
<div class="flag">
<img src="@/assets/images/zheng.png" />
<img src="@/assets/images/jing.png" />
</div>
<div class="leader"> <div class="leader">
<div v-for="(item, i) in leaders" :key="i"> <div v-for="(item, i) in leaders" :key="i">
<img :src="item.img" /> <img :src="item.img" />
...@@ -15,50 +11,41 @@ ...@@ -15,50 +11,41 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div class="member">
<div class="disposal"> <div v-for="(item, i) in members" :key="i">
<m-sub>处置力量</m-sub>
<div class="duty">
<div> <div>
<p>值班人员</p> <p>{{ item.name }}</p>
<p>日间值班 · 08:00 ~ 18:00</p> <span>{{ item.type }}</span>
</div>
</div> </div>
<span />
<div>
<p>值班人员</p>
<p>夜间值班 · 18:00 ~ 08:00</p>
</div> </div>
</div> </div>
<div class="disposal">
<m-sub>网格工作站</m-sub>
<div class="table"> <div class="table">
<div> <div>
<p>工作小组</p> <p>网格工作站</p>
<p>组长</p> <p class="thead3">网格长</p>
<p>电话</p> <p>工作时段</p>
<p>常驻人数</p> <p>总人数</p>
<p>报道制人数</p>
</div> </div>
<div v-for="(item, i) in dutyTableData" :key="i"> <div v-for="(item, i) in dutyTableData" :key="i">
<p>{{ item.group }}</p> <p>{{ item.group }}</p>
<p>{{ item.leader }}</p> <p class="doubleRow">
<p>{{ item.phone }}</p> <span>
<p>{{ item.number1 }}</p> <span>日</span>
<p>{{ item.number2 }}</p> <span>{{ item.leader }}(城管) 、{{ item.leader1 }}(绿化)</span>
</div> </span>
</div> <span>
</div> <span>夜</span>
<div class="soldier"> <span>{{ item.leader2 }}(警长)</span>
<m-sub>单兵巡查边量</m-sub> </span>
<div class="btns"> </p>
<div v-for="btn in btns" :key="btn.name"> <p class="doubleRow2">
<img :src="btn.icon" /> <span>{{ item.dayTime }}</span>
{{ btn.name }} <span>{{ item.nightTime }}</span>
</div> </p>
</div> <p>{{ item.number }}人</p>
<div class="list">
<div v-for="soldier in soldierList" :key="soldier.id">
<p>{{ soldier.name }}</p>
<p>{{ soldier.phone }}</p>
<span>查看点位</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -105,45 +92,85 @@ export default defineComponent({ ...@@ -105,45 +92,85 @@ export default defineComponent({
{ {
img: avatar1, img: avatar1,
type: '指挥长', type: '指挥长',
name: '姓名', name: '袁登全',
}, },
{ {
img: avatar2, img: avatar2,
type: '指挥长', type: '副指挥长',
name: '姓名', name: '卢军',
}, },
// {
// img: avatar1,
// type: '指挥长',
// name: '姓名',
// },
// {
// img: avatar2,
// type: '指挥长',
// name: '姓名',
// },
])
const members = ref([
{ {
img: avatar1, name: '鲁涵智',
type: '指挥长', type: '社区管理办',
name: '姓名',
}, },
{ {
img: avatar2, name: '范杲逻',
type: '指挥长', type: '党政办',
name: '姓名', },
{
name: '庞勇',
type: '社区平安办',
},
{
name: '鲁涵智',
type: '社区管理办',
},
{
name: '鲁涵智',
type: '社区管理办',
},
{
name: '鲁涵智',
type: '社区管理办',
},
{
name: '鲁涵智',
type: '社区管理办',
},
{
name: '鲁涵智',
type: '社区管理办',
}, },
]) ])
const dutyTableData = ref([ const dutyTableData = ref([
{ {
group: '第一小组', group: '第一工作站',
leader: '组长名', leader: '长名',
phone: '1356249823', leader1: '人名',
number1: 5, leader2: '名2',
number2: 5, dayTime: '8时-18时',
nightTime: '18时-8时',
number: 5,
}, },
{ {
group: '第一小组', group: '第二工作站',
leader: '组长名', leader: '长名',
phone: '1356249823', leader1: '人名',
number1: 5, leader2: '名2',
number2: 5, dayTime: '8时-18时',
nightTime: '18时-8时',
number: 5,
}, },
{ {
group: '第一小组', group: '第三工作站',
leader: '组长名', leader: '长名',
phone: '1356249823', leader1: '人名',
number1: 5, leader2: '名2',
number2: 5, dayTime: '8时-18时',
nightTime: '18时-8时',
number: 5,
}, },
]) ])
const btns = ref([ const btns = ref([
...@@ -243,6 +270,7 @@ export default defineComponent({ ...@@ -243,6 +270,7 @@ export default defineComponent({
]) ])
return { return {
leaders, leaders,
members,
dutyTableData, dutyTableData,
btns, btns,
soldierList, soldierList,
...@@ -262,117 +290,118 @@ export default defineComponent({ ...@@ -262,117 +290,118 @@ export default defineComponent({
.card .card
flex 1 flex 1
&:first-child &:first-child
flex 2.1 flex 1.8
.command .command
display flex flex 1
.flag
display flex display flex
flex-direction column flex-direction column
justify-content space-around white-space nowrap
margin 0 .3rem 0 .05rem
>img
display block
width .3rem
height @width
margin .04rem 0
.leader .leader
display flex display flex
flex-wrap wrap flex-wrap wrap
flex 1 flex 1
padding 0.1rem 0
border-bottom 1px solid rgba(91, 213, 255, 0.5)
>div >div
width 50% width 50%
display flex display flex
align-items center align-items center
p p
font-size .11rem font-size 0.11rem
font-weight bold font-weight bold
img img
width .28rem width 0.28rem
height @width height @width
margin-right .1rem margin-right 0.1rem
span span
color #ccc color #ccc
.disposal .member
.duty
display flex display flex
align-items center flex-wrap wrap
margin-bottom .05rem borde 1px solid red
>span flex 2
width .01rem
height .14rem
margin 0 .2rem
background $secondary-color
>div
flex 1
>p
&:last-child
color #ccc
.soldier
margin .05rem 0
.btns
display flex
justify-content flex-end
>div >div
width 25%
display flex display flex
align-items center align-items center
color $primary-color p
margin-left .2rem font-size 0.11rem
cursor pointer font-weight bold
transition .3s ease-in-out
&:hover
transform scale(1.1)
text-decoration underline
img img
width .1rem width 0.28rem
height @width height @width
margin-right .05rem margin-right 0.1rem
.list
display flex
justify-content space-between
>div
width 30%
background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
padding .05rem .1rem
box-sizing border-box
span span
color $primary-color color #ccc
cursor pointer .disposal
&:hover flex 1.3
text-decoration underline
.party .party
display flex display flex
.content .content
padding-left .1rem padding-left 0.1rem
flex 1 flex 1
&.party &.party
display flex display flex
flex-direction column flex-direction column
justify-content space-around justify-content space-around
padding-bottom .1rem padding-bottom 0.1rem
&.economic &.economic
display flex display flex
>div >div
flex 1 flex 1
.table .table
border .01rem solid $blue border 0.01rem solid $blue
font-size 0.09rem
>div >div
display flex display flex
background $table-bg(.15) background $table-bg(0.15)
&:first-child &:first-child
background $table-bg() background $table-bg()
&+div &+div
border-top inherit border-top inherit
p p
flex 1 flex 1
line-height 2 line-height 4
padding 0 .05rem text-align center
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
white-space nowrap white-space nowrap
&+p &+p
border-left .01rem solid $blue border-left 0.01rem solid $blue
&:nth-of-type(3) &:nth-of-type(3)
flex 1.4 flex 1.4
&:last-child &:last-child
flex 1.1 flex 0.7
&:first-child
flex 1.2
.thead3
flex 2.5
.doubleRow
flex 2.5
line-height 2
display flex
flex-direction column
flex-wrap wrap
>span
flex 1
padding 0
margin 0
display flex
&:first-child
flex 0.2
border-bottom 0.01rem solid $blue
>span
flex 1
&:first-child
width 30px
flex 0.2
border-right 0.01rem solid $blue
.doubleRow2
display flex
flex-direction column
line-height 2
>span
flex 1
&:first-child
border-bottom 0.01rem solid $blue
</style> </style>
src/view/main.vue
View file @ 3bbe493c
<template> <template>
<m-grid <m-grid
:template="['title title title', 'left . right']" :template="['title title title', 'left . right']"
columns="16vw auto 49vw" columns="20vw auto 49vw"
rows="0.4rem auto" rows="0.4rem auto"
gap="0.05rem" gap="0.05rem"
> >
<m-title area="title" @click="showDrawer = true">南东城运</m-title> <m-title area="title" @click="showDrawer = false">南东城运</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" />
...@@ -96,13 +96,15 @@ export default defineComponent({ ...@@ -96,13 +96,15 @@ 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)
// ajax
// .get({ ajax
// url: api.GET_CASE, .get({
// }) url: api.GET_CASE,
// .then((res) => { })
// console.log(res) .then((res) => {
// }) console.log(res)
})
const handleMapComplete = () => { const handleMapComplete = () => {
console.log('complete', map.value) console.log('complete', map.value)
map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' }) map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
......
src/view/right/company.vue
View file @ 3bbe493c
<template> <template>
<m-card title="实有单位" :addition="{ value: 10203, unit: '家' }"> <m-card
title="实有单位"
:addition="{ value: trueCompany.companyNum, unit: '家' }"
>
<div class="sum"> <div class="sum">
<div v-for="item in sum" :key="item.name"> <div v-for="item in sum" :key="item.name">
<m-count class="count" :value="item.value" /> <m-count class="count" :value="item.value" />
<p> <p>
{{ item.name }} {{ item.name }}
<img v-if="item.icon" :src="item.icon" /> <!-- <img v-if="item.icon" :src="item.icon" /> -->
</p> </p>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div v-if="showChart" class="chart"> <div v-if="showChart" class="chart">
<m-pie :dataset="pieData" :option="pieOption" /> <m-pie
v-if="showChart && pieData.source[0].value > 0"
:dataset="pieData"
:option="pieOption"
/>
</div> </div>
<div class="legend"> <div class="legend">
<div v-for="(item, i) in pieData.source" :key="item.name"> <div v-for="(item, i) in pieData.source" :key="item.name">
...@@ -36,23 +43,31 @@ import store from '@/store' ...@@ -36,23 +43,31 @@ import store from '@/store'
export default defineComponent({ export default defineComponent({
name: 'Company', name: 'Company',
setup() { setup() {
store.dispatch('GET_PUBLICSAFE_TRUE_COMPANY')
const trueCompany = computed(() => store.state.pubulicSafeTrueCompany)
const showChart = computed(() => store.state.curTheme === 'safety') const showChart = computed(() => store.state.curTheme === 'safety')
const sum = ref([
{ name: '本街道注册', value: 6741 }, const sum = computed(() => {
{ name: '境外注册', value: 1658, icon: icon1 }, return [
{ name: '境内注册', value: 1804, icon: icon1 }, { name: '本街道注册', value: trueCompany.value.thisCity },
]) { name: '境外注册', value: trueCompany.value.outCountry, icon: icon1 },
const pieData = ref({ { name: '境内注册', value: trueCompany.value.inCountry, icon: icon1 },
]
})
const pieData = computed(() => {
return {
dimensions: [ dimensions: [
{ name: 'name', displayName: '类型' }, { name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' }, { name: 'value', displayName: '数量' },
], ],
source: [ source: [
{ name: '事业单位', value: 4591 }, { name: '事业单位', value: trueCompany.value.institution },
{ name: '企业单位', value: 4591 }, { name: '企业单位', value: trueCompany.value.enterprise },
{ name: '机关团体', value: 1020 }, { name: '机关团体', value: trueCompany.value.organization },
{ name: '其他', value: 899 }, { name: '其他', value: trueCompany.value.other },
], ],
}
}) })
const pieOption = ref({ const pieOption = ref({
color: [ color: [
...@@ -78,6 +93,7 @@ export default defineComponent({ ...@@ -78,6 +93,7 @@ export default defineComponent({
sum, sum,
pieData, pieData,
pieOption, pieOption,
trueCompany,
} }
}, },
}) })
...@@ -88,7 +104,7 @@ export default defineComponent({ ...@@ -88,7 +104,7 @@ export default defineComponent({
.sum .sum
display flex display flex
align-items center align-items center
margin .05rem 0 margin 0.05rem 0
>div >div
flex 1 flex 1
text-align center text-align center
...@@ -102,15 +118,15 @@ export default defineComponent({ ...@@ -102,15 +118,15 @@ export default defineComponent({
color $blue color $blue
transform translateY(-50%) transform translateY(-50%)
.count .count
font-size .12rem font-size 0.12rem
p p
color #ccc color #ccc
font-size .09rem font-size 0.09rem
text-indent .1rem text-indent 0.1rem
img img
width .1rem width 0.1rem
height @width height @width
margin-left .02rem margin-left 0.02rem
.content .content
flex 1 flex 1
display flex display flex
...@@ -123,7 +139,7 @@ export default defineComponent({ ...@@ -123,7 +139,7 @@ export default defineComponent({
display flex display flex
flex-direction column flex-direction column
justify-content space-around justify-content space-around
padding 0 .1rem padding 0 0.1rem
>div >div
display flex display flex
justify-content space-between justify-content space-between
...@@ -131,16 +147,16 @@ export default defineComponent({ ...@@ -131,16 +147,16 @@ export default defineComponent({
>p >p
&:first-child &:first-child
span span
width .06rem width 0.06rem
height @width height @width
display inline-block display inline-block
margin-right @width margin-right @width
border-radius 50% border-radius 50%
&:last-child &:last-child
.count .count
font-size .12rem font-size 0.12rem
.unit .unit
font-size .08rem font-size 0.08rem
color #aaa color #aaa
margin-left .03rem margin-left 0.03rem
</style> </style>
src/view/right/house.vue
View file @ 3bbe493c
<template> <template>
<m-card title="实有房屋" :addition="{ value: 18980, unit: '幢' }"> <m-card
title="实有房屋"
:addition="{
value: allTrueHouse,
unit: '幢',
}"
>
<div> <div>
<m-sub :addition="{ value: 11883, unit: '幢' }">居住房屋</m-sub> <m-sub :addition="{ value: pubulicSafeHouse.house, unit: '幢' }">
居住房屋
</m-sub>
<Brief :list="summary" color="#fff" /> <Brief :list="summary" color="#fff" />
<div class="bar-txt"> <div class="bar-txt">
<p> <p>
<span>2000年前房屋</span> <span>2000年前房屋</span>
<m-count class="count" :value="5616" /> <m-count class="count" :value="pubulicSafeHouse.befor" />
<span class="unit">幢</span> <span class="unit">幢</span>
</p> </p>
<img src="@/assets/images/location.png" /> <img src="@/assets/images/location.png" />
</div> </div>
<m-progress :value="80" :height="0.1" /> <m-progress
v-if="allTrueHouse"
:value="(pubulicSafeHouse.befor / allTrueHouse) * 100"
:height="0.1"
/>
<div class="house-types"> <div class="house-types">
<div v-for="item in houseTypes" :key="item.name"> <div v-for="item in houseTypes" :key="item.name">
<m-wave :value="item.percent" size=".34rem" /> <m-wave v-if="item.percent" :value="item.percent" size=".34rem" />
<div> <div>
<m-count class="count" :value="item.value" /> <m-count class="count" :value="item.value" />
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
...@@ -23,14 +35,18 @@ ...@@ -23,14 +35,18 @@
</div> </div>
</div> </div>
<div> <div>
<m-sub :addition="{ value: 7097, unit: '幢' }">非居房屋</m-sub> <m-sub
:addition="{ value: pubulicSafeNonResident.nonResidentNum, unit: '幢' }"
>
非居房屋
</m-sub>
<Brief :list="houseSum" color="#fff" /> <Brief :list="houseSum" color="#fff" />
</div> </div>
</m-card> </m-card>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue' import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue' import Brief, { BriefProp } from '../components/brief.vue'
import icon18 from '@/assets/images/icon18.png' import icon18 from '@/assets/images/icon18.png'
import icon19 from '@/assets/images/icon19.png' import icon19 from '@/assets/images/icon19.png'
...@@ -38,42 +54,102 @@ import icon20 from '@/assets/images/icon20.png' ...@@ -38,42 +54,102 @@ import icon20 from '@/assets/images/icon20.png'
import icon7 from '@/assets/images/icon7.png' import icon7 from '@/assets/images/icon7.png'
import icon21 from '@/assets/images/icon21.png' import icon21 from '@/assets/images/icon21.png'
import icon22 from '@/assets/images/icon22.png' import icon22 from '@/assets/images/icon22.png'
import store from '@/store'
export default defineComponent({ export default defineComponent({
name: 'House', name: 'House',
components: { Brief }, components: { Brief },
setup() { setup() {
const summary = ref<BriefProp[]>([ store.dispatch('GET_PUBLICSAFE_HOUSE')
{ name: '小区数', value: 65465, icon: icon18 }, store.dispatch('GET_PUBLICSAFE_NONRESIDENT')
{ name: '物业公司', value: 1648, icon: icon19 }, const pubulicSafeHouse = computed(() => store.state.pubulicSafeHouse)
{ name: '业委会', value: 56462, icon: icon20 }, const pubulicSafeNonResident = computed(
]) () => store.state.pubulicSafeNonResident
const houseTypes = ref([ )
const pubulicSafeHouseStKind = computed(
() => store.state.pubulicSafeHouseStKind
)
const pubulicSafeHouseStKindNum = computed(() => {
let num = 0
for (const k in store.state.pubulicSafeHouseStKind) {
num += store.state.pubulicSafeHouseStKind[k]
}
return num
})
const allTrueHouse = computed(
() => pubulicSafeHouse.value.nonResident + pubulicSafeHouse.value.house
)
const summary = computed(() => {
return [
{
name: '小区数',
value: pubulicSafeHouse.value.community,
icon: icon18,
},
{
name: '物业公司',
value: pubulicSafeHouse.value.company,
icon: icon19,
},
{ name: '业委会', value: pubulicSafeHouse.value.ic, icon: icon20 },
]
})
const houseTypes = computed(() => {
return [
{ {
name: '商品房', name: '商品房',
value: 7128, value: pubulicSafeHouseStKind.value.spf,
percent: 60, percent:
(pubulicSafeHouseStKind.value.spf /
pubulicSafeHouseStKindNum.value) *
100,
}, },
{ {
name: '直管公房', name: '直管公房',
value: 3564, value: pubulicSafeHouseStKind.value.zggf,
percent: 30, percent:
(pubulicSafeHouseStKind.value.zggf /
pubulicSafeHouseStKindNum.value) *
100,
}, },
{ {
name: '保障房及其他', name: '保障房及其他',
value: 1188, value: pubulicSafeHouseStKind.value.other,
percent: 15, percent:
(pubulicSafeHouseStKind.value.other /
pubulicSafeHouseStKindNum.value) *
100,
},
]
})
const houseSum = computed(() => {
return [
{
name: '门面房',
value: pubulicSafeNonResident.value.others,
icon: icon7,
},
{
name: '商办',
value: pubulicSafeNonResident.value.commercial,
icon: icon21,
},
{
name: '商业综合体',
value: pubulicSafeNonResident.value.comprehensive,
icon: icon22,
}, },
]) ]
const houseSum = ref<BriefProp[]>([ })
{ name: '门面房', value: 1658, icon: icon7 },
{ name: '商办', value: 3564, icon: icon21 },
{ name: '商业综合体', value: 1875, icon: icon22 },
])
return { return {
summary, summary,
houseTypes, houseTypes,
houseSum, houseSum,
pubulicSafeHouse,
pubulicSafeNonResident,
allTrueHouse,
} }
}, },
}) })
...@@ -85,32 +161,32 @@ export default defineComponent({ ...@@ -85,32 +161,32 @@ export default defineComponent({
display flex display flex
align-items center align-items center
justify-content space-between justify-content space-between
padding 0 .03rem padding 0 0.03rem
margin .05rem 0 .02rem margin 0.05rem 0 0.02rem
color #eee color #eee
.count .count
color $secondary-color color $secondary-color
font-size .14rem font-size 0.14rem
margin-left .15rem margin-left 0.15rem
.unit .unit
color #aaa color #aaa
font-size .08rem font-size 0.08rem
margin-left .05rem margin-left 0.05rem
img img
width .1rem width 0.1rem
height @width height @width
.house-types .house-types
display flex display flex
justify-content space-between justify-content space-between
align-items center align-items center
margin-top .1rem margin-top 0.1rem
>div >div
display flex display flex
align-items center align-items center
>div >div
margin-left .05rem margin-left 0.05rem
.count .count
font-size .12rem font-size 0.12rem
font-weight bold font-weight bold
p p
color #ccc color #ccc
......
src/view/right/police.vue
View file @ 3bbe493c
...@@ -11,20 +11,20 @@ ...@@ -11,20 +11,20 @@
<m-sub>门岗值守分布</m-sub> <m-sub>门岗值守分布</m-sub>
<div class="gate"> <div class="gate">
<p>直管公房</p> <p>直管公房</p>
<Summary :list="houseSum" /> <Summary :list="zggfList" />
</div> </div>
<div class="gate"> <div class="gate">
<p>社会物业</p> <p>社会物业</p>
<Summary :list="houseSum" /> <Summary :list="shwyList" />
</div> </div>
</div> </div>
<div> <div>
<m-sub>平安地图</m-sub> <m-sub>平安地图</m-sub>
<div class="safe-map"> <div class="safe-map">
<div> <div>
<p v-for="item in mapList" :key="item.name"> <p v-for="item in safeMap" :key="item.cmtName">
<span>{{ item.name }}</span> <span @click="clickStreetName(item)">{{ item.cmtName }}</span>
<m-count class="count" :value="item.value" /> <m-count class="count" :value="item.score" />
</p> </p>
</div> </div>
<div> <div>
...@@ -32,6 +32,26 @@ ...@@ -32,6 +32,26 @@
</div> </div>
</div> </div>
</div> </div>
<m-modal
v-model="searchModal"
width="20%"
offset="-50%"
translate-y="84%"
:title="`${streetData.cmtName}2021年1季度得分`"
>
<div>
<m-form
:template="[
'score:得分|householdNum:户籍户数(户)',
'foreignNum:外来人口|permanentNum:常住人口',
'newNum:新航人员|improvementNum:自强人员',
'healthNum:安康人员|sunNum:阳光人员',
'remark:总结',
]"
:data="streetData"
/>
</div>
</m-modal>
</m-card> </m-card>
</template> </template>
...@@ -48,8 +68,20 @@ export default defineComponent({ ...@@ -48,8 +68,20 @@ export default defineComponent({
name: 'Police', name: 'Police',
components: { Brief, Summary }, components: { Brief, Summary },
setup() { setup() {
store.dispatch('GET_PUBLICSAFE_RIGHT_GATE')
store.dispatch('GET_PUBLICSAFE_RIGHT_SAFEMAP')
const searchModal = ref(false)
const showChart = computed(() => store.state.curTheme === 'safety') const showChart = computed(() => store.state.curTheme === 'safety')
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100)) const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const zggfList = computed(
() => store.state.pubulicSafeGateSenteryZhiguangongfang
) // 门岗值守数据 - 直管公房
const shwyList = computed(
() => store.state.pubulicSafeGateSenteryShehuiwuye
) // 门岗值守数据 - 社会物业
const safeMap = computed(() => store.state.pubulicSafeMap) // 门岗值守数据 - 社会物业
const streetData = ref('')
const sumList = ref<BriefProp[]>([ const sumList = ref<BriefProp[]>([
{ name: '今日发现', value: 157, icon: icon15 }, { name: '今日发现', value: 157, icon: icon15 },
{ name: '今日处置中', value: 64, icon: icon16 }, { name: '今日处置中', value: 64, icon: icon16 },
...@@ -99,39 +131,50 @@ export default defineComponent({ ...@@ -99,39 +131,50 @@ export default defineComponent({
}, },
], ],
}) })
const houseSum = ref<SummaryProp[]>([
{ name: '出入口', value: 165 }, const clickStreetName = (item: any): void => {
{ name: '已封闭', value: 165 }, searchModal.value = true
{ name: '有门岗处', value: 165 }, streetData.value = item
{ name: '值守处', value: 165 }, }
]) // const houseSum = ref<SummaryProp[]>([
const mapList = ref([ // { name: '出入口', value: 165 },
{ name: '龙泉', value: 92 }, // { name: '已封闭', value: 165 },
{ name: '厦门', value: 90 }, // { name: '有门岗处', value: 165 },
{ name: '牛庄', value: 90 }, // { name: '值守处', value: 165 },
{ name: '贵州', value: 92 }, // ])
{ name: '长江', value: 92 },
{ name: '云中', value: 92 }, // const mapList = ref([
{ name: '小花园', value: 92 }, // { name: '龙泉', value: 92 },
{ name: '平望', value: 92 }, // { name: '厦门', value: 90 },
{ name: '振兴', value: 90 }, // { name: '牛庄', value: 90 },
{ name: '新昌', value: 90 }, // { name: '贵州', value: 92 },
{ name: '江阴', value: 90 }, // { name: '长江', value: 92 },
{ name: '顺天村', value: 92 }, // { name: '云中', value: 92 },
{ name: '新桥', value: 92 }, // { name: '小花园', value: 92 },
{ name: '三德', value: 90 }, // { name: '平望', value: 92 },
{ name: '福海', value: 92 }, // { name: '振兴', value: 90 },
{ name: '福瑞', value: 90 }, // { name: '新昌', value: 90 },
{ name: '承兴', value: 92 }, // { name: '江阴', value: 90 },
{ name: '定兴', value: 92 }, // { name: '顺天村', value: 92 },
]) // { name: '新桥', value: 92 },
// { name: '三德', value: 90 },
// { name: '福海', value: 92 },
// { name: '福瑞', value: 90 },
// { name: '承兴', value: 92 },
// { name: '定兴', value: 92 },
// ])
return { return {
sumList, sumList,
lineData, lineData,
lineOption, lineOption,
showChart, showChart,
houseSum, safeMap,
mapList, // mapList,
streetData,
searchModal,
zggfList,
shwyList,
clickStreetName,
} }
}, },
}) })
...@@ -139,15 +182,14 @@ export default defineComponent({ ...@@ -139,15 +182,14 @@ export default defineComponent({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import ('../../components/MyComponent/main.styl') @import ('../../components/MyComponent/main.styl')
.chart .chart
width 100% width 100%
height 1.4rem height 1.4rem
margin .1rem 0 margin 0.1rem 0
.gate .gate
margin-bottom .1rem margin-bottom 0.01rem
p p
margin-bottom .05rem margin-bottom 0.01rem
.safe-map .safe-map
display flex display flex
>div >div
...@@ -157,12 +199,12 @@ export default defineComponent({ ...@@ -157,12 +199,12 @@ export default defineComponent({
flex-wrap wrap flex-wrap wrap
>p >p
width 33.3% width 33.3%
margin-bottom .04rem margin-bottom 0.04rem
span span
color #ccc color #ccc
.count .count
margin-left .08rem margin-left 0.08rem
font-size .12rem font-size 0.12rem
&:last-child &:last-child
$center() $center()
flex 1 flex 1
......
src/view/right/population.vue
View file @ 3bbe493c
<template> <template>
<m-card title="实有人口" :addition="{ value: 76618, unit: '人' }"> <m-card
title="实有人口"
:addition="{ value: truePeople.personnelNum, unit: '人' }"
>
<Brief :list="summary" /> <Brief :list="summary" />
<div class="content"> <div class="content">
<div v-for="item in population" :key="item.name"> <div v-for="item in population" :key="item.name">
<m-count class="count" :value="item.value" /> <m-count class="count" :value="item.value" />
<div> <div>
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<img src="@/assets/images/location.png" /> <!-- <img src="@/assets/images/location.png" /> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -14,21 +17,28 @@ ...@@ -14,21 +17,28 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue' import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue' import Brief, { BriefProp } from '../components/brief.vue'
import inImg from '@/assets/images/in.png' import inImg from '@/assets/images/in.png'
import out from '@/assets/images/out.png' import out from '@/assets/images/out.png'
import store from '@/store'
import china from '@/assets/images/china.png' import china from '@/assets/images/china.png'
export default defineComponent({ export default defineComponent({
name: 'Population', name: 'Population',
components: { Brief }, components: { Brief },
setup() { setup() {
const summary = ref<BriefProp[]>([ store.dispatch('GET_PUBLICSAFE_TRUE_PEOPLE')
{ name: '本市户籍', value: 18733, icon: inImg }, const truePeople = computed(() => store.state.pubulicSafeTruePeople)
{ name: '境外流入', value: 28833, icon: out },
{ name: '境内流入', value: 29052, icon: china }, const summary = computed(() => {
]) return [
{ name: '本市户籍', value: truePeople.value.thisCity, icon: inImg },
{ name: '境外流入', value: truePeople.value.outCountry, icon: out },
{ name: '境内流入', value: truePeople.value.inCountry, icon: china },
]
})
const population = ref([ const population = ref([
{ name: '老龄人口', value: 35648 }, { name: '老龄人口', value: 35648 },
{ name: '低保人口', value: 65315 }, { name: '低保人口', value: 65315 },
...@@ -37,6 +47,7 @@ export default defineComponent({ ...@@ -37,6 +47,7 @@ export default defineComponent({
return { return {
summary, summary,
population, population,
truePeople,
} }
}, },
}) })
...@@ -49,18 +60,18 @@ export default defineComponent({ ...@@ -49,18 +60,18 @@ export default defineComponent({
>div >div
width 32% width 32%
background url('@/assets/images/border.png') 100% / 100% 100% no-repeat background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
padding .05rem .15rem padding 0.05rem 0.15rem
.count .count
font-size .12rem font-size 0.12rem
>div >div
display flex display flex
align-items center align-items center
justify-content space-between justify-content space-between
width 100% width 100%
span span
font-size .09rem font-size 0.09rem
color #ccc color #ccc
img img
width .1rem width 0.1rem
height @width height @width
</style> </style>
src/view/right/public-safety.vue
View file @ 3bbe493c
...@@ -10,48 +10,261 @@ ...@@ -10,48 +10,261 @@
</m-card> </m-card>
<m-card id="flex-start" mode="border"> <m-card id="flex-start" mode="border">
<m-card title="应急物资储备"> <m-card title="应急物资储备">
<Brief <div class="emergency">
:list="[ <div v-for="(item, index) in list" :key="index">
{ name: '防汛防台', value: 65 }, <div>
{ name: '防寒抗冻', value: 35 }, <p>{{ item.name }}</p>
{ name: '疫情控制', value: 43 }, <p class="num">{{ item.value }}</p>
{ name: '应急抢险', value: 43 }, </div>
]" <img :src="item.img" />
/> </div>
</div>
</m-card> </m-card>
<m-card title="“两牢”人员"> <m-card title="房屋外立面">
<Summary <div class="outHouse">
:list="[ <div class="view-selector">
{ name: '总人员', value: 120 }, <a-select
{ name: '劳改人员', value: 20 }, :value="year"
{ name: '劳教人员', value: 100 }, dropdown-class-name="view-selector-drop-down"
]" >
two-child <a-select-option
v-for="option in yearOptions"
:key="option"
:value="option"
>
{{ option }}
</a-select-option>
</a-select>
</div>
<Summary class="summary" :two-child="true" :list="houseSum" />
<div class="chartBox">
<div v-if="showChart" class="drawCharts">
<div>
<m-pie class="chart1" :dataset="pieData1" :option="pieOption" />
<span class="line"></span>
<m-pie class="chart2" :dataset="pieData2" :option="pieOption" />
</div>
<div class="legend">
<div v-for="(item, i) in pieData2.source" :key="item.name">
<p>
<span :style="{ background: pieOption.color[i][0] }" />
{{ item.name }}
</p>
<p>
<m-count class="count" :value="item.value" />
</p>
</div>
</div>
</div>
<div class="legendBottom">
<div v-for="(item, i) in pieData1.source" :key="item.name">
<p>
<span :style="{ background: pieOption.color[i][0] }" />
<m-count class="count" :value="item.value" />
</p>
<p>外墙面层开裂</p>
<p>高坠隐患点</p>
</div>
</div>
</div>
<div class="bottomBox">
<SubTitle @clicktit="clickSecTitle">
重点关注楼宇
<template #secTitle> 查看清单 </template>
</SubTitle>
<div class="content">
<div v-for="item in buildings.slice(0, 6)" :key="item.id">
<div>
<span>{{ item.projectName }}</span>
<!-- <img src="@/assets/images/location.png" /> -->
</div>
<div class="secRow">
<span>
<span>隐患 </span>
<m-count
class="count"
:value="item.outerWallFacilityHiddenPoint"
/> />
</span>
<span>
<span>危险 </span>
<m-count
class="count"
:value="item.outerWallFacilityDangerPoint"
/>
</span>
</div>
</div>
</div>
</div>
</div>
</m-card> </m-card>
<m-card title="房屋外立面"></m-card>
</m-card> </m-card>
<m-modal v-model="searchModal" width="50%" title="重点关注楼宇清单">
<div>
<m-table
:template="[
'楼宇名称|房屋地址*2|检测日期|房屋用途|建造年份|平面形式|建筑面积|结构类别|层数|隐患点|危险点',
'projectName|houseAddr|inspectionDate|useType|buildYear|planeSituation|constructArea|structureType|floor|outerWallFacilityHiddenPoint|outerWallFacilityDangerPoint',
]"
:data="buildings"
></m-table>
</div>
</m-modal>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent, ref, computed, watch } from 'vue'
import Police from './police.vue' import Police from './police.vue'
import Population from './population.vue' import Population from './population.vue'
import House from './house.vue' import House from './house.vue'
import Company from './company.vue' import Company from './company.vue'
import Brief from '../components/brief.vue' import Brief from '../components/brief.vue'
import Summary from '../components/summary.vue' import Summary from '../components/summary.vue'
import SubTitle from '../components/sub-title.vue'
import store from '@/store'
import Circle from '@/assets/images/Circle.png'
import { log } from 'util'
export default defineComponent({ export default defineComponent({
name: 'PublicSafety', name: 'PublicSafety',
components: { Police, Population, House, Company, Brief, Summary }, components: { Police, Population, House, Company, SubTitle, Brief, Summary },
setup() {
store.dispatch('GET_PUBLICSAFE_SOS_MATERIAL')
store.dispatch('GET_PUBLICSAFE_OUTHOUSEWALL')
store.dispatch('GET_PUBLICSAFE_BUILDINGS')
store.dispatch('GET_PUBLICSAFE_PIEDATA')
const searchModal = ref(false)
const SOSMaterail = computed(() => store.state.pubulicSafeSOSMaterail)
const pieData = computed(() => store.state.pubulicSafePieData)
const outHouseWall2019 = computed(
() => store.state.pubulicSafeOutHouseWall2019
)
const outHouseWall2020 = computed(
() => store.state.pubulicSafeOutHouseWall2020
)
const buildings = computed(() => store.state.pubulicSafeBuildings)
const showChart = computed(() => store.state.curTheme === 'safety')
const year = '2020'
const yearOptions = ref(['2020', '2019'])
const list = computed(() => {
return [
{
img: Circle,
value: SOSMaterail.value.floodPreventionUnits,
name: '防汛防台',
},
{
img: Circle,
value: SOSMaterail.value.warmAntifreeze,
name: '防寒抗冻',
},
{
img: Circle,
value: SOSMaterail.value.emergencySupplies,
name: '疫情控制',
},
{
img: Circle,
value: SOSMaterail.value.emergencyRescue,
name: '应急抢险',
},
]
})
const houseSum = computed(() => {
return [
{ name: '检查楼数', value: outHouseWall2019.value.checkNum },
{ name: '隐患点数', value: outHouseWall2019.value.hiddenPoint },
{ name: '危险点数', value: outHouseWall2019.value.dangerPoint },
]
})
const population = ref([
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
])
const pieData1 = ref({
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '事业单位', value: 4591 },
{ name: '企业单位', value: 4591 },
{ name: '机关团体', value: 1020 },
{ name: '其他', value: 899 },
],
})
const pieData2 = ref({
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '第一工作站', value: 30 },
{ name: '第二工作站', value: 40 },
{ name: '第三工作站', value: 48 },
],
})
const pieOption = ref({
color: [
['#F76B1C', '#FAD961'],
['#429321', '#B4EC51'],
['#3023AE', '#C86DD7'],
['#51B7EC', '#212F93'],
],
legend: { show: false },
series: [
{
type: 'pie',
radius: [0, '90%'],
center: ['50%', '50%'],
label: {
show: false,
},
},
],
})
function clickSecTitle() {
// 点击查看清单按钮 弹框展示全部重点关注楼宇清单列表
searchModal.value = true
}
return {
list,
houseSum,
searchModal,
population,
pieOption,
pieData2,
pieData1,
showChart,
year,
yearOptions,
SOSMaterail,
outHouseWall2019,
outHouseWall2020,
buildings,
clickSecTitle,
pieData,
// handleChangeYear,
}
},
}) })
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl' @import '../../components/MyComponent/main.styl'
.public-service .public-service
$full() $full()
display flex display flex
...@@ -66,6 +279,156 @@ export default defineComponent({ ...@@ -66,6 +279,156 @@ export default defineComponent({
.company .company
flex 1.2 flex 1.2
#flex-start #flex-start
display flex
:deep(.card-content) :deep(.card-content)
justify-content flex-start justify-content flex-start
>div
flex 1
&:last-child
flex 2
.emergency
flex 1
display flex
flex-wrap wrap
align-items center
>div
display flex
height 50%
flex-wrap wrap
align-items center
width 50%
position relative
img
width 100%
>div
position absolute
text-align center
top 40%
left 50%
transform translate(-50%, -50%)
.num
font-size 0.2rem
font-family $font-pang
.outHouse
white-space nowrap
flex 2
.chartBox
height 40%
display flex
flex-direction column
.drawCharts
height 60%
display flex
>div
display flex
justify-content space-around
width 100%
align-items center
.chart1
width 50%
.chart2
width 35%
.line
height 3px
width 15%
background lime
.legend
display flex
flex-direction column
justify-content space-around
padding 0 0.1rem
>div
display flex
justify-content space-between
align-items center
>p
&:first-child
span
width 0.06rem
height @width
display inline-block
margin-right @width
border-radius 50%
&:last-child
.count
font-size 0.12rem
.unit
font-size 0.08rem
color #aaa
margin-left 0.03rem
.legendBottom
display flex
flex-direction row
justify-content space-around
text-align left
height 40%
>div
width 25%
display flex
flex-direction column
justify-content space-between
align-items center
>p
flex 1
white-space nowrap
width 100%
padding-left 0.06rem
&:first-child
padding-left 0
span
width 0.06rem
height @width
display inline-block
margin-right @width
border-radius 50%
&:last-child
.count
font-size 0.12rem
.unit
font-size 0.08rem
color #aaa
margin-left 0.03rem
.bottomBox
height 40%
display flex
flex-direction column
.content
flex 1
display flex
justify-content space-around
align-items center
flex-wrap wrap
>div
width 32%
background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
padding 0.08rem
.count
font-size 0.12rem
>div
display flex
align-items center
justify-content space-between
width 100%
span
font-size 0.09rem
color #ccc
img
width 0.1rem
height @width
.secRow
display flex
justify-content space-around
flex-direction row
font-size 0.06rem
>span
display flex
flex-direction row
align-items center
justify-content space-around
.view-selector
float right
height 8%
padding 0.03rem 0
.summary
height 10%
</style> </style>
src/view/right/public-work.vue
View file @ 3bbe493c
...@@ -39,23 +39,28 @@ export default defineComponent({ ...@@ -39,23 +39,28 @@ export default defineComponent({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl' @import '../../components/MyComponent/main.styl';
.public-work .public-work {
$full() $full();
display flex display: flex;
justify-content space-between justify-content: space-between;
>div
height 100% >div {
width 33% height: 100%;
width: 33%;
.convenient }
.beauty }
.duty
.analysis .convenient, .beauty, .duty, .analysis {
flex 1 flex: 1;
.task }
height 1rem
.neighbor .task {
height .8rem height: 1rem;
}
.neighbor {
height: 0.8rem;
}
</style> </style>
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