|
|
@@ -1,295 +1,317 @@
|
|
|
<template>
|
|
|
- <div class="main">
|
|
|
- <div class="top">
|
|
|
- <div class="one">
|
|
|
- <div class="img">
|
|
|
- <img src="@/assets/images4/ic_总收入.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <div class="text1">总收入</div>
|
|
|
- <div class="number">
|
|
|
- <span class="number1">{{total}}</span>
|
|
|
- <span class="number2">元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="imgBx">
|
|
|
- <img src="@/assets/images4/46955a5e49714ea456aabc448bb34da.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="one">
|
|
|
- <div class="img">
|
|
|
- <img src="@/assets/images4/ic_食堂收入.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <div class="text1">
|
|
|
- 食堂收入
|
|
|
- </div>
|
|
|
- <div class="number">
|
|
|
- <span class="number1"> {{canting}}
|
|
|
- </span>
|
|
|
- <span class="number2">元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="one">
|
|
|
- <div class="img">
|
|
|
- <img src="@/assets/images4/ic_租赁收入.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <div class="text1">
|
|
|
- 租赁收入
|
|
|
- </div>
|
|
|
- <div class="number">
|
|
|
- <span class="number1">{{zulin}}</span>
|
|
|
- <span class="number2">元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="one">
|
|
|
- <div class="img">
|
|
|
- <img src="@/assets/images4/ic_便利店收入.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <div class="text1">
|
|
|
- 便利店收入
|
|
|
- </div>
|
|
|
- <div class="number">
|
|
|
- <span class="number1">{{shop}}</span>
|
|
|
- <span class="number2">元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="one">
|
|
|
- <div class="img">
|
|
|
- <img src="@/assets/images4/ic_咖啡吧收入.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <div class="text1">
|
|
|
- 咖啡吧收入
|
|
|
- </div>
|
|
|
- <div class="number">
|
|
|
- <span class="number1">{{kafei}}</span>
|
|
|
- <span class="number2">元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="one">
|
|
|
- <div class="img">
|
|
|
- <img src="@/assets/images4/ic_活动中心收入.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <div class="text1">
|
|
|
- 活动中心收入
|
|
|
- </div>
|
|
|
- <div class="number">
|
|
|
- <span class="number1">{{huodong}}</span>
|
|
|
- <span class="number2">元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="top">
|
|
|
+ <div class="one">
|
|
|
+ <div class="img">
|
|
|
+ <img src="@/assets/images4/ic_总收入.png" alt="" />
|
|
|
</div>
|
|
|
- <el-col id="index" style="height:18vh;width:1360px;"></el-col>
|
|
|
+ <div class="text">
|
|
|
+ <div class="text1">总收入</div>
|
|
|
+ <div class="number">
|
|
|
+ <span class="number1">{{ total }}</span>
|
|
|
+ <span class="number2">元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="imgBx">
|
|
|
+ <img
|
|
|
+ src="@/assets/images4/46955a5e49714ea456aabc448bb34da.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="one">
|
|
|
+ <div class="img">
|
|
|
+ <img src="@/assets/images4/ic_食堂收入.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="text1">食堂收入</div>
|
|
|
+ <div class="number">
|
|
|
+ <span class="number1"> {{ canting }} </span>
|
|
|
+ <span class="number2">元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="one">
|
|
|
+ <div class="img">
|
|
|
+ <img src="@/assets/images4/ic_租赁收入.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="text1">租赁收入</div>
|
|
|
+ <div class="number">
|
|
|
+ <span class="number1">{{ zulin }}</span>
|
|
|
+ <span class="number2">元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="one">
|
|
|
+ <div class="img">
|
|
|
+ <img src="@/assets/images4/ic_便利店收入.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="text1">便利店收入</div>
|
|
|
+ <div class="number">
|
|
|
+ <span class="number1">{{ shop }}</span>
|
|
|
+ <span class="number2">元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="one">
|
|
|
+ <div class="img">
|
|
|
+ <img src="@/assets/images4/ic_咖啡吧收入.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="text1">咖啡吧收入</div>
|
|
|
+ <div class="number">
|
|
|
+ <span class="number1">{{ kafei }}</span>
|
|
|
+ <span class="number2">元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="one">
|
|
|
+ <div class="img">
|
|
|
+ <img src="@/assets/images4/ic_活动中心收入.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="text1">活动中心收入</div>
|
|
|
+ <div class="number">
|
|
|
+ <span class="number1">{{ huodong }}</span>
|
|
|
+ <span class="number2">元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <el-col id="index" style="height: 18vh; width: 1360px"></el-col>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import * as echarts from 'echarts';
|
|
|
+import * as echarts from "echarts";
|
|
|
export default {
|
|
|
- props:['s'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- total:'',
|
|
|
- canting:'',
|
|
|
- zulin:'',
|
|
|
- shop:'',
|
|
|
- kafei:'',
|
|
|
- huodong:'',
|
|
|
- data1:[],
|
|
|
- data2:[],
|
|
|
- data3:[]
|
|
|
- }
|
|
|
+ props: ["s"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ total: "",
|
|
|
+ canting: "",
|
|
|
+ zulin: "",
|
|
|
+ shop: "",
|
|
|
+ kafei: "",
|
|
|
+ huodong: "",
|
|
|
+ data1: [],
|
|
|
+ data2: [],
|
|
|
+ data3: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ s(val, old) {
|
|
|
+ console.log(val);
|
|
|
+ this.total = val.total;
|
|
|
+ this.canting = val.canting;
|
|
|
+ this.zulin = val.zulin;
|
|
|
+ this.shop = val.shop;
|
|
|
+ this.kafei = val.kafei;
|
|
|
+ this.huodong = val.huodong;
|
|
|
+ this.data1 = val.zhexianTu.data1;
|
|
|
+ this.data2 = val.zhexianTu.data2;
|
|
|
+ this.data3 = val.zhexianTu.data3;
|
|
|
+ this.getData();
|
|
|
},
|
|
|
- watch:{
|
|
|
- s(val,old){
|
|
|
- console.log(val);
|
|
|
- this.total = val.total
|
|
|
- this.canting = val.canting
|
|
|
- this.zulin = val.zulin
|
|
|
- this.shop = val.shop
|
|
|
- this.kafei = val.kafei
|
|
|
- this.huodong = val.huodong
|
|
|
- this.data1 = val.zhexianTu.data1
|
|
|
- this.data2 = val.zhexianTu.data2
|
|
|
- this.data3 = val.zhexianTu.data3
|
|
|
- this.getData()
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getData() {
|
|
|
- let myChart = echarts.init(document.getElementById('index'));
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- icon:'circle',
|
|
|
- x1:10,
|
|
|
- x:0,
|
|
|
- y2:30,
|
|
|
- rigth:9,
|
|
|
- data: ['食堂收入', '租赁收入', '活动中心收入', '咖啡吧收入', '便利店收入'],
|
|
|
- textStyle:{
|
|
|
- color:'#B9C4D8',
|
|
|
- fontSize:'14px'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '12%',
|
|
|
- // right: '2%',
|
|
|
- bottom: '10%',
|
|
|
- top: '8%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '...', '30日', '31日'],
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#B9C4D8',
|
|
|
- fontSize: 14,
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- // data:[500,1000,1500,2000,2500,3000,3500],
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#B9C4D8',
|
|
|
- fontSize: 14,
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '食堂收入',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- data: this.data1,
|
|
|
- itemStyle: {
|
|
|
- color: '#8082D6'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '租赁收入',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- data: this.data2,
|
|
|
- itemStyle: {
|
|
|
- color: '#2E80D9'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '活动中心收入',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- data: this.data3,
|
|
|
- itemStyle: {
|
|
|
- color: '#FFC46D'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '咖啡吧收入',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- // data: [50,80,30,0,0,0,0,0,0,0,0,0,0,0,0,0,0,]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '便利店收入',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- // data: [900,800,700,500,70,5,8,9,44,88,66,77,44,99,55,14,78]
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- option && myChart.setOption(option);
|
|
|
- setTimeout(function () {
|
|
|
- window.onresize = function () {
|
|
|
- myChart.resize();
|
|
|
- };
|
|
|
- }, 200);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ let myChart = echarts.init(document.getElementById("index"));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
},
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ icon: "circle",
|
|
|
+ x1: 10,
|
|
|
+ x: 0,
|
|
|
+ y2: 30,
|
|
|
+ rigth: 9,
|
|
|
+ data: [
|
|
|
+ "食堂收入",
|
|
|
+ "租赁收入",
|
|
|
+ "活动中心收入",
|
|
|
+ "咖啡吧收入",
|
|
|
+ "便利店收入",
|
|
|
+ ],
|
|
|
+ textStyle: {
|
|
|
+ color: "#B9C4D8",
|
|
|
+ fontSize: "14px",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "12%",
|
|
|
+ // right: '2%',
|
|
|
+ bottom: "10%",
|
|
|
+ top: "8%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: [
|
|
|
+ "1日",
|
|
|
+ "2日",
|
|
|
+ "3日",
|
|
|
+ "4日",
|
|
|
+ "5日",
|
|
|
+ "6日",
|
|
|
+ "7日",
|
|
|
+ "8日",
|
|
|
+ "9日",
|
|
|
+ "10日",
|
|
|
+ "11日",
|
|
|
+ "12日",
|
|
|
+ "13日",
|
|
|
+ "14日",
|
|
|
+ "15日",
|
|
|
+ "...",
|
|
|
+ "30日",
|
|
|
+ "31日",
|
|
|
+ ],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#B9C4D8",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ // data:[500,1000,1500,2000,2500,3000,3500],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#B9C4D8",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true, // 不显示网格线
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255,255,255,.1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "食堂收入",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ data: this.data1,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#8082D6",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "租赁收入",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ data: this.data2,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#2E80D9",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "活动中心收入",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ data: this.data3,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#FFC46D",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "咖啡吧收入",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // data: [50,80,30,0,0,0,0,0,0,0,0,0,0,0,0,0,0,]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "便利店收入",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // data: [900,800,700,500,70,5,8,9,44,88,66,77,44,99,55,14,78]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ setTimeout(function () {
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ }, 200);
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getData()
|
|
|
- },
|
|
|
-}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.main {
|
|
|
- width: 1314px;
|
|
|
- height: 28.33vh;
|
|
|
+ width: 1314px;
|
|
|
+ height: 28.33vh;
|
|
|
|
|
|
- .top {
|
|
|
- margin-top: 1.2vh;
|
|
|
- height: 7.22vh;
|
|
|
- display: flex;
|
|
|
- margin-right: 30px;
|
|
|
- .one {
|
|
|
- // background-color: red;
|
|
|
- // margin-left: 10px;
|
|
|
- width: 33%;
|
|
|
- display: flex;
|
|
|
+ .top {
|
|
|
+ margin-top: 1.2vh;
|
|
|
+ height: 7.22vh;
|
|
|
+ display: flex;
|
|
|
+ margin-right: 30px;
|
|
|
+ .one {
|
|
|
+ // background-color: red;
|
|
|
+ // margin-left: 10px;
|
|
|
+ width: 33%;
|
|
|
+ display: flex;
|
|
|
|
|
|
- .img {
|
|
|
- margin-left: 50px;
|
|
|
- }
|
|
|
+ .img {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
|
|
|
- .text {
|
|
|
- .text1 {
|
|
|
- margin-left: 6px;
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
- font-size: 20px;
|
|
|
- color: #E6EFFF;
|
|
|
- letter-spacing: 0;
|
|
|
- line-height: 2.77vh;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
+ .text {
|
|
|
+ .text1 {
|
|
|
+ margin: -2px 0 0 6px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #e6efff;
|
|
|
+ letter-spacing: 0;
|
|
|
+ line-height: 2.77vh;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
|
|
|
- .number {
|
|
|
- // width: 107px;
|
|
|
- .number1 {
|
|
|
- font-family: DINAlternate-Bold;
|
|
|
- font-size: 2.77vh;
|
|
|
- color: #E6EFFF;
|
|
|
- letter-spacing: 0;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
+ .number {
|
|
|
+ // width: 107px;
|
|
|
+ .number1 {
|
|
|
+ font-family: DINAlternate-Bold;
|
|
|
+ font-size: 2.77vh;
|
|
|
+ color: #e6efff;
|
|
|
+ letter-spacing: 0;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
|
|
|
- .number2 {
|
|
|
- width: 120px;
|
|
|
- font-family: MicrosoftYaHei-Bold;
|
|
|
- font-size: 1.85vh;
|
|
|
- color: #E6EFFF;
|
|
|
- letter-spacing: 0;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .imgBx{
|
|
|
- margin-left: 20px;
|
|
|
- img{
|
|
|
- height: 70px;
|
|
|
- }
|
|
|
+ .number2 {
|
|
|
+ width: 120px;
|
|
|
+ font-family: MicrosoftYaHei-Bold;
|
|
|
+ font-size: 1.85vh;
|
|
|
+ color: #e6efff;
|
|
|
+ letter-spacing: 0;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- #index {
|
|
|
- margin-left: 45px;
|
|
|
- margin-top: 1.39vh;
|
|
|
+ .imgBx {
|
|
|
+ margin-left: 20px;
|
|
|
+ img {
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ #index {
|
|
|
+ margin-left: 45px;
|
|
|
+ margin-top: 1.39vh;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|