Skip to content

Y
yangpu
Commit 39f3fe67 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

12-15大改版暂存

parent af397888
Show whitespace changes
Inline Side-by-side
Showing with 562 additions and 160 deletions
index.html
View file @ 39f3fe67
......@@ -18,8 +18,8 @@
<!-- built files will be auto injected -->
</body>
<script src="./static/hls.js"></script>
<!-- <script src="./static/SMap.min.js"></script> -->
<script src="./static/esm/SMap.min.js"></script>
<script src="./static/SMap.min.js"></script>
<!-- <script src="./static/esm/SMap.min.js"></script> -->
<script src="./static/Plugins.min.js"></script>
</html>
src/components/MonitorComponents/MonitorCard/mode1.vue
View file @ 39f3fe67
<template>
<div class="card-wrapper">
<div class="card-title" :style="`color:${color}`">
<div class="dot"/>
{{title}}
<p v-if="showTab">
<p class="title">{{title}}</p>
<p v-if="showTab" class="btn">
<span :class="{on: curTab === '处置中'}" @click="handleClick('处置中')">处置中</span>
|
<span :class="{on: curTab === '已完成'}" @click="handleClick('已完成')">已完成</span>
</p>
<div class="line">
<img src="@/assets/images/card-title-line.png"/>
</div>
</div>
<div class="card-content">
<span class="border" />
<span class="border right" />
<slot />
</div>
</div>
......@@ -52,32 +50,49 @@ export default {
.card-wrapper
.card-title
display flex
align-items center
font-size .11rem
align-items flex-start
justify-content space-between
font-size .14rem
font-weight bold
background-image url('../../../assets/images/card-header.png')
background-size 100% 60%
background-position left bottom
background-repeat no-repeat
>p
&.title
text-align center
background-image url('../../../assets/images/card-title-bg.png')
background-size 100% 60%
background-position left bottom
background-repeat no-repeat
padding 0 .2rem
&.btn
font-weight normal
margin-left .05rem
margin-right .1rem
font-size .09rem
align-self flex-end
>span
color #999
cursor pointer
&:hover
&.on
color #fff
.dot
width .03rem
height .1rem
background $edgeColor
margin-right .05rem
.line
margin-left .05rem
flex 1
>img
width 100%
min-height .05rem
.card-content
padding 0.03rem 0 0
position relative
padding .1rem
background linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.8))
border-bottom .01rem solid rgba(91,213,255,.5)
>.border
display block
position absolute
top 0
left 0
bottom 0
width .01rem
background linear-gradient(to bottom, rgba(148,236,255, 0), rgba(91,214,255,.5))
&.right
left auto
right 0
>div
width 100%
height 100%
......
src/components/MonitorComponents/MonitorCard/monitor-card.vue
View file @ 39f3fe67
......@@ -45,8 +45,8 @@ $size()
$size()
$blur()
overflow hidden
height initial
width initial
// height initial
// width initial
/deep/ .card-wrapper
$size()
padding 0.05rem
......
src/server/api.js
View file @ 39f3fe67
......@@ -37,6 +37,7 @@ export default {
GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目
GET_STREET_BASIC: '/dc/getStreetGridPowerByStreetGridId', // 街道基数
GET_VIDEO_URL: 'http://10.89.1.208:7000/hawkeye/api/v1/camera/', // 后面接id获取视频地址
GET_HEALTH_INFO: '/service-documents-ddd/public/property/health/degree', // 物业健康度
}
src/store/actions.js
View file @ 39f3fe67
......@@ -24,6 +24,7 @@ export default {
dispatch('getHandleList')
dispatch('getDoneList')
dispatch('getHealthInfo')
// dispatch('getStreetBasic')
},
async getGreenInfo({commit}) {
const result = [
......@@ -160,4 +161,10 @@ export default {
commit('SET_HEALTH_INFO', com.confirm(res, 'data.content', {}))
})
},
// getStreetBasic({commit}) { // 街道基数
// ajax.get({url: api.DATA_URL + api.GET_STREET_BASIC, params: {street: '五角场街道', gridId: 10027}}).then(res => {
// console.log('basic', com.confirm(res, 'data.content', {}))
// // commit('SET_STREET_BASIC', com.confirm(res, 'data.content', {}))
// })
// },
}
src/views/components/application.vue 0 → 100644
View file @ 39f3fe67
<template>
<div class="application">
<div v-for="item in list" :key="item.name">
<img :src="require(`@/assets/images/${item.icon}`)" />
<p>{{item.name}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'Application',
data() {
return {
list: [
{name: '会议系统', icon: 'app1.png'},
{name: '派单系统', icon: 'app2.png'},
{name: '气象系统', icon: 'app3.png'},
{name: '网格系统', icon: 'app4.png'},
]
}
},
}
</script>
<style lang="stylus" scoped>
.application
display flex
align-items center
justify-content space-around
>div
text-align center
img
height .3rem
width auto
margin .05rem 0
</style>
src/views/components/city-environment.vue 0 → 100644
View file @ 39f3fe67
<template>
<div class="city-environment">
<div v-for="item in list" :key="item.title">
<div>
<img :src="require(`@/assets/images/${item.icon}`)" />
<p>{{item.title}}</p>
</div>
<div>
<m-count class="count" :value="item.value" :decimal="item.decimal" />
<span class="unit">{{item.unit}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CityEnvironment',
data() {
return {
list: [
{title: '空气质量', value: 91.1, unit: '%优良率', decimal: 1, icon: 'city1.png'},
{title: 'PM2.5', value: 32, unit: '微克/㎡', decimal: 0, icon: 'city2.png'},
{title: '人均绿地', value: 91.1, unit: '㎡/人', decimal: 2, icon: 'city3.png'},
{title: '环卫公厕', value: 9, unit: '个', decimal: 0, icon: 'city4.png'},
{title: '生活垃圾收集', value: 98, unit: '个', decimal: 0, icon: 'city5.png'},
{title: '小型压缩站', value: 34, unit: '个', decimal: 0, icon: 'city6.png'},
]
}
},
}
</script>
<style lang="stylus" scoped>
.city-environment
display flex
flex-wrap wrap
width 100%
height 100%
>div
width 33.3%
>div
display flex
align-items center
img
width .13rem
height @width
margin-right .05rem
.count
font-size .12rem
margin-left .18rem
.unit
color #999
font-size .08rem
</style>
src/views/components/combine.vue
View file @ 39f3fe67
<template>
<div class="combine">
<m-scroll v-if="list.length > 0" :length="list.length" :limit="$store.state.currentStreetInfo.name === '新江湾城街道' ? 2 : 3">
<m-scroll v-if="list.length > 0" :length="list.length" :limit="1">
<div @click="$emit('select', item)" :class="{detail: true, done: !isDoing}" v-for="item in list" :key="item.id">
<div>
<h5>{{item.communityName}}</h5>
......
src/views/components/community-check.vue
View file @ 39f3fe67
......@@ -15,9 +15,12 @@ export default {
data() {
return {
list: [
['高空坠物隐患', '水电气异常', '消防设施异常', '.', '.'],
['违规租赁', '毁绿占绿', '停车矛盾', '改变物业性质', '占用公共部位'],
['建筑垃圾违规', '乱布线', '楼道乱张贴', '.', '.'],
['高空坠物隐患', '水电气异常', '消防设施异常'],
['违规租赁', '毁绿占绿', '停车矛盾'],
['建筑垃圾违规', '乱布线', '楼道乱张贴'],
// ['高空坠物隐患', '水电气异常', '消防设施异常', '.', '.'],
// ['违规租赁', '毁绿占绿', '停车矛盾', '改变物业性质', '占用公共部位'],
// ['建筑垃圾违规', '乱布线', '楼道乱张贴', '.', '.'],
]
}
},
......
src/views/components/complaint-repair.vue
View file @ 39f3fe67
......@@ -43,7 +43,7 @@ export default {
},
options: {
legend: {
top: '15%',
top: '5%',
formatter: (name) => {
// const data = this.$store.state.repairRate
// return `${name} ${(data.find(e => e.name === name)).value}件`
......
src/views/components/defense.vue
View file @ 39f3fe67
......@@ -30,7 +30,7 @@ export default {
flex-direction column
justify-content space-around
.bar
width 90%
width 100%
height .06rem
border-radius .02rem
background #19487F
......
src/views/components/left-component.vue
View file @ 39f3fe67
<template>
<div class="left-component">
<p class="title">街镇概况</p>
<div>
<div class="left">
<m-card title="指挥体系"><Command /></m-card>
<m-card title="街道基数"></m-card>
<m-card title="城市环境"><CityEnvironment /></m-card>
<m-card title="土地人口"><LandPopulation /></m-card>
<m-card title="绿化市容"><Green /></m-card>
<m-card title="民防指标"><Defense /></m-card>
</div>
<div class="right">
<m-card title="网格管理"><GridManagement /></m-card>
<m-card title="房屋物业"><House /></m-card>
<m-card title="小区检查清单"><CommunityCheck /></m-card>
</div>
<m-card title="民防指标"><Defense /></m-card>
<m-card title="物业评分"><Property /></m-card>
</div>
</div>
</template>
<script>
import Command from './command'
import LandPopulation from './land-population'
import Green from './green'
import Defense from './defense'
import House from './house'
import CommunityCheck from './community-check'
import GridManagement from './grid-management'
import CityEnvironment from './city-environment'
import Property from './property-score'
export default {
name: 'LeftComponent',
components: {
Command,
LandPopulation,
Green,
Defense,
House,
CommunityCheck,
GridManagement,
CityEnvironment,
Property,
},
data() {
return {}
......@@ -44,47 +33,26 @@ export default {
<style lang="stylus" scoped>
.left-component
display flex
z-index 99
background-image url('../../assets/images/component-bg.png')
background-repeat no-repeat
background-size 100% 100%
width 100%
height calc(100vh - 0.5rem)
position relative
padding .15rem .1rem .1rem
.title
position absolute
text-align center
left 0
right 0
margin 0 auto
font-size .14rem
top -0.1rem
text-shadow 0 0 .05rem #3391FF
font-weight bold
>div
display flex
width 100%
height 100%
>div
// flex 1
width 50%
height 100%
&.left
>div
&:nth-child(1)
height 15%
height 50%
&:nth-child(2)
height 20%
&:nth-child(3)
height 30%
&:nth-child(4)
height 25%
&.right
>div
&:nth-child(1)
height 30%
height 25%
&:nth-child(2)
height 40%
&:nth-child(3)
height 30%
height 75%
</style>
src/views/components/property-score.vue 0 → 100644
View file @ 39f3fe67
<template>
<div class="property-score">
<div>
<div class="title">
<div class="dot"/>
能力得分
<div class="line">
<img src="@/assets/images/card-title-line.png"/>
</div>
</div>
<div class="chart" ref="chart"></div>
</div>
<div>
<div class="title">
<div class="dot"/>
治理得分
<div class="line">
<img src="@/assets/images/card-title-line.png"/>
</div>
</div>
<div class="govern">
<div class="content">
<p><m-count class="count" :value="92" :decimal="0" /><span class="unit">（分）</span></p>
<p>整体治理得分</p>
</div>
<div class="needel" />
</div>
</div>
<div>
<div class="title">
<div class="dot"/>
小区检查清单
<div class="line">
<img src="@/assets/images/card-title-line.png"/>
</div>
</div>
<CommunityCheck />
</div>
</div>
</template>
<script>
import CommunityCheck from './community-check'
import echarts from 'echarts'
export default {
name: 'PropertyScore',
components: {
CommunityCheck,
},
data() {
return {
chart: null,
}
},
mounted() {
setTimeout(this.init, 0)
},
beforeDestroy() {
this.chart && window.removeEventListener('resize', () => this.chart.resize())
},
computed: {
option() {
return {
tooltip: {
trigger: 'axis',
confine: true,
},
radar: [{
name: {
rich: {
a: {
color: '#aaa',
lineHeight: 20,
fontSize: 12 * this.sizeRate,
},
b: {
color: '#ffd400',
align: 'center',
fontSize: 12 * this.sizeRate,
},
c: {
color: '#fff',
align: 'center',
fontSize: 12 * this.sizeRate,
},
},
formatter: (text, {index}) => {
return `{a|${text}}\n{b|${this.chartData[index]}}{c|/20}`
},
},
splitArea: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
axisLine: {
show: false,
},
indicator: [
{text: '物业诚信计分', index: 0, max: 20},
{text: '投诉报修情况', index: 1, max: 20},
{text: '小区管理情况', index: 2, max: 20},
{text: '业主满意度', index: 3, max: 20},
{text: '行业落实情况', index: 4, max: 20},
],
center: ['50%', '60%'],
radius: '60%',
}],
series: [{
type: 'radar',
symbol: 'none',
lineStyle: {
color: '#ff0000'
},
areaStyle: {
color: 'rgb(255,106,37)',
},
data: [{
value: this.chartData,
}]
}]
}
},
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
chartData() {
return [
18.1,
19.9,
15.5,
17.2,
16.1
]
// const {creditScore, propertyWarrantyScore, communityManagementScore, ownerSatisfactionScore, monthCheck} = this.$store.state.healthInfo
// return [
// +creditScore.county || 0,
// +propertyWarrantyScore.county || 0,
// +communityManagementScore.county || 0,
// +ownerSatisfactionScore.county || 0,
// +monthCheck.county || 0,
// ]
},
},
methods: {
init() {
this.chart = echarts.init(this.$refs.chart)
window.addEventListener('resize', () => this.chart.resize())
this.chart.setOption(this.option)
}
},
watch: {
chartData() {
this.chart && this.chart.setOption(this.option)
},
},
}
</script>
<style lang="stylus" scoped>
.property-score
width 100%
height 100%
>div
&:nth-of-type(1)
height 42%
&:nth-of-type(2)
height 33%
&:nth-of-type(3)
height 25%
.title
display flex
align-items center
.dot
width .03rem
height .1rem
background $edgeColor
margin-right .05rem
.line
margin-left .05rem
flex 1
>img
width 100%
min-height .05rem
.chart
height 95%
width 100%
.govern
position relative
height 90%
width 100%
background-image url('../../assets/images/dashboard.png')
background-size auto 100%
background-repeat no-repeat
background-position center
$flex-center()
align-items flex-end
.content
margin-bottom .1rem
.count
font-size .14rem
color #44D7B6
.unit
font-size .08rem
color #999
.needel
position absolute
width .05rem
height .65rem
background linear-gradient(to top, transparent 45%, #44D7B6)
left 0
right 0
bottom .2rem
margin auto
transform-origin bottom
transform rotate(60deg)
</style>
src/views/components/right-component.vue
View file @ 39f3fe67
<template>
<div class="right-component">
<p class="title">发现督查</p>
<div>
<div class="left">
<m-card title="网格管理"><GridManagement /></m-card>
<m-card title="智能发现"><SmartDiscover /></m-card>
<m-card title="投诉报修"><ComplaintRepair /></m-card>
<m-card title="联勤联动" showTab><Combine @select="$emit('handle', $event)"/></m-card>
</div>
<div class="right">
<m-card title="主动巡检"><Patrol @select="$emit('patrol', $event)" /></m-card>
<m-card title="联勤联动" showTab><Combine @select="$emit('handle', $event)"/></m-card>
<m-card title="鹰眼监控" v-if="$store.state.currentStreetInfo.name === '新江湾城街道'">
<m-card title="投诉报修"><ComplaintRepair /></m-card>
<m-card title="专项/专题检查"><SpecialInspection /></m-card>
<!-- <m-card title="主动巡检"><Patrol @select="$emit('patrol', $event)" /></m-card> -->
<!-- <m-card title="鹰眼监控" v-if="$store.state.currentStreetInfo.name === '新江湾城街道'">
<div class="monitor-video">
<div v-for="(img, i) in imgs" @click="handleClick(i)" :key="img" :style="`background-image: url(${require(`@/assets/images/${img}`)})`">
<div><img src="@/assets/images/play.png"/></div>
</div>
</div>
</m-card>
</m-card> -->
</div>
<div class="bottom">
<m-card title="专项应用"><Application /></m-card>
</div>
</div>
</template>
<script>
import GridManagement from './grid-management'
import SmartDiscover from './smart-discover'
import ComplaintRepair from './complaint-repair'
import Patrol from './patrol'
// import Patrol from './patrol'
import Combine from './combine'
import Application from './application'
import SpecialInspection from './special-inspection'
export default {
name: 'RightComponent',
components: {
GridManagement,
SmartDiscover,
ComplaintRepair,
Patrol,
// Patrol,
Combine,
Application,
SpecialInspection
},
data() {
return {
......@@ -56,47 +64,32 @@ export default {
<style lang="stylus" scoped>
.right-component
display flex
z-index 99
background-image url('../../assets/images/component-bg.png')
background-repeat no-repeat
background-size 100% 100%
width 100%
height calc(100vh - 0.5rem)
position relative
padding .15rem .1rem .1rem
.title
position absolute
text-align center
left 0
right 0
margin 0 auto
font-size .14rem
top -0.1rem
text-shadow 0 0 .05rem #3391FF
font-weight bold
>div
display flex
width 100%
height 100%
flex-wrap wrap
>div
// flex 1
width 50%
height 100%
height 80%
&.left
>div
&:nth-child(1)
height 65%
&:nth-child(2)
height 35%
height 37%
&:nth-child(3)
height 26%
&.right
display flex
flex-direction column
>div
&:nth-child(1)
height 40%
height 37%
&:nth-child(2)
flex 1
&:nth-child(3)
height 63%
&.bottom
width 100%
height 20%
.monitor-video
display flex
......
src/views/components/smart-discover.vue
View file @ 39f3fe67
......@@ -21,13 +21,13 @@
<p>{{item.name}}</p>
</div>
</div>
<div v-if="showChart" class="chart">
<!-- <div v-if="showChart" class="chart">
<m-chart v-if="discoverTrend.length > 0" :config="config" :data="discoverTrend" :options="options" />
<div v-else class="no-data">
<img src="@/assets/images/building.png" />
<p>— 暂无数据 —</p>
</div>
</div>
</div> -->
</div>
</template>
......@@ -70,8 +70,8 @@ export default {
sum() {
const {total, today} = this.$store.state.discoverSum
return [
{name: '当日新增', value: today || 0, img: 'today.png', color: '#ffd400'},
{name: '历史累计', value: total || 0, img: 'history.png', color: '#01BFFD'},
{name: '当日新增', value: today || 0, img: 'today-new.png', color: '#ffd400'},
{name: '当日关闭', value: total || 0, img: 'today-close.png', color: '#01BFFD'},
]
},
list() {
......@@ -140,7 +140,7 @@ export default {
align-items center
padding-left .05rem
img
width .25rem
width .15rem
height @width
margin-right .05rem
p
......@@ -152,7 +152,7 @@ export default {
font-size .13rem
.detail
width 100%
height 35%
height 75%
position relative
>img
width 36%
......
src/views/components/special-inspection.vue 0 → 100644
View file @ 39f3fe67
<template>
<div class="special-inspection">
<p>已查/应查</p>
<div class="number">
<p><m-count class="count blue" :value="68" :decimal="0" />/<m-count class="count" :value="158" :decimal="0" /></p>
</div>
<div class="bar">
<div class="inner" :style="`width:${0.8 * 100}%;`"></div>
</div>
<div class="content">
<img src="@/assets/images/icon1.png"/>
<p>已有主题</p>
<div class="line" />
<m-count class="count" :value="16" :decimal="0" />
</div>
<div class="content">
<img src="@/assets/images/icon2.png"/>
<p>已完成检查小区</p>
<div class="line" />
<m-count class="count" :value="92" :decimal="0" />
</div>
<p>已完成整改/已开整改单</p>
<div class="number">
<p><m-count class="count blue" :value="25" :decimal="0" />%</p>
<p><m-count class="count blue" :value="4" :decimal="0" />/<m-count class="count" :value="16" :decimal="0" /></p>
</div>
<div class="bar">
<div class="inner" :style="`width:${0.25 * 100}%;`"></div>
</div>
<div class="number">
<p><m-count class="count blue" :value="16" :decimal="0" />%</p>
</div>
<div class="bar">
<div class="inner" :style="`width:${0.16 * 100}%;`"></div>
</div>
</div>
</template>
<script>
export default {
name: 'SpecialInspection',
data() {
return {}
},
}
</script>
<style lang="stylus" scoped>
.special-inspection
display flex
flex-direction column
justify-content space-around
.count
font-size .12rem
&.blue
color #5bd5ff
.content
display flex
align-items center
img
width .15rem
height @width
margin-right .05rem
.line
flex 1
height .01rem
border-bottom .01rem dashed rgba(51,145,255,.4)
margin 0 .05rem
.number
display flex
align-items center
justify-content space-between
font-size .12rem
font-weight bold
.bar
width 100%
height .08rem
border-radius .01rem
background #19487F
>.inner
height 99%
border-radius inherit
background #FFD400
</style>
src/views/components/street-basic.vue 0 → 100644
View file @ 39f3fe67
<template>
<div class="street-basic">
</div>
</template>
<script>
export default {
name: 'StreetBasic',
data() {
return {}
},
}
</script>
<style lang="stylus" scoped>
</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