修改

src/components/MonitorComponents/MonitorTitle/monitor-title.vue

@@ -7,6 +7,17 @@
     </span> -->
     <div class="btn back" @click="closePage" />
     <div class="btn close" @click="closePage" />
+    <div class="slogan left">
+      <span v-for="(word, i) in slogan[0]" :key="i+word">{{word}}</span>
+    </div>
+    <div class="slogan right">
+      <span v-for="(word, i) in slogan[1]" :key="i+word">{{word}}</span>
+    </div>
+    <div class="duty">
+      今日值班：
+      <p>李明良<img src="@/assets/images/phone.png" /></p>
+      <p>方芳<img src="@/assets/images/phone.png" /></p>
+    </div>
     <span v-if="!hideTime" class="moment time">
       <!-- <span class="switch"><img src="@/assets/images/switch.png"/> 切换街道</span> -->
       {{curDate}} {{time}}
@@ -17,6 +28,7 @@
 </template>
 
 <script>
+// import axios from 'axios'
 export default {
   name: 'MonitorTitle',
   props: {
@@ -49,6 +61,7 @@ export default {
       timer: null,
       time: null,
       style: {},
+      slogan: ['人民城市人民建', '人民城市为人民'],
     }
   },
   mounted() {
@@ -57,13 +70,7 @@ export default {
         this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}`
       }, 1000)
     }
-    // if (this.color) {
-    //   this.style = {
-    //     'text-shadow': `0 0.02rem 0.04rem ${this.color}`,
-    //     'color': this.color,
-    //     'background-image': `linear-gradient(to bottom, #fff, ${this.color})`
-    //   }
-    // }
+    // this.getWeather()
     this.style = {...this.style, 'font-size': this.size}
   },
   beforeDestroy() {
@@ -94,6 +101,13 @@ export default {
     closePage() {
       window.close()
     },
+    // getWeather() {
+    //   axios.get('https://tianqiapi.com/api?version=v6&appid=27325769&appsecret=k2G7Q7bA&city=杨浦&vue=1'
+    //   ).then(res => {
+    //     this.weather = res.data
+    //     console.log(this.weather)
+    //   })
+    // },
   }
 }
 </script>
@@ -128,6 +142,27 @@ export default {
       background-image url(../../../assets/images/close.png)
       &:hover
         background-image url(../../../assets/images/close-on.png)
+  .slogan
+    display flex
+    justify-content space-around
+    align-items center
+    width 15%
+    position absolute
+    top .05rem
+    z-index: 2;
+    &.left
+      left 20%
+    &.right
+      right 20%
+    span
+      $flex-center()
+      width .2rem
+      height @width
+      background rgba(2,68,147,.8)
+      border-radius 50%
+      font-family $font-pang
+      font-size .14rem
+      font-weight normal
   .switch
     color #5BD5FF
     margin-right .1rem
@@ -136,46 +171,35 @@ export default {
       width .12rem
       vertical-align middle
   .moment
-    z-index 100
+    z-index 9
     position absolute
-    font-size 0.12rem
-    color #fff
-    // width 1.5rem
-    top 25%
-    // &.date
-      // right 15%
-    &.time
-      // right 15%
-      left 0
-      right 0
-      margin 0 auto
-      text-align center
-      transform translateX(25%)
+    top .07rem
+    left 3%
+  .duty
+    display flex
+    align-items center
+    z-index 9
+    position absolute
+    top .07rem
+    right 3%
+    p
+      color $color-yellow
+      margin 0 .05rem
+    img
+      width .08rem
+      height @width
+      margin-left .05rem
   >.bg
     position absolute
     width 100%
     height 100%
     top 0
     left 0
-    // animation shine 2.5s linear reverse infinite
   >p
-    // text-shadow 0 0.02rem 0.04rem #B3EBFF
     background-clip text
     -webkit-background-clip text
-    // color #B3EBFF
     -webkit-text-fill-color transparent
     background-image linear-gradient(to bottom, #fff, #B3EBFF)
     z-index 99
     letter-spacing .05rem
-// @keyframes shine {
-//   0% {
-//     opacity 1
-//   }
-//   50% {
-//     opacity 0.7
-//   }
-//   100% {
-//     opacity 1
-//   }
-// }
 </style>

src/store/state.js

@@ -64,18 +64,18 @@ const commandLayout2 = [
 ]
 export default {
   streets: [
-    {id: 310110001000, name: '定海路街道', houseId: 310110000169, center: [8140.864167601668, 5079.364284699033]},
-    {id: 310110006000, name: '平凉路街道', houseId: 310110000167, center: [5107.94932750342, 2423.6864417613733]},
-    {id: 310110008000, name: '江浦路街道', houseId: 310110000177, center: [4211.45116637842, 3786.741592954671]},
-    {id: 310110009000, name: '四平路街道', houseId: 310110000170, center: [3293.5942071892155, 5147.717485190097]},
-    {id: 310110012000, name: '控江路街道', houseId: 310110000171, center: [5008.673834530317, 5227.606100514474]},
-    {id: 310110013000, name: '长白新村街道', houseId: 310110000173, center: [7430.66083957447, 6663.5712796890675]},
-    {id: 310110015000, name: '延吉新村街道', houseId: 310110000172, center: [6246.9579368837085, 5745.491634168607]},
-    {id: 310110016000, name: '殷行街道', houseId: 310110000176, center: [6688.878806764382, 10366.540369915294]},
-    {id: 310110018000, name: '大桥街道', houseId: 310110000166, center: [6374.902499188995, 3511.8719065605596]},
-    {id: 310110019000, name: '五角场街道', houseId: 310110000174, center: [3296.4282528002864, 7281.637272274846]},
-    {id: 310110020000, name: '新江湾城街道', houseId: 310110000168, center: [3635.8506067447124, 10472.688944671301]},
-    {id: 310110101000, name: '长海路街道', houseId: 310110000175, center: [6016.66261261553, 8153.563542586172]},
+    {id: 310110020000, name: '新江湾城街道', houseId: 310110000168, center: [3635.8506067447124, 10472.688944671301], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=-i6_oyv1Vf-BgqEojN0pPQ8bHK5LfXy6'},
+    {id: 310110001000, name: '定海路街道', houseId: 310110000169, center: [8140.864167601668, 5079.364284699033], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=ftoVMdCb29K2O7W5Ki-rke8vOFA_GsKM'},
+    {id: 310110006000, name: '平凉路街道', houseId: 310110000167, center: [5107.94932750342, 2423.6864417613733], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=D_ssgjWDvxbcMcS_eVuPC5_5imPY_YW1'},
+    {id: 310110008000, name: '江浦路街道', houseId: 310110000177, center: [4211.45116637842, 3786.741592954671], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=LjBjfj4BrtnsBbPzsUuSo4IR27brzOkO'},
+    {id: 310110009000, name: '四平路街道', houseId: 310110000170, center: [3293.5942071892155, 5147.717485190097], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=YAZ9Q4o9hgi_cw9QB3Zx2fYklef5Dtmz'},
+    {id: 310110012000, name: '控江路街道', houseId: 310110000171, center: [5008.673834530317, 5227.606100514474], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=tsM-JsYK7pgCRb2FMmwtGWuoR0TwCkkD'},
+    {id: 310110013000, name: '长白新村街道', houseId: 310110000173, center: [7430.66083957447, 6663.5712796890675], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=J9lTtuTBWjinCpGaX-1kH0ssBamIoSmY'},
+    {id: 310110015000, name: '延吉新村街道', houseId: 310110000172, center: [6246.9579368837085, 5745.491634168607], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=8zDuAqseqAD5EYvYclnY5jpQw_-TzblE'},
+    {id: 310110016000, name: '殷行街道', houseId: 310110000176, center: [6688.878806764382, 10366.540369915294], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=B3_40kuhej63_QyN0LlDOeuOD1HqL5_F'},
+    {id: 310110018000, name: '大桥街道', houseId: 310110000166, center: [6374.902499188995, 3511.8719065605596], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=0Sn0K5LW4p7cc6rbCfY8mRqJ2uMS_Bvc'},
+    {id: 310110019000, name: '五角场街道', houseId: 310110000174, center: [3296.4282528002864, 7281.637272274846], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=aYOvtgp4LdE37YvY4twwbP-bAKl9gXKx'},
+    {id: 310110101000, name: '长海路街道', houseId: 310110000175, center: [6016.66261261553, 8153.563542586172], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=cRV65vfRR-i9IHhK7TwAKte57x7W9iHC'},
   ],
   healthInfo: {
     creditScore: {},
@@ -84,7 +84,7 @@ export default {
     ownerSatisfactionScore: {},
     monthCheck: {},
   },
-  currentStreetInfo: {id: 310110020000, name: '新江湾城街道', houseId: 310110000168, center: [3635.8506067447124, 10472.688944671301]},
+  currentStreetInfo: {id: 310110020000, name: '新江湾城街道', houseId: 310110000168, center: [3635.8506067447124, 10472.688944671301], url: 'http://10.81.71.38/chengyun/chengyun_town/page1.html#/?code=-i6_oyv1Vf-BgqEojN0pPQ8bHK5LfXy6'},
   showLoading: false,
   curDate: null,
   curSmartType: null,

src/views/components/application.vue

 <template>
   <div class="application">
-    <div v-for="item in list" :key="item.name">
+    <div v-for="item in list" :key="item.name" @click.prevent="handleClick(item.key)">
       <img :src="require(`@/assets/images/${item.icon}`)" />
       <p>{{item.name}}</p>
     </div>
@@ -16,10 +16,19 @@ export default {
         {name: '会议系统', icon: 'app1.png'},
         {name: '派单系统', icon: 'app2.png'},
         {name: '气象系统', icon: 'app3.png'},
-        {name: '网格系统', icon: 'app4.png'},
+        {name: '网格系统', icon: 'app4.png', key: 'jumpGridPage'},
       ]
     }
   },
+  methods: {
+    handleClick(key) {
+      key && this[key]()
+    },
+    jumpGridPage() {
+      const {url} = this.$store.state.currentStreetInfo
+      window.open(url)
+    },
+  }
 }
 </script>
 
@@ -30,6 +39,10 @@ export default {
   justify-content space-around
   >div
     text-align center
+    cursor pointer
+    padding 0 .05rem
+    &:hover
+      box-shadow 0 .3rem 0.1rem 0.05rem rgba(0,0,0,0.2)
     img
       height .3rem
       width auto

src/views/components/complaint-repair.vue

@@ -70,8 +70,8 @@ export default {
     list() {
       const {repairInfo} = this.$store.state
       return [
-        {name: '报修数量', value: repairInfo[0], img: 'repair.png'},
-        {name: '投诉数量', value: repairInfo[1], img: 'complaint.png'},
+        {name: '报修数量', value: repairInfo[0], img: 'icon5.png'},
+        {name: '投诉数量', value: repairInfo[1], img: 'icon6.png'},
       ]
     },
   }
@@ -93,9 +93,9 @@ export default {
       display flex
       align-items center
       img
-        width .25rem
+        width .15rem
         height @width
-        margin-right .05rem
+        margin-right .1rem
       p
         color $fontColor
         &:last-child

src/views/components/grid-management.vue

@@ -34,8 +34,8 @@ export default {
     sum() {
       const {gridSum, notAlertSum} = this.$store.state
       return [
-        {name: '网格事件数', value: gridSum, img: 'tips2.png'},
-        {name: '110非警情数', value: notAlertSum, img: 'tips3.png'},
+        {name: '网格事件数', value: gridSum, img: 'icon3.png'},
+        {name: '110非警情数', value: notAlertSum, img: 'icon4.png'},
       ]
     }
   },
@@ -54,7 +54,7 @@ export default {
       align-items center
       font-size .11rem
       img
-        width .2rem
+        width .15rem
         height @width
         margin 0 .1rem
     .content

src/views/components/map-btns.vue

@@ -35,7 +35,7 @@ export default {
 .map-btns
   position fixed
   left calc(33.3% + .05rem)
-  bottom .05rem
+  bottom .1rem
   transition left .5s ease-in-out
   &.isFull
     left .05rem

src/views/components/property-score.vue

@@ -20,10 +20,10 @@
       </div>
       <div class="govern">
         <div class="content">
-          <p><m-count class="count" :value="92" :decimal="0" /><span class="unit">（分）</span></p>
+          <p><m-count class="count" :style="`color:${switchColor}`" :value="total" :decimal="0" /><span class="unit">（分）</span></p>
           <p>整体治理得分</p>
         </div>
-        <div class="needel" />
+        <div class="needel" :style="`background:linear-gradient(to top, transparent 45%, ${switchColor});transform:rotate(${switchDeg}deg)`"/>
       </div>
     </div>
     <div>
@@ -145,13 +145,56 @@ export default {
       //   +monthCheck.county || 0,
       // ]
     },
+    total() {
+      const {id} = this.$store.state.currentStreetInfo
+      const {creditScore, propertyWarrantyScore, communityManagementScore, ownerSatisfactionScore, monthCheck} = this.$store.state.healthInfo
+      const list = [
+        +creditScore[id + ''] || 0,
+        +propertyWarrantyScore[id + ''] || 0,
+        +communityManagementScore[id + ''] || 0,
+        +ownerSatisfactionScore[id + ''] || 0,
+        +monthCheck[id + ''] || 0,
+      ]
+      return list.reduce((cur, acc) => cur + acc, 0)
+    },
+    switchColor() {
+      if (this.total >= 75) {
+        return '#75e1b0'
+      }
+      if (this.total < 75 && this.total > 20) {
+        return '#ffd400'
+      }
+      if (this.total <= 20) {
+        return '#ff1e1e'
+      }
+      // if (this.total >= 90) {
+      //   return '#75e1b0'
+      // }
+      // if (this.total < 90 && this.total >= 80) {
+      //   return '#ffd400'
+      // }
+      // if (this.total < 80) {
+      //   return '#ff1e1e'
+      // }
+    },
+    switchDeg() {
+      if (this.total >= 50) {
+        const rate = (this.total - 50) / 50
+        return (90 * rate).toFixed(1)
+      } else if (this.total > 0 && this.total < 50) {
+        const rate = (50 - this.total) / 50
+        return (-90 * rate).toFixed(1)
+      } else {
+        return -90
+      }
+    }
   },
   methods: {
     init() {
       this.chart = echarts.init(this.$refs.chart)
       window.addEventListener('resize', () => this.chart.resize())
       this.chart.setOption(this.option)
-    }
+    },
   },
   watch: {
     chartData() {
@@ -211,11 +254,11 @@ export default {
         position absolute
         width .05rem
         height .65rem
-        background linear-gradient(to top, transparent 45%, #44D7B6)
         left 0
         right 0
         bottom .2rem
         margin auto
+        transition rotate .3s ease-in-out
+        transform rotate(-90deg)
         transform-origin bottom
-        transform rotate(60deg)
 </style>

src/views/components/right-component.vue

@@ -71,7 +71,8 @@ export default {
   position relative
   flex-wrap wrap
   >div
-    width 50%
+    // width 50%
+    width calc(33.3vw / 2)
     height 80%
     &.left
       >div

src/views/components/smart-discover.vue

@@ -138,7 +138,7 @@ export default {
       display flex
       flex 1
       align-items center
-      padding-left .05rem
+      padding-left .1rem
       img
         width .15rem
         height @width