Skip to content

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

完善

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