Skip to content

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

加毛玻璃效果和选择日期

parent 60f1d667
Expand all Show whitespace changes
Inline Side-by-side
Showing with 180 additions and 87 deletions
dist/index.html
View file @ c523036b
<!DOCTYPE html><html id=html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=X-UA-Compatible content="IE=edge, chrome=1"><title>物业督查实时专题图</title><style>html {
font-size: 1.6vh;
}</style><script src=./static/jquery.min.js></script><script type=text/javascript src=http://www.962121.net/gis_system/smimap/mapdebug/ShsmiGis.Bridge.js></script><link href=./static/css/app.612480f99c35c5fb757373e095abdf5b.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.2d51efcf4498b2dc7117.js></script><script type=text/javascript src=./static/js/vendor.c3fecf18c935a520466c.js></script><script type=text/javascript src=./static/js/app.080b43b49e0d528a9eac.js></script></body></html>
\ No newline at end of file
}</style><script src=./static/jquery.min.js></script><script type=text/javascript src=http://www.962121.net/gis_system/smimap/mapdebug/ShsmiGis.Bridge.js></script><link href=./static/css/app.58ecf063ed2cf80dac18257c3c11595f.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.6fca949b08cfafe5121d.js></script><script type=text/javascript src=./static/js/vendor.6cc928b1afcfbc393218.js></script><script type=text/javascript src=./static/js/app.19b647ab19a80a4800ad.js></script></body></html>
\ No newline at end of file
dist/static/css/app.58ecf063ed2cf80dac18257c3c11595f.css 0 → 100644
View file @ c523036b
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/css/app.58ecf063ed2cf80dac18257c3c11595f.css.map 0 → 100644
View file @ c523036b
This diff is collapsed.
dist/static/css/app.612480f99c35c5fb757373e095abdf5b.css deleted 100644 → 0
View file @ 60f1d667
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/0.803668ec8b04c1220e89.js deleted 100644 → 0
View file @ 60f1d667
This diff is collapsed.
dist/static/js/0.803668ec8b04c1220e89.js.map deleted 100644 → 0
View file @ 60f1d667
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/0.a26d93419592b8c86ea0.js 0 → 100644
View file @ c523036b
This diff is collapsed.
dist/static/js/0.a26d93419592b8c86ea0.js.map 0 → 100644
View file @ c523036b
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/app.080b43b49e0d528a9eac.js deleted 100644 → 0
View file @ 60f1d667
This diff is collapsed.
dist/static/js/app.080b43b49e0d528a9eac.js.map deleted 100644 → 0
View file @ 60f1d667
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/app.19b647ab19a80a4800ad.js 0 → 100644
View file @ c523036b
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/app.19b647ab19a80a4800ad.js.map 0 → 100644
View file @ c523036b
This diff is collapsed.
dist/static/js/manifest.2d51efcf4498b2dc7117.js → dist/static/js/manifest.6fca949b08cfafe5121d.js
View file @ c523036b
!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,i){for(var u,a,f,s=0,l=[];s<r.length;s++)a=r[s],t[a]&&l.push(t[a][0]),t[a]=0;for(u in c)Object.prototype.hasOwnProperty.call(c,u)&&(e[u]=c[u]);for(n&&n(r,c,i);l.length;)l.shift()();if(i)for(s=0;s<i.length;s++)f=o(o.s=i[s]);return f};var r={},t={3:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var c=document.getElementsByTagName("head")[0],i=document.createElement("script");i.type="text/javascript",i.charset="utf-8",i.async=!0,i.timeout=12e4,o.nc&&i.setAttribute("nonce",o.nc),i.src=o.p+"static/js/"+e+"."+{0:"803668ec8b04c1220e89"}[e]+".js";var u=setTimeout(a,12e4);function a(){i.onerror=i.onload=null,clearTimeout(u);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return i.onerror=i.onload=a,c.appendChild(i),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
//# sourceMappingURL=manifest.2d51efcf4498b2dc7117.js.map
\ No newline at end of file
!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,a){for(var i,u,f,s=0,l=[];s<r.length;s++)u=r[s],t[u]&&l.push(t[u][0]),t[u]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);for(n&&n(r,c,a);l.length;)l.shift()();if(a)for(s=0;s<a.length;s++)f=o(o.s=a[s]);return f};var r={},t={3:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var c=document.getElementsByTagName("head")[0],a=document.createElement("script");a.type="text/javascript",a.charset="utf-8",a.async=!0,a.timeout=12e4,o.nc&&a.setAttribute("nonce",o.nc),a.src=o.p+"static/js/"+e+"."+{0:"a26d93419592b8c86ea0"}[e]+".js";var i=setTimeout(u,12e4);function u(){a.onerror=a.onload=null,clearTimeout(i);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return a.onerror=a.onload=u,c.appendChild(a),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
//# sourceMappingURL=manifest.6fca949b08cfafe5121d.js.map
\ No newline at end of file
dist/static/js/vendor.6cc928b1afcfbc393218.js 0 → 100644
View file @ c523036b
This diff is collapsed.
dist/static/js/vendor.6cc928b1afcfbc393218.js.map 0 → 100644
View file @ c523036b
This diff is collapsed.
dist/static/js/vendor.c3fecf18c935a520466c.js deleted 100644 → 0
View file @ 60f1d667
This diff is collapsed.
dist/static/js/vendor.c3fecf18c935a520466c.js.map deleted 100644 → 0
View file @ 60f1d667
This diff is collapsed.
src/assets/css/reset.styl
View file @ c523036b
$color-main = #5BD5FF
#app
.date-picker.ivu-date-picker
.ivu-select-dropdown
margin-top -0.1rem
.ivu-date-picker-cells-cell-disabled
background rgba(0,0,0,0.3)
.ivu-select-selection
height 100%
.ivu-select-selection
.ivu-select-dropdown
font-size 0.8rem
background-color $color-map(0.8)
font-size 1rem
background-color $cardBg
border-radius 0
border 0.1rem solid $color-main
// color $color-main
color #fff
color $edgeColor
padding 0
.ivu-picker-panel-body
$blur()
.ivu-select-arrow
color $color-main
.ivu-select-selected-value
font-size 0.8rem
font-size 1rem
font-weight bold
line-height 200%
.ivu-select-item
.ivu-dropdown-item
font-size 1rem !important
text-align center
color #fff
&:hover
background rgba(0,0,0,0.8)
// &:hover
&.ivu-select-item-selected
color #fff
background $color-map(1)
// color $color-main
// background #fff
color $edgeColor
font-weight bold
src/assets/css/variables.styl
View file @ c523036b
......@@ -16,7 +16,9 @@ $layout(gap = 0.6rem)
display grid
grid-gap gap
padding 0 gap gap
$blur(val = 0.5rem)
backdrop-filter blur(val)
-webkit-backdrop-filter blur(val)
$selected()
box-sizing border-box
border 0.1rem solid $edgeColor
......@@ -24,6 +26,7 @@ $selected()
$fontColor = #2c3e50
$edgeColor = #00f2ff
$cardBg = rgba(0, 242, 255, 0.1)
$cardBorder = 0.1rem solid #1c425f
$cardFontColor = #5bd5ff
src/components/MonitorCard/monitor-card.vue
View file @ c523036b
......@@ -57,6 +57,7 @@ $size()
.monitor-card
$size()
$blur()
.card-wrapper
$size()
background $cardBg
......
src/components/MonitorDrawer/monitor-drawer.vue
View file @ c523036b
......@@ -42,10 +42,11 @@ export default {
right 1rem
bottom 0.6rem
z-index 1000
width 23.8vw
width 26vw
padding 1rem 0
background $cardBg
color #ccc
$blur()
.content
height 100%
padding 0 1rem
......
src/components/MonitorModal/monitor-modal.vue
View file @ c523036b
......@@ -25,7 +25,7 @@ export default {
},
width: {
type: String,
default: '40%',
default: '80%',
}
},
methods: {
......
src/main.js
View file @ c523036b
......@@ -6,7 +6,7 @@ import App from './App'
import router from './router'
import store from './store'
// import echarts from 'echarts'
import {Row, Col} from 'view-design'
import {Row, Col, Select, Option, DatePicker} from 'view-design'
import animate from 'animate.css'
import ajax from '@/server/ajax'
import api from '@/server/api'
......@@ -47,6 +47,9 @@ Vue.use(MonitorTable)
Vue.use(MonitorTrans)
Vue.component('Row', Row)
Vue.component('i-col', Col)
Vue.component('Select', Select)
Vue.component('Option', Option)
Vue.component('DatePicker', DatePicker)
/* eslint-disable no-new */
new Vue({
el: '#app',
......
src/store/mutations.js
View file @ c523036b
......@@ -6,6 +6,9 @@ export default {
state.themeList = data
state.situation[0].count = data.length
},
SET_THEME_COUNT(state, val) {
state.situation[0].count = val
},
SET_PERSON_LIST(state, data) {
state.personList = data
state.situation[1].count = data.length
......@@ -21,4 +24,7 @@ export default {
state.rectifyList = data
state.situation[3].count = data.length
},
SET_CURDATE(state, date) {
state.curDate = date
},
}
src/store/state.js
View file @ c523036b
export default {
showLoading: false,
curDate: null,
themeList: [],
originCheckedList: [],
checkedList: [],
......
src/views/components/title.vue
View file @ c523036b
<template>
<div id="title" ref="title">
<span class="moment date">{{$moment().format('LL')}}</span>
<span class="moment date" @mouseenter="openDatePicker = true" @mouseleave="openDatePicker = false">
<DatePicker @on-change="handleDateChange" :value="curDate" :options="options" class="date-picker" :open="openDatePicker" type="date">
<span>{{curDate}}</span>
</DatePicker>
</span>
<span class="moment time">{{time}}</span>
<img :src="bgImg" draggable="false"/>
<div class="theme-wrapper" @mouseenter="show = true" @mouseleave="show = false">
......@@ -32,6 +36,7 @@ export default {
name: 'ThemeTitle',
data() {
return {
openDatePicker: false,
show: false,
bgImg: titleBg,
arrowImg: titleArrow,
......@@ -55,6 +60,25 @@ export default {
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
},
computed: {
curDate() {
const date = this.$store.state.curDate
return date ? this.$moment(date).format('LL') : this.$moment().format('LL')
},
options() {
return {
disabledDate: (date) => {
return this.$moment(date).isAfter(this.$moment())
}
}
}
},
methods: {
handleDateChange(date) {
this.$store.commit('SET_CURDATE', date)
this.openDatePicker = false
},
}
}
</script>
......@@ -141,6 +165,7 @@ $theme-selected()
border-left none
border-top none
.moment
z-index 100
position absolute
font-size 1.2rem
color #fff
......@@ -148,6 +173,7 @@ $theme-selected()
&.date
left 20%
top 34%
cursor pointer
&.time
right 13%
top 34%
......
src/views/main.vue
View file @ c523036b
......@@ -11,8 +11,8 @@
<DayCheckSituation />
</m-card>
</div>
<div :class="`${showDrawer ? 'box2 blur' : 'box2'}`">
<m-card title="检查人员列表" mode="2" v-show="!fullScreen">
<div class="box2">
<m-card title="检查人员列表" mode="2" v-show="!fullScreen && !showDrawer">
<PersonList @select="handlePersonSelect" ref="person"/>
</m-card>
</div>
......@@ -21,8 +21,8 @@
<ThemeList @select="handleThemeSelect" ref="theme"/>
</m-card>
</div>
<div :class="`${showDrawer ? 'box4 blur' : 'box4'}`">
<m-card title="完成检查小区列表" mode="2" v-show="!fullScreen">
<div class="box4">
<m-card title="完成检查小区列表" mode="2" v-show="!fullScreen && !showDrawer">
<CommunityList :list="checkedList" @select="handleCommunitySelect($event, 'blue')" ref="community"/>
</m-card>
</div>
......@@ -31,8 +31,8 @@
<DayCheckComparison />
</m-card>
</div>
<div :class="`${showDrawer ? 'box6 blur' : 'box6'}`">
<m-card title="开具整改单列表" mode="2" v-show="!fullScreen">
<div class="box6">
<m-card title="开具整改单列表" mode="2" v-show="!fullScreen && !showDrawer">
<CommunityList :list="rectifyList" @select="handleCommunitySelect($event, 'red')" ref="community2"/>
</m-card>
</div>
......@@ -41,9 +41,9 @@
<m-form title="检查详情" :layout="personLayout.slice(1)" :model="personData"/>
</m-drawer>
<m-drawer v-model="showCommunityModal" @close="closeCommunityModal">
<div class="tabs" v-if="communityData.length > 1">
<p :class="`${curTab == i ? 'on' : ''}`" v-for="(item, i) in communityData" @click="curTab = i" :key="item.COMMUNITYNAME + i">{{item.THEME}}</p>
</div>
<Select class="tabs" v-model="curTab" v-if="communityData.length > 1">
<Option v-for="(item, i) in communityData" :value="i" :key="i">{{item.THEME}}</Option>
</Select>
<m-form title="检查小区详情" :label-width="8" :layout="communityLayout.slice(0, 1)" :model="communityData[curTab]"/>
<m-form title="检查详情" :label-width="8" :layout="communityLayout.slice(1)" :model="communityData[curTab]"/>
<m-table mode="2" title="未落实指标" :layout="communityTableLayout" :model="communityTableData[curTab]"/>
......@@ -225,13 +225,14 @@ export default {
},
methods: {
initData(themeId = null, startDate, endDate) {
const {curDate} = this.$store.state
let today = this.$moment().format('YYYYMMDD')
if(this.$route.query.date) {
today = this.$moment(this.$route.query.date).format('YYYYMMDD')
let defaultDay = this.$moment().format('YYYY-MM-DD') // 检查人员列表默认开始、结束时间
if (curDate) {
today = this.$moment(curDate).format('YYYYMMDD')
defaultDay = this.$moment(curDate).format('YYYY-MM-DD')
}
const defaultDay = this.$moment().format('YYYY-MM-DD') // 检查人员列表默认开始、结束时间
const communityParams = {someday: today}
// const personParams = {startDate: defaultDay, endDate: defaultDay}
const personParams = {startDate: startDate || `${defaultDay} 00:00:00`, endDate: endDate || `${defaultDay} 24:00:00`}
if (themeId) {
communityParams.taskId = themeId
......@@ -249,7 +250,7 @@ export default {
id: 'map',
url: this.$api.MAP_URL,
onReady: () => {
console.log('地图创建完成')
// console.log('地图创建完成')
this.initData()
this.addListener()
}
......@@ -257,7 +258,6 @@ export default {
},
addListener() {
this.map.addEventListener(arg => {
console.log('arg', arg)
switch (arg.action.toLowerCase()) {
case 'selectfeatures':
if (!arg.layername) return
......@@ -351,7 +351,7 @@ export default {
this.removeGifPoint('path-points')
const {OPER_ID, TASK_ID, X, Y} = data
this.gotoPosition(X, Y, 10)
this.addGifPoint({name: 'selected-point', key: 'OPER_ID', data: data, icon: 'person1.png', size: 300})
this.addGifPoint({name: 'selected-point', key: 'OPER_ID', data: data, icon: 'person6.png', size: 300})
// 获取人员详情
this.$ajax.post({
url: this.$api.POST_PERSON_DETAIL,
......@@ -439,6 +439,7 @@ export default {
this.curTab = 0
},
handleThemeSelect(TASK_ID, {START_DATE, END_DATE}) {
this.$store.commit('SET_THEME_COUNT', 1)
this.$refs.mapTop.resetPoint()
this.clearPoints()
this.showCommunityModal = false
......@@ -469,6 +470,8 @@ export default {
this.closeCommunityModal()
this.closePersonModal()
this.$refs.theme.reset()
this.$refs.mapTop.resetPoint()
this.$store.commit('SET_CURDATE', null)
this.clearPoints()
this.initData()
this.gotoPosition(1, 1, 3)
......@@ -485,7 +488,7 @@ export default {
this.addPoint({name:'rectify-points', key: 'COMMUNITYID', data: this.$store.state.rectifyList, icon: 'red.png'})
}
if (types.indexOf('person') >= 0) {
this.addPoint({name:'person-points', key: 'OPER_ID', labelKey: 'TE_NAME', data: this.$store.state.personList, icon: 'person1.png', size: 30})
this.addPoint({name:'person-points', key: 'OPER_ID', labelKey: 'TE_NAME', data: this.$store.state.personList, icon: 'person6.png', size: 30})
}
this.gotoPosition(1, 1, 3)
},
......@@ -503,9 +506,20 @@ export default {
// },
'$store.state.personList': {
handler(cur, past) {
this.addPoint({name:'person-points', key: 'OPER_ID', labelKey: 'TE_NAME', data: cur, icon: 'person1.png', size: 30})
this.addPoint({name:'person-points', key: 'OPER_ID', labelKey: 'TE_NAME', data: cur, icon: 'person6.png', size: 30})
}
},
'$store.state.curDate': {
handler(cur, past) {
this.closeCommunityModal()
this.closePersonModal()
this.gotoPosition(1, 1, 3)
this.$refs.theme.reset()
this.$refs.mapTop.resetPoint()
this.clearPoints()
this.initData()
}
}
}
}
</script>
......@@ -553,14 +567,15 @@ export default {
grid-area box5
.box6
grid-area box6
.blur
filter blur(0.5rem)
.tabs
display flex
align-items center
border-bottom 0.1rem solid #ccc
position absolute
top 1.5%
right 1rem
width 60%
height 2.2rem
margin-bottom 0.5rem
>p
width 50%
color #fff
cursor pointer
padding 0 0.5rem
......@@ -569,6 +584,7 @@ export default {
position relative
bottom -0.1rem
transition color .5s
text-align center
&.on
color $color-blue
font-weight bold
......
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