|
@@ -1,277 +1,29 @@
|
|
|
<template>
|
|
|
<moduleEnclosure title="今日电子支付金额">
|
|
|
<div class="heat-lay">
|
|
|
- <div
|
|
|
- id="mokuaikuang1"
|
|
|
- class="mokuaikuang"
|
|
|
- style="cursor: pointer"
|
|
|
- @click="openPopUp($event, 'mokuaikuang1', '今日维修支付金额(元)')"
|
|
|
- >
|
|
|
- <div class="heat-lay-flex">
|
|
|
- <div class="heat-lay-flex-title">维修支付金额</div>
|
|
|
- <div class="heat-lay-flex-title">维修客单价</div>
|
|
|
- </div>
|
|
|
- <div class="heat-lay-flex">
|
|
|
- <div class="jiagexians">
|
|
|
- <span>¥</span>
|
|
|
- <span>{{ info.repairPayAmount }}</span>
|
|
|
- <span>元</span>
|
|
|
- </div>
|
|
|
- <div class="jiagexians2">
|
|
|
- <span>{{ info.repairPayPrice }}</span>
|
|
|
- <span>元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="heat-lay-flex">
|
|
|
- <div class="zhanbijs">
|
|
|
- <span>同比</span>
|
|
|
- <span
|
|
|
- :class="
|
|
|
- info.repairPayRate > 0
|
|
|
- ? 'c3'
|
|
|
- : info.repairPayRate < 0
|
|
|
- ? 'c2'
|
|
|
- : ''
|
|
|
- "
|
|
|
- >{{ info.repairPayRate }}%</span
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="info.repairPayRate > 0 || info.repairPayRate < 0"
|
|
|
- :src="
|
|
|
- info.repairPayRate > 0
|
|
|
- ? shang
|
|
|
- : info.repairPayRate < 0
|
|
|
- ? xia
|
|
|
- : ''
|
|
|
- "
|
|
|
- style="width: 16px; height: 16px; margin-left: 6px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="horizontalLine"></div>
|
|
|
- <div
|
|
|
- id="mokuaikuang2"
|
|
|
- class="mokuaikuang"
|
|
|
- style="cursor: pointer"
|
|
|
- @click="openPopUp($event, 'mokuaikuang2', '今日安装支付金额(元)')"
|
|
|
- >
|
|
|
- <div class="heat-lay-flex">
|
|
|
- <div class="heat-lay-flex-title">安装支付金额</div>
|
|
|
- <div class="heat-lay-flex-title">安装客单价</div>
|
|
|
- </div>
|
|
|
- <div class="heat-lay-flex">
|
|
|
- <div class="jiagexians">
|
|
|
- <span>¥</span>
|
|
|
- <span>{{ info.installPayAmount }}</span>
|
|
|
- <span>元</span>
|
|
|
- </div>
|
|
|
- <div class="jiagexians2">
|
|
|
- <span>{{ info.installPayPrice }}</span>
|
|
|
- <span>元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="heat-lay-flex">
|
|
|
- <div class="zhanbijs">
|
|
|
- <span>同比</span>
|
|
|
- <span
|
|
|
- :class="
|
|
|
- info.installPayRate > 0
|
|
|
- ? 'c3'
|
|
|
- : info.installPayRate < 0
|
|
|
- ? 'c2'
|
|
|
- : ''
|
|
|
- "
|
|
|
- >{{ info.installPayRate }}%</span
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="info.installPayRate > 0 || info.installPayRate < 0"
|
|
|
- :src="
|
|
|
- info.installPayRate > 0
|
|
|
- ? shang
|
|
|
- : info.installPayRate < 0
|
|
|
- ? xia
|
|
|
- : ''
|
|
|
- "
|
|
|
- style="width: 16px; height: 16px; margin-left: 6px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <Teleport to="body">
|
|
|
- <popUp
|
|
|
- :show="show"
|
|
|
- :top="top"
|
|
|
- :left="left"
|
|
|
- :title="title"
|
|
|
- :item="item"
|
|
|
- @col="
|
|
|
- (bool) => {
|
|
|
- show = bool;
|
|
|
- if (!bool) {
|
|
|
- item = [];
|
|
|
- }
|
|
|
- }
|
|
|
- "
|
|
|
- />
|
|
|
- </Teleport>
|
|
|
</moduleEnclosure>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import moduleEnclosure from '@/components/moduleEnclosure.vue';
|
|
|
-import { getCommonly, getQuery21_1, getQuery21_2 } from '@/api/bigView.js';
|
|
|
-import shang from '@/assets/shang.png';
|
|
|
-import xia from '@/assets/xia.png';
|
|
|
-import popUp from '@/components/pop-up.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
moduleEnclosure,
|
|
|
- popUp,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- shang,
|
|
|
- xia,
|
|
|
- info: {},
|
|
|
- show: false,
|
|
|
- top: 0,
|
|
|
- left: 0,
|
|
|
- title: '',
|
|
|
- item: [],
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.timeId = getCommonly((res) => {
|
|
|
- this.info = res.data;
|
|
|
- }, 60000);
|
|
|
+
|
|
|
},
|
|
|
beforeUnmount() {
|
|
|
- this.timeId();
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
- openPopUp(e, id, title) {
|
|
|
- if (id === 'mokuaikuang1') {
|
|
|
- getQuery21_1((res) => {
|
|
|
- var list = [
|
|
|
- { area: '广州公司' },
|
|
|
- { area: '佛山公司' },
|
|
|
- { area: '天猫优品' },
|
|
|
- ];
|
|
|
- var keys = [];
|
|
|
- var gz = [];
|
|
|
- var fs = [];
|
|
|
- res.data.map((item) => {
|
|
|
- var { area, ...obj } = item;
|
|
|
- var ind = ~['广州市', '清远市', '韶关市'].indexOf(area)
|
|
|
- ? 0
|
|
|
- : ~['佛山市', '肇庆市', '云浮市'].indexOf(area)
|
|
|
- ? 1
|
|
|
- : 2;
|
|
|
- if (ind === 0) {
|
|
|
- gz.push(item);
|
|
|
- }
|
|
|
- if (ind === 1) {
|
|
|
- fs.push(item);
|
|
|
- }
|
|
|
- keys = Object.keys(obj);
|
|
|
- keys.map((key) => {
|
|
|
- if (list[ind][key] === undefined) {
|
|
|
- list[ind][key] = 0;
|
|
|
- }
|
|
|
- list[ind][key] += obj[key];
|
|
|
- });
|
|
|
- });
|
|
|
- list.map((obj) => {
|
|
|
- if (Object.keys(obj).length === 1) {
|
|
|
- keys.map((key) => {
|
|
|
- obj[key] = 0;
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- gz.sort((a, b) => {
|
|
|
- return (
|
|
|
- ['广州市', '清远市', '韶关市'].indexOf(a.area) -
|
|
|
- ['广州市', '清远市', '韶关市'].indexOf(b.area)
|
|
|
- );
|
|
|
- });
|
|
|
- fs.sort((a, b) => {
|
|
|
- return (
|
|
|
- ['佛山市', '肇庆市', '云浮市'].indexOf(a.area) -
|
|
|
- ['佛山市', '肇庆市', '云浮市'].indexOf(b.area)
|
|
|
- );
|
|
|
- });
|
|
|
- this.item = [list[0], ...gz, list[1], ...fs, list[2]];
|
|
|
- var { height, top, left } = document
|
|
|
- .getElementById(id)
|
|
|
- .getBoundingClientRect();
|
|
|
- this.title = title;
|
|
|
- this.top = top + height;
|
|
|
- this.left = left;
|
|
|
- this.show = true;
|
|
|
- });
|
|
|
- } else if (id === 'mokuaikuang2') {
|
|
|
- getQuery21_2((res) => {
|
|
|
- var list = [
|
|
|
- { area: '广州公司' },
|
|
|
- { area: '佛山公司' },
|
|
|
- { area: '天猫优品' },
|
|
|
- ];
|
|
|
- var keys = [];
|
|
|
- var gz = [];
|
|
|
- var fs = [];
|
|
|
- res.data.map((item) => {
|
|
|
- var { area, ...obj } = item;
|
|
|
- var ind = ~['广州市', '清远市', '韶关市'].indexOf(area)
|
|
|
- ? 0
|
|
|
- : ~['佛山市', '肇庆市', '云浮市'].indexOf(area)
|
|
|
- ? 1
|
|
|
- : 2;
|
|
|
- if (ind === 0) {
|
|
|
- gz.push(item);
|
|
|
- }
|
|
|
- if (ind === 1) {
|
|
|
- fs.push(item);
|
|
|
- }
|
|
|
- keys = Object.keys(obj);
|
|
|
- keys.map((key) => {
|
|
|
- if (list[ind][key] === undefined) {
|
|
|
- list[ind][key] = 0;
|
|
|
- }
|
|
|
- list[ind][key] += obj[key];
|
|
|
- });
|
|
|
- });
|
|
|
- list.map((obj) => {
|
|
|
- if (Object.keys(obj).length === 1) {
|
|
|
- keys.map((key) => {
|
|
|
- obj[key] = 0;
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- gz.sort((a, b) => {
|
|
|
- return (
|
|
|
- ['广州市', '清远市', '韶关市'].indexOf(a.area) -
|
|
|
- ['广州市', '清远市', '韶关市'].indexOf(b.area)
|
|
|
- );
|
|
|
- });
|
|
|
- fs.sort((a, b) => {
|
|
|
- return (
|
|
|
- ['佛山市', '肇庆市', '云浮市'].indexOf(a.area) -
|
|
|
- ['佛山市', '肇庆市', '云浮市'].indexOf(b.area)
|
|
|
- );
|
|
|
- });
|
|
|
- this.item = [list[0], ...gz, list[1], ...fs, list[2]];
|
|
|
- var { height, top, left } = document
|
|
|
- .getElementById(id)
|
|
|
- .getBoundingClientRect();
|
|
|
- this.title = title;
|
|
|
- this.top = top + height;
|
|
|
- this.left = left;
|
|
|
- this.show = true;
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -280,104 +32,6 @@ export default {
|
|
|
.heat-lay {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- .horizontalLine {
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- border-radius: 2px;
|
|
|
- background: linear-gradient(to right, #082570, #156ccf, #156ccf, #082570);
|
|
|
- }
|
|
|
- .mokuaikuang {
|
|
|
- width: 100%;
|
|
|
- height: 50%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .heat-lay-flex {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .heat-lay-flex-title {
|
|
|
- font-size: 16px;
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
|
- font-weight: 400;
|
|
|
- text-align: right;
|
|
|
- color: #8ab1dc;
|
|
|
- }
|
|
|
- .jiagexians {
|
|
|
- width: 50%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- & > span:nth-child(1),
|
|
|
- & > span:nth-child(2) {
|
|
|
- font-size: 28px;
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
|
|
|
- font-weight: 500;
|
|
|
- text-align: left;
|
|
|
- color: #ffcc00;
|
|
|
- }
|
|
|
- & > span:nth-child(3) {
|
|
|
- margin-left: 10px;
|
|
|
- font-size: 18px;
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
|
- font-weight: 400;
|
|
|
- text-align: left;
|
|
|
- color: #8ab1dc;
|
|
|
- }
|
|
|
- }
|
|
|
- .jiagexians2 {
|
|
|
- width: 50%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- & > span:nth-child(1) {
|
|
|
- font-size: 28px;
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
|
|
|
- font-weight: 500;
|
|
|
- text-align: left;
|
|
|
- color: #3be9ff;
|
|
|
- }
|
|
|
- & > span:nth-child(2) {
|
|
|
- margin-left: 10px;
|
|
|
- font-size: 18px;
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
|
- font-weight: 400;
|
|
|
- text-align: left;
|
|
|
- color: #8ab1dc;
|
|
|
- }
|
|
|
- }
|
|
|
- .zhanbijs {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- & > span:nth-child(1) {
|
|
|
- font-size: 16px;
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
|
- font-weight: 400;
|
|
|
- text-align: left;
|
|
|
- color: #8ab1dc;
|
|
|
- margin-right: 15px;
|
|
|
- }
|
|
|
- & > span:nth-child(2) {
|
|
|
- font-size: 16px;
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
|
- font-weight: 400;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .c2 {
|
|
|
- color: #3ce783;
|
|
|
- }
|
|
|
- .c3 {
|
|
|
- color: #e15960;
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
</style>
|