|
|
@@ -8,79 +8,62 @@
|
|
|
</el-breadcrumb>
|
|
|
<el-divider></el-divider>
|
|
|
<el-card class="diagram_top">
|
|
|
- <div slot="header" class="header">
|
|
|
- <span>系统使用情况</span>
|
|
|
- </div>
|
|
|
<div class="ax_default xtsyqk_fyy">
|
|
|
- <div class=" xtsyqk_fyy_60">
|
|
|
- <span>系统启用时间</span>
|
|
|
- <span style="color:#01447D"><b>2019-12-01</b></span>
|
|
|
- </div>
|
|
|
- <div class=" xtsyqk_fyy_40">
|
|
|
- <span>业主总数</span>
|
|
|
- <span style="color:#01447D"><b>8,000</b></span>
|
|
|
+ <div class="xtsyqk_fyy_60">
|
|
|
+ <i class="el-icon-s-shop"></i>
|
|
|
+ <span style="color:#01447D">
|
|
|
+ <b v-html="4"></b>
|
|
|
+ </span>
|
|
|
+ <span>总公司数量</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="diagram_top">
|
|
|
<div class="ax_default xtsyqk_fyy">
|
|
|
- <div class=" xtsyqk_fyy_60">
|
|
|
- <span>总收取物业费用</span>
|
|
|
- <span style="color:#0099FF"><b>12,119,80.00</b></span>
|
|
|
- </div>
|
|
|
- <div class=" xtsyqk_fyy_40">
|
|
|
- <span>总车位数</span>
|
|
|
- <span style="color:#0099FF"><b>500</b></span>
|
|
|
+ <div class="xtsyqk_fyy_60">
|
|
|
+ <i class="el-icon-s-custom"></i>
|
|
|
+ <span style="color:#01447D">
|
|
|
+ <b v-html="861"></b>
|
|
|
+ </span>
|
|
|
+ <span>总人数量</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="ax_default xtsyqk_fyy">
|
|
|
- <div class=" xtsyqk_fyy_60">
|
|
|
- <span>待处理投诉</span>
|
|
|
- <span style="color:#FF3300"><b>12</b></span>
|
|
|
- </div>
|
|
|
- <div class=" xtsyqk_fyy_40">
|
|
|
- <span>业主总数</span>
|
|
|
- <span style="color:#FF3300"><b>31</b></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</el-card>
|
|
|
<el-card class="diagram_top">
|
|
|
- <div slot="header" class="header">
|
|
|
- <span>本月收费分析图</span>
|
|
|
+ <div class="ax_default xtsyqk_fyy">
|
|
|
+ <div class="xtsyqk_fyy_60">
|
|
|
+ <i class="el-icon-sunny"></i>
|
|
|
+ <span style="color:#01447D">
|
|
|
+ <b v-html="3"></b>
|
|
|
+ </span>
|
|
|
+ <span>累积无异常天数</span>
|
|
|
+ </div>
|
|
|
</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 class="ax_default2 xtsyqk_fyy">
|
|
|
+ <div class="xtsyqk_fyy_60">
|
|
|
+ <i class="el-icon-search"></i>
|
|
|
+ <span style="color:#01447D">
|
|
|
+ <b v-html="'4678 / 5000'"></b>
|
|
|
+ </span>
|
|
|
+ <span>当日检测人次 / 累计检测人次</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div id="totalPowerDiv" style="width:500px;height: 280px;"></div>
|
|
|
</el-card>
|
|
|
-
|
|
|
- <el-card class="diagram">
|
|
|
- <div slot="header" class="header">
|
|
|
- <span>每月投诉处理统计</span>
|
|
|
+ <el-card class="diagram_top">
|
|
|
+ <div class="ax_default2 xtsyqk_fyy">
|
|
|
+ <div class="xtsyqk_fyy_60">
|
|
|
+ <i class="el-icon-warning-outline"></i>
|
|
|
+ <span style="color:#01447D">
|
|
|
+ <b v-html="'5 / 25'"></b>
|
|
|
+ </span>
|
|
|
+ <span>当日异常人数 / 累计异常人数</span>
|
|
|
+ </div>
|
|
|
</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>
|
|
|
+ <div id="everyDayMeasuringDiv" style="width:100%;height: 280px;"></div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -90,261 +73,28 @@ import Constant from "@/constant";
|
|
|
export default {
|
|
|
name: "home",
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return { yAxisMaxNum: "5000" };
|
|
|
},
|
|
|
mounted: function() {
|
|
|
- this.monthlyChargeView();
|
|
|
- this.parkingAnalysisView();
|
|
|
- this.monthlyChargeStatisticsView();
|
|
|
- this.warrantyView();
|
|
|
- this.complaintView();
|
|
|
- this.totalPowerView();
|
|
|
+ this.everyDayMeasuringView();
|
|
|
},
|
|
|
methods: {
|
|
|
- monthlyChargeView() {
|
|
|
+ everyDayMeasuringView() {
|
|
|
+ //每日测温结果统计
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
let myChart = this.$echarts.init(
|
|
|
- document.getElementById("monthlyChargeDiv")
|
|
|
+ document.getElementById("everyDayMeasuringDiv")
|
|
|
);
|
|
|
// 绘制图表
|
|
|
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: 160000, name: "车位费" },
|
|
|
- { value: 120000, name: "临时停车费" },
|
|
|
- { value: 1100000, 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: 60, name: "剩余车位" },
|
|
|
- { value: 120, name: "已租车位" },
|
|
|
- { value: 400, 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"]
|
|
|
+ text: "每日测温结果统计"
|
|
|
},
|
|
|
- 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: ["报修数", "处理数"]
|
|
|
+ data: ["体温正常", "体温异常"]
|
|
|
},
|
|
|
grid: {
|
|
|
left: "3%",
|
|
|
@@ -360,25 +110,86 @@ export default {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
boundaryGap: false,
|
|
|
- data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
|
|
|
+ data: [
|
|
|
+ "1",
|
|
|
+ "2",
|
|
|
+ "3",
|
|
|
+ "4",
|
|
|
+ "5",
|
|
|
+ "6",
|
|
|
+ "7",
|
|
|
+ "8",
|
|
|
+ "9",
|
|
|
+ "10",
|
|
|
+ "11",
|
|
|
+ "12",
|
|
|
+ "13",
|
|
|
+ "14",
|
|
|
+ "15",
|
|
|
+ "16",
|
|
|
+ "17",
|
|
|
+ "18",
|
|
|
+ "19",
|
|
|
+ "20",
|
|
|
+ "21",
|
|
|
+ "22",
|
|
|
+ "23",
|
|
|
+ "24",
|
|
|
+ "25",
|
|
|
+ "26",
|
|
|
+ "27",
|
|
|
+ "28",
|
|
|
+ "29",
|
|
|
+ "30",
|
|
|
+ "31"
|
|
|
+ ]
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
- min: 0,
|
|
|
- max: 120
|
|
|
+ min: 0
|
|
|
+ //name:"人数"
|
|
|
+ //max: this.yAxisMaxNum
|
|
|
},
|
|
|
+ color: ["green", "red"],
|
|
|
+ // backgroundColor: {
|
|
|
+ // type: "linear",
|
|
|
+ // x: 0,
|
|
|
+ // y: 0,
|
|
|
+ // x2: 0,
|
|
|
+ // y2: 1,
|
|
|
+ // colorStops: [
|
|
|
+ // {
|
|
|
+ // offset: 0,
|
|
|
+ // color: "red" // 0% 处的颜色
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: "blue" // 100% 处的颜色
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+ // global: false // 缺省为 false
|
|
|
+ // },
|
|
|
series: [
|
|
|
{
|
|
|
- name: "报修数",
|
|
|
+ name: "体温正常",
|
|
|
type: "line",
|
|
|
- stack: "总量",
|
|
|
- data: [18, 22, 16, 8, 11, 15, 14, 18, 21, 17, 15, 13]
|
|
|
+ //stack: "总量",
|
|
|
+ data: [
|
|
|
+ 45,66,45,66,45,66,45,66,45,66,
|
|
|
+ 45,66,45,66,45,66,45,66,45,66,
|
|
|
+ 45,66,45,66,45,66,45,66,45,66,
|
|
|
+ 45
|
|
|
+ ]
|
|
|
},
|
|
|
{
|
|
|
- name: "处理数",
|
|
|
+ name: "体温异常",
|
|
|
type: "line",
|
|
|
- stack: "总量",
|
|
|
- data: [16, 22, 11, 6, 6, 13, 11, 15, 18, 15, 11, 11]
|
|
|
+ data: [
|
|
|
+ 0,0,0,0,0,0,0,0,0,0,
|
|
|
+ 0,0,0,0,0,0,0,0,0,0,
|
|
|
+ 0,0,0,0,0,0,0,0,0,0,
|
|
|
+ 0
|
|
|
+ ]
|
|
|
}
|
|
|
]
|
|
|
});
|
|
|
@@ -387,25 +198,28 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.xtsyqk_fyy{
|
|
|
- height:64px;
|
|
|
- margin-bottom:40px
|
|
|
+.xtsyqk_fyy {
|
|
|
+ height: 64px;
|
|
|
+ margin-bottom: 40px;
|
|
|
}
|
|
|
-.xtsyqk_fyy span b{
|
|
|
- font-size:28px;
|
|
|
+.xtsyqk_fyy i {
|
|
|
+ font-size: 26px;
|
|
|
}
|
|
|
-.xtsyqk_fyy span{
|
|
|
- display:block;
|
|
|
- text-align: left;
|
|
|
- margin:10px 0
|
|
|
+.xtsyqk_fyy span b {
|
|
|
+ font-size: 21px;
|
|
|
}
|
|
|
-.xtsyqk_fyy_60{
|
|
|
-width:60%;
|
|
|
-float:left
|
|
|
+.xtsyqk_fyy span {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
-.xtsyqk_fyy_40{
|
|
|
-width:40%;
|
|
|
-float:left
|
|
|
+.xtsyqk_fyy_60 {
|
|
|
+ width: 60%;
|
|
|
+ float: center;
|
|
|
+}
|
|
|
+.xtsyqk_fyy_40 {
|
|
|
+ width: 40%;
|
|
|
+ float: left;
|
|
|
}
|
|
|
.el-breadcrumb {
|
|
|
margin: 10px;
|
|
|
@@ -422,19 +236,22 @@ float:left
|
|
|
|
|
|
.diagram_top {
|
|
|
margin: 20px 20px;
|
|
|
- width: 400px;
|
|
|
- height: 400px;
|
|
|
+ width: 220px;
|
|
|
+ height: 120px;
|
|
|
float: left;
|
|
|
}
|
|
|
.diagram {
|
|
|
margin: 20px 20px;
|
|
|
- width: 600px;
|
|
|
+ width: 100%;
|
|
|
height: 400px;
|
|
|
float: left;
|
|
|
}
|
|
|
.ax_default {
|
|
|
- width: 400px;
|
|
|
+ width: 280px;
|
|
|
}
|
|
|
|
|
|
+.ax_default2 {
|
|
|
+ width: 320px;
|
|
|
+}
|
|
|
</style>
|
|
|
|
xiao547607