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 @@
]
},
"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 {
GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
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(
(config) => {
// 添加token
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
},
(error) => {
......
src/components/MyComponent/MyModal/my-modal.vue
View file @ 3bbe493c
......@@ -13,7 +13,7 @@
>
<div
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 right-top" />
......@@ -72,6 +72,10 @@ export default defineComponent({
type: String as PropType<string>,
default: '0',
},
translateY: {
type: String as PropType<string>,
default: '0',
},
maskClosable: {
type: Boolean as PropType<boolean>,
default: true,
......@@ -98,22 +102,22 @@ export default defineComponent({
right 0
bottom 0
left 0
background rgba(0,0,0,0.1)
background rgba(0, 0, 0, 0.1)
z-index 9999
$center()
.my-modal
color #fff
z-index 99999
padding .04rem
padding 0.04rem
background transparent
position relative
$blur(0.01rem)
.edge
display block
position absolute
width .1rem
width 0.1rem
height @width
border .01rem solid $secondary-color
border 0.01rem solid $secondary-color
&.left-top
top 0
left 0
......@@ -136,38 +140,38 @@ export default defineComponent({
border-top none
.inner
$blur()
background rgba(6,34,67,.8)
border .01rem solid rgba(91,213,255,.3)
background rgba(6, 34, 67, 0.8)
border 0.01rem solid rgba(91, 213, 255, 0.3)
head
height .28rem
height 0.28rem
background url('@/assets/images/modal-head-bg.png') 100% / 100% 100% no-repeat
display flex
align-items center
position relative
>p
font-size .14rem
font-size 0.14rem
font-family $font-zcool
text-indent .14rem
text-indent 0.14rem
line-height 1.5
>img
width .14rem
width 0.14rem
height @width
position absolute
&:nth-of-type(1)
width .24rem
width 0.24rem
height @width
left -0.095rem
&:nth-of-type(2)
right .05rem
right 0.05rem
cursor pointer
transition transform .3s ease-in-out
transition transform 0.3s ease-in-out
&:hover
transform rotate(180deg)
.content
min-height 30vh
max-height 80vh
padding .1rem
padding 0.1rem
overflow-y auto
overflow-x hidden
font-size .1rem
font-size 0.1rem
</style>
src/store/actions.ts
View file @ 3bbe493c
import { ajax, api } from '@/ajax'
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 {
initData({ dispatch }: { dispatch: Dispatch }): void {
......@@ -34,4 +37,191 @@ export default {
const { content } = (await ajax.get({ url: api.GET_STATION })).data
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 {
propertySummary: { [key: string]: number }
caseList: 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>({
state,
......
src/store/mutations.ts
View file @ 3bbe493c
......@@ -22,4 +22,95 @@ export default {
SET_MUTATION_LIST(state: GlobalStateProps, data: unknown[]): void {
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 {
propertySummary: {},
caseList: [],
stationList: [],
pubulicSafeGateSenteryShehuiwuye: {},
pubulicSafeGateSenteryZhiguangongfang: {},
pubulicSafeMap: [],
pubulicSafeTruePeople: {},
pubulicSafeHouse: {},
pubulicSafeNonResident: {},
pubulicSafeHouseStKind: {},
pubulicSafeTrueCompany: {},
pubulicSafeSOSMaterail: {},
pubulicSafeOutHouseWall2019: {},
pubulicSafeOutHouseWall2020: {},
pubulicSafeBuildings: [],
pubulicSafePieData: [],
} as GlobalStateProps
src/view/components/map-btns.vue
View file @ 3bbe493c
......@@ -224,7 +224,7 @@ $bg = rgba(6,34,67,.4)
.map-btns
position fixed
bottom .05rem
left calc(16vw + .1rem)
left calc(20vw + .1rem)
transition left .3s ease
&.full
left .05rem
......
src/view/components/sub-title.vue
View file @ 3bbe493c
......@@ -2,6 +2,7 @@
<div class="sub-title">
<p><slot /></p>
<span />
<p @click="clickSecTitle"><slot name="secTitle" /></p>
</div>
</template>
......@@ -10,6 +11,16 @@ import { defineComponent } from 'vue'
export default defineComponent({
name: 'SubTitle',
emits: ['clicktit'],
setup(_, ctx) {
function clickSecTitle() {
ctx.emit('clicktit')
}
return {
clickSecTitle,
}
},
})
</script>
......@@ -18,14 +29,14 @@ export default defineComponent({
.sub-title
display flex
align-items center
margin .04rem 0
margin 0.04rem 0
p
color $secondary-color
margin-right .1rem
margin-right 0.1rem
font-weight bold
span
flex 1
display block
height .01rem
height 0.01rem
background $primary-border
</style>
src/view/components/view-selector.vue
View file @ 3bbe493c
......@@ -50,7 +50,7 @@ $height = .26rem
#view-selector.view-selector
position fixed
top .45rem
left calc(16vw + .1rem)
left calc(20vw + .1rem)
z-index 99
.ant-select
background $bg
......
src/view/left/command.vue
View file @ 3bbe493c
......@@ -2,10 +2,6 @@
<m-card mode="border">
<m-card class="card" title="指挥体系">
<div class="command">
<div class="flag">
<img src="@/assets/images/zheng.png" />
<img src="@/assets/images/jing.png" />
</div>
<div class="leader">
<div v-for="(item, i) in leaders" :key="i">
<img :src="item.img" />
......@@ -15,50 +11,41 @@
</div>
</div>
</div>
</div>
<div class="disposal">
<m-sub>处置力量</m-sub>
<div class="duty">
<div class="member">
<div v-for="(item, i) in members" :key="i">
<div>
<p>值班人员</p>
<p>日间值班 · 08:00 ~ 18:00</p>
<p>{{ item.name }}</p>
<span>{{ item.type }}</span>
</div>
</div>
<span />
<div>
<p>值班人员</p>
<p>夜间值班 · 18:00 ~ 08:00</p>
</div>
</div>
<div class="disposal">
<m-sub>网格工作站</m-sub>
<div class="table">
<div>
<p>工作小组</p>
<p>组长</p>
<p>电话</p>
<p>常驻人数</p>
<p>报道制人数</p>
<p>网格工作站</p>
<p class="thead3">网格长</p>
<p>工作时段</p>
<p>总人数</p>
</div>
<div v-for="(item, i) in dutyTableData" :key="i">
<p>{{ item.group }}</p>
<p>{{ item.leader }}</p>
<p>{{ item.phone }}</p>
<p>{{ item.number1 }}</p>
<p>{{ item.number2 }}</p>
</div>
</div>
</div>
<div class="soldier">
<m-sub>单兵巡查边量</m-sub>
<div class="btns">
<div v-for="btn in btns" :key="btn.name">
<img :src="btn.icon" />
{{ btn.name }}
</div>
</div>
<div class="list">
<div v-for="soldier in soldierList" :key="soldier.id">
<p>{{ soldier.name }}</p>
<p>{{ soldier.phone }}</p>
<span>查看点位</span>
<p class="doubleRow">
<span>
<span>日</span>
<span>{{ item.leader }}(城管) 、{{ item.leader1 }}(绿化)</span>
</span>
<span>
<span>夜</span>
<span>{{ item.leader2 }}(警长)</span>
</span>
</p>
<p class="doubleRow2">
<span>{{ item.dayTime }}</span>
<span>{{ item.nightTime }}</span>
</p>
<p>{{ item.number }}人</p>
</div>
</div>
</div>
......@@ -105,45 +92,85 @@ export default defineComponent({
{
img: avatar1,
type: '指挥长',
name: '姓名',
name: '袁登全',
},
{
img: avatar2,
type: '指挥长',
name: '姓名',
type: '副指挥长',
name: '卢军',
},
// {
// img: avatar1,
// type: '指挥长',
// name: '姓名',
// },
// {
// img: avatar2,
// type: '指挥长',
// name: '姓名',
// },
])
const members = ref([
{
img: avatar1,
type: '指挥长',
name: '姓名',
name: '鲁涵智',
type: '社区管理办',
},
{
img: avatar2,
type: '指挥长',
name: '姓名',
name: '范杲逻',
type: '党政办',
},
{
name: '庞勇',
type: '社区平安办',
},
{
name: '鲁涵智',
type: '社区管理办',
},
{
name: '鲁涵智',
type: '社区管理办',
},
{
name: '鲁涵智',
type: '社区管理办',
},
{
name: '鲁涵智',
type: '社区管理办',
},
{
name: '鲁涵智',
type: '社区管理办',
},
])
const dutyTableData = ref([
{
group: '第一小组',
leader: '组长名',
phone: '1356249823',
number1: 5,
number2: 5,
group: '第一工作站',
leader: '长名',
leader1: '人名',
leader2: '名2',
dayTime: '8时-18时',
nightTime: '18时-8时',
number: 5,
},
{
group: '第一小组',
leader: '组长名',
phone: '1356249823',
number1: 5,
number2: 5,
group: '第二工作站',
leader: '长名',
leader1: '人名',
leader2: '名2',
dayTime: '8时-18时',
nightTime: '18时-8时',
number: 5,
},
{
group: '第一小组',
leader: '组长名',
phone: '1356249823',
number1: 5,
number2: 5,
group: '第三工作站',
leader: '长名',
leader1: '人名',
leader2: '名2',
dayTime: '8时-18时',
nightTime: '18时-8时',
number: 5,
},
])
const btns = ref([
......@@ -243,6 +270,7 @@ export default defineComponent({
])
return {
leaders,
members,
dutyTableData,
btns,
soldierList,
......@@ -262,117 +290,118 @@ export default defineComponent({
.card
flex 1
&:first-child
flex 2.1
flex 1.8
.command
display flex
.flag
flex 1
display flex
flex-direction column
justify-content space-around
margin 0 .3rem 0 .05rem
>img
display block
width .3rem
height @width
margin .04rem 0
white-space nowrap
.leader
display flex
flex-wrap wrap
flex 1
padding 0.1rem 0
border-bottom 1px solid rgba(91, 213, 255, 0.5)
>div
width 50%
display flex
align-items center
p
font-size .11rem
font-size 0.11rem
font-weight bold
img
width .28rem
width 0.28rem
height @width
margin-right .1rem
margin-right 0.1rem
span
color #ccc
.disposal
.duty
.member
display flex
align-items center
margin-bottom .05rem
>span
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
flex-wrap wrap
borde 1px solid red
flex 2
>div
width 25%
display flex
align-items center
color $primary-color
margin-left .2rem
cursor pointer
transition .3s ease-in-out
&:hover
transform scale(1.1)
text-decoration underline
p
font-size 0.11rem
font-weight bold
img
width .1rem
width 0.28rem
height @width
margin-right .05rem
.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
margin-right 0.1rem
span
color $primary-color
cursor pointer
&:hover
text-decoration underline
color #ccc
.disposal
flex 1.3
.party
display flex
.content
padding-left .1rem
padding-left 0.1rem
flex 1
&.party
display flex
flex-direction column
justify-content space-around
padding-bottom .1rem
padding-bottom 0.1rem
&.economic
display flex
>div
flex 1
.table
border .01rem solid $blue
border 0.01rem solid $blue
font-size 0.09rem
>div
display flex
background $table-bg(.15)
background $table-bg(0.15)
&:first-child
background $table-bg()
&+div
border-top inherit
p
flex 1
line-height 2
padding 0 .05rem
line-height 4
text-align center
overflow hidden
text-overflow ellipsis
white-space nowrap
&+p
border-left .01rem solid $blue
border-left 0.01rem solid $blue
&:nth-of-type(3)
flex 1.4
&: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>
src/view/main.vue
View file @ 3bbe493c
<template>
<m-grid
:template="['title title title', 'left . right']"
columns="16vw auto 49vw"
columns="20vw auto 49vw"
rows="0.4rem auto"
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-animate enter="fadeInLeft" leave="fadeOutLeft">
<Command v-show="'street' === curViewType && !fullScreen" area="left" />
......@@ -96,13 +96,15 @@ export default defineComponent({
const fullScreen = ref(false)
const showDrawer = ref(false)
const map = ref<any>(null)
// ajax
// .get({
// url: api.GET_CASE,
// })
// .then((res) => {
// console.log(res)
// })
ajax
.get({
url: api.GET_CASE,
})
.then((res) => {
console.log(res)
})
const handleMapComplete = () => {
console.log('complete', map.value)
map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
......
src/view/right/company.vue
View file @ 3bbe493c
<template>
<m-card title="实有单位" :addition="{ value: 10203, unit: '家' }">
<m-card
title="实有单位"
:addition="{ value: trueCompany.companyNum, unit: '家' }"
>
<div class="sum">
<div v-for="item in sum" :key="item.name">
<m-count class="count" :value="item.value" />
<p>
{{ item.name }}
<img v-if="item.icon" :src="item.icon" />
<!-- <img v-if="item.icon" :src="item.icon" /> -->
</p>
</div>
</div>
<div class="content">
<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 class="legend">
<div v-for="(item, i) in pieData.source" :key="item.name">
......@@ -36,23 +43,31 @@ import store from '@/store'
export default defineComponent({
name: 'Company',
setup() {
store.dispatch('GET_PUBLICSAFE_TRUE_COMPANY')
const trueCompany = computed(() => store.state.pubulicSafeTrueCompany)
const showChart = computed(() => store.state.curTheme === 'safety')
const sum = ref([
{ name: '本街道注册', value: 6741 },
{ name: '境外注册', value: 1658, icon: icon1 },
{ name: '境内注册', value: 1804, icon: icon1 },
])
const pieData = ref({
const sum = computed(() => {
return [
{ name: '本街道注册', value: trueCompany.value.thisCity },
{ name: '境外注册', value: trueCompany.value.outCountry, icon: icon1 },
{ name: '境内注册', value: trueCompany.value.inCountry, icon: icon1 },
]
})
const pieData = computed(() => {
return {
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '事业单位', value: 4591 },
{ name: '企业单位', value: 4591 },
{ name: '机关团体', value: 1020 },
{ name: '其他', value: 899 },
{ name: '事业单位', value: trueCompany.value.institution },
{ name: '企业单位', value: trueCompany.value.enterprise },
{ name: '机关团体', value: trueCompany.value.organization },
{ name: '其他', value: trueCompany.value.other },
],
}
})
const pieOption = ref({
color: [
......@@ -78,6 +93,7 @@ export default defineComponent({
sum,
pieData,
pieOption,
trueCompany,
}
},
})
......@@ -88,7 +104,7 @@ export default defineComponent({
.sum
display flex
align-items center
margin .05rem 0
margin 0.05rem 0
>div
flex 1
text-align center
......@@ -102,15 +118,15 @@ export default defineComponent({
color $blue
transform translateY(-50%)
.count
font-size .12rem
font-size 0.12rem
p
color #ccc
font-size .09rem
text-indent .1rem
font-size 0.09rem
text-indent 0.1rem
img
width .1rem
width 0.1rem
height @width
margin-left .02rem
margin-left 0.02rem
.content
flex 1
display flex
......@@ -123,7 +139,7 @@ export default defineComponent({
display flex
flex-direction column
justify-content space-around
padding 0 .1rem
padding 0 0.1rem
>div
display flex
justify-content space-between
......@@ -131,16 +147,16 @@ export default defineComponent({
>p
&:first-child
span
width .06rem
width 0.06rem
height @width
display inline-block
margin-right @width
border-radius 50%
&:last-child
.count
font-size .12rem
font-size 0.12rem
.unit
font-size .08rem
font-size 0.08rem
color #aaa
margin-left .03rem
margin-left 0.03rem
</style>
src/view/right/house.vue
View file @ 3bbe493c
<template>
<m-card title="实有房屋" :addition="{ value: 18980, unit: '幢' }">
<m-card
title="实有房屋"
:addition="{
value: allTrueHouse,
unit: '幢',
}"
>
<div>
<m-sub :addition="{ value: 11883, unit: '幢' }">居住房屋</m-sub>
<m-sub :addition="{ value: pubulicSafeHouse.house, unit: '幢' }">
居住房屋
</m-sub>
<Brief :list="summary" color="#fff" />
<div class="bar-txt">
<p>
<span>2000年前房屋</span>
<m-count class="count" :value="5616" />
<m-count class="count" :value="pubulicSafeHouse.befor" />
<span class="unit">幢</span>
</p>
<img src="@/assets/images/location.png" />
</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 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>
<m-count class="count" :value="item.value" />
<p>{{ item.name }}</p>
......@@ -23,14 +35,18 @@
</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" />
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import icon18 from '@/assets/images/icon18.png'
import icon19 from '@/assets/images/icon19.png'
......@@ -38,42 +54,102 @@ import icon20 from '@/assets/images/icon20.png'
import icon7 from '@/assets/images/icon7.png'
import icon21 from '@/assets/images/icon21.png'
import icon22 from '@/assets/images/icon22.png'
import store from '@/store'
export default defineComponent({
name: 'House',
components: { Brief },
setup() {
const summary = ref<BriefProp[]>([
{ name: '小区数', value: 65465, icon: icon18 },
{ name: '物业公司', value: 1648, icon: icon19 },
{ name: '业委会', value: 56462, icon: icon20 },
])
const houseTypes = ref([
store.dispatch('GET_PUBLICSAFE_HOUSE')
store.dispatch('GET_PUBLICSAFE_NONRESIDENT')
const pubulicSafeHouse = computed(() => store.state.pubulicSafeHouse)
const pubulicSafeNonResident = computed(
() => store.state.pubulicSafeNonResident
)
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: '商品房',
value: 7128,
percent: 60,
value: pubulicSafeHouseStKind.value.spf,
percent:
(pubulicSafeHouseStKind.value.spf /
pubulicSafeHouseStKindNum.value) *
100,
},
{
name: '直管公房',
value: 3564,
percent: 30,
value: pubulicSafeHouseStKind.value.zggf,
percent:
(pubulicSafeHouseStKind.value.zggf /
pubulicSafeHouseStKindNum.value) *
100,
},
{
name: '保障房及其他',
value: 1188,
percent: 15,
value: pubulicSafeHouseStKind.value.other,
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 {
summary,
houseTypes,
houseSum,
pubulicSafeHouse,
pubulicSafeNonResident,
allTrueHouse,
}
},
})
......@@ -85,32 +161,32 @@ export default defineComponent({
display flex
align-items center
justify-content space-between
padding 0 .03rem
margin .05rem 0 .02rem
padding 0 0.03rem
margin 0.05rem 0 0.02rem
color #eee
.count
color $secondary-color
font-size .14rem
margin-left .15rem
font-size 0.14rem
margin-left 0.15rem
.unit
color #aaa
font-size .08rem
margin-left .05rem
font-size 0.08rem
margin-left 0.05rem
img
width .1rem
width 0.1rem
height @width
.house-types
display flex
justify-content space-between
align-items center
margin-top .1rem
margin-top 0.1rem
>div
display flex
align-items center
>div
margin-left .05rem
margin-left 0.05rem
.count
font-size .12rem
font-size 0.12rem
font-weight bold
p
color #ccc
......
src/view/right/police.vue
View file @ 3bbe493c
......@@ -11,20 +11,20 @@
<m-sub>门岗值守分布</m-sub>
<div class="gate">
<p>直管公房</p>
<Summary :list="houseSum" />
<Summary :list="zggfList" />
</div>
<div class="gate">
<p>社会物业</p>
<Summary :list="houseSum" />
<Summary :list="shwyList" />
</div>
</div>
<div>
<m-sub>平安地图</m-sub>
<div class="safe-map">
<div>
<p v-for="item in mapList" :key="item.name">
<span>{{ item.name }}</span>
<m-count class="count" :value="item.value" />
<p v-for="item in safeMap" :key="item.cmtName">
<span @click="clickStreetName(item)">{{ item.cmtName }}</span>
<m-count class="count" :value="item.score" />
</p>
</div>
<div>
......@@ -32,6 +32,26 @@
</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>
</template>
......@@ -48,8 +68,20 @@ export default defineComponent({
name: 'Police',
components: { Brief, Summary },
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 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[]>([
{ name: '今日发现', value: 157, icon: icon15 },
{ name: '今日处置中', value: 64, icon: icon16 },
......@@ -99,39 +131,50 @@ export default defineComponent({
},
],
})
const houseSum = ref<SummaryProp[]>([
{ name: '出入口', value: 165 },
{ name: '已封闭', value: 165 },
{ name: '有门岗处', value: 165 },
{ name: '值守处', value: 165 },
])
const mapList = ref([
{ name: '龙泉', value: 92 },
{ name: '厦门', value: 90 },
{ name: '牛庄', value: 90 },
{ name: '贵州', value: 92 },
{ name: '长江', value: 92 },
{ name: '云中', value: 92 },
{ name: '小花园', value: 92 },
{ name: '平望', value: 92 },
{ name: '振兴', value: 90 },
{ name: '新昌', value: 90 },
{ name: '江阴', value: 90 },
{ name: '顺天村', value: 92 },
{ name: '新桥', value: 92 },
{ name: '三德', value: 90 },
{ name: '福海', value: 92 },
{ name: '福瑞', value: 90 },
{ name: '承兴', value: 92 },
{ name: '定兴', value: 92 },
])
const clickStreetName = (item: any): void => {
searchModal.value = true
streetData.value = item
}
// const houseSum = ref<SummaryProp[]>([
// { name: '出入口', value: 165 },
// { name: '已封闭', value: 165 },
// { name: '有门岗处', value: 165 },
// { name: '值守处', value: 165 },
// ])
// const mapList = ref([
// { name: '龙泉', value: 92 },
// { name: '厦门', value: 90 },
// { name: '牛庄', value: 90 },
// { name: '贵州', value: 92 },
// { name: '长江', value: 92 },
// { name: '云中', value: 92 },
// { name: '小花园', value: 92 },
// { name: '平望', value: 92 },
// { name: '振兴', value: 90 },
// { name: '新昌', value: 90 },
// { name: '江阴', value: 90 },
// { name: '顺天村', value: 92 },
// { name: '新桥', value: 92 },
// { name: '三德', value: 90 },
// { name: '福海', value: 92 },
// { name: '福瑞', value: 90 },
// { name: '承兴', value: 92 },
// { name: '定兴', value: 92 },
// ])
return {
sumList,
lineData,
lineOption,
showChart,
houseSum,
mapList,
safeMap,
// mapList,
streetData,
searchModal,
zggfList,
shwyList,
clickStreetName,
}
},
})
......@@ -139,15 +182,14 @@ export default defineComponent({
<style lang="stylus" scoped>
@import ('../../components/MyComponent/main.styl')
.chart
width 100%
height 1.4rem
margin .1rem 0
margin 0.1rem 0
.gate
margin-bottom .1rem
margin-bottom 0.01rem
p
margin-bottom .05rem
margin-bottom 0.01rem
.safe-map
display flex
>div
......@@ -157,12 +199,12 @@ export default defineComponent({
flex-wrap wrap
>p
width 33.3%
margin-bottom .04rem
margin-bottom 0.04rem
span
color #ccc
.count
margin-left .08rem
font-size .12rem
margin-left 0.08rem
font-size 0.12rem
&:last-child
$center()
flex 1
......
src/view/right/population.vue
View file @ 3bbe493c
<template>
<m-card title="实有人口" :addition="{ value: 76618, unit: '人' }">
<m-card
title="实有人口"
:addition="{ value: truePeople.personnelNum, unit: '人' }"
>
<Brief :list="summary" />
<div class="content">
<div v-for="item in population" :key="item.name">
<m-count class="count" :value="item.value" />
<div>
<span>{{ item.name }}</span>
<img src="@/assets/images/location.png" />
<!-- <img src="@/assets/images/location.png" /> -->
</div>
</div>
</div>
......@@ -14,21 +17,28 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import inImg from '@/assets/images/in.png'
import out from '@/assets/images/out.png'
import store from '@/store'
import china from '@/assets/images/china.png'
export default defineComponent({
name: 'Population',
components: { Brief },
setup() {
const summary = ref<BriefProp[]>([
{ name: '本市户籍', value: 18733, icon: inImg },
{ name: '境外流入', value: 28833, icon: out },
{ name: '境内流入', value: 29052, icon: china },
])
store.dispatch('GET_PUBLICSAFE_TRUE_PEOPLE')
const truePeople = computed(() => store.state.pubulicSafeTruePeople)
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([
{ name: '老龄人口', value: 35648 },
{ name: '低保人口', value: 65315 },
......@@ -37,6 +47,7 @@ export default defineComponent({
return {
summary,
population,
truePeople,
}
},
})
......@@ -49,18 +60,18 @@ export default defineComponent({
>div
width 32%
background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
padding .05rem .15rem
padding 0.05rem 0.15rem
.count
font-size .12rem
font-size 0.12rem
>div
display flex
align-items center
justify-content space-between
width 100%
span
font-size .09rem
font-size 0.09rem
color #ccc
img
width .1rem
width 0.1rem
height @width
</style>
src/view/right/public-safety.vue
View file @ 3bbe493c
......@@ -10,48 +10,261 @@
</m-card>
<m-card id="flex-start" mode="border">
<m-card title="应急物资储备">
<Brief
:list="[
{ name: '防汛防台', value: 65 },
{ name: '防寒抗冻', value: 35 },
{ name: '疫情控制', value: 43 },
{ name: '应急抢险', value: 43 },
]"
/>
<div class="emergency">
<div v-for="(item, index) in list" :key="index">
<div>
<p>{{ item.name }}</p>
<p class="num">{{ item.value }}</p>
</div>
<img :src="item.img" />
</div>
</div>
</m-card>
<m-card title="“两牢”人员">
<Summary
:list="[
{ name: '总人员', value: 120 },
{ name: '劳改人员', value: 20 },
{ name: '劳教人员', value: 100 },
]"
two-child
<m-card title="房屋外立面">
<div class="outHouse">
<div class="view-selector">
<a-select
:value="year"
dropdown-class-name="view-selector-drop-down"
>
<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 title="房屋外立面"></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>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent, ref, computed, watch } from 'vue'
import Police from './police.vue'
import Population from './population.vue'
import House from './house.vue'
import Company from './company.vue'
import Brief from '../components/brief.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({
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>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.public-service
$full()
display flex
......@@ -66,6 +279,156 @@ export default defineComponent({
.company
flex 1.2
#flex-start
display flex
:deep(.card-content)
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>
src/view/right/public-work.vue
View file @ 3bbe493c
......@@ -39,23 +39,28 @@ export default defineComponent({
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.public-work
$full()
display flex
justify-content space-between
>div
height 100%
width 33%
.convenient
.beauty
.duty
.analysis
flex 1
.task
height 1rem
.neighbor
height .8rem
@import '../../components/MyComponent/main.styl';
.public-work {
$full();
display: flex;
justify-content: space-between;
>div {
height: 100%;
width: 33%;
}
}
.convenient, .beauty, .duty, .analysis {
flex: 1;
}
.task {
height: 1rem;
}
.neighbor {
height: 0.8rem;
}
</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