Skip to content

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

小区改版

parent dcd8120f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1585 additions and 10 deletions
index.html
View file @ 432b0f00
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="/SMap.min.js"></script> <!-- <script src="/SMap.min.js"></script> -->
<!-- <script src="/dev/SMap.min.js"></script> --> <script src="/dev/SMap.min.js"></script>
<script src="/Plugins.min.js"></script> <script src="/Plugins.min.js"></script>
<script src="/hls.js"></script> <script src="/hls.js"></script>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
......
src/components/MyComponent/main.styl
View file @ 432b0f00
...@@ -50,4 +50,10 @@ $table-bg(opacity = 0.3) ...@@ -50,4 +50,10 @@ $table-bg(opacity = 0.3)
$card-bg2(opacity = 0.4, shadow = 0.2) $card-bg2(opacity = 0.4, shadow = 0.2)
background rgba(70,83,97,opacity) background rgba(70,83,97,opacity)
box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,shadow) box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,shadow)
border-radius .03rem border-radius .03rem
\ No newline at end of file
$box()
background rgba(70,83,97,.4)
border-radius .04rem
box-shadow 0 0.01rem .01rem 0 rgba(255,255,255,.2) inset
box-sizing border-box
\ No newline at end of file
src/router/routes.ts
View file @ 432b0f00
const Main = () => import('@/view/main.vue') const Main = () => import('@/view/main.vue')
const CommunityView = () => import('@/view/community.vue') // const CommunityView = () => import('@/view/community.vue')
const CommunityView = () => import('@/view/new-community.vue')
export default [ export default [
{ name: 'main', path: '/', component: Main }, { name: 'main', path: '/', component: Main },
{ name: 'community', path: '/community', component: CommunityView }, { name: 'community', path: '/community', component: CommunityView },
......
src/view/community.vue
View file @ 432b0f00
...@@ -142,7 +142,7 @@ import { ajax, api } from '@/ajax' ...@@ -142,7 +142,7 @@ import { ajax, api } from '@/ajax'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
export default defineComponent({ export default defineComponent({
name: 'Main', name: 'Community',
components: { LeftSection, RightSection, SiteSelector, VideoComponent }, components: { LeftSection, RightSection, SiteSelector, VideoComponent },
setup() { setup() {
const prefix = computed(() => api.SOURCE_URL) const prefix = computed(() => api.SOURCE_URL)
...@@ -161,13 +161,13 @@ export default defineComponent({ ...@@ -161,13 +161,13 @@ export default defineComponent({
) )
const communityOptions = computed(() => store.state.communityOptions) const communityOptions = computed(() => store.state.communityOptions)
const route = useRoute() const route = useRoute()
const curId = ref<unknown>(null) const curId = ref<undefined | string>()
const initData = (id: unknown) => { const initData = (id?: string) => {
store.dispatch('initCommunityData', id) store.dispatch('initCommunityData', id)
} }
const map = ref<any>(null) const map = ref<any>(null)
onMounted(async () => { onMounted(async () => {
curId.value = route.query.id || communityOptions.value[0].type curId.value = (route.query.id as string) || communityOptions.value[0].type
initData(curId.value) initData(curId.value)
store.commit( store.commit(
'SET_CURRENT_VIEW', 'SET_CURRENT_VIEW',
...@@ -363,7 +363,6 @@ export default defineComponent({ ...@@ -363,7 +363,6 @@ export default defineComponent({
const zoomMap = (type: string) => { const zoomMap = (type: string) => {
map.value.zoom(type) map.value.zoom(type)
} }
const dragAble = ref(false)
return { return {
prefix, prefix,
rotation, rotation,
......
src/view/new-community.vue 0 → 100644
View file @ 432b0f00
This diff is collapsed.
src/view/new-community/archive.vue 0 → 100644
View file @ 432b0f00
<template>
<m-card title="小区档案">
<div>
<Brief :list="summary.slice(0, 3)" size="0.24rem" />
<h1></h1>
<Brief :list="summary.slice(3)" size="0.24rem" />
</div>
<div class="buildings">
<div
v-for="item in buildingList"
:key="item.sectId"
:class="{ on: curBuilding === item.sectId }"
@click="selectBuilding(item.sectId)"
>
{{ item.sectName }}
</div>
</div>
<div class="address">
<div
v-for="(item, i) in addrList"
:key="i"
:style="`border-left-color: ${getColor(item.classification)}`"
>
<div>
<div>
<img :src="getIcon(item.relationName)" />
<p>{{ item.sectName }}</p>
</div>
<div class="type">
<span>{{ item.relationName }}</span>
<span>{{ item.classification }}</span>
</div>
<i :style="`background:${getColor(item.classification)}`" />
</div>
</div>
</div>
<div v-show="memberList.length > 0" class="industry">
<m-sub2>业务会</m-sub2>
<div class="content">
<div v-for="(item, i) in memberList" :key="i">
<p>{{ item.dirName }}</p>
<p>{{ getDuty(item.dirDuty) }}</p>
<p>{{ item.hocName }}</p>
</div>
</div>
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue'
import Brief, { BriefProp } from '@/view/components/brief.vue'
import p1 from '@/assets/images/icon31.png'
import p2 from '@/assets/images/icon37.png'
import p3 from '@/assets/images/icon38.png'
import p4 from '@/assets/images/icon42.png'
import p5 from '@/assets/images/icon43.png'
import p6 from '@/assets/images/icon44.png'
import type1 from '@/assets/images/type1.png'
import type2 from '@/assets/images/type2.png'
import type3 from '@/assets/images/type3.png'
import type4 from '@/assets/images/type4.png'
import type5 from '@/assets/images/type5.png'
import type6 from '@/assets/images/type6.png'
import type7 from '@/assets/images/type7.png'
import store from '@/store'
import { ajax, api } from '@/ajax'
export default defineComponent({
name: 'Archive',
components: { Brief },
setup() {
const summary = ref<BriefProp[]>([])
const buildingList = ref<unknown[]>([])
const curBuilding = ref<string | null>(null)
const memberList = ref<unknown[]>([])
const addrList = ref([])
watch(
() => store.state.communityInfo,
(cur) => {
const {
totCommunity = 0,
totHous = 0,
totCmp = 0,
chargingPile = 0,
parkingSpace = 0,
totForOld = 0,
communityList = [],
} = cur
summary.value = [
{ name: '小区数', value: totCommunity, icon: p1 },
{ name: '总户数', value: totHous, icon: p2 },
{ name: '物业企业', value: totCmp, icon: p3 },
{ name: '充电桩', value: chargingPile, icon: p4 },
{ name: '车棚', value: parkingSpace, icon: p5 },
{ name: '为老设施', value: totForOld, icon: p6 },
]
buildingList.value = communityList
curBuilding.value =
(communityList[0] && communityList[0].sectId) || null
addrList.value = []
memberList.value = []
selectBuilding(curBuilding.value)
},
{ deep: true, immediate: true }
)
const getColor = (type: string): string => {
switch (type) {
case '摄像头':
return '#826AFA'
case '为老设施':
return '#FF6161'
case '小区设施':
return '#8ED617'
default:
return '#fff'
}
}
const getIcon = (type: string): string => {
if (!type) return type2
if (type.indexOf('集合') >= 0) return type3
if (type.indexOf('餐') >= 0) return type6
if (type.indexOf('助浴') >= 0) return type7
if (type.indexOf('充电') >= 0) return type1
if (type.indexOf('车棚') >= 0) return type5
if (type.indexOf('垃圾') >= 0) return type4
return type2
}
const getDuty = (type: string): string => {
switch (type) {
case '1':
return '主任'
case '2':
return '预留印鉴副主任'
case '3':
return '副主任'
default:
return '业委会成员'
}
}
async function selectBuilding(id: string | null): Promise<void> {
if (!id) return
curBuilding.value = id
addrList.value = (
await ajax.get({
url: api.GET_COMMUNITY_FACILITY,
params: { sectId: id, pageSize: 1000 },
})
).data.content.filter((item: any) => item.classification != '微更新')
memberList.value =
(
buildingList.value &&
(buildingList.value.find(
(b: any) => b.sectId === curBuilding.value
) as any)
).icMember.sort((a: any, b: any) => +a.dirDuty - +b.dirDuty) || []
}
return {
summary,
buildingList,
curBuilding,
addrList,
getColor,
getIcon,
memberList,
getDuty,
selectBuilding,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.buildings
display flex
justify-content space-between
margin .05rem 0
padding 0 .05rem
>div
$box()
$center()
width 23%
height .4rem
cursor pointer
position relative
color #aaa
opacity .8
text-align center
padding 0 .08rem
&:hover
opacity 1
color #fff
&.on
color #fff
opacity 1
box-shadow none
.address
// display flex
// flex-wrap wrap
height 3.2rem
overflow-y auto
margin-bottom .1rem
>div
display inline-block
width 48%
height .6rem
margin-top .04rem
margin-left .04rem
overflow hidden
padding .03rem .05rem
box-sizing border-box
position relative
background rgba(33,58,89,.2)
border .01rem solid rgba(91,213,255,.1)
border-left .02rem solid transparent
i
position absolute
right -0.1rem
bottom -0.1rem
width .2rem
height .2rem
transform rotate(45deg)
opacity .4
>div
display flex
width 100%
height 100%
flex-direction column
justify-content space-around
>div
display flex
align-items center
p
color #aaa
flex 1
img
width .15rem
height @width
margin-right .1rem
.type
display flex
justify-content space-between
font-size .08rem
.industry
.title
display flex
align-items center
font-family $font-zcool
font-size .14rem
color $edge
img
width .18rem
height @width
margin-right .05rem
.content
display flex
justify-content space-between
flex-wrap wrap
overflow hidden
>div
flex 1
display flex
flex-direction column
justify-content center
padding .05rem .08rem
min-height .5rem
margin-bottom .05rem
margin-right @margin-bottom
$box()
p
font-size .08rem
color #aaa
&:first-child
font-size .09rem
color #fff
</style>
src/view/new-community/community-video.vue 0 → 100644
View file @ 432b0f00
<template>
<m-card class="card" title="场景监控视频">
<div class="nav">
<a-select
v-model:value="curScene"
dropdown-class-name="community-video-selector-drop-down"
>
<a-select-option
v-for="option in scenes"
:key="option.value"
:value="option.value"
>
{{ option.name }}
</a-select-option>
</a-select>
<a-select
v-model:value="curAddress"
dropdown-class-name="community-video-selector-drop-down"
>
<a-select-option
v-for="option in addresses"
:key="option.value"
:value="option.value"
>
{{ option.name }}
</a-select-option>
</a-select>
</div>
<div class="community-video">
<div
v-for="item in list"
:key="item.name"
:style="`background:url(${
item.photo &&
item.photo
.replace('https://zhongbang.omniview.pro/', prefix)
.replace('http://zhongbang.omniview.pro/', prefix)
}) 100% / 100% 100% no-repeat`"
@click="handleClick(item.video)"
>
<p>{{ item.name }}</p>
<div class="mask">
<img src="@/assets/images/play.png" />
</div>
</div>
</div>
</m-card>
<m-modal v-model="showModal" title="视频" width="30%" offset="-70%">
<VideoComponent v-if="showModal" :video-src="src" />
</m-modal>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
// import photo1 from '@/assets/images/community1.png'
// import photo2 from '@/assets/images/community2.png'
// import photo3 from '@/assets/images/community3.png'
// import { ajax } from '@/ajax'
import VideoComponent from '../components/video-component.vue'
import store from '@/store'
import { useRoute } from 'vue-router'
import { api } from '@/ajax'
export default defineComponent({
name: 'CommunityPhoto',
components: { VideoComponent },
setup() {
const showModal = ref(false)
const src = ref<string | null>(null)
const prefix = computed(() => api.SOURCE_URL)
const handleClick = async (video: string) => {
// if (!id) return
// const [{ remark2 }] = (
// await ajax.get({
// url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
// })
// ).data
// src.value = remark2
src.value =
video &&
video.replace('https://zhongbang.omniview.pro/', prefix.value) &&
video.replace('http://zhongbang.omniview.pro/', prefix.value)
showModal.value = true
}
const route = useRoute()
const curId = computed(
() => (route && route.query.id) || store.state.communityOptions[0].type
)
const list = computed(() => {
if (curId.value === '527635870583459840') {
// 振兴小区
return [
{
name: '重庆北路后门',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AXyAIUKZAAIFC2qNmKI384.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9PlmAH8-oAEmHxWhriqw954.mov',
},
{
name: '大沽路大门',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AYmAT-A1AAMElShNriM149.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9QE6AckoPAEM3swvgmFQ182.mov',
},
{
name: '重庆北路177弄64号',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AQCAEc3pAASC2UqtXWs052.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AVyAanZkApsdVDHEGc0527.mp4',
},
]
}
return [
{
name: '62弄朝北',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5GdOAW6qQAAvNhxSqO-g179.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9OkmAFxVMAS7MAmRH2Xc004.mp4',
},
{
name: '62弄朝东',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9QIiAaz9fAS3gvWsrxYQ927.mp4',
},
{
name: '62弄朝南',
photo:
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5KrOAVcluAAnbZjB7fNA165.jpg',
video:
'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9P1mALYigATKoQQw6Y8k841.mp4',
},
]
})
const curScene = ref('all')
const curAddress = ref('all')
const scenes = [{ name: '全部场景', value: 'all' }]
const addresses = [{ name: '全部地址', value: 'all' }]
return {
prefix,
list,
handleClick,
showModal,
src,
scenes,
addresses,
curScene,
curAddress,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.card
:deep(.card-content)
display flex
flex-direction column
justify-content space-between
overflow hidden
.nav
display flex
justify-content space-between
margin .04rem 0
padding 0 .06rem
>div
width 48%
.community-video
flex 1
display flex
flex-direction column
justify-content space-between
padding .05rem
>div
height 32%
position relative
cursor pointer
.mask
$center()
display flex
position absolute
width 100%
height 100%
opacity 0.8
transition all .3s ease-in-out
>img
width .3rem
height @width
transition transform .3s ease-in-out
transform-origin center center
&:hover
.mask
opacity 1
background-color rgba(0,0,0,0.4)
>img
transform scale(1.2) rotate(360deg)
>p
position absolute
bottom .05rem
right @bottom
padding .04rem .1rem
border-radius .14rem
color #fff
background rgba(0,0,0,0.6)
</style>
src/view/new-community/left.vue 0 → 100644
View file @ 432b0f00
<template>
<div class="part-left">
<m-card mode="border2" style="flex: 1">
<m-card class="card" title="基本情况">
<Brief :list="situation" color="#F7933E" />
<div class="wrapper">
<div class="chart">
<p>房屋类型分布</p>
<m-pie :dataset="pieData1" :option="option1" />
</div>
<div class="legend">
<div v-for="(item, i) in pieData1.source" :key="item.name">
<p>
<i class="dot" :style="`background:${option1.color[i][0]}`" />
{{ item.name }}
</p>
<p>
<span><m-count :value="item.value" /> 幢</span>
<span><m-count :value="item.area" /> ㎡</span>
</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="chart">
<p>物业管理面积占比</p>
<m-pie :dataset="pieData2" :option="option2" />
</div>
<div class="legend">
<div v-for="(item, i) in pieData2.source" :key="item.name">
<p>
<i class="dot" :style="`background:${option2.color[i][0]}`" />
{{ item.name }}
<span><m-count :value="item.value" /> ㎡</span>
</p>
</div>
</div>
</div>
</m-card>
<m-card class="card" title="小区健康度">
<div class="sum">
<div v-for="item in scoreSum" :key="item.name">
<m-count class="orange-count" :value="item.value" :decimal="1" />
<p>{{ item.name }}</p>
</div>
</div>
<div>
<m-sub2 :addition="{ value: 90 }">评分走势</m-sub2>
<div class="score-chart">
<m-line :dataset="scoreData" :option="option3" />
</div>
</div>
</m-card>
</m-card>
<div class="btns">
<span>紫华大厦</span>
<span>文海大楼</span>
<span>振兴片区</span>
</div>
</div>
</template>
<script lang="ts" setup>
import icon1 from '@/assets/images/icon31.png'
import icon2 from '@/assets/images/icon37.png'
import icon3 from '@/assets/images/icon38.png'
import { ref } from 'vue'
import Brief from '../components/brief.vue'
const situation = [
{
name: '门牌数',
value: 39,
icon: icon1,
},
{
name: '管理面积(㎡)',
value: 1579.15,
icon: icon2,
},
{
name: '物业企业',
value: 3,
icon: icon3,
},
]
const pieData1 = ref({
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '幢' },
],
source: [
{ name: '商品房', value: 261, area: 1876 },
{ name: '售后房', value: 237, area: 1532 },
{ name: '公房', value: 218, area: 957 },
],
})
const option1 = {
color: [
['#F6C84E', '#EE7837'],
['#815FFC', '#7320A0'],
['#32C5FF', '#328EFF'],
],
legend: {
show: false,
},
series: [
{
type: 'pie',
radius: ['46%', '76%'],
center: ['40%', '45%'],
label: {
show: false,
},
},
],
}
const pieData2 = ref({
dimensions: [
{ name: 'name', displayName: '名称' },
{ name: 'value', displayName: '面积' },
],
source: [
{ name: '物业1', value: 1876 },
{ name: '物业2', value: 1532 },
{ name: '物业3', value: 957 },
],
})
const option2 = {
color: [
['#29EFD1', '#0986B2'],
['#F6C84E', '#EE7837'],
['#32C5FF', '#328EFF'],
],
legend: {
show: false,
},
series: [
{
type: 'pie',
radius: ['0%', '76%'],
center: ['40%', '45%'],
label: {
show: false,
},
},
],
}
const scoreSum = [
{
name: '本市平均分',
value: 89.5,
},
{
name: '本区平均分',
value: 88.3,
},
{
name: '本街镇平均分',
value: 89.6,
},
]
const scoreData = ref({
dimensions: [
{ name: 'name', displayName: 'date' },
{ name: 'value', displayName: '分数' },
],
source: [
{ name: '11-01', value: 70 },
{ name: '11-02', value: 60 },
{ name: '11-03', value: 90 },
{ name: '11-04', value: 85 },
{ name: '11-05', value: 80 },
{ name: '11-06', value: 70 },
{ name: '11-07', value: 90 },
],
})
const option3 = {
color: ['#FFCE34'],
legend: { show: false },
yAxis: {
min: 50,
max: 100,
},
}
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.part-left
width 100%
height 100%
display flex
flex-direction column
.card
flex 1
:deep(.card-content)
display flex
flex-direction column
justify-content space-between
overflow hidden
&:first-child
flex 1.4
.btns
height .4rem
margin-top .05rem
display flex
justify-content space-between
>span
$center()
width 30%
background url('@/assets/images/btn-bg2.png') 50% 50% / 100% 100% no-repeat
opacity .8
color #fff
font-weight bold
cursor pointer
transition opacity .3s ease-in-out
&:hover
opacity 1
.wrapper
$box()
padding .05rem .1rem
display flex
width 100%
margin .04rem 0
.chart
width 50%
height 1rem
.legend
flex 1
display flex
flex-direction column
justify-content space-around
.dot
display inline-block
width .06rem
height @width
border-radius 50%
margin-right .05rem
p
&:last-child
padding-left .15rem
span+span
margin-left .1rem
.sum
display flex
justify-content space-around
>div
text-align center
color #ccc
.score-chart
width 100%
height 1.2rem
</style>
src/view/new-community/right.vue 0 → 100644
View file @ 432b0f00
<template>
<div class="right">
<m-card mode="border2">
<CommunityVideo />
</m-card>
<m-card mode="border2">
<WarningStatistics />
</m-card>
<m-card mode="border2">
<Archive />
</m-card>
</div>
</template>
<script lang="ts" setup>
import CommunityVideo from './community-video.vue'
import WarningStatistics from './warning-statistics.vue'
import Archive from './archive.vue'
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.right
$full()
display flex
justify-content space-between
>div
height 100%
width 33%
</style>
src/view/new-community/warning-statistics.vue 0 → 100644
View file @ 432b0f00
<template>
<m-card class="card" title="预警数量统计">
<div class="sum">
<div class="left">
<div v-for="item in sum" :key="item.name">
<m-count class="orange-count" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
<div class="right">
<div v-for="item in sub" :key="item.name">
<i class="dot" />
<p>{{ item.name }}</p>
<span>{{ item.value }}</span>
</div>
</div>
</div>
<div class="list">
<div v-for="item in list" :key="item.name">
<p>
<i class="dot" />
{{ item.name }}
</p>
<m-count :value="item.value" />
</div>
</div>
<div class="wrapper">
<m-sub2>快处闭环</m-sub2>
<div class="events">
<m-scroll :length="events.length" :limit="5" mode="2" :step="0.8">
<div v-for="(item, i) in events" :key="i" class="event-item">
<div class="left">
<p>{{ item.name }}</p>
<p>发现时间：{{ item.time }}</p>
<p>
处置部门：<span class="department">{{ item.department }}</span>
</p>
</div>
<div class="middle">
<div :style="`background-image: url(${item.discover})`">
<span>发现</span>
</div>
<div :style="`background-image: url(${item.process})`">
<span>处置</span>
</div>
</div>
<div class="right">
<div
v-for="(step, index) in steps"
:key="step"
:class="{ on: index == item.cur, unreach: +item.cur < index }"
>
<span class="step" />
<p>{{ step }}</p>
</div>
</div>
</div>
</m-scroll>
</div>
</div>
</m-card>
</template>
<script lang="ts" setup>
import c1 from '@/assets/images/c1.png'
import c2 from '@/assets/images/c2.png'
const sum = [
{
name: '今日预警数量',
value: 3,
},
{
name: '历史预警数量',
value: 41,
},
{
name: '预警类型',
value: 5,
},
]
const sub = [
{ name: '视频识别', value: 2 },
{ name: '物联感知', value: 2 },
{ name: '数据关联分析', value: 2 },
{ name: '数据统计预警', value: 1 },
]
const list = [
{ name: '电瓶车入库', value: 38 },
{ name: '垃圾暴露', value: 5 },
{ name: '占用消防通道', value: 2 },
{ name: '垃圾满溢', value: 28 },
{ name: '高叠隐患', value: 2 },
{ name: '易积水预警', value: 19 },
{ name: '群租', value: 16 },
]
const events = [
{
name: '占用消防通道',
time: '2020-03-13 13:23:08',
department: '小区物业',
discover: c1,
process: c2,
cur: 2,
},
{
name: '占用消防通道',
time: '2020-03-13 13:23:08',
department: '小区物业',
discover: c1,
process: c2,
cur: 2,
},
{
name: '占用消防通道',
time: '2020-03-13 13:23:08',
department: '小区物业',
discover: c1,
process: c2,
cur: 2,
},
{
name: '占用消防通道',
time: '2020-03-13 13:23:08',
department: '小区物业',
discover: c1,
process: c2,
cur: 2,
},
{
name: '占用消防通道',
time: '2020-03-13 13:23:08',
department: '小区物业',
discover: c1,
process: c2,
cur: 2,
},
{
name: '占用消防通道',
time: '2020-03-13 13:23:08',
department: '小区物业',
discover: c1,
process: c2,
cur: 2,
},
]
const steps = ['发现', '接收', '处置', '完成']
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
$orange = #FA6400
.card
:deep(.card-content)
display flex
flex-direction column
justify-content space-between
overflow hidden
i.dot
display inline-block
width .04rem
height @width
border-radius 50%
background #77BFF9
margin-right .06rem
.sum
display flex
align-items center
padding-right .06rem
.left
color #ccc
flex 2.6
display flex
justify-content space-around
.right
flex 1
>div
display flex
align-items center
p
flex 1
.list
display flex
flex-wrap wrap
margin-bottom .04rem
>div
display flex
align-items center
justify-content space-between
padding .04rem .08rem
width 48%
$box()
margin .04rem 0 0 .04rem
.wrapper
flex 1
display flex
flex-direction column
overflow hidden
.events
height 3.4rem
overflow hidden
.event-item
height .74rem
margin-bottom .06rem
$box()
padding .04rem .08rem
display flex
justify-content space-between
align-items center
.left
p
font-size .08rem
white-space nowrap
&:first-child
font-size .12rem
color $orange
.department
display inline-block
background linear-gradient(to right, #61E4FF, #3289FF)
border-radius .04rem
padding .01rem .05rem
text-align center
color #000
font-size .08rem
.middle
display flex
>div
width .5rem
height @width
background-size cover
background-position center center
background-repeat no-repeat
border .02rem solid
position relative
&+div
margin-left .05rem
&:first-child
border-color $orange
span
background $orange
&:last-child
border-color $blue
span
background $blue
span
display inline-block
position absolute
left 0
top 0
padding 0 .02rem
.right
position relative
&:before
content ''
width .02rem
height 80%
position absolute
background #32C5FF
z-index 1
top 0
bottom 0
margin auto 0
transform translateX(150%)
>div
display flex
align-items center
.step
display inline-block
width .04rem
height @width
border-radius 50%
background #32C5FF
border .02rem solid #fff
box-sizing content-box
margin-right .05rem
z-index 2
p
color #ccc
font-size .08rem
&.on
.step
background #fff
border-color $blue
p
color $primary-color
&.unreach
.step
background #fff
border-color #fff
p
color #999
</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