Skip to content

W
wisdom-property
Commit d2fc7f9e authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

整体调整，4月17日演示用

parent 6e54e49d
Hide whitespace changes
Inline Side-by-side
Showing with 1240 additions and 425 deletions
src/assets/css/variables.styl
View file @ d2fc7f9e
......@@ -23,7 +23,7 @@ $selected()
box-sizing border-box
border 0.1rem solid $edgeColor
background-color rgba(0,242,255,0.1)
$fontColor = #5587b7
$fontColor = #61c2f3
$edgeColor = #00f2ff
$cardBg = rgba(0, 242, 255, 0.1)
......
src/components/MonitorComponents/MonitorBrief/monitor-brief.vue
View file @ d2fc7f9e
......@@ -2,7 +2,7 @@
<div class="monitor-brief">
<img v-if="icon" :src="icon" draggable="false"/>
<div>
<p class="label" :style="`color:${labelColor}`">{{label}}</p>
<p class="label">{{label}}</p>
<count class="count" :style="`font-size:${size};color:${countColor}`" :value="value" :decimal="decimal"/>
<span v-if="unit">{{unit}}</span>
</div>
......@@ -60,9 +60,11 @@ export default {
width 100%
display flex
align-items center
.label
color $fontColor
>img
width 2.8rem
margin-right 1rem
width 2.6rem
margin-right 0.5rem
>div
flex 1
.count
......
src/components/MonitorComponents/MonitorCard/mode1.vue
View file @ d2fc7f9e
......@@ -13,7 +13,7 @@
<script>
export default {
name: 'Mode2',
name: 'Mode1',
props: {
title: {
type: String,
......
src/components/MonitorComponents/MonitorCard/mode3.vue
View file @ d2fc7f9e
<template>
<div class="card-wrapper">
<div class="card-title" :style="`color:${color}`">
<div v-if="!hideTitle" class="card-title" :style="`color:${color}`">
<img v-if="icon" :src="icon"/>
{{title}}
<p>{{title}}</p>
<img v-if="more" :src="more" @click="$store.commit('CHANGE_ISSHOWMORE',true)">
</div>
<div class="card-content">
<div class="card-content" :style="contentStyle">
<slot />
</div>
</div>
......@@ -15,6 +16,7 @@ export default {
name: 'Mode3',
props: {
icon: {},
more: {},
title: {
type: String,
default: '标题',
......@@ -22,6 +24,19 @@ export default {
color: {
type: String,
},
hideTitle: {
type: Boolean,
default: false,
},
},
computed: {
contentStyle() {
if (!this.hideTitle) return {}
return {
'height': '100%',
'overflow-y': 'hidden',
}
}
},
}
</script>
......@@ -32,6 +47,7 @@ export default {
.card-title
display flex
align-items center
justify-content space-between
color #fff
font-size 1.4rem
font-weight bold
......@@ -39,9 +55,15 @@ export default {
margin-bottom 0.5rem
height 3rem
padding 0 1rem
p
flex 1
>img
width 1.4rem
margin-right 1rem
&:last-child
width 1.8rem
margin 0
cursor pointer
.card-content
background $cardBg
padding 1rem
......
src/components/MonitorComponents/MonitorCard/monitor-card.vue
View file @ d2fc7f9e
<template>
<m-animate :enter="enter" :leave="leave">
<div class="monitor-card">
<component :is="card" v-bind="$attrs">
<component :is="card" v-bind="$attrs" :title="title">
<slot/>
</component>
</div>
......@@ -12,6 +12,9 @@
export default {
name: 'MonitorCard',
props: {
title: {
type: String,
},
mode: {
type: [String, Number],
default: '1',
......@@ -49,4 +52,5 @@ $size()
.card-content
height calc(100% - 2rem)
overflow-y auto
overflow-x hidden
</style>
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ d2fc7f9e
......@@ -88,6 +88,7 @@ export default {
/** 设置坐标轴 */
setAxis(options) {
const {xAxis, yAxis, shape} = this.config
if (shape[0].type === 'pie' || shape[0].type === 'donut') return
const config = {
data: this.data.map(item => item[(yAxis && yAxis.key) || xAxis.key]),
boundaryGap: !shape.every(item => item.type === 'line')
......@@ -111,8 +112,8 @@ export default {
const y1Max = Math.max.apply(null, y1)
const y2Max = Math.max.apply(null, y2)
options.yAxis = [
Object.assign({}, this.defaultOptions.yAxis, {min:0, max: y1Max, interval: y1Max / 5}),
Object.assign({}, this.defaultOptions.yAxis, {min:0, max: y2Max, interval: y2Max / 5}),
Object.assign({}, this.defaultOptions.yAxis, {min: 0, max: y1Max, interval: y1Max / 5}),
Object.assign({}, this.defaultOptions.yAxis, {min: 0, max: y2Max, interval: y2Max / 5}),
]
} else {
options.yAxis = Object.assign({}, this.defaultOptions.yAxis, yAxis)
......@@ -130,16 +131,16 @@ export default {
/** 设置图例说明 */
setLegend(options) {
const {legend} = this.config
if (legend.hide) {
if (legend && legend.hide) {
options.grid.top = '5%'
return
}
options.legend = Object.assign({}, this.defaultOptions.legend, this.options.legend)
if (legend.orient) {
if (legend && legend.orient) {
options.legend.orient = legend.orient
}
options.legend.data = this.dataSource.map(item => item.name)
switch (legend.align) {
switch (legend && legend.align) {
case 'left':
options.legend.left = '5%'
break
......@@ -156,19 +157,11 @@ export default {
const {shape} = this.config
// 如果为饼图则数据需是[{name: 'name', value: 1}]格式，且不需要坐标轴
if (shape[0].type === 'pie') {
options.color = this.colors
options.series = [{
label: {
normal: {
show: false,
},
},
...shape[0],
}]
options.series[0].data = options.legend.data = this.data
options.tooltip.trigger = 'item'
this.$delete(options, 'xAxis')
this.$delete(options, 'yAxis')
this.setPie(options)
return
}
if (shape[0].type === 'donut') {
this.setDonut(options)
return
}
......@@ -198,6 +191,90 @@ export default {
return result
})
},
// 绘制饼图
setPie(options) {
const {shape} = this.config
options.color = this.colors
options.series = [{
label: {
normal: {
show: false,
},
},
...shape[0],
}]
if (options.legend && options.legend.data) {
options.series[0].data = options.legend.data = this.data
} else {
options.series[0].data = this.data
}
options.tooltip.trigger = 'item'
this.$delete(options, 'xAxis')
this.$delete(options, 'yAxis')
},
// 绘制同心圆图
setDonut(options) {
const {shape} = this.config
options.color = this.colors
options.series = this.getDonutConfig(shape)
},
getDonutConfig(args) {
const len = args.length
if (len <= 0 ) return
const total = this.data.reduce((acc, cur) => { // 计算数据的value总和
return acc + cur.value
}, 0)
return args.map((e, i) => {
const rate = Math.round((len - i) * this.borderWidth * 2)
let borderColor = this.colors[i]
if(Array.isArray(borderColor)) {
borderColor = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: borderColor[0] // 0% 处的颜色
}, {
offset: 1, color: borderColor[1] // 100% 处的颜色
}],
global: false, // 缺省为 false
}
}
return {
type: 'pie',
name: e.name,
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [rate, rate + 1],
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
borderWidth: this.borderWidth,
borderColor: borderColor,
}
},
data: [
this.data[i],
{
value: Math.round(total - this.data[i].value),
name: '',
itemStyle: this.blackStyle,
}
]
}
})
},
},
computed: {
colors() {
......@@ -290,10 +367,28 @@ export default {
fontSize() {
return Math.floor(screen.height * 1.48 / 100)
},
borderWidth() {
return this.$refs.chart.offsetHeight * 0.04
},
blackStyle() {
return {
normal: {
label: {
show: false,
},
labelLine: {
show: false
},
color: 'transparent',
borderColor: 'rgba(0,0,0,0.1)',
borderWidth: this.borderWidth,
},
}
},
},
watch: {
data(cur, past) {
if (cur && cur !== past && cur.length > 0) {
if (cur && cur.length > 0) {
this.init()
}
}
......
src/components/MonitorComponents/MonitorForm/monitor-form.vue
View file @ d2fc7f9e
......@@ -3,9 +3,9 @@
<p v-if="title" class="title">{{title}}</p>
<Row class="row" v-for="(row, rowIndex) in layout" :key="rowIndex">
<i-col class="col" v-for="(col, key) in row" :key="key" :span="col.width" :offset="col.offset || 0">
<div :style="`text-align: ${col.align || 'left'}; width:${labelWidth}rem;`">{{col.label}}：</div>
<div :style="`text-align: ${col.align || 'right'}; width:${labelWidth}rem;`">{{col.label}}：</div>
<img v-if="col.type == 'img'" @click="handleView(model[key])" :src="$api.IMG_URL + model[key]"/>
<div v-else class="content">{{model[key]}}</div>
<div v-else class="content">{{col.format?col.format(model[key]):(model[key]||' ')}}</div>
</i-col>
</Row>
<m-modal v-model="showImg">
......@@ -67,15 +67,13 @@ export default {
margin-bottom 1rem
border-bottom 0.1rem solid $color-map()
.row
line-height 2.4rem
// &:nth-child(2n)
// background-color $color-map(0.15)
line-height 3rem
&:nth-child(2n)
background-color $color-map(0.15)
.col
display flex
align-items center
padding 0 1rem
&:nth-child(2n+1)
background-color $color-map(0.15)
.content
flex 1
img
......
src/components/MonitorComponents/MonitorGrid/monitor-grid.vue
View file @ d2fc7f9e
<template>
<div class="monitor-grid" ref="grid" :style="style">
<m-loader v-show="showLoad" :msg="loadMsg" bgColor="#000"/>
<slot />
</div>
</template>
......@@ -24,13 +25,20 @@ export default {
bgImg: {
type: String,
},
complete: {
type: Boolean,
default: true,
}
},
data() {
return {
style: {},
showLoad: false,
loadMsg: '初始化 . . .',
}
},
mounted() {
this.showLoad = !this.complete
this.$nextTick(() => {
setTimeout(this.init, 0)
})
......@@ -64,6 +72,14 @@ export default {
}
},
},
watch: {
complete(cur, past) {
if (cur && cur != past) {
this.loadMsg = '完成中 . . .'
this.showLoad = false
}
}
}
}
</script>
......
src/components/MonitorComponents/MonitorLoader/monitor-loader.vue
View file @ d2fc7f9e
<template>
<div class="monitor-loader">
<div class="monitor-loader" :style="`background:${bgColor}`">
<div class="loader">
<div class="outer"/>
<div class="inner"/>
......@@ -15,7 +15,11 @@ export default {
msg: {
type: String,
default: '加载中 . . .',
}
},
bgColor: {
type: String,
default: 'rgba(0,0,0,0.3)',
},
}
}
</script>
......@@ -27,13 +31,13 @@ export default {
left 0
bottom 0
right 0
background rgba(0,0,0,0.3)
z-index 9999
display flex
align-items center
justify-content center
.loader
position relative
z-index 8888
.msg
display block
color #fff
......
src/components/MonitorComponents/MonitorMap/monitor-map.vue
View file @ d2fc7f9e
......@@ -30,6 +30,11 @@ export default {
mounted() {
this.inject().then(this.initMap)
},
computed: {
sizeRate() {
return Math.floor(screen.height * 1.48 / 100 / 11)
},
},
methods: {
inject() {
return new Promise((resolve, reject) => {
......@@ -52,8 +57,8 @@ export default {
url: this.mapUrl,
onReady: () => {
// console.log('地图创建完成')
this.$emit('complete')
this.addListener()
this.$emit('complete')
}
})
},
......@@ -156,7 +161,7 @@ export default {
symbolLayers: [
{
type: 'icon',
size,
size: size * this.sizeRate,
resource: {
href: this.iconUrl + (item.icon || icon),
},
......@@ -210,7 +215,7 @@ export default {
datas: data.map(item => {
return {
name: labelKey ? item[labelKey] : null,
value: size,
value: size * this.sizeRate,
corrd: [item.X || item.x, item.Y || item.y],
color: color,
}
......
src/components/MonitorComponents/MonitorMenu/index.js 0 → 100644
View file @ d2fc7f9e
import MonitorMenu from './monitor-menu.vue'
export default (Vue) => {
Vue.component('m-menu', MonitorMenu)
}
src/components/MonitorComponents/MonitorMenu/monitor-menu.vue 0 → 100644
View file @ d2fc7f9e
<template>
<m-animate enter="fadeInDown" leave="fadeOutUp">
<div class="theme-menu" v-show="value" @mouseleave="closeMenu">
<div class="edge top-left" />
<div class="edge top-right" />
<div class="edge bottom-left" />
<div class="edge bottom-right" />
<p
v-for="theme in themeList"
:key="theme.url"
:class="`${theme.name == curTheme ? 'on' : ''}`"
@click="handleThemeSelect(theme)">
{{theme.name}}
</p>
</div>
</m-animate>
</template>
<script>
export default {
name: 'MonitorMenu',
props: {
value: {
type: Boolean,
default: false,
},
themes: {
type: Array,
default() {
return []
}
},
},
computed: {
curTheme() {
return document.title
},
defaultThemes() {
let base = 'http://962121.net/hmfmstest'
if (window.location.origin.indexOf('sh.gov') >= 0) {
base = 'http://962121.fgj.sh.gov.cn/wyweb'
}
return [
{name: '长桥四村智慧感知事件监控', url: null},
{name: '物业督查实时专题图', url: base + '/shanghaiwuye/web/dataV/propertyinspector/#/'},
{name: '新冠疫情隔离监控', url: base + '/shanghaiwuye/web/dataV/publicsafety/#/'},
]
},
themeList() {
if (this.themes && this.themes.length > 0) return this.themes
return this.defaultThemes
}
},
methods: {
closeMenu() {
this.$emit('input', false)
},
handleThemeSelect({name, url}) {
if (name == this.curTheme) return
window.open(url, '_blank')
this.closeMenu()
}
},
}
</script>
<style lang="stylus" scoped>
$theme-selected()
position absolute
display block
content ''
width 0
height 0
border 0.5rem solid $edgeColor
top 1rem
transform rotate(45deg)
.theme-menu
font-family $font-din
position absolute
// min-height 10rem
width 26rem
padding 1rem
text-align center
color #ccc
font-weight bold
background $color-map(0.1)
left 0
right 0
bottom 6rem
margin auto
border 0.1rem solid $color-map()
>p
font-size 1.2rem
line-height 3rem
cursor pointer
position relative
overflow hidden
&:hover
color $edgeColor
&.on
font-size 1.4rem
color $edgeColor
background $color-map(0.2)
&:before
$theme-selected()
margin-left -0.5rem
border-left-color transparent
border-bottom-color transparent
&:after
$theme-selected()
right 0
margin-right -0.5rem
border-right-color transparent
border-top-color transparent
.edge
position absolute
width 2rem
height 2rem
border 0.3rem solid $edgeColor
&.top-left
top -0.1rem
left -0.1rem
border-right none
border-bottom none
&.top-right
top -0.1rem
right -0.1rem
border-left none
border-bottom none
&.bottom-left
bottom -0.1rem
left -0.1rem
border-right none
border-top none
&.bottom-right
bottom -0.1rem
right -0.1rem
border-left none
border-top none
</style>
src/components/MonitorComponents/MonitorModal/monitor-modal copy.vue 0 → 100644
View file @ d2fc7f9e
<template>
<m-animate :enter="enter" :leave="leave">
<div v-if="value" class="monitor-modal">
<div :style="`width:${width}`">
<img @click="handleClose" class="close-btn" src="@/assets/images/modal-close.png"/>
<img class="border top" src="@/assets/images/modal-top.png"/>
<div class="content">
<div>
<slot/>
</div>
</div>
<img class="border bottom" src="@/assets/images/modal-bottom.png"/>
</div>
</div>
</m-animate>
</template>
<script>
export default {
name: 'MonitorModal',
props: {
value: {
type: Boolean,
default: false,
},
width: {
type: String,
default: '40%',
},
enter: {
type: String,
default: 'zoomInUp',
},
leave: {
type: String,
default: 'zoomOutDown',
}
},
methods: {
handleClose() {
this.$emit('close')
this.$emit('input', false)
}
},
}
</script>
<style lang="stylus" scoped>
.monitor-modal
position fixed
top 0
left 0
right 0
bottom 0
display flex
align-items center
justify-content center
background rgba(0,0,0,0.1)
z-index 1000
>div
position relative
padding 2% 0
background $color-map(0.1)
color #ccc
.content
min-height 30vh
max-height 60vh
padding 0 1rem
overflow-y auto
overflow-x hidden
>div
$blur()
>img
position absolute
&.close-btn
top -0.4rem
right -2.6rem
width 2.4rem
cursor pointer
&.border
width 103%
height 10%
left -1.5%
&.top
top -1rem
&.bottom
bottom -1rem
</style>
src/components/MonitorComponents/MonitorModal/monitor-modal-bak.vue deleted 100644 → 0
View file @ 6e54e49d
<template>
<transition name="custom-classes-transition" enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
<div v-if="value" class="monitor-modal" ref="modal">
<img @click="handleClose" class="close-btn" src="@/assets/images/title-arrow.png"/>
<img class="border left" src="@/assets/images/modal-right.png"/>
<div class="content">
<div>
<slot/>
</div>
</div>
<img class="border right" src="@/assets/images/modal-right.png"/>
</div>
</transition>
</template>
<script>
export default {
name: 'MonitorModal',
props: {
value: {
type: Boolean,
default: false,
},
width: {
type: String,
default: '40%',
}
},
methods: {
handleClose() {
this.$emit('close')
this.$emit('input', false)
}
},
}
</script>
<style lang="stylus" scoped>
.monitor-modal
position fixed
top 4rem
right 1rem
bottom 0.6rem
z-index 1000
width 23.8vw
padding 1rem 0
background $color-map(0.1)
color #ccc
.content
height 100%
padding 0 1rem
overflow-y auto
overflow-x hidden
>img
position absolute
&.close-btn
top 0
bottom 0
margin auto
width 3rem
left -3rem
transform rotate(270deg)
cursor pointer
&.border
width 2rem
height 102%
top -0.5rem
bottom 0
&.left
transform rotate(180deg)
left -1rem
&.right
right -1rem
</style>
src/components/MonitorComponents/MonitorModal/monitor-modal.vue
View file @ d2fc7f9e
......@@ -2,14 +2,23 @@
<m-animate :enter="enter" :leave="leave">
<div v-if="value" class="monitor-modal">
<div :style="`width:${width}`">
<img @click="handleClose" class="close-btn" src="@/assets/images/modal-close.png"/>
<img class="border top" src="@/assets/images/modal-top.png"/>
<div class="title">
<p>
{{title}}
<span class="left"></span>
<span class="right"></span>
</p>
<div>
<img class="flag" src="@/assets/images/modal-title1.png"/>
<img @click="handleClose" class="close-btn" src="@/assets/images/close.png"/>
</div>
<img class="left" src="@/assets/images/modal-title-left.png"/>
</div>
<div class="content">
<div>
<slot/>
</div>
</div>
<img class="border bottom" src="@/assets/images/modal-bottom.png"/>
</div>
</div>
</m-animate>
......@@ -29,12 +38,16 @@ export default {
},
enter: {
type: String,
default: 'zoomInUp',
default: 'fadeInDown',
},
leave: {
type: String,
default: 'zoomOutDown',
}
default: 'fadeOutUp',
},
title: {
type: String,
default: 'title',
},
},
methods: {
handleClose() {
......@@ -58,31 +71,61 @@ export default {
background rgba(0,0,0,0.1)
z-index 1000
>div
position relative
padding 2% 0
background $color-map(0.1)
background transparent
color #ccc
.title
height 4rem
position relative
font-weight bold
border 0.1rem solid $color-map()
display flex
align-items center
justify-content space-between
padding 0 1rem
background-image repeating-linear-gradient(45deg, $color-map(0.1), $color-map(0.1), 0.1rem, transparent 0.1rem, transparent 0.8rem)
background-color $color-map(0.1)
margin-bottom 0.5rem
$blur()
p
color #fff
border-bottom 0.1rem solid $edgeColor
font-size 1.2rem
position relative
padding 0.2rem 0.5rem
span
position absolute
width .4rem
height .4rem
background-color $edgeColor
bottom - (@height / 2)
&.left
left - (@width / 2)
&.right
right - (@width / 2)
>div
display flex
align-items center
img
&.close-btn
width 2rem
cursor pointer
margin-left 0.5rem
transition transform 0.5s
&:hover
transform rotate(90deg)
&.flag
height 2rem
&.left
position absolute
left -0.1rem
height 80%
.content
min-height 30vh
max-height 60vh
padding 0 1rem
padding 1rem
overflow-y auto
overflow-x hidden
>div
$blur()
>img
position absolute
&.close-btn
top -0.4rem
right -2.6rem
width 2.4rem
cursor pointer
&.border
width 103%
height 10%
left -1.5%
&.top
top -1rem
&.bottom
bottom -1rem
border 0.1rem solid $edgeColor
border-top none
$blur()
</style>
src/components/MonitorComponents/MonitorScroll/index.js 0 → 100644
View file @ d2fc7f9e
import MonitorScroll from './monitor-scroll'
export default (Vue) => {
Vue.component('m-scroll', MonitorScroll)
}
src/components/MonitorComponents/MonitorScroll/monitor-scroll.vue 0 → 100644
View file @ d2fc7f9e
<template>
<div class="monitor-scroll" @mouseenter="clearTimer" @mouseleave="start">
<div ref="scrollContent">
<slot />
</div>
<div v-if="!isShort && !isTooLong" ref="subContent">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'MonitorScroll',
props: {
length: {
type: Number,
required: true,
},
limit: {
type: Number,
default: 6,
},
duration: {
type: Number,
default: 5000,
},
mode: {
type: [Number, String],
default: 1,
},
step: {
type: Number,
},
},
data() {
return {
timer: null,
index: 0,
}
},
mounted() {
this.$nextTick(this.start)
},
beforeDestroy() {
this.clearTimer()
},
computed: {
isShort() {
return this.length <= this.limit
},
isTooLong() {
return this.length > 100
}
},
methods: {
clearTimer() {
clearInterval(this.timer)
this.timer = null
},
start() {
if (this.isShort) return
if (this.mode == '2') {
this.startMode2()
} else {
this.startMode1()
}
},
startMode1() {
const content = this.$refs.scrollContent
const subContent = this.$refs.subContent
let height = content.offsetHeight
this.timer = setInterval(() => {
if (height <= 0) {
height = content.offsetHeight
return
}
if (this.index < height) {
this.index += 1
} else {
this.index = 0
}
content.style.transform = `translateY(${-this.index}px)`
subContent ? subContent.style.transform = `translateY(${-this.index}px)` : null
}, 100)
},
startMode2() {
const content = this.$refs.scrollContent
const subContent = this.$refs.subContent
const len = this.$com.confirm(content, 'children.length', 0)
this.timer = setInterval(() => {
if (this.index < len) {
this.index += 1
content.style.transition = 'transform 0.5s'
subContent ? subContent.style.transition = 'transform 0.5s' : null
} else {
this.index = 0
content.style.transition = 'none'
subContent ? subContent.style.transition = 'none' : null
}
content.style.transform = `translateY(${-this.step * this.index}rem)`
subContent ? subContent.style.transform = `translateY(${-this.step * this.index}rem)` : null
}, this.duration)
},
},
watch: {
length(cur) {
this.clearTimer()
this.index = 0
const content = this.$refs.scrollContent
const subContent = this.$refs.subContent
if (content) {
content.style.transform = 'translateY(0)'
}
if (subContent) {
subContent.style.transform = 'translateY(0)'
}
this.$nextTick(this.start)
}
},
}
</script>
<style lang="stylus" scoped>
.monitor-scroll
width 100%
height 100%
overflow hidden
box-sizing border-box
z-index 10
</style>
src/components/MonitorComponents/MonitorStep/monitor-step copy.vue 0 → 100644
View file @ d2fc7f9e
<template>
<div class="monitor-step">
<div class="lines" :style="setTop">
<div class="line done" :style="`width:${doneWidth}%`"/>
<div class="line" :style="`width:${notWidth}%`"/>
</div>
<div v-for="(step, i) in steps" :key="i" :class="`item ${i == current ? 'on' : ''}`">
<p :title="step.name">{{step.name}}</p>
<div ref="icon" v-if="i <= current" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/>
<div v-else class="none"/>
<span class="msg" :title="step.msg" v-html="msg[i]"/>
</div>
</div>
</template>
<script>
export default {
name: 'MonitorStep',
props: {
steps: {
type: Array,
required: true,
},
current: {
type: [Number, String],
default: 0,
},
msg: {
type: Array,
default() {
return []
},
}
},
computed: {
setTop() {
if (this.msg.length > 0) {
return {top: '42%'}
}
return {top: '57%'}
},
linePercent() {
const len = this.steps.length
if (len > 2) return 100 / (len - 1)
return 100
},
doneWidth() {
const index = Number(this.current)
if (Number.isNaN(index)) {
console.error('Props: "current" is NaN!')
return
}
return Math.round(this.linePercent * index)
},
notWidth() {
return 100 - this.doneWidth
}
}
}
</script>
<style lang="stylus" scoped>
.monitor-step
width 90%
margin 0.5rem auto 0
display flex
justify-content space-between
position relative
font-size 0.9rem
.lines
display flex
position absolute
width 100%
left -0.5rem
z-index -1
>.line
height 0.3rem
background rgba(0,0,0,0.8)
border-radius 1rem
margin-left 0.5rem
&.done
background linear-gradient(to right, #3391ff, $edgeColor)
.item
text-align center
width 1rem
position relative
.icon
width 1rem
height 1rem
border-radius 50%
background-color $edgeColor
background-position center
background-size 60%
background-repeat no-repeat
.none
width 0.8rem
height 0.8rem
border 0.2rem solid $edgeColor
border-radius 50%
transform translateY(10%)
.msg
display inline-block
font-size 0.6rem
width 4rem
transform translateX(-50%)
margin 0.2rem 50%
font-weight normal
color #aaa
p
width 5rem
margin 0.5rem 50%
transform translateX(-50%)
overflow hidden
white-space nowrap
text-overflow ellipsis
color #aaa
font-size 0.8rem
&.on
.icon
transform scale(1.2)
animation shine 2s alternate infinite ease-in-out
p
color $edgeColor
font-weight bold
@keyframes shine {
from {
box-shadow none
}
to {
box-shadow 0 0 1rem 0.1rem #fff
}
}
</style>
src/components/MonitorComponents/MonitorStep/monitor-step.vue
View file @ d2fc7f9e
<template>
<div class="monitor-step">
<div v-for="(step, i) in steps" :key="i" :class="`item ${i == current ? 'on' : ''}`">
<div class="lines" :style="setTop">
<div class="line done" :style="`width:${doneWidth}%`"/>
<div class="line" :style="`width:${notWidth}%`"/>
</div>
<div v-for="(step, i) in steps" :key="i" :class="`item ${i == done ? 'on' : ''}`">
<p :title="step.name">{{step.name}}</p>
<div v-if="i <= current" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/>
<div ref="icon" v-if="i <= current[0]" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/>
<div v-else class="none"/>
</div>
<div class="lines">
<div v-for="(line, i) in lines" :key="i" :class="`line ${i < current ? 'done' : ''}`" :style="`width:${lineWidth}`"/>
<span class="msg" :title="step.msg">{{msg[i]}}</span>
</div>
</div>
</template>
<script>
export default {
// 顶部的lines是线 , 根据doneWidth 和notWidth 来判断宽度
// 枚举数据,判断入参数组的第二项是否为true, 区别设置css 下一个圈是否放大
// 下面的 icon 是判断枚举的index 是否小于 cur的第0项, 是的话就给 ✔️ 对号
name: 'MonitorStep',
props: {
steps: {
......@@ -20,18 +25,54 @@ export default {
required: true,
},
current: {
type: [Number, String],
default: 0,
type: [String, Number, Array],
default(){
return [0, false] // 第0项为当前的标识, 后面的布尔是判断后面是否加线
}
},
msg: {
type: Array,
default() {
return []
},
}
},
data() {
return {
setTop: null,
}
},
mounted() {
this.$nextTick(() => {
this.setTop = {top: `calc(${this.$refs.icon[0].offsetTop}px + 0.35rem)`}
})
},
computed: {
lines() {
linePercent() {
const len = this.steps.length
if (len > 2) return len - 1
return 1
if (len > 2) return 100 / (len - 1) // 跟据steps数组的长度,分隔线每一调的长度占比
return 100
},
doneWidth() {
let index = Number(this.current[0])
if (this.current[1]) { // 如果数组的第二项是 true, 流程线就会向下级多走一条
index = index+1
}
if (Number.isNaN(index)) {
console.error('Props: "current" is NaN!')
return
}
return Math.round(this.linePercent * index)
},
done() { // 是否进入下一条
let index = Number(this.current[0])
if (this.current[1]) {
index = index+1
}
return index
},
lineWidth() {
return `${Math.round(100 / this.lines)}%`
notWidth() {
return 100 - this.doneWidth
}
}
}
......@@ -40,7 +81,7 @@ export default {
<style lang="stylus" scoped>
.monitor-step
width 90%
margin 0.5rem auto
margin 0 auto
display flex
justify-content space-between
position relative
......@@ -48,10 +89,8 @@ export default {
.lines
display flex
position absolute
bottom 0.35rem
width 95%
margin 0 auto
z-index 1
width 100%
left -0.5rem
>.line
height 0.3rem
background rgba(0,0,0,0.8)
......@@ -63,7 +102,7 @@ export default {
text-align center
width 1rem
position relative
z-index 2
z-index 1
.icon
width 1rem
height 1rem
......@@ -78,6 +117,14 @@ export default {
border 0.2rem solid $edgeColor
border-radius 50%
transform translateY(10%)
.msg
display inline-block
font-size 0.6rem
width 4rem
transform translateX(-50%)
margin 0.2rem 50%
font-weight normal
color #aaa
p
width 5rem
margin 0.5rem 50%
......@@ -86,20 +133,16 @@ export default {
white-space nowrap
text-overflow ellipsis
color #aaa
font-size 0.8rem
&.on
>div
width 0.9rem
height 0.9rem
border 0.1rem solid $edgeColor
transform scale(1.2)
.icon
transform scale(1.2)
animation shine 2s alternate infinite ease-in-out
p
color $edgeColor
font-size 1rem
font-weight bold
@keyframes shine {
from {
box-shadow none
}
to {
box-shadow 0 0 1rem 0.1rem #fff
}
}
</style>
src/components/MonitorComponents/MonitorTable/monitor-table.vue
View file @ d2fc7f9e
......@@ -8,7 +8,7 @@
</Row>
<template v-if="model && model.length > 0 && mode == '1'">
<div>
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex">
<Row class="row" v-for="(row, rowIndex) in listData" :key="rowIndex">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<template v-if="col.type == 'img'">
<template v-if="row[col.key] && row[col.key].length > 0">
......@@ -19,14 +19,15 @@
@click="handleView(img)" />
</template>
</template>
<div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color} `">{{row[col.key]}}</div>
<div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color} `">{{col.format ? col.format(row[col.key]) : (row[col.key] || '暂无')}}</div>
</i-col>
</Row>
</div>
<div :class="`no-data ${btnMsg == '加载更多' ? 'btn' : ''}`" @click="more">{{btnMsg}}</div>
</template>
<template v-else-if="model && model.length > 0 && mode == '2'">
<div>
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex">
<Row class="row" v-for="(row, rowIndex) in listData" :key="rowIndex">
<i-col class="col" :span="16">
<div>
<p>{{row.INDEXNAME}}</p>
......@@ -83,12 +84,36 @@ export default {
return {
curSrc: null,
showImg: false,
listData: [],
cur: 0,
dataSize: 100,
btnMsg: '加载更多',
}
},
methods: {
handleView(src) {
this.curSrc = src
this.showImg = true
},
more() {
this.cur += 1
const data = this.model.slice(this.cur * this.dataSize, (this.cur + 1) * this.dataSize)
this.listData.push(...data)
if (this.model.length <= (this.cur + 1) * this.dataSize) {
this.btnMsg = '— 暂无更多数据 —'
}
},
},
watch: {
'model': {
handler(cur) {
if (cur.length <= this.dataSize) {
this.btnMsg = '— 暂无更多数据 —'
}
this.cur = 0
this.listData = cur.slice(this.cur * this.dataSize, (this.cur + 1) * this.dataSize)
},
immediate: true,
}
}
}
......@@ -102,6 +127,10 @@ export default {
.no-data
text-align center
margin-top 0.5rem
&.btn
cursor pointer
&:hover
color $edgeColor
.title
font-size 1.2rem
font-weight bold
......@@ -112,11 +141,12 @@ export default {
.row
display flex
align-items center
line-height 2.4rem
line-height 3rem
&.row-title
font-weight bold
font-size 1.1rem
background-color $color-map()
color $edgeColor
&:nth-child(2n)
background-color $color-map(0.15)
.col
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ d2fc7f9e
......@@ -56,7 +56,7 @@ export default {
this.style = {
'text-shadow': `0 0.2rem 0.4rem ${this.color}`,
'color': this.color,
'background-image': `linear-gradient(to bottom, #fff, ${this.color})`
'background-image': `linear-gradient(to bottom, #fff, ${this.color})`,
}
}
this.style = {...this.style, 'font-size': this.size}
......@@ -104,17 +104,17 @@ export default {
width 15rem
&.date
left 20%
top 70%
transform translateY(-80%)
top 50%
transform translateY(-40%)
cursor pointer
&.time
right 13%
top 70%
transform translateY(-80%)
top 50%
transform translateY(-40%)
img
position absolute
width 100%
height 145%
height 140%
top 0
left 0
// animation shine 2.5s linear reverse infinite
......@@ -122,10 +122,12 @@ export default {
text-shadow 0 0.2rem 0.4rem #25e7f6
background-clip text
-webkit-background-clip text
padding-bottom 1rem
color #25e7f6
-webkit-text-fill-color transparent
background-image linear-gradient(to bottom, #fff, #25e7f6)
z-index 10
z-index 1
transform translateY(10%)
@keyframes shine {
0% {
opacity 1
......
src/components/MonitorComponents/README.md
View file @ d2fc7f9e
# Dataview-Cli
A command line tool to generate a dataview project.
## How to start
```bash
#if you have npx, you can just run
npx dataview init [name]
#else, you need to install first
npm install @omniview/dataview-cli -g
#and then call with
dataview init [name]
```
___
# 组件使用方法
> ## m-grid
......@@ -9,6 +27,7 @@ columns|列比例|String
rows|行比例|String
gap|间距|String
bgImg|背景图片src|String
complete|(可选)默认为true，传入false则启动loading图，待地图加载后再置为true|Boolean
```html
<m-grid
:template="[
......@@ -45,7 +64,7 @@ ___
> ## m-card
参数|说明|类型
-|-|-
mode|容器的类型，目前有3中，默认为'1'|[String, Number]
mode|容器的类型，目前有4种，默认为'1'|[String, Number]
title|容器标题，默认为‘标题’|String
color|标题颜色|String
enter|容器的进入动画，默认为fadeInRight|String
......@@ -131,6 +150,28 @@ ___
steps|步骤列表|Array[Object]
-|name:节点名称|String
current|当前进度节点|[Number, String]
msg|(可选)其他信息，显示在节点下方|Array[String]
```html
<m-step :steps="[{name: '报警'},{name: '通知'},{name: '处置完成'}]" :current="1"/>
```
---
>## m-scroll
参数|说明|类型
-|-|-
length|数据长度|Number
limit|临界点，大于此值则滚动，默认为6|Number
duration|间隔时间，默认为3000|Number
mode|默认为1，即向上滚动。2为不断将第一个元素高度置为0|[Number, String]
```html
<m-scroll :length="10" mode="2">
<div v-for="i in 10" :key="i" style="height: 5rem;margin-bottom:0.5rem;">
{{i}}
</div>
</m-scroll>
```
___
> ## m-map
......
src/components/MonitorComponents/index.js
View file @ d2fc7f9e
......@@ -15,7 +15,8 @@ const MonitorProgress = () => import('./MonitorProgress/monitor-progress')
const MonitorTable = () => import('./MonitorTable/monitor-table')
const MonitorTitle = () => import('./MonitorTitle/monitor-title')
const MonitorStep = () => import('./MonitorStep/monitor-step')
const MonitorScroll = () => import('./MonitorScroll/monitor-scroll')
const MonitorMenu = () => import('./MonitorMenu/monitor-menu')
export default (Vue) => {
Vue.use(animate)
......@@ -35,4 +36,6 @@ export default (Vue) => {
Vue.component('m-table', MonitorTable)
Vue.component('m-title', MonitorTitle)
Vue.component('m-step', MonitorStep)
Vue.component('m-scroll', MonitorScroll)
Vue.component('m-menu', MonitorMenu)
}
src/store/actions.js
View file @ d2fc7f9e
......@@ -3,6 +3,196 @@ import api from '@/server/api'
import common from '@/util/common.js'
export default {
initData({commit}) {
const COMMANDLIST = [ // 物业应急指挥体系
{
title:'指挥长',
name:'周少华',
img:'person.png',
},
{
title:'值班长',
name:'夏毅',
img:'person.png',
},
{
title:'值班长',
name:'瞿越方',
img:'person.png',
},
]
const OPERATELIST = [ // 运行体征
{
title:'小区',
img:'community.png',
unit: '个',
num:'2829',
},
{
title:'业委会',
img:'group.png',
unit: '个',
num:'1749',
},
{
title:'物业企业',
img:'property.png',
unit: '家',
num:'498',
},
{
title:'管理面积',
img:'map.png',
unit: 'k㎡',
num:'17337718',
},
]
const REPAIRLIST = [ // 报修投诉
{
title:'报修',
img:'repair.png',
num:'15',
allNum: '348',
},
{
title:'投诉',
img:'complaint.png',
num:'26',
allNum: '248',
},
]
const HANDLELIST = [ //协同处置
{
title:'金港花园',
address:'古楼公路345弄12号',
matter:'占用消防通道' , // 事项
style:'物业督查',
department:'消防部门',
foundTime:'2020-01-01 12:30:30', // 可能是moment格式
sendTime:'2020-01-02 13:30:30',
fixTime:'2020-01-02 14:30:30',
successTime:'2020-01-02 16:30:30',
overTime:null,
step:[
{
name:'推送',
},
{
name:'处理中',
},
{
name:'完成',
},
{
name:'入库'
}
],
current:1
},
{
title:'金港花园',
address:'古楼公路345弄12号',
matter:'占用消防通道' , // 事项
style:'物业督查',
department:'消防部门',
foundTime:'2020-01-01 12:30:30', // 可能是moment格式
sendTime:'2020-01-02 13:30:30',
fixTime:'2020-01-02 14:30:30',
successTime:'2020-01-02 16:30:30',
overTime:null,
step:[
{
name:'推送',
},
{
name:'处理中',
},
{
name:'完成',
},
{
name:'入库'
}
],
current:2
},
{
title:'金港花园',
address:'古楼公路345弄12号',
matter:'占用消防通道' , // 事项
style:'物业督查',
department:'消防部门',
foundTime:'2020-01-01 12:30:30', // 可能是moment格式
sendTime:'2020-01-02 13:30:30',
fixTime:'2020-01-02 14:30:30',
successTime:'2020-01-02 16:30:30',
overTime:null,
step:[
{
name:'推送',
},
{
name:'处理中',
},
{
name:'完成',
},
{
name:'入库'
}
],
current:3
},
]
const DISCOVERYLIST = [ //智能发现列表上排
{
title:'本月新增',
img:'data1.png',
num:'34',
unit:'个',
},
{
title:'历史累计',
img:'data2.png',
num:'57',
unit:'个',
},
]
const FOUNDLIST = [ //智能发现列表下排
{
title:'门卫脱岗',
img:'mw.png',
num:'1',
},
{
title:'消防通道',
img:'xf.png',
num:'2',
},
{
title:'道闸故障',
img:'dz.png',
num:'4',
},
{
title:'维修资金',
img:'zj.png',
num:'3',
},
{
title:'电梯困人',
img:'dt.png',
num:'1',
},
]
commit('SET_COMMANDLIST', COMMANDLIST)
commit('SET_OPERATELIST', OPERATELIST)
commit('SET_REPAIRLIST', REPAIRLIST)
commit('SET_HANDLELIST', HANDLELIST)
commit('SET_DISCOVERYLIST', DISCOVERYLIST)
commit('SET_FOUNDLIST', FOUNDLIST)
},
getCheckCommunityList({commit}, params = {}){// 获取检查小区的列表
ajax.post({
url: api.POST_CHECKCOMMUNITY_LIST,
......@@ -16,6 +206,11 @@ export default {
if (params.isPublish && params.isPublish == 1) {
commit('SET_SENDCHECKED',list.length) // 传了1 已开单小区
} else {
list.forEach((item, i) => { // 营造不同颜色的点，以后要删掉
if (i >= 10) {
item.icon = 'red.png'
}
})
commit('SET_CHECKCOMMUNITYLIST',list) // 没传ispublish 已检查小区总数
commit('SET_ALLCHECKED',list.length)
}
......
src/store/mutations.js
View file @ d2fc7f9e
......@@ -5,6 +5,24 @@ export default {
SET_CURDATE(state, date) {
state.curDate = date
},
SET_COMMANDLIST(state, data) {
state.commandList = data
},
SET_OPERATELIST(state, data) {
state.operateList = data
},
SET_REPAIRLIST(state, data) {
state.repairList = data
},
SET_HANDLELIST(state, data) {
state.handleList = data
},
SET_DISCOVERYLIST(state, data) {
state.discoveryList = data
},
SET_FOUNDLIST(state, data) {
state.foundList = data
},
SET_CHECKPEOPLELIST(state,data){ //修改检查人员列表数据
state.supervisionPeopleList = data
},
......
src/store/state.js
View file @ d2fc7f9e
export default {
showLoading: false,
curDate: null,
commandList: [ // 物业应急指挥体系
{
title:'指挥长',
name:'周少华',
img:'person.png',
},
{
title:'值班长',
name:'夏毅',
img:'person.png',
},
{
title:'值班长',
name:'瞿越方',
img:'person.png',
},
],
operateList: [ // 运行体征
{
title:'小区',
img:'community.png',
unit: '个',
num:'2829',
},
{
title:'业委会',
img:'group.png',
unit: '个',
num:'1749',
},
{
title:'物业企业',
img:'property.png',
unit: '家',
num:'498',
},
{
title:'管理面积',
img:'map.png',
unit: 'k㎡',
num:'17337718',
},
],
repairList: [ // 报修投诉
{
title:'报修',
img:'repair.png',
num:'15',
allNum: '348',
},
{
title:'投诉',
img:'complaint.png',
num:'26',
allNum: '248',
},
],
discoveryList:[ //智能发现列表上排
{
title:'本月新增',
img:'data1.png',
num:'34',
unit:'个',
},
{
title:'历史累计',
img:'data2.png',
num:'57',
unit:'个',
},
],
foundList:[ //智能发现列表下排
{
title:'门卫脱岗',
img:'mw.png',
num:'1',
},
{
title:'消防通道',
img:'xf.png',
num:'2',
},
{
title:'道闸故障',
img:'dz.png',
num:'4',
},
{
title:'维修资金',
img:'zj.png',
num:'3',
},
{
title:'电梯困人',
img:'dt.png',
num:'1',
},
],
commandList: [],
operateList: [],
repairList: [],
discoveryList: [],
foundList: [],
supervisionPeopleList:[ //物业督查检察人员列表
{
'TE_NAME': '假数据',
......@@ -181,89 +88,5 @@ export default {
send:'20'
}
],
handleList:[ //协同处置
{
title:'金港花园',
address:'古楼公路345弄12号',
matter:'占用消防通道' , // 事项
style:'物业督查',
department:'消防部门',
foundTime:'2020-01-01 12:30:30', // 可能是moment格式
sendTime:'2020-01-02 13:30:30',
fixTime:'2020-01-02 14:30:30',
successTime:'2020-01-02 16:30:30',
overTime:null,
step:[
{
name:'推送',
},
{
name:'处理中',
},
{
name:'完成',
},
{
name:'数据入库'
}
],
current:1
},
{
title:'金港花园',
address:'古楼公路345弄12号',
matter:'占用消防通道' , // 事项
style:'物业督查',
department:'消防部门',
foundTime:'2020-01-01 12:30:30', // 可能是moment格式
sendTime:'2020-01-02 13:30:30',
fixTime:'2020-01-02 14:30:30',
successTime:'2020-01-02 16:30:30',
overTime:null,
step:[
{
name:'推送',
},
{
name:'处理中',
},
{
name:'完成',
},
{
name:'数据入库'
}
],
current:2
},
{
title:'金港花园',
address:'古楼公路345弄12号',
matter:'占用消防通道' , // 事项
style:'物业督查',
department:'消防部门',
foundTime:'2020-01-01 12:30:30', // 可能是moment格式
sendTime:'2020-01-02 13:30:30',
fixTime:'2020-01-02 14:30:30',
successTime:'2020-01-02 16:30:30',
overTime:null,
step:[
{
name:'推送',
},
{
name:'处理中',
},
{
name:'完成',
},
{
name:'数据入库'
}
],
current:3
},
]
handleList: []
}
src/views/components/emergencyCommand.vue
View file @ d2fc7f9e
......@@ -21,18 +21,18 @@ export default {
width 100%
height 100%
display flex
justify-content space-between
.person
flex 1
display flex
align-items center
>img
width 2.5rem
height @width
margin 0.5rem
margin-right 0.5rem
>div
p
font-size 0.8rem
font-size 0.9rem
color $fontColor
span
font-size 1rem
font-weight bold
</style>
src/views/components/handle.vue
View file @ d2fc7f9e
<template>
<div class="handle">
<div class="card" v-for="(data,i) in $store.state.handleList" :key="i">
<div class="title">
<p>{{data.title}}</p>
<div class="line"></div>
<p>{{data.address}}</p>
</div>
<div class="body">
<div>
<p>协同事项</p>
<p>{{data.matter}}</p>
</div>
<div>
<p>发现方式</p>
<p>{{data.style}}</p>
<m-scroll :length="$store.state.handleList.length" :limit="2" mode="2" :step="12">
<div class="card" v-for="(data,i) in $store.state.handleList" :key="i">
<div class="title">
<p>{{data.title}}</p>
<div class="line"></div>
<p>{{data.address}}</p>
</div>
<div>
<p>接受部门</p>
<p>{{data.department}}</p>
<div class="body">
<div>
<p>协同事项</p>
<p>{{data.matter}}</p>
</div>
<div>
<p>发现方式</p>
<p>{{data.style}}</p>
</div>
<div>
<p>接受部门</p>
<p>{{data.department}}</p>
</div>
<div>
<p>推送时间</p>
<p>{{data.sendTime}}</p>
</div>
</div>
<div>
<p>推送时间</p>
<p>{{data.sendTime}}</p>
<div class="foot">
<m-step
:steps="data.step"
:current="[data.current, true]"
/>
</div>
</div>
<div class="foot">
<m-step
:steps="data.step"
:current="data.current"
/>
</div>
</div>
</m-scroll>
</div>
</template>
......@@ -46,6 +48,7 @@ export default {
height 100%
.card
padding-bottom 1rem
height 12rem
.title
display flex
align-items center
......@@ -61,7 +64,7 @@ export default {
font-weight 700
&:last-child
color $fontColor
font-size 0.6rem
font-size 0.8rem
.body
display flex
align-items center
......@@ -77,7 +80,7 @@ export default {
overflow hidden
text-overflow ellipsis
color $fontColor
font-size 0.6rem
font-size 0.9rem
&:last-child
color $edgeColor
font-size .9rem
......
src/views/components/repair.vue
View file @ d2fc7f9e
......@@ -6,7 +6,7 @@
:key="i"
:label="data.title"
:icon="require(`@/assets/images/${data.img}`) "
:unit="`/${data.allNum}`"
:unit="`/ ${data.allNum}`"
:count="+data.num"
labelColor="#5587b7"
countColor="#00f2ff"
......
src/views/components/supervision.vue
View file @ d2fc7f9e
......@@ -22,9 +22,11 @@
<div class="line"/>
</div>
<div class="list">
<div v-for="data in $store.state.supervisionCommunityList" :key="data.CHECKID" @click="$emit('clickCommunity',data)">
<p>{{data.COMMUNITYNAME}}</p>
</div>
<m-scroll :length="$store.state.supervisionCommunityList.length" :limit="6">
<div class="community" v-for="data in $store.state.supervisionCommunityList" :key="data.CHECKID" @click="$emit('clickCommunity',data)">
<p>{{data.COMMUNITYNAME}}</p>
</div>
</m-scroll>
</div>
</div>
<div class="situation">
......@@ -81,30 +83,33 @@ export default {
.people
.list
>div
width 20%
width 33.3%
display flex
align-items center
color $fontColor
margin-top .5rem
font-size 0.8rem
// font-size 0.8rem
>img
width 1rem
height 1rem
margin 0 .2rem
width 1.1rem
height 1.1rem
margin-right 0.2rem
.community
height 50%
overflow hidden
.list
>div
.community
width 33.3%
border-left 0.2rem solid yellow
margin 0.5rem 0
padding 0 .5rem
display inline-block
p
white-space nowrap
overflow hidden
text-overflow ellipsis
color #5587b7
color $fontColor
font-weight 600
font-size 0.8rem
// font-size 0.8rem
.situation
.content
margin-top 1rem
......@@ -121,7 +126,7 @@ export default {
justify-content space-between
p
color lightblue
font-size 0.8rem
// font-size 0.8rem
&:last-child
font-family $font-pang
color #fff
......
src/views/main.vue
View file @ d2fc7f9e
......@@ -7,29 +7,32 @@
'box3 . box6',
'box4 . box6',
]"
columns="1fr 2.5fr 1fr"
columns="1fr 2fr 1fr"
rows="3rem 1fr 1.5fr 1fr 2fr"
gap="0"
:bgImg="require('@/assets/images/stars-bg.png')"
style="padding: 0"
:complete="complete"
>
<m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">智慧物业管理微平台</m-title>
<m-card area="box1" title="物业应急指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')">
<m-map ref="map" @event="handleMapClick" @complete="mapComplete" />
<m-animate enter="fadeInDown" leave="fadeOutUp">
<m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">智慧物业管理微平台</m-title>
</m-animate>
<m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box1" title="物业应急指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')">
<EmergencyCommand />
</m-card>
<m-card area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
<m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
<Operation @select="handleSelect" />
</m-card>
<m-card area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
<m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
<Repair />
</m-card>
<m-card area="box4" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
<m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box4" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
<Discovery />
</m-card>
<m-card area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
<m-card v-show="complete" area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
<Supervision @clickCommunity="clickCommunity"/>
</m-card>
<m-card area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
<m-card v-show="complete" area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
<Handle/>
</m-card>
</m-grid>
......@@ -54,12 +57,34 @@ export default {
Supervision,
Handle,
},
created(){
this.getCheckCommunityList({isPublish: 1, someday: '20200316'})
this.getCheckCommunityList()
this.getCheckedPeopleList()
data() {
return {
complete: false,
}
},
methods: {
mapComplete() {
setTimeout(() => {
this.complete = true
this.initData()
this.getCheckCommunityList({isPublish: 1, someday: '20200316'})
this.getCheckCommunityList()
this.getCheckedPeopleList()
}, 3000)
},
handleMapClick({layername, data}) {
switch (layername) {
case 'community': // 当点击图层为小区时
const {X, Y} = data[0]
const {map} = this.$refs
map.removeGifPoint('selected-point') // 先移除已点击的点
map.focus(X, Y, 8)
map.addGifPoint({name: 'selected-point', key: 'COMMUNITYID', labelKey: 'COMMUNITYNAME', data: data[0], icon: data[0].icon || 'blue.png'})
break
default:
break
}
},
handleSelect(data) {
console.log(data)
},
......@@ -67,9 +92,18 @@ export default {
console.log(data)
},
...mapActions([
'initData',
'getCheckCommunityList',
'getCheckedPeopleList'
])
},
watch: {
'$store.state.supervisionCommunityList': {
handler(cur) {
this.$refs.map.removePoint('community')
this.$refs.map.addPoint({name: 'community', key: 'COMMUNITYID', data: cur, icon: 'blue.png'})
}
},
},
}
</script>
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