kubbo/kengee-data-screen
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

大提交一版

Browse Source
This commit is contained in:
Kubbo
2024-07-05 17:36:16 +08:00
parent 586dd1bfb7
commit 3933fb588b
13 changed files with 307 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -7,6 +7,7 @@
"preview": "vite preview --port 4173"
},
"dependencies": {
"@jiaminghi/data-view": "^2.10.0",
"axios": "^1.7.2",
"element-ui": "^2.15.14",
"vue": "^2.7.7",

6
src/App.vue
View File

@@ -2,7 +2,7 @@
<div id="app">
<div class="flex">
<apps-nav/>
<router-view class="fill components"/>
<router-view class="components"/>
</div>
</div>
</template>
@@ -15,6 +15,10 @@ html, body, #app {
overflow: hidden;
}
#app > .flex {
height: 100%;
}
.components {
background: #07193D;
}

52
src/assets/main.css
View File

@@ -58,3 +58,55 @@ a, .green {
margin-right: 8px;
}
.dv-scroll-board {
overflow: hidden;
}
.dv-scroll-board .header {
align-items: center;
padding: 6px 0;
}
.dv-scroll-board .header-item, .tableHead .item {
height: initial !important;
line-height: 17px !important;
font-weight: bold;
}
.dv-scroll-board .ceil {
padding: 6px 10px !important;
}
.dv-scroll-board .row-item {
overflow: hidden;
}
.dv-scroll-board .ceil, .dv-scroll-board .header-item {
text-wrap: unset !important;
word-break: break-all;
font-size: 12px;
line-height: 17px
}
.summary {
height: 30px;
align-items: center;
color: #66FFFF;
background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
}
.tableHead {
height: 30px;
align-items: center;
background-color: rgba(13, 48, 99, 0.6);
}
.summary .item, .tableHead .item {
font-size: 12px;
font-weight: bold;
padding: 0 10px;
align-items: center;
box-sizing: border-box;
line-height: 17px;
flex-shrink: 0;
}

4
src/main.js
View File

@@ -5,10 +5,10 @@ import './assets/main.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import inject from './utils/inject'
import dataV from '@jiaminghi/data-view'
Vue.use(ElementUI);
Vue.use(dataV)
inject.then(() => {
new Vue({

1
src/utils/inject.js
View File

@@ -55,6 +55,7 @@ window.$waitFor = (target, t = 500) => new Promise(resolve => {
resolve(target)
}
})
window.evenRowBGC = (color = "#09265B") => `transparent;background-image: linear-gradient(-45deg, ${color} 0, ${color} 10%, transparent 10%, transparent 50%,${color} 50%, ${color} 60%, transparent 60%, transparent);background-size: 10px 10px;`
Vue.prototype.$marketBoard = Vue.observable({
search: {"groupCodeList": ["20011061"], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18"}

125
src/views/AppGroupMonitorTable.vue
View File

@@ -6,22 +6,48 @@ export default {
return {
tableData: [],
columns: [
{label: "课区", prop: "groupName",width:50,align:'center'},
{label: "课长", prop: "supervisorName",width:50,align:'center'},
{label: "销售额", prop: "saleAmt",width:60},
{label: "外卖销售额", prop: "deliverySaleAmt",width:60},
{label: "有效订单数", prop: "validOrderNum",width:60},
{label: "客单价", prop: "customerUnitPrice",width:58},
{label: "蛋糕销售额", prop: "cakeSaleAmt",width:60},
{label: "西点销售额", prop: "westSaleAmt",width:60},
{label: "现烤销售额", prop: "bakeSaleAmt",width:60},
{label: "现烤损货比", prop: "lossAmtRate",width:60},
{label: "环比(目标完成比)",prop: "targetRate"},
]
{label: "课区", prop: "groupName", width: 50, align: 'center'},
{label: "课长", prop: "supervisorName", width: 60, align: 'center'},
{label: "销售额", prop: "saleAmt", width: 60, align: 'right'},
{label: "外卖销售额", prop: "deliverySaleAmt", width: 60, align: 'right'},
{label: "有效订单数", prop: "validOrderNum", width: 60, align: 'right'},
{label: "客单价", prop: "customerUnitPrice", width: 58, align: 'right'},
{label: "蛋糕销售额", prop: "cakeSaleAmt", width: 60, align: 'right'},
{label: "西点销售额", prop: "westSaleAmt", width: 60, align: 'right'},
{label: "现烤销售额", prop: "bakeSaleAmt", width: 60, align: 'right'},
{label: "现烤损货比", prop: "lossAmtRate", width: 60, align: 'right'},
{label: "环比(目标完成比)", prop: "targetRate", align: 'right'},
],
summary: {}
}
},
computed: {
search: v => v.$marketBoard.search
search: v => v.$marketBoard.search,
tableConfig: v => {
return {
headerBGC: 'rgba(13, 48, 99, 0.6)',
oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
header: v.columns.map(e => e.label),
columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
align: v.columns.map(e => e.align || "left"),
data: v.tableData.map(e => v.columns.map(column => e[column.prop])),
}
},
summaryRow: v => v.columns.map((column, i) => {
const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
const style = {textAlign: column.align}
if (column.width > 0) {
style.width = `${column.width}px`
} else {
style.flex = 1
style.minWidth = 0
}
return {
style,
value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] :
i == 0 ? v.summary.groupName : ""
}
})
},
methods: {
getTableData() {
@@ -30,14 +56,15 @@ export default {
...this.search, limit: 999
})).then(res => {
if (res?.data) {
this.summary = res.data.total
this.tableData = res.data?.page?.records || []
}
})
}
},
watch:{
watch: {
search: {
immediate:true,deep:true,handler(){
immediate: true, deep: true, handler() {
this.getTableData()
}
}
@@ -47,9 +74,10 @@ export default {
<template>
<section class="AppGroupMonitorTable">
<el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px" show-summary stripe>
<table-column v-for="(column,i) in columns" :key="i" :column="column"/>
</el-table>
<dv-scroll-board :config="tableConfig" @click=""/>
<div class="summary flex">
<div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
</div>
</section>
</template>
@@ -59,64 +87,7 @@ export default {
box-sizing: border-box;
}
.AppGroupMonitorTable .tableHeader {
background: rgba(13, 48, 99, 0.6) !important;
color: #fff;
border-color: transparent !important;
}
.AppGroupMonitorTable .el-table tr {
background-color: transparent !important;
}
.AppGroupMonitorTable .el-table {
background: transparent;
border-color: transparent;
}
.AppGroupMonitorTable .el-table .el-table__footer-wrapper tr {
background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
}
.AppGroupMonitorTable .el-table .el-table__footer-wrapper .is-leaf {
color: #66FFFF;
background: transparent;
border-color: transparent;
}
.AppGroupMonitorTable .el-table:before {
background: transparent;
}
.AppGroupMonitorTable .tableCell {
color: #fff;
border-color: transparent !important;
}
.AppGroupMonitorTable .el-table tr.el-table__row--striped {
--odd-bg: #09265B;
background-color: #081F48;
background-image: linear-gradient(
-45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
background-size: 10px 10px;
}
.AppGroupMonitorTable .el-table tr.el-table__row--striped .tableCell {
background-color: transparent !important;
}
.AppGroupMonitorTable .el-table tr:hover > .tableCell {
background-color: rgba(255, 255, 255, .1) !important;
}
.AppGroupMonitorTable .subTitle {
line-height: 20px;
width: fit-content;
margin: 24px auto 12px;
background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: center bottom;
.AppGroupMonitorTable .dv-scroll-board {
height: calc(100% - 30px) !important;
}
</style>

141
src/views/AppHourCount.vue
View File

@@ -11,26 +11,59 @@ export default {
computed: {
search: v => v.$marketBoard.search,
columns: v => {
return [
{label: '品类', prop: "categoryName", width: 100},
{label: "总销售额", prop: "compareSaleAmt", align: 'right'},
{label: "时段销售额", prop: "compareHourTotalAmt", align: 'right'},
{label: "时段销售额", prop: "currentHourTotalAmt", align: 'right'},
{label: "销售增长率", prop: "saleGrowthRate", align: 'right'},
]
},
tableConfig: v => {
return {
headerBGC: 'rgba(13, 48, 99, 0.6)',
// headerBGC: '#003B51',
oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
header: v.columns.map(e => e.label),
columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
align: v.columns.map(e => e.align || "left"),
data: v.tableData.map(e => v.columns.map(column => e[column.prop])),
}
},
summaryRow: v => v.columns.map((column, i) => {
const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
const style = {textAlign: column.align}
if (column.width > 0) {
style.width = `${column.width}px`
} else {
style.flex = 1
style.minWidth = 0
}
return {
style,
value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] :
i == 0 ? v.summary.categoryName : ""
}
}),
specialRow: v => {
let {currentDate, compareDate} = v.search
const {compareSaleAmt = 0, compareHourTotalAmt = 0, currentHourTotalAmt = 0, saleGrowthRate = 0} = v.summary
const {dayjs} = window
currentDate = currentDate ? dayjs(currentDate).format("YYYY-MM-DD") : ""
compareDate = compareDate ? dayjs(compareDate).format("YYYY-MM-DD") : ""
return [
{label: "日期", width: 100, children: [{label: '总计', children: [{label: '品类', prop: "categoryName"}]}]},
{
label: compareDate, width: 137, align: 'center', children: [
{label: `${compareSaleAmt}`, align: 'right', children: [{label: "总销售额", prop: "compareSaleAmt", align: 'right'}]},
{label: `${compareHourTotalAmt}`, align: 'right', children: [{label: "时段销售额", prop: "compareHourTotalAmt", align: 'right'}]},
]
},
{
label: currentDate, width: 137, align: 'center', children: [
{label: `${currentHourTotalAmt}`, align: 'right', children: [{label: "时段销售额", prop: "currentHourTotalAmt", align: 'right'}]},
{label: `${saleGrowthRate}`, align: 'right', children: [{label: "销售增长率", prop: "saleGrowthRate", align: 'right'}]},
]
{value: "日期", width: 100},
{value: compareDate, align: 'center',},
{value: currentDate, align: 'center',},
].map(column => {
const style = {textAlign: column.align}
if (column.width > 0) {
style.width = `${column.width}px`
} else {
style.flex = 1
style.minWidth = 0
}
]
return {style, value: column.value}
})
}
},
methods: {
@@ -45,11 +78,6 @@ export default {
}
})
},
getHeaderClass({rowIndex}) {
if (rowIndex === 1) {
return "summaryHeader"
}
}
},
watch: {
search: {
@@ -63,9 +91,13 @@ export default {
<template>
<section class="AppHourCount">
<el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="242px" stripe :header-row-class-name="getHeaderClass">
<table-column v-for="(column,i) in columns" :key="i" :column="column"/>
</el-table>
<div class="tableHead flex">
<div class="item" v-for="(col,i) in specialRow" :key="i" v-text="col.value" :style="col.style"/>
</div>
<div class="summary flex">
<div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
</div>
<dv-scroll-board :config="tableConfig"/>
</section>
</template>
@@ -75,68 +107,7 @@ export default {
box-sizing: border-box;
}
.AppHourCount .tableHeader {
background: rgba(13, 48, 99, 0.6) !important;
color: #fff;
border-color: transparent !important;
}
.AppHourCount .el-table tr {
background-color: transparent !important;
}
.AppHourCount .el-table {
background: transparent;
border-color: transparent;
}
.AppHourCount .el-table .el-table__footer-wrapper tr, .AppHourCount .el-table .summaryHeader {
background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
}
.AppHourCount .summaryHeader .tableHeader {
background: transparent !important;
}
.AppHourCount .el-table .summaryHeader .cell {
color: #66FFFF;
}
.AppHourCount .el-table .el-table__footer-wrapper .is-leaf {
color: #66FFFF;
background: transparent;
border-color: transparent;
}
.AppHourCount .tableCell {
color: #fff;
border-color: transparent !important;
}
.AppHourCount .el-table tr.el-table__row--striped {
--odd-bg: #09265B;
background-color: #081F48;
background-image: linear-gradient(
-45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
background-size: 10px 10px;
}
.AppHourCount .el-table tr.el-table__row--striped .tableCell {
background-color: transparent !important;
}
.AppHourCount .el-table tr:hover > .tableCell {
background-color: rgba(255, 255, 255, .1) !important;
}
.AppHourCount .subTitle {
line-height: 20px;
width: fit-content;
margin: 24px auto 12px;
background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: center bottom;
.AppHourCount .dv-scroll-board {
height: calc(100% - 60px);
}
</style>

142
src/views/AppHourSale.vue
View File

@@ -4,32 +4,67 @@ export default {
label: "市场看板-全门店时段销售",
data() {
return {
summary: {},
tableData: []
}
},
computed: {
search: v => v.$marketBoard.search,
columns: v => {
columns: () => {
return [
{label: "时段", width: 100, prop: "hour"},
{label: "销售额", prop: "compareSaleAmt", align: 'center'},
{label: "有效订单数", prop: "compareValidOrderNum", align: 'center'},
{label: "销售额", prop: "currentSaleAmt", align: 'center'},
{label: "有效订单数", prop: "currentValidOrderNum", align: 'center'},
{label: "销售增长率", width: 80, align: 'center', prop: "saleGrowthRate"},
]
},
tableConfig: v => {
return {
headerBGC: 'rgba(13, 48, 99, 0.6)',
oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
header: v.columns.map(e => e.label), rowNum: 16,
columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
align: v.columns.map(e => e.align || "left"),
data: v.tableData.map(e => v.columns.map(column => e[column.prop])),
}
},
summaryRow: v => v.columns.map((column, i) => {
const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
const style = {textAlign: column.align}
if (column.width > 0) {
style.width = `${column.width}px`
} else {
style.flex = 1
style.minWidth = 0
}
return {
style,
value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] :
i == 0 ? v.summary.hour : ""
}
}),
specialRow: v => {
let {currentDate, compareDate} = v.search
const {dayjs} = window
currentDate = currentDate ? dayjs(currentDate).format("YYYY-MM-DD") : ""
compareDate = compareDate ? dayjs(compareDate).format("YYYY-MM-DD") : ""
return [
{label: "日期", width: 100, children: [{label: '时段', prop: "hour"}]},
{
label: compareDate, width: 137, align: 'center', children: [
{label: "销售额", prop: "compareSaleAmt", align: 'center'},
{label: "有效订单数", prop: "compareValidOrderNum", align: 'center'},
]
},
{
label: currentDate, width: 137, align: 'center', children: [
{label: "销售额", prop: "currentSaleAmt", align: 'center'},
{label: "有效订单数", prop: "currentValidOrderNum", align: 'center'},
]
},
{label: "销售增长率", width: 70, align: 'center', prop: "saleGrowthRate"},
]
{value: "日期", width: 100},
{value: compareDate, align: 'center'},
{value: currentDate, align: 'center'},
{width: 80},
].map(column => {
const style = {textAlign: column.align}
if (column.width > 0) {
style.width = `${column.width}px`
} else {
style.flex = 1
style.minWidth = 0
}
return {style, value: column.value}
})
}
},
methods: {
@@ -39,7 +74,8 @@ export default {
...this.search, limit: 999
})).then(res => {
if (res?.data) {
this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${`${e.hour-1}`.padStart(2, '0')}:00-${e.hour.padStart(2, '0')}:00`})) || []
this.summary = res.data.total
this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${`${e.hour - 1}`.padStart(2, '0')}:00-${e.hour.padStart(2, '0')}:00`})) || []
}
})
}
@@ -56,9 +92,13 @@ export default {
<template>
<section class="AppHourSale">
<el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px" show-summary stripe>
<table-column v-for="(column,i) in columns" :key="i" :column="column"/>
</el-table>
<div class="tableHead flex">
<div class="item" v-for="(col,i) in specialRow" :key="i" v-text="col.value" :style="col.style"/>
</div>
<dv-scroll-board :config="tableConfig"/>
<div class="summary flex">
<div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
</div>
</section>
</template>
@@ -67,65 +107,7 @@ export default {
color: #fff;
box-sizing: border-box;
}
.AppHourSale .tableHeader {
background: rgba(13, 48, 99, 0.6) !important;
color: #fff;
border-color: transparent !important;
}
.AppHourSale .el-table tr {
background-color: transparent !important;
}
.AppHourSale .el-table {
background: transparent;
border-color: transparent;
}
.AppHourSale .el-table .el-table__footer-wrapper tr {
background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
}
.AppHourSale .el-table .el-table__footer-wrapper .is-leaf {
color: #66FFFF;
background: transparent;
border-color: transparent;
}
.AppHourSale .el-table:before {
background: transparent;
}
.AppHourSale .tableCell {
color: #fff;
border-color: transparent !important;
}
.AppHourSale .el-table tr.el-table__row--striped {
--odd-bg: #09265B;
background-color: #081F48;
background-image: linear-gradient(
-45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
background-size: 10px 10px;
}
.AppHourSale .el-table tr.el-table__row--striped .tableCell {
background-color: transparent !important;
}
.AppHourSale .el-table tr:hover > .tableCell {
background-color: rgba(255, 255, 255, .1) !important;
}
.AppHourSale .subTitle {
line-height: 20px;
width: fit-content;
margin: 24px auto 12px;
background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: center bottom;
.AppHourSale .dv-scroll-board {
height: calc(100% - 60px);
}
</style>

86
src/views/AppKeyGoods.vue
View File

@@ -7,21 +7,32 @@ export default {
tableData: [],
columns: [
{label: "重点单品", prop: "goodsCategoryName"},
{label: "销售额", prop: "saleNum", width: "70px"},
{label: "库存数量", prop: "stockNum", width: "70px"},
{label: "销售目标", prop: "targetSaleNum", width: "70px"},
{label: "销售额", prop: "saleNum", width: 70},
{label: "库存数量", prop: "stockNum", width: 70},
{label: "销售目标", prop: "targetSaleNum", width:70},
{label: "销售达成", prop: "saleAchieveRate"},
]
}
},
computed: {
search: v => v.$marketBoard.search
search: v => v.$marketBoard.search,
tableConfig: v => {
return {
headerBGC: 'rgba(13, 48, 99, 0.6)',
// headerBGC: '#003B51',
oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
header: v.columns.map(e => e.label),
columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
align: v.columns.map(e => e.align || "left"),
data: v.tableData.map(e => v.columns.map(column => e[column.prop])),
}
},
},
methods: {
getTableData() {
const {$http, $waitFor} = window
$waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/marketKeyGoods", {
...this.search, limit: 999
// ...this.search, limit: 999
})).then(res => {
if (res?.data) {
this.tableData = res.data?.records || []
@@ -41,9 +52,7 @@ export default {
<template>
<section class="AppKeyGoods">
<el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px" stripe>
<table-column v-for="(column,i) in columns" :key="i" :column="column"/>
</el-table>
<dv-scroll-board :config="tableConfig" @click=""/>
</section>
</template>
@@ -52,65 +61,4 @@ export default {
color: #fff;
box-sizing: border-box;
}
.AppKeyGoods .tableHeader {
background: rgba(13, 48, 99, 0.6) !important;
color: #fff;
border-color: transparent !important;
}
.AppKeyGoods .el-table tr {
background-color: transparent !important;
}
.AppKeyGoods .el-table {
background: transparent;
border-color: transparent;
}
.AppKeyGoods .el-table .el-table__footer-wrapper tr {
background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
}
.AppKeyGoods .el-table .el-table__footer-wrapper .is-leaf {
color: #66FFFF;
background: transparent;
border-color: transparent;
}
.AppKeyGoods .el-table:before {
background: transparent;
}
.AppKeyGoods .tableCell {
color: #fff;
border-color: transparent !important;
}
.AppKeyGoods .el-table tr.el-table__row--striped {
--odd-bg: #09265B;
background-color: #081F48;
background-image: linear-gradient(
-45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
background-size: 10px 10px;
}
.AppKeyGoods .el-table tr.el-table__row--striped .tableCell {
background-color: transparent !important;
}
.AppKeyGoods .el-table tr:hover > .tableCell {
background-color: rgba(255, 255, 255, .1) !important;
}
.AppKeyGoods .subTitle {
line-height: 20px;
width: fit-content;
margin: 24px auto 12px;
background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: center bottom;
}
</style>

2
src/views/AppMarketBoardFilter.vue
View File

@@ -22,7 +22,7 @@ export default {
this.getOptions().then(() => {
const {dayjs} = window
setTimeout(() => {
const compareDate = dayjs().subtract(1, "day").format("YYYYMMDD"),
const compareDate = dayjs().subtract(7, "day").format("YYYYMMDD"),
currentDate = dayjs().format("YYYYMMDD"),
hourNum = new Date().getHours(),
groupCodeList = this.options?.[0].value

94
src/views/AppStoreMonitor.vue
View File

@@ -15,12 +15,40 @@ export default {
{label: "门店现烤领用额", prop: "bakeLyAmt"},
{label: "门店现烤惜食", prop: "bakeXsSaleAmt"},
],
filter: ""
filter: "",
summary: {}
}
},
computed: {
search: v => v.$marketBoard.search,
list: v => v.tableData.filter(e => !v.filter || e.supervisorName == v.filter) || []
list: v => v.tableData.filter(e => !v.filter || e.supervisorName == v.filter) || [],
options: v => [...new Set(v.tableData.map(e => e.supervisorName))],
tableConfig: v => {
return {
headerBGC: 'rgba(13, 48, 99, 0.6)',
// headerBGC: '#003B51',
oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
header: v.columns.map(e => e.label),
columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
align: v.columns.map(e => e.align || "left"),
data: v.list.map(e => v.columns.map(column => e[column.prop])),
}
},
summaryRow: v => v.columns.map((column, i) => {
const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
const style = {textAlign: column.align}
if (column.width > 0) {
style.width = `${column.width}px`
} else {
style.flex = 1
style.minWidth = 0
}
return {
style,
value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] :
i == 0 ? v.summary.groupName : ""
}
})
},
methods: {
getTableData() {
@@ -29,6 +57,7 @@ export default {
...this.search, limit: 999
})).then(res => {
if (res?.data) {
this.summary = res.data.total
this.tableData = res.data?.page?.records || []
}
})
@@ -49,70 +78,25 @@ export default {
<div class="flex" style="margin-bottom: 22px">
<div class="fill"/>
<el-select placeholder="全部" v-model="filter" size="small" clearable class="AppSelect">
<el-option v-for="(item,i) in tableData" :key="i" :label="item.supervisorName" :value="item.supervisorName"/>
<el-option v-for="(name,i) in options" :key="i" :label="name" :value="name"/>
</el-select>
</div>
<el-table :data="list" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="334px" show-summary stripe>
<table-column v-for="(column,i) in columns" :key="i" :column="column"/>
</el-table>
<dv-scroll-board :config="tableConfig"/>
<div class="summary flex">
<div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
</div>
</section>
</template>
<style>
.AppStoreMonitor {
flex-shrink: 0 !important;
color: #fff;
box-sizing: border-box;
}
.AppStoreMonitor .tableHeader {
background: rgba(13, 48, 99, 0.6) !important;
color: #fff;
border-color: transparent !important;
}
.AppStoreMonitor .el-table tr {
background-color: transparent !important;
}
.AppStoreMonitor .el-table {
background: transparent;
border-color: transparent;
}
.AppStoreMonitor .el-table .el-table__footer-wrapper tr {
background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
}
.AppStoreMonitor .el-table .el-table__footer-wrapper .is-leaf {
color: #66FFFF;
background: transparent;
border-color: transparent;
}
.AppStoreMonitor .el-table:before {
background: transparent;
}
.AppStoreMonitor .tableCell {
color: #fff;
border-color: transparent !important;
}
.AppStoreMonitor .el-table tr.el-table__row--striped {
--odd-bg: #09265B;
background-color: #081F48;
background-image: linear-gradient(
-45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
background-size: 10px 10px;
}
.AppStoreMonitor .el-table tr.el-table__row--striped .tableCell {
background-color: transparent !important;
}
.AppStoreMonitor .el-table tr:hover > .tableCell {
background-color: rgba(255, 255, 255, .1) !important;
.AppStoreMonitor .dv-scroll-board {
height: calc(100% - 30px - 55px) !important;
}
.AppStoreMonitor .el-select {

8
src/views/AppThreeMap.vue
View File

@@ -322,7 +322,7 @@ export default {
* @desc 创建控制器
* */
setControl() {
this.controls = new THREE.OrbitControls(this.camera);
this.controls = new THREE.OrbitControls(this.camera,rootEl);
this.controls.enableRotate = false
this.camera.position.set(this.cameraPosition.x, this.cameraPosition.y, this.cameraPosition.z);
}
@@ -394,8 +394,8 @@ export default {
}
if (raycaster) {
const intersects = raycaster.intersectObject(_this.markers);
// console.log('select group', intersects)
const intersects = raycaster.intersectObjects(_this.markers);
console.log(intersects)
if (intersects.length > 0) {
const res = intersects.filter(function (res) {
return res && res.object;
@@ -411,7 +411,7 @@ export default {
const onClick = evt => {
// 创建一个射线投射器
raycaster.setFromCamera(this.mouse, this.camera);
console.log(raycaster.intersectObject(this.markers, true))
console.log(raycaster.intersectObjects(this.markers))
const marker = this.markers.find(e => raycaster.intersectObject(e, true).length > 0)
if (marker) {
console.log("选取的点:", marker)

19
vite.config.js
View File

@@ -15,6 +15,25 @@ export default defineConfig({
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
],
optimizeDeps: {
include: [
"@jiaminghi/c-render",
"@jiaminghi/c-render/lib/plugin/util",
"@jiaminghi/charts/lib/util/index",
"@jiaminghi/charts/lib/util",
"@jiaminghi/charts/lib/extend/index",
"@jiaminghi/charts",
"@jiaminghi/color",
],
},
build: {
// 打包时需要另外处理的commonjs规范的包
commonjsOptions: {
include: [
/node_modules/, // 必须包含
],
},
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))