添加内容

src/components/MonitorComponents/MonitorChart/monitor-chart.vue

@@ -94,6 +94,7 @@ export default {
         boundaryGap: !shape.every(item => item.type === 'line')
       }
       options.xAxis = Object.assign({}, this.defaultOptions.xAxis, config, this.options.xAxis)
+      options.xAxis.axisLabel = Object.assign({}, this.defaultOptions.xAxis.axisLabel, this.options.xAxis.axisLabel)
       //如果是折线图则用线型的tooltip
       if (shape.some(item => item.type === 'line')) {
         options.tooltip.axisPointer.type = 'line'

src/main.js

@@ -5,7 +5,7 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './store'
-import {Row, Col, Select, Option, DatePicker, Divider} from 'view-design'
+import {Row, Col, Select, Option, DatePicker, Divider, Circle} from 'view-design'
 import ajax from '@/server/ajax'
 import api from '@/server/api'
 import common from '@/util/common'
@@ -27,6 +27,7 @@ Vue.component('Select', Select)
 Vue.component('Option', Option)
 Vue.component('DatePicker', DatePicker)
 Vue.component('Divider', Divider)
+Vue.component('i-circle', Circle)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/views/components/left-component.vue

@@ -10,10 +10,13 @@
         <!-- <m-card title="民防指标"><Defense /></m-card> -->
       </div>
       <div class="right">
-        <m-card title="网格管理"><GridManagement /></m-card>
+        <m-card title="党建引领"><PartyLead /></m-card>
+        <m-card title="物业健康度"><PropertyHealth /></m-card>
+        <m-card title="示范小区"></m-card>
+        <!-- <m-card title="网格管理"><GridManagement /></m-card>
         <m-card title="房屋物业"><House /></m-card>
         <m-card title="小区检查清单"><CommunityCheck /></m-card>
-        <m-card title="工作提示"><WorkTips /></m-card>
+        <m-card title="工作提示"><WorkTips /></m-card> -->
       </div>
     </div>
   </div>
@@ -21,26 +24,30 @@
 
 <script>
 import Command from './command'
-import LandPopulation from './land-population'
-import Green from './green'
-import Defense from './defense'
-import House from './house'
-import CommunityCheck from './community-check'
-import WorkTips from './work-tips'
-import GridManagement from './grid-management'
+// import LandPopulation from './land-population'
+// import Green from './green'
+// import Defense from './defense'
+// import House from './house'
+// import CommunityCheck from './community-check'
+// import WorkTips from './work-tips'
+// import GridManagement from './grid-management'
 import OperationSign from './operation-sign'
+import PartyLead from './party-lead'
+import PropertyHealth from './property-health'
 export default {
   name: 'LeftComponent',
   components: {
     Command,
-    LandPopulation,
-    Green,
-    Defense,
-    House,
-    CommunityCheck,
-    WorkTips,
-    GridManagement,
+    // LandPopulation,
+    // Green,
+    // Defense,
+    // House,
+    // CommunityCheck,
+    // WorkTips,
+    // GridManagement,
     OperationSign,
+    PartyLead,
+    PropertyHealth,
   },
   data() {
     return {}
@@ -81,11 +88,7 @@ export default {
             height 15%
       &.right
         >div
+          height 28%
           &:nth-child(1)
-          &:nth-child(4)
-            height 15%
-          &:nth-child(2)
-            height 40%
-          &:nth-child(3)
-            height 30%
+            height 44%
 </style>

src/views/components/operation-sign.vue

@@ -79,7 +79,7 @@ export default {
         // },
         legend: {hide: true},
         shape: [
-          {type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
+          {type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['40%', '50%']}
         ]
       },
       chartData: [
@@ -199,18 +199,19 @@ export default {
       flex-direction column
       flex-wrap wrap
       padding-left .1rem
-      margin-top .1rem
-      margin-left -0.3rem
+      margin-top 5%
+      // margin-left -0.3rem
+      transform translateX(-0.3rem)
       >div
         height 16%
       .dot
         display inline-block
-        width .1rem
+        width .08rem
         height @width
         border .02rem solid
         border-radius 50%
       p
-        margin 0 .05rem
+        margin 0 .03rem
         display inline-block
 
 </style>

src/views/components/party-lead.vue

+<template>
+  <div class="party-lead">
+    <div class="sum">
+      <i-circle
+        v-for="item in list"
+        :key="item.name"
+        :percent="item.percent"
+        :size="size * 6"
+        :stroke-width="size / 2"
+        :stroke-color="item.color"
+        :trail-width="size / 10"
+        :trail-color="item.color"
+        >
+        <div :style="`color:${item.color};font-size:.1rem`">
+          <m-count style="font-size:.12rem" :value="item.value" :decimal="0" />
+          <p>{{item.name}}</p>
+        </div>
+      </i-circle>
+      <div class="sum-item">
+        <p><m-count class="count" :value="5" :decimal="0" /><span class="unit">个</span></p>
+        <p>交叉任职数</p>
+      </div>
+    </div>
+    <div class="chart">
+      <m-chart v-if="mockData.length > 0" :config="config" :data="mockData" :options="options" />
+      <div v-else class="no-data">— 暂无数据 —</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PartyLead',
+  data() {
+    return {
+      list: [
+        {name: '居委会', value: 10, percent: 25, color: '#5BD5FF'},
+        {name: '业委会', value: 10, percent: 25, color: '#FF9D27'},
+        {name: '物业企业', value: 20, percent: 50, color: '#23D5C0'},
+      ],
+      config: {
+        colors: [['#3023AE', '#C86DD7'], '#5BD5FF', '#FF9D27', '#23D5C0'],
+        legend: {
+          align: 'right',
+        },
+        shape: [
+          {key: 'total', name: '党小组数量', type: 'bar', barWidth: '30%', barGap: '20%'},
+          {key: 'num1', name: '居委会', type: 'bar', stack: '党小组', barWidth: '10%', barGap: '20%'},
+          {key: 'num2', name: '业委会', type: 'bar', stack: '党小组', barWidth: '10%', barGap: '20%'},
+          {key: 'num3', name: '物业企业', type: 'bar', stack: '党小组', barWidth: '10%', barGap: '20%'},
+        ],
+        xAxis: {
+          key: 'name',
+        },
+      },
+      options: {
+        xAxis: {
+          splitLine: {show: false},
+          axisLabel: {
+            formatter: value => {
+              const arr = [...value]
+              return (arr.slice(0, 3)).join('') + '\n' + (arr.slice(3)).join('')
+            }
+          },
+        }
+      },
+      mockData: [
+        {name: '定海路街道', total: 13, num1: 3, num2: 3, num3: 7},
+        {name: '平凉路街道', total: 20, num1: 5, num2: 5, num3: 10},
+        {name: '江浦路街道', total: 13, num1: 3, num2: 3, num3: 7},
+        {name: '四平路街道', total: 25, num1: 7, num2: 7, num3: 11},
+        {name: '控江路街道', total: 20, num1: 5, num2: 5, num3: 10},
+        {name: '长白新村街道', total: 13, num1: 3, num2: 3, num3: 7},
+        {name: '延吉新村街道', total: 25, num1: 7, num2: 7, num3: 1},
+        {name: '新江湾城街道', total: 13, num1: 3, num2: 3, num3: 7},
+        {name: '长海路街道', total: 30, num1: 10, num2: 10, num3: 10},
+        {name: '大桥街道', total: 20, num1: 5, num2: 5, num3: 10},
+        {name: '五角场街道', total: 13, num1: 3, num2: 3, num3: 7},
+      ],
+    }
+  },
+  computed: {
+    size() {
+      return Math.floor(screen.height * 1.48 / 100)
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.party-lead
+  .no-data
+    width 100%
+    height 100%
+    $flex-center()
+  .sum
+    display flex
+    justify-content space-around
+    align-items center
+    >.sum-item
+      min-width .9rem
+      min-height .5rem
+      background $cardBg
+      $flex-center()
+      flex-direction column
+      p
+        font-size .09rem
+        color #fff
+        .count
+          color $color-yellow
+          font-size .12rem
+        .unit
+          font-size .08rem
+          color #aaa
+  .chart
+    margin-top .1rem
+    width 100%
+    height 65%
+    background-image url('../../assets/images/chart-bg.png')
+    background-size 100% 100%
+    background-repeat no-repeat
+    padding .1rem .03rem .03rem .05rem
+</style>

src/views/components/property-health.vue

+<template>
+  <div class="property-health">
+    <div class="chart" ref="chart"></div>
+    <div class="total">
+      <p>综合得分</p>
+      <m-count style="font-size:0.12rem;color:#75e1b0;" :value="91" :decimal="0" />
+      <p class="unit">（分）</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+const mockValue = [22.1, 20.9, 24.5, 20.2, 21.1]
+export default {
+  name: 'PropertyHealth',
+  data() {
+    return {
+      chart: null,
+      option: {
+        tooltip: {
+          trigger: 'axis',
+          confine: true,
+        },
+        radar: [{
+          name: {
+            rich: {
+              a: {
+                color: '#aaa',
+                lineHeight: 20,
+                fontSize: 12 * this.sizeRate,
+              },
+              b: {
+                color: '#ffd400',
+                align: 'center',
+                fontSize: 12 * this.sizeRate,
+              },
+              c: {
+                color: '#fff',
+                fontSize: 12 * this.sizeRate,
+              },
+            },
+            formatter: (text, {index}) => {
+              const max = [25, 25, 25, 25, 25]
+              return `{a|${text}}\n{b|${mockValue[index]}}{c|/${max[index]}}`
+            },
+          },
+          splitArea: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(255,255,255,.3)'
+            }
+          },
+          axisLine: {
+            show: false,
+          },
+          indicator: [
+            {text: '全市物业诚信计分', index: 0, max: 25},
+            {text: '投诉报修情况', index: 1, max: 25},
+            {text: '小区管理情况', index: 2, max: 25},
+            {text: '业主满意度', index: 3, max: 25},
+            {text: '行业落实情况', index: 4, max: 25},
+          ],
+          center: ['50%', '60%'],
+          radius: '60%',
+        }],
+        series: [{
+          type: 'radar',
+          symbol: 'none',
+          lineStyle: {
+            color: '#ff0000'
+          },
+          areaStyle: {
+            color: 'rgba(255,106,37,.6)',
+          },
+          data: [{
+            value: mockValue,
+          }]
+        }]
+      }
+    }
+  },
+  mounted() {
+    setTimeout(this.init, 0)
+  },
+  beforeDestroy() {
+    this.chart && window.removeEventListener('resize', () => this.chart.resize())
+  },
+  computed: {
+    sizeRate() {
+      return Number((screen.height / 800).toFixed(1))
+    },
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(this.$refs.chart)
+      window.addEventListener('resize', () => this.chart.resize())
+      this.chart.setOption(this.option)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.property-health
+  display flex
+  justify-content space-around
+  align-items center
+  .chart
+    width 70%
+    height 100%
+  .total
+    padding 0 .1rem
+    width .8rem
+    height @width
+    background-image url(../../assets/images/edge-bg.png)
+    background-size 100% 100%
+    background-repeat no-repeat
+    $flex-center()
+    flex-direction column
+    color #aaa
+    .unit
+      font-size .08rem
+</style>