首页工作台

src/api/api.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import {UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
 // 首页统计
 const homeDataStatistics = (params)=>getAction("/company/homepage/dataStatistics",params);
+const companyNoticeList = (params)=>getAction("/property-company/notice/companyNotice/list",params);
 //角色管理
 const addRole = (params)=>postAction("/sys/role/add",params);
 const editRole = (params)=>putAction("/sys/role/edit",params);
@@ -116,6 +117,7 @@ export const transitRESTful = {
 
 export {
   homeDataStatistics,
+  companyNoticeList,
   addRole,
   editRole,
   checkRoleCode,

src/views/dashboard/Analysis.vue

@@ -3,16 +3,17 @@
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <div class="statistics">
-          <img class="icon" src="~@/assets/guaz.png" alt="">
+          <div class="icon" style="background-color:#1890ff;"><a-icon type="team" /></div>
+          <!-- <img class="icon" src="~@/assets/guaz.png" alt=""> -->
           <div>
-            <p style="color:#666;margin-bottom:5px;">小区总数</p>
+            <p style="color:#666;margin-bottom:5px;">小区总数量</p>
             <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.communityNum}}</p>
           </div>
         </div>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <div class="statistics">
-          <img class="icon" src="~@/assets/guaz.png" alt="">
+          <div class="icon" style="background-color:#7262fd;"><a-icon type="home" /></div>
           <div>
             <p style="color:#666;margin-bottom:5px;">房屋总数量</p>
             <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.roomNum}}</p>
@@ -21,7 +22,7 @@
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <div class="statistics">
-          <img class="icon" src="~@/assets/guaz.png" alt="">
+          <div class="icon" style="background-color:#ffaa00;"><a-icon type="user" /></div>
           <div>
             <p style="color:#666;margin-bottom:5px;">住户总数量</p>
             <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.ownerNum}}</p>
@@ -30,7 +31,7 @@
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <div class="statistics">
-          <img class="icon" src="~@/assets/guaz.png" alt="">
+          <div class="icon" style="background-color:#52c41a;"><a-icon type="pay-circle" /></div>
           <div>
             <p style="color:#666;margin-bottom:5px;">年度累计已缴物业费</p>
             <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.propertyYearFee}}</p>
@@ -41,141 +42,182 @@
 
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
-        <pie title="缴费率" :dataSource="pieData" />
+        <div class="pay-cost t-box">
+          <h3 class="box-title">缴费率</h3>
+          <pie :dataSource="payData" />
+        </div>
       </a-col>
       <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
-        <div>
-          <h5>园区公告</h5>
+        <div class="announcement t-box">
+          <div class="title">
+            <h3 class="box-title">最新公告</h3><a-button size="small" @click="toMore()">查看更多</a-button> <a-button
+              size="small" @click="toMore()">发布公告</a-button>
+          </div>
           <ul>
-            <li>清明节放假通知，213231312313</li>
-            <li>5月1日停电通知，因1233233 园区公告 清明节放假通知，21323131231323233</li>
+            <li v-for="(item, index) in noticeList" :key="index"><a @click="toDetails(item)">{{ item.noticeTitle}}</a>
+            </li>
           </ul>
         </div>
       </a-col>
     </a-row>
 
-    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
-      <div class="salesCard">
-        <div class="extra-type">
-          <a>物业</a>
-          <a>水费</a>
-          <a>电费</a>
-          <a>燃气费</a>
-        </div>
-        <div>
-          <bar :dataSource="barData"/>
-        </div>
+    <div class="salesCard t-box">
+      <h3 class="box-title">缴费统计</h3>
+      <div class="extra-type">
+        <a-radio-group @change="handleSizeChange" :value="typeCode">
+          <a-radio-button value="SFLX00001">物业费</a-radio-button>
+          <a-radio-button value="SFLX00002">水费</a-radio-button>
+          <a-radio-button value="SFLX00003">电费</a-radio-button>
+          <a-radio-button value="SFLX00004">燃气费</a-radio-button>
+          <a-radio-button value="SFLX00005">暖气费</a-radio-button>
+        </a-radio-group>
+      </div>
+      <div>
+        <bar :dataSource="barData" style="padding: 0;" />
       </div>
-    </a-card>
+    </div>
 
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
-        <pie title="报修统计" :dataSource="pieData" />
+        <div class="pay-cost t-box">
+          <h3 class="box-title">报修统计</h3>
+          <pie :dataSource="repairData" />
+        </div>
       </a-col>
       <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
-        <pie title="投诉统计" :dataSource="pieData" />
+        <div class="pay-cost t-box">
+          <h3 class="box-title">投诉统计</h3>
+          <pie :dataSource="complaintsData" />
+        </div>
       </a-col>
     </a-row>
+    <a-modal :title="noticeTitle" :visible="visible" @cancel="handleCancel" :footer="null" width="40%">
+      <p v-html="noticeContent "></p>
+    </a-modal>
   </div>
 </template>
 
 <script>
-  import Bar from '@/components/chart/Bar'
-  import Pie from '@/components/chart/Pie'
-  import { homeDataStatistics } from "@/api/api"
+import Bar from '@/components/chart/Bar'
+import Pie from '@/components/chart/Pie'
+import { homeDataStatistics, companyNoticeList } from '@/api/api'
 
-  const barData = []
-  for (let i = 0; i < 12; i += 1) {
-    barData.push({
-      x: `${i + 1}月`,
-      y: Math.floor(Math.random() * 1000) + 200
-    })
-  }
-  export default {
-    name: "Analysis",
-    components: {
-      Bar,
-      Pie
+// const barData = []
+// for (let i = 0; i < 12; i += 1) {
+//   barData.push({
+//     x: `${i + 1}月`,
+//     y: 1000,
+//   })
+// }
+export default {
+  name: 'Analysis',
+  components: {
+    Bar,
+    Pie,
+  },
+  data() {
+    return {
+      pageForm: {},
+      loading: true,
+      payData: [],
+      noticeList: [],
+      typeCode: 'SFLX00001',
+      repairData: [],
+      complaintsData: [],
+      barData: [],
+      noticeTitle: '',
+      noticeContent: '',
+      visible: false,
+    }
+  },
+  created() {
+    this.onDetail()
+    this.companyNotice()
+  },
+  methods: {
+    async onDetail(typeCode) {
+      let { result } = await homeDataStatistics({ typeCode: typeCode })
+      this.pageForm = { ...result }
+      this.payData = [
+        { item: '物业费', count: result.propertyFeeRate || 0 },
+        { item: '水费', count: result.waterRate || 0 },
+        { item: '电费', count: result.electricRate || 0 },
+        { item: '燃气费', count: result.gasFeeRate || 0 },
+        { item: '暖气费', count: result.heatFeeRate || 0 },
+      ]
+      this.barData = result.monthlyStatistics.map((item) => {
+        return {
+          x: item.monthNum + '月',
+          y: item.totalMoney,
+        }
+      })
+      this.repairData = [
+        { item: '全部报修', count: result.repairTotal || 0 },
+        { item: '待派单', count: result.waitDispatch || 0 },
+        { item: '维修中', count: result.inRepair || 0 },
+        { item: '已完成', count: result.repairOver || 0 },
+      ]
+      this.complaintsData = [
+        { item: '全部投诉', count: result.complaintTotal || 0 },
+        { item: '待处理', count: result.waitHandle || 0 },
+        { item: '已完成', count: result.complaintOver || 0 },
+      ]
+      this.loading = !this.loading
     },
-    data() {
-      return {
-        pageForm: {},
-        loading: true,
-        barData,
-        pieData: [
-          { item: '物业费', count: 40 },
-          { item: '水费', count: 21 },
-          { item: '电费', count: 17 },
-          { item: '燃气费', count: 13 },
-          { item: '停车费', count: 9 }
-        ]
-      }
+    async companyNotice() {
+      let { result } = await companyNoticeList({ pageNo: 1, pageSize: 9 })
+      this.noticeList = result.records
     },
-    created() {
-      this.onDetail()
+    toMore() {
+      this.$router.push({
+        path: '/property/NoticeList',
+      })
     },
-    methods: {
-      async onDetail() {
-        let {result} = await homeDataStatistics()
-        this.pageForm = {...result}
-        this.loading = !this.loading
-
-        // //当前物业公司小区数量
-        // private Integer communityNum;
-        // //当前物业公司房屋数量
-        // private Integer roomNum;
-        // //当前物业公司业主数量
-        // private Integer ownerNum;
-        // //当前物业公司累积缴纳物业费
-        // private BigDecimal propertyYearFee;
-        // //物业费占比
-        // private BigDecimal propertyFeeRate;
-        // //水费占比
-        // private BigDecimal waterRate;
-        // //电费占比
-        // private BigDecimal electricRate;
-        // //暖气费占比
-        // private BigDecimal gasFeeRate;
-        // //按月统计费用
-        // private List<MonthlyStatisticsVo> monthlyStatistics;
-        // //报修总数
-        // private Integer repairTotal;
-        // //报修待派单数量
-        // private Integer waitDispatch;
-        // //报修维修中数量
-        // private Integer inRepair;
-        // //报修完成数量
-        // private Integer repairOver;
-        // //全部投诉数量
-        // private Integer complaintTotal;
-        // //投诉待处理数量
-        // private Integer waitHandle;
-        // //投诉已处理数量
-        // private Integer complaintOver;
-      }
-    }
-  }
+    toDetails(item) {
+      this.noticeTitle = item.noticeTitle
+      this.noticeContent = item.noticeContent
+      this.visible = true
+    },
+    handleCancel(e) {
+      this.visible = false
+    },
+    handleSizeChange(e) {
+      let that = this
+      this.typeCode = e.target.value
+      that.onDetail(this.typeCode)
+    },
+  },
+}
 </script>
 <style lang="less" scoped>
 .hone-content-box {
-  background-color: #fff;
   padding: 16px;
   .statistics {
-      // flex: none;
-      width: 100%;
-      height: 90px;
-      box-sizing: border-box;
-      border: 1px solid #e0dfdf;
+    // flex: none;
+    background: #fff;
+    width: 100%;
+    height: 90px;
+    box-sizing: border-box;
+    border: 1px solid #e0dfdf;
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+    .icon {
+      width: 60px;
+      height: 60px;
+      border-radius: 60px;
+      margin-right: 12px;
       display: flex;
+      text-align: center;
       align-items: center;
-      padding-left: 20px;
-      .icon {
-        width: 64px;
-        height: 64px;
-        margin-right: 12px;
+      justify-content: center;
+      .anticon {
+        font-size: 32px;
+        color: #ffffff;
       }
     }
-  
+  }
+
   .pay-box {
     display: flex;
     .left-box {
@@ -184,4 +226,52 @@
     }
   }
 }
+.t-box {
+  background: #fff;
+  padding: 15px;
+  border: 1px solid #e0dfdf;
+}
+.box-title {
+  font-weight: bold;
+  margin-bottom: 15px;
+  display: inline-block;
+  padding-left: 10px;
+  border-left: 3px solid #1890ff;
+  height: 20px;
+  line-height: 20px;
+}
+.pay-cost {
+  height: 340px;
+}
+.announcement {
+  height: 340px;
+  .title {
+    .ant-btn {
+      float: right;
+      margin-left: 10px;
+    }
+  }
+  ul {
+    padding-left: 5px;
+    li {
+      list-style-type: none;
+      height: 30px;
+      line-height: 30px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      a {
+        color: #666;
+      }
+    }
+  }
+}
+.salesCard {
+  margin-bottom: 25px;
+}
+.extra-type {
+  a {
+    margin-right: 20px;
+  }
+}
 </style>
\ No newline at end of file