Skip to content

W
wuye-monitor
Commit 113570f6 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

完善

parent a4118f3b
Show whitespace changes
Inline Side-by-side
Showing with 136 additions and 37 deletions
index.html
View file @ 113570f6
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
font-size: 1.6vh; font-size: 1.6vh;
} }
</style> </style>
<script src="./static/jquery.min.js"></script> <!-- <script src="./static/jquery.min.js"></script>
<script type='text/javascript' src='http://168.168.112.76:8181/smimap/ShsmiGis.Bridge.js'></script> <script type='text/javascript' src='http://168.168.112.76:8181/smimap/ShsmiGis.Bridge.js'></script> -->
<script type='text/javascript' src='https://api.map.baidu.com/api?v=2.0&ak=MvCb6BWu4jHR9TD0svHfO4bWlx9pA9HG'></script> <script type='text/javascript' src='https://api.map.baidu.com/api?v=2.0&ak=MvCb6BWu4jHR9TD0svHfO4bWlx9pA9HG'></script>
</head> </head>
<body> <body>
......
package-lock.json
View file @ 113570f6
{ {
"name": "dashboard", "name": "national-dashboard",
"version": "1.0.0", "version": "1.0.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
...@@ -7697,6 +7697,11 @@ ...@@ -7697,6 +7697,11 @@
} }
} }
}, },
"moment": {
"version": "2.24.0",
"resolved": "https://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz",
"integrity": "sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
......
package.json
View file @ 113570f6
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"countup.js": "^2.0.4", "countup.js": "^2.0.4",
"echarts": "^4.4.0", "echarts": "^4.4.0",
"moment": "^2.24.0",
"odometer": "^0.4.8", "odometer": "^0.4.8",
"qs": "^6.9.1", "qs": "^6.9.1",
"view-design": "^4.0.2", "view-design": "^4.0.2",
......
src/assets/images/test.png 0 → 100644
View file @ 113570f6
This diff is collapsed.
src/components/MonitorForm/monitor-form.vue
View file @ 113570f6
...@@ -5,9 +5,13 @@ ...@@ -5,9 +5,13 @@
<i-col class="col" v-for="(col, key) in row" :key="key" :span="col.width" :offset="col.offset || 0"> <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 || 'right'}; width:${labelWidth}rem;`">{{col.label}}：</div> <div :style="`text-align: ${col.align || 'right'}; width:${labelWidth}rem;`">{{col.label}}：</div>
&nbsp;&nbsp; &nbsp;&nbsp;
<div>{{model[key]}}</div> <img v-if="col.type == 'img'" @click="handleView(model[key])" :src="require(`@/assets/images/${model[key]}`)" alt="">
<div v-else>{{model[key]}}</div>
</i-col> </i-col>
</Row> </Row>
<m-modal v-model="showImg">
<img v-if="showImg" style="width: 100%;" :src="require(`@/assets/images/${curSrc}`)"/>
</m-modal>
</div> </div>
</template> </template>
...@@ -35,6 +39,18 @@ export default { ...@@ -35,6 +39,18 @@ export default {
return {} return {}
} }
} }
},
data() {
return {
showImg: false,
curSrc: null,
}
},
methods: {
handleView(src) {
this.curSrc = src
this.showImg = true
}
} }
} }
</script> </script>
...@@ -58,4 +74,8 @@ export default { ...@@ -58,4 +74,8 @@ export default {
.col .col
display flex display flex
align-items center align-items center
img
width 25%
margin 0.5rem 0
cursor pointer
</style> </style>
src/components/MonitorModal/monitor-modal.vue
View file @ 113570f6
<template> <template>
<transition name="custom-classes-transition" enter-active-class="animated zoomInUp" leave-active-class="animated zoomOutUp"> <transition name="custom-classes-transition" enter-active-class="animated zoomInUp" leave-active-class="animated zoomOutDown">
<div v-if="value" class="monitor-modal"> <div v-if="value" class="monitor-modal">
<div :style="`width:${width}`"> <div :style="`width:${width}`" ref="modal">
<img @click="handleClose" class="close-btn" src="@/assets/images/modal-close.png"/> <img @click="handleClose" class="close-btn" src="@/assets/images/modal-close.png"/>
<img class="border top" src="@/assets/images/modal-top.png"/> <img class="border top" src="@/assets/images/modal-top.png"/>
<div class="content"> <div class="content">
<div>
<slot/> <slot/>
</div> </div>
</div>
<img class="border bottom" src="@/assets/images/modal-bottom.png"/> <img class="border bottom" src="@/assets/images/modal-bottom.png"/>
</div> </div>
</div> </div>
...@@ -28,8 +30,14 @@ export default { ...@@ -28,8 +30,14 @@ export default {
}, },
methods: { methods: {
handleClose() { handleClose() {
this.$emit('close')
this.$emit('input', false) this.$emit('input', false)
} }
},
computed: {
height() {
return this.$refs.modal.height
}
} }
} }
</script> </script>
...@@ -48,13 +56,14 @@ export default { ...@@ -48,13 +56,14 @@ export default {
z-index 1000 z-index 1000
>div >div
position relative position relative
min-height 30% padding 1rem 0
max-height 70%
background $color-map(0.1) background $color-map(0.1)
color #ccc color #ccc
transition height 0.5s
.content .content
padding 3% 2% min-height 30vh
max-height 70vh
padding 0 1rem
overflow-y auto
>img >img
position absolute position absolute
&.close-btn &.close-btn
......
src/components/MonitorTable/monitor-table.vue
View file @ 113570f6
...@@ -10,11 +10,15 @@ ...@@ -10,11 +10,15 @@
<div> <div>
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex"> <Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0"> <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<div :style="`text-align: ${col.align || 'left'};color: ${col.color} `">{{row[col.key]}}</div> <img v-if="col.type == 'img'" @click="handleView(row[col.key])" :src="require(`@/assets/images/${row[col.key]}`)" />
<div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color} `">{{row[col.key]}}</div>
</i-col> </i-col>
</Row> </Row>
</div> </div>
</template> </template>
<m-modal v-model="showImg">
<img v-if="showImg" style="width: 100%;" :src="require(`@/assets/images/${curSrc}`)"/>
</m-modal>
</div> </div>
</template> </template>
...@@ -38,6 +42,18 @@ export default { ...@@ -38,6 +42,18 @@ export default {
return [] return []
} }
} }
},
data() {
return {
curSrc: null,
showImg: false,
}
},
methods: {
handleView(src) {
this.curSrc = src
this.showImg = true
}
} }
} }
</script> </script>
...@@ -55,6 +71,8 @@ export default { ...@@ -55,6 +71,8 @@ export default {
margin-bottom 1rem margin-bottom 1rem
border-bottom 0.1rem solid $color-map() border-bottom 0.1rem solid $color-map()
.row .row
display flex
align-items center
line-height 2.4rem line-height 2.4rem
&.row-title &.row-title
font-weight bold font-weight bold
...@@ -63,7 +81,11 @@ export default { ...@@ -63,7 +81,11 @@ export default {
&:nth-child(2n) &:nth-child(2n)
background-color $color-map(0.15) background-color $color-map(0.15)
.col .col
padding 0 1rem
display flex display flex
align-items center align-items center
padding 0 1rem img
width 50%
margin 0.5rem 0
cursor pointer
</style> </style>
src/main.js
View file @ 113570f6
...@@ -4,33 +4,37 @@ import 'babel-polyfill' ...@@ -4,33 +4,37 @@ import 'babel-polyfill'
import Vue from 'vue' import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import echarts from 'echarts' // import echarts from 'echarts'
import {Row, Col, Button, Divider, Progress, Select, Option, Circle, Icon, Dropdown, DropdownMenu, DropdownItem} from 'view-design' import {Row, Col, Button, Divider, Progress, Select, Option, Circle, Icon, Dropdown, DropdownMenu, DropdownItem} from 'view-design'
import animate from 'animate.css' import animate from 'animate.css'
import ajax from '@/server/ajax' import ajax from '@/server/ajax'
import api from '@/server/api' import api from '@/server/api'
import moment from 'moment'
import MonitorCard from '@/components/MonitorCard' import MonitorCard from '@/components/MonitorCard'
import MonitorChart from '@/components/MonitorChart'
import MonitorCount from '@/components/MonitorCount' import MonitorCount from '@/components/MonitorCount'
import MonitorFlip from '@/components/MonitorFlip' // import MonitorChart from '@/components/MonitorChart'
import MonitorBrief from '@/components/MonitorBrief' // import MonitorFlip from '@/components/MonitorFlip'
import MonitorProgress from '@/components/MonitorProgress' // import MonitorBrief from '@/components/MonitorBrief'
// import MonitorProgress from '@/components/MonitorProgress'
import MonitorModal from '@/components/MonitorModal' import MonitorModal from '@/components/MonitorModal'
import MonitorForm from '@/components/MonitorForm' import MonitorForm from '@/components/MonitorForm'
import MonitorTable from '@/components/MonitorTable' import MonitorTable from '@/components/MonitorTable'
import 'view-design/dist/styles/iview.css' import 'view-design/dist/styles/iview.css'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$echarts = echarts // Vue.prototype.$echarts = echarts
Vue.prototype.$ajax = ajax Vue.prototype.$ajax = ajax
Vue.prototype.$api = api Vue.prototype.$api = api
Vue.prototype.$moment = moment
Vue.use(animate) Vue.use(animate)
Vue.use(MonitorCard) Vue.use(MonitorCard)
Vue.use(MonitorCount) Vue.use(MonitorCount)
Vue.use(MonitorFlip) // Vue.use(MonitorFlip)
Vue.use(MonitorBrief) // Vue.use(MonitorBrief)
Vue.use(MonitorProgress) // Vue.use(MonitorProgress)
Vue.use(MonitorChart) // Vue.use(MonitorChart)
Vue.use(MonitorModal) Vue.use(MonitorModal)
Vue.use(MonitorForm) Vue.use(MonitorForm)
Vue.use(MonitorTable) Vue.use(MonitorTable)
......
src/views/components/community-list.vue
View file @ 113570f6
...@@ -47,6 +47,9 @@ export default { ...@@ -47,6 +47,9 @@ export default {
this.curCommunity = name this.curCommunity = name
this.$emit('select', name) this.$emit('select', name)
}, },
reset() {
this.curCommunity = null
}
} }
} }
</script> </script>
......
src/views/components/person-list.vue
View file @ 113570f6
...@@ -35,6 +35,9 @@ export default { ...@@ -35,6 +35,9 @@ export default {
handleClick(name) { handleClick(name) {
this.curName = name this.curName = name
this.$emit('select', name) this.$emit('select', name)
},
reset() {
this.curName = null
} }
}, },
} }
......
src/views/components/title.vue
View file @ 113570f6
<template> <template>
<div id="title" ref="title"> <div id="title" ref="title">
<span class="moment date">{{$moment().format('LL')}}</span>
<span class="moment time">{{time}}</span>
<img :src="bgImg"/> <img :src="bgImg"/>
<img class="arrow" :src="arrowImg"/> <img class="arrow" :src="arrowImg"/>
<p><slot /></p> <p><slot /></p>
...@@ -15,8 +17,19 @@ export default { ...@@ -15,8 +17,19 @@ export default {
return { return {
bgImg: titleBg, bgImg: titleBg,
arrowImg: titleArrow, arrowImg: titleArrow,
timer: null,
time: null,
} }
}, },
mounted() {
this.timer = setInterval(() => {
this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}`
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
}
} }
</script> </script>
...@@ -28,6 +41,17 @@ export default { ...@@ -28,6 +41,17 @@ export default {
position relative position relative
background-size cover background-size cover
background-position center background-position center
font-family $font-pang
.moment
position absolute
font-size 1.2rem
color #fff
&.date
left 20%
top 34%
&.time
right 20%
top 34%
>img >img
position absolute position absolute
width 100% width 100%
...@@ -42,7 +66,6 @@ export default { ...@@ -42,7 +66,6 @@ export default {
margin auto margin auto
top 120% top 120%
>p >p
font-family $font-pang
font-size 2.8rem font-size 2.8rem
margin-top 1rem margin-top 1rem
text-shadow 0 0.2rem 0.4rem #25e7f6 text-shadow 0 0.2rem 0.4rem #25e7f6
......
src/views/main.vue
View file @ 113570f6
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</div> </div>
<div class="box2"> <div class="box2">
<m-card title="检查人员列表" mode="2"> <m-card title="检查人员列表" mode="2">
<PersonList @select="handlePersonSelect"/> <PersonList @select="handlePersonSelect" ref="person"/>
</m-card> </m-card>
</div> </div>
<div class="box3"> <div class="box3">
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
<div class="box4"> <div class="box4">
<m-card title="完成检查小区列表" mode="2"> <m-card title="完成检查小区列表" mode="2">
<CommunityList /> <CommunityList @select="handleCommunitySelect" ref="community"/>
</m-card> </m-card>
</div> </div>
<div class="box5"> <div class="box5">
...@@ -34,14 +34,14 @@ ...@@ -34,14 +34,14 @@
</div> </div>
<div class="box6"> <div class="box6">
<m-card title="开具整改单列表" mode="2"> <m-card title="开具整改单列表" mode="2">
<CommunityList @select="handleCommunitySelect"/> <CommunityList @select="handleCommunitySelect" ref="community2"/>
</m-card> </m-card>
</div> </div>
<m-modal v-model="showPersonModal"> <m-modal v-model="showPersonModal" @close="closePersonModal">
<m-form title="检查人员详情" :layout="personLayout.slice(0, 2)" :model="personData"></m-form> <m-form title="检查人员详情" :layout="personLayout.slice(0, 2)" :model="personData"></m-form>
<m-form title="检查详情" :layout="personLayout.slice(2)" :model="personData"></m-form> <m-form title="检查详情" :layout="personLayout.slice(2)" :model="personData"></m-form>
</m-modal> </m-modal>
<m-modal v-model="showCommunityModal" width="46%"> <m-modal v-model="showCommunityModal" @close="closeCommunityModal" width="46%">
<m-form title="检查小区详情" :layout="communityLayout.slice(0, 4)" :model="communityData"></m-form> <m-form title="检查小区详情" :layout="communityLayout.slice(0, 4)" :model="communityData"></m-form>
<m-form title="检查详情" :layout="communityLayout.slice(4)" :model="communityData"></m-form> <m-form title="检查详情" :layout="communityLayout.slice(4)" :model="communityData"></m-form>
<m-table title="未落实指标" :layout="communityTableLayout" :model="communityTableData"></m-table> <m-table title="未落实指标" :layout="communityTableLayout" :model="communityTableData"></m-table>
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</template> </template>
<script> <script>
const {ShsmiGis} = window // const {ShsmiGis} = window
import BaiduMap from './components/baidu' import BaiduMap from './components/baidu'
import ThemeTitle from './components/title' import ThemeTitle from './components/title'
import DayCheckSituation from './components/day-check-situation' import DayCheckSituation from './components/day-check-situation'
...@@ -194,6 +194,7 @@ export default { ...@@ -194,6 +194,7 @@ export default {
sign: { sign: {
label: '小区经理签名', label: '小区经理签名',
width: 12, width: 12,
type: 'img',
}, },
}, },
], ],
...@@ -211,7 +212,7 @@ export default { ...@@ -211,7 +212,7 @@ export default {
partner: '王五', partner: '王五',
date: '2020-01-10 15:50:00', date: '2020-01-10 15:50:00',
isRectify: '是', isRectify: '是',
sign: '签名', sign: 'test.png',
}, },
communityTableLayout: [ communityTableLayout: [
{ {
...@@ -229,21 +230,22 @@ export default { ...@@ -229,21 +230,22 @@ export default {
title: '附件', title: '附件',
key: 'file', key: 'file',
width: 8, width: 8,
type: 'img',
}, },
], ],
communityTableData: [ communityTableData: [
{name: '指标1', situation: '指标有问题', file: '附件'}, {name: '指标1', situation: '指标有问题', file: 'test.png'},
{name: '指标2', situation: '指标有问题', file: '附件'}, {name: '指标2', situation: '指标有问题', file: 'test.png'},
{name: '指标3', situation: '指标有问题', file: '附件'}, {name: '指标3', situation: '指标有问题', file: 'test.png'},
] ]
} }
}, },
mounted() { mounted() {
this.$nextTick(this.initMap) // this.$nextTick(this.initMap)
}, },
methods: { methods: {
initMap() { initMap() {
new ShsmiGis.Bridge({ this.map = new ShsmiGis.Bridge({
id: 'map', id: 'map',
url: 'http://168.168.112.76:8181/smimap/index.html', url: 'http://168.168.112.76:8181/smimap/index.html',
onReady: function () { onReady: function () {
...@@ -254,9 +256,16 @@ export default { ...@@ -254,9 +256,16 @@ export default {
handlePersonSelect(name) { handlePersonSelect(name) {
this.showPersonModal = true this.showPersonModal = true
}, },
closePersonModal() {
this.$refs.person.reset()
},
handleCommunitySelect(name) { handleCommunitySelect(name) {
this.showCommunityModal = true this.showCommunityModal = true
} },
closeCommunityModal() {
this.$refs.community.reset()
this.$refs.community2.reset()
},
} }
} }
</script> </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