sz 首页修改

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "^3.3.2",
+    "echarts": "^4.5.0",
     "element-ui": "^2.4.5",
     "js-cookie": "^2.2.1",
     "nprogress": "0.2.0",
@@ -24,9 +25,9 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10",
     "node-sass": "^4.12.0",
-    "sass-loader": "^7.1.0"
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,

src/main.js

@@ -2,11 +2,13 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './routers'
 import store from './store'
+import echarts from 'echarts'
 import './plugins/element.js'
 import AxiosPlugin from './plugins/AxiosPlugin'
 
 Vue.config.productionTip = false
 Vue.use(AxiosPlugin)
+Vue.prototype.$echarts = echarts
 
 new Vue({
   router,

src/views/Home.vue

@@ -2,46 +2,421 @@
   <div>
     <el-breadcrumb separator=">">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item><a href="/">控制台</a></el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="/">控制台</a>
+      </el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider></el-divider>
-    <el-card class="diagram">
+    <el-card class="diagram_top">
       <div slot="header" class="header">
         <span>系统使用情况</span>
       </div>
-      
+      <div class="ax_default">
+        <span style="margin-left:-100px">系统启用时间</span>
+        <span style="margin-left:100px">业主总数</span>
+      </div>
+      <div class="ax_default">
+        <span style="margin-left:-70px;font-size:28px"><b>2019-12-01</b></span>
+        <span style="margin-left:40px;font-size:28px"><b>8,000</b></span>位
+      </div>
+      <div class="ax_default" style="margin-top:20px">
+        <span style="margin-left:-100px">总收取物业费用</span>
+        <span style="margin-left:100px">总车位数</span>
+      </div>
+      <div class="ax_default" style="margin-top:20px">
+        <span style="margin-left:-90px;font-size:28px"><b>12,119,80.00</b></span>元
+        <span style="margin-left:10px;font-size:28px"><b>500</b></span>个
+      </div>
+      <div class="ax_default" style="margin-top:20px">
+        <span style="margin-left:-100px">待处理投诉</span>
+        <span style="margin-left:100px">待处理保修</span>
+      </div>
+      <div class="ax_default" style="margin-top:20px">
+        <span style="margin-left:-110px;font-size:28px"><b>12</b></span>起
+        <span style="margin-left:130px;font-size:28px"><b>31</b></span>起
+      </div>
+    </el-card>
+
+    <el-card class="diagram_top">
+      <div slot="header" class="header">
+        <span>本月收费分析图</span>
+      </div>
+      <div id="monthlyChargeDiv" style="width:380px;height: 380px;"></div>
+    </el-card>
+    <el-card class="diagram_top">
+      <div slot="header" class="header">
+        <span>车位分析图</span>
+      </div>
+      <div id="parkingAnalysisDiv" style="width:380px;height: 380px;"></div>
+    </el-card>
+
+    <el-card class="diagram">
+      <div slot="header" class="header">
+        <span>每月收费统计</span>
+      </div>
+      <div id="monthlyChargeStatisticsDiv" style="width:500px;height: 280px;"></div>
+    </el-card>
+
+    <el-card class="diagram">
+      <div slot="header" class="header">
+        <span>每月总用电量统计</span>
+      </div>
+      <div id="totalPowerDiv" style="width:500px;height: 280px;"></div>
+    </el-card>
+
+    <el-card class="diagram">
+      <div slot="header" class="header">
+        <span>每月投诉处理统计</span>
+      </div>
+      <div id="complaintDiv" style="width:500px;height: 280px;"></div>
+    </el-card>
+
+    <el-card class="diagram">
+      <div slot="header" class="header">
+        <span>每月报修处理统计</span>
+      </div>
+      <div id="warrantyDiv" style="width:500px;height: 280px;"></div>
     </el-card>
   </div>
 </template>
 <script>
+import Constant from "@/constant";
 // @ is an alias to /src
 export default {
-  name: 'home',
+  name: "home",
   data() {
-    return {
-      
-    };
+    return {};
+  },
+  mounted: function() {
+    this.monthlyChargeView();
+    this.parkingAnalysisView();
+    this.monthlyChargeStatisticsView();
+    this.warrantyView();
+    this.complaintView();
+    this.totalPowerView();
+  },
+  methods: {
+    monthlyChargeView() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(
+        document.getElementById("monthlyChargeDiv")
+      );
+      // 绘制图表
+      myChart.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          left: "right",
+          data: ["车位费", "临时停车费", "物业费"]
+        },
+        series: [
+          {
+            name: "本月收费",
+            type: "pie",
+            radius: "50%",
+            center: ["35%", "30%"],
+            hoverAnimation: false,
+            color: ["#2f4554", "#546570", "#61a0a8"],
+            label: {
+              normal: {
+                position: "inner",
+                show: false
+              }
+            },
+            data: [
+              { value: 1500, name: "车位费" },
+              { value: 1300, name: "临时停车费" },
+              { value: 5000, name: "物业费" }
+            ],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      });
+    },
+    parkingAnalysisView() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(
+        document.getElementById("parkingAnalysisDiv")
+      );
+      // 绘制图表
+      myChart.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          left: "right",
+          data: ["剩余车位", "已租车位", "已售车位"]
+        },
+        series: [
+          {
+            name: "本月收费",
+            type: "pie",
+            radius: "50%",
+            center: ["35%", "30%"],
+            hoverAnimation: false,
+            color: ["#ca8622", "#749f83", "#91c7ae"],
+            label: {
+              normal: {
+                position: "inner",
+                show: false
+              }
+            },
+            data: [
+              { value: 4, name: "剩余车位" },
+              { value: 6, name: "已租车位" },
+              { value: 20, name: "已售车位" }
+            ],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      });
+    },
+    monthlyChargeStatisticsView() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(
+        document.getElementById("monthlyChargeStatisticsDiv")
+      );
+      // 绘制图表
+      myChart.setOption({
+        grid: {
+          x: "0%",
+          y: "10%",
+          containLabel: true
+        },
+        title: {
+          text: "总收费金额(元)",
+          bottom: "3%"
+        },
+        xAxis: {
+          type: "category",
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 120000
+        },
+        series: [
+          {
+            barWidth: "60%",
+            data: [
+              8000,
+              18000,
+              22000,
+              45000,
+              72000,
+              98000,
+              88000,
+              63000,
+              44000,
+              42000,
+              21000,
+              12000
+            ],
+            type: "bar"
+          }
+        ]
+      });
+    },
+    totalPowerView() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(
+        document.getElementById("totalPowerDiv")
+      );
+      // 绘制图表
+      myChart.setOption({
+        grid: {
+          x: "0%",
+          y: "10%",
+          containLabel: true
+        },
+        title: {
+          text: "用电量Kw/h",
+          bottom: "3%"
+        },
+        xAxis: {
+          type: "category",
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 8000
+        },
+        series: [
+          {
+            barWidth: "60%",
+            data: [
+              2800,
+              1800,
+              2200,
+              3500,
+              4200,
+              5800,
+              6800,
+              5300,
+              4400,
+              4200,
+              2100,
+              1200
+            ],
+            type: "bar"
+          }
+        ]
+      });
+    },
+    complaintView() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("complaintDiv"));
+      // 绘制图表
+      myChart.setOption({
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["投诉数", "处理数"]
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 120
+        },
+        series: [
+          {
+            name: "处理数",
+            type: "line",
+            stack: "总量",
+            data: [30, 28, 32, 33, 29, 18, 32, 30, 31, 31, 40, 24]
+          },
+          {
+            name: "投诉数",
+            type: "line",
+            stack: "总量",
+            data: [33, 34, 40, 44, 32, 25, 46, 33, 34, 40, 44, 32]
+          }
+        ]
+      });
+    },
+    warrantyView() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("warrantyDiv"));
+      // 绘制图表
+      myChart.setOption({
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["报修数", "处理数"]
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 120
+        },
+        series: [
+          {
+            name: "报修数",
+            type: "line",
+            stack: "总量",
+            data: [18, 22, 16, 8, 11, 15, 14, 18, 21, 17, 15, 13]
+          },
+          {
+            name: "处理数",
+            type: "line",
+            stack: "总量",
+            data: [16, 22, 11, 6, 6, 13, 11, 15, 18, 15, 11, 11]
+          }
+        ]
+      });
+    }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
-.el-breadcrumb{
+.el-breadcrumb {
   margin: 10px;
   line-height: 20px;
 }
 
-.el-divider{
-  margin:5px 0;
+.el-divider {
+  margin: 5px 0;
 }
 
-.header{
+.header {
   text-align: left;
 }
 
-.diagram{
+.diagram_top {
+  margin: 20px 20px;
+  width: 400px;
+  height: 400px;
+  float: left;
+}
+.diagram {
   margin: 20px 20px;
   width: 600px;
-  height:400px;
+  height: 400px;
+  float: left;
+}
+.ax_default {
+  width: 400px;
+}
+.ax_default_left {
+  float: left;
+  width: 200px;
+}
+.ax_default_right {
+  float: right;
+  width: 200px;
 }
 </style>
 

yarn.lock

@@ -3022,6 +3022,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.5.0.tgz#2111960645a345eb819ddac4792a2c065bdff162"
+  integrity sha512-q9M0errodeX/786uPifro76x0elbrUQkbSHh235QzbkaASuvP9AQoMErhGBno4iC/yq6kFDLqgmm3XCPWQGLzA==
+  dependencies:
+    zrender "4.1.2"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -8816,3 +8823,8 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.1.2.tgz#8368deff24c7e237cbcbd3a2ff93017905ae43f7"
+  integrity sha512-MJYEo1ZOVesjxYsfcGtPXnUREmh4ACMV08QZLGZ3S7D1xOd96iz3O6nf6pv5PHb5NSHkbizr7ChSIgtAGwncvA==