加毛玻璃效果和选择日期

c523036b · 郭铭瑶 · 60f1d667 · c523036b · c523036b · c523036b
Commit c523036b authored Jan 17, 2020 by 郭铭瑶 🤘
29 changed files
--- a/dist/index.html
+++ b/dist/index.html
 <!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>
+      }</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
--- a/dist/static/css/app.58ecf063ed2cf80dac18257c3c11595f.css
+++ b/dist/static/css/app.58ecf063ed2cf80dac18257c3c11595f.css
--- a/dist/static/css/app.58ecf063ed2cf80dac18257c3c11595f.css.map
+++ b/dist/static/css/app.58ecf063ed2cf80dac18257c3c11595f.css.map
--- a/dist/static/css/app.612480f99c35c5fb757373e095abdf5b.css
+++ b/dist/static/css/app.612480f99c35c5fb757373e095abdf5b.css
--- a/dist/static/css/app.612480f99c35c5fb757373e095abdf5b.css.map
+++ b/dist/static/css/app.612480f99c35c5fb757373e095abdf5b.css.map
--- a/dist/static/js/0.803668ec8b04c1220e89.js
+++ b/dist/static/js/0.803668ec8b04c1220e89.js
--- a/dist/static/js/0.803668ec8b04c1220e89.js.map
+++ b/dist/static/js/0.803668ec8b04c1220e89.js.map
--- a/dist/static/js/0.a26d93419592b8c86ea0.js
+++ b/dist/static/js/0.a26d93419592b8c86ea0.js
--- a/dist/static/js/0.a26d93419592b8c86ea0.js.map
+++ b/dist/static/js/0.a26d93419592b8c86ea0.js.map
--- a/dist/static/js/app.080b43b49e0d528a9eac.js
+++ b/dist/static/js/app.080b43b49e0d528a9eac.js
--- a/dist/static/js/app.080b43b49e0d528a9eac.js.map
+++ b/dist/static/js/app.080b43b49e0d528a9eac.js.map
--- a/dist/static/js/app.19b647ab19a80a4800ad.js
+++ b/dist/static/js/app.19b647ab19a80a4800ad.js
--- a/dist/static/js/app.19b647ab19a80a4800ad.js.map
+++ b/dist/static/js/app.19b647ab19a80a4800ad.js.map
--- a/dist/static/js/manifest.2d51efcf4498b2dc7117.js
+++ b/dist/static/js/manifest.2d51efcf4498b2dc7117.js
-!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}}([]);
+!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.2d51efcf4498b2dc7117.js.map
+//# sourceMappingURL=manifest.6fca949b08cfafe5121d.js.map
\ No newline at end of file
--- a/dist/static/js/manifest.2d51efcf4498b2dc7117.js.map
+++ b/dist/static/js/manifest.2d51efcf4498b2dc7117.js.map
--- a/dist/static/js/vendor.6cc928b1afcfbc393218.js
+++ b/dist/static/js/vendor.6cc928b1afcfbc393218.js
--- a/dist/static/js/vendor.6cc928b1afcfbc393218.js.map
+++ b/dist/static/js/vendor.6cc928b1afcfbc393218.js.map
--- a/dist/static/js/vendor.c3fecf18c935a520466c.js
+++ b/dist/static/js/vendor.c3fecf18c935a520466c.js
--- a/dist/static/js/vendor.c3fecf18c935a520466c.js.map
+++ b/dist/static/js/vendor.c3fecf18c935a520466c.js.map
--- a/src/assets/css/reset.styl
+++ b/src/assets/css/reset.styl
 $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
+    font-size 1rem
-    background-color $color-map(0.8)
+    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
+      color $edgeColor
-      background $color-map(1)
+      font-weight bold
-      // color $color-main
-      // background #fff
--- a/src/assets/css/variables.styl
+++ b/src/assets/css/variables.styl
@@ -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
--- a/src/components/MonitorCard/monitor-card.vue
+++ b/src/components/MonitorCard/monitor-card.vue
@@ -57,6 +57,7 @@ $size()
 .monitor-card
  $size()
+  $blur()
 .card-wrapper
  $size()
  background $cardBg

--- a/src/components/MonitorDrawer/monitor-drawer.vue
+++ b/src/components/MonitorDrawer/monitor-drawer.vue
@@ -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

--- a/src/components/MonitorModal/monitor-modal.vue
+++ b/src/components/MonitorModal/monitor-modal.vue
@@ -25,7 +25,7 @@ export default {
    },
    width: {
      type: String,
-      default: '40%',
+      default: '80%',
    }
  },
  methods: {

--- a/src/main.js
+++ b/src/main.js
@@ -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',

--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -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
+  },
 }
--- a/src/store/state.js
+++ b/src/store/state.js
 export default {
  showLoading: false,
+  curDate: null,
  themeList: [],
  originCheckedList: [],
  checkedList: [],

--- a/src/views/components/title.vue
+++ b/src/views/components/title.vue
 <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%

--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -11,8 +11,8 @@
        <DayCheckSituation />
      </m-card>
    </div>
-    <div :class="`${showDrawer ? 'box2 blur' : 'box2'}`">
+    <div class="box2">
-      <m-card title="检查人员列表" mode="2" v-show="!fullScreen">
+      <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'}`">
+    <div class="box4">
-      <m-card title="完成检查小区列表" mode="2" v-show="!fullScreen">
+      <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'}`">
+    <div class="box6">
-      <m-card title="开具整改单列表" mode="2" v-show="!fullScreen">
+      <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">
+      <Select class="tabs" v-model="curTab" 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>
+        <Option v-for="(item, i) in communityData" :value="i" :key="i">{{item.THEME}}</Option>
-      </div>
+      </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) {
+      let defaultDay = this.$moment().format('YYYY-MM-DD') // 检查人员列表默认开始、结束时间
-        today = this.$moment(this.$route.query.date).format('YYYYMMDD')
+      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
+    position absolute
-    align-items center
+    top 1.5%
-    border-bottom 0.1rem solid #ccc
+    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