shit
This commit is contained in:
parent
e951ed48ac
commit
4d1a70932a
File diff suppressed because it is too large
Load Diff
|
|
@ -14,12 +14,15 @@
|
||||||
"amfe-flexible": "^2.2.1",
|
"amfe-flexible": "^2.2.1",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
|
"element-plus": "^2.4.3",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
"postcss-pxtorem": "^5.1.1",
|
"postcss-pxtorem": "^5.1.1",
|
||||||
"vue": "^3.3.8",
|
"vue": "^3.3.8",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^4.5.0",
|
"@vitejs/plugin-vue": "^4.5.0",
|
||||||
|
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||||
"postcss-pxtorem": "^6.0.0",
|
"postcss-pxtorem": "^6.0.0",
|
||||||
"sass": "^1.69.5",
|
"sass": "^1.69.5",
|
||||||
"sass-loader": "^13.3.2",
|
"sass-loader": "^13.3.2",
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// @ts-ignore
|
|
||||||
import Header from "@/components/Header.vue"
|
|
||||||
const zz3 = 565
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<!-- <div>sadas</div> -->
|
<!-- <div>sadas</div> -->
|
||||||
<div class="main-box">
|
<div class="main-box">
|
||||||
<Header></Header>
|
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
57
src/api.js
57
src/api.js
|
|
@ -1,5 +1,6 @@
|
||||||
|
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
// 创建axios 实例
|
// 创建axios 实例
|
||||||
const instacne = axios.create({
|
const instacne = axios.create({
|
||||||
baseURL: "https://crmeb-test.shop.lihaink.cn/",
|
baseURL: "https://crmeb-test.shop.lihaink.cn/",
|
||||||
|
|
@ -21,6 +22,16 @@ instacne.interceptors.request.use(
|
||||||
// 响应拦截
|
// 响应拦截
|
||||||
instacne.interceptors.response.use(
|
instacne.interceptors.response.use(
|
||||||
(res) => {
|
(res) => {
|
||||||
|
|
||||||
|
console.log(res.data)
|
||||||
|
if (res.data.status != 200) {
|
||||||
|
ElMessage({
|
||||||
|
message: res.data.message,
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
return Promise.reject(res.data.message);
|
||||||
|
|
||||||
|
}
|
||||||
// 对响应的数据做什么
|
// 对响应的数据做什么
|
||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
|
|
@ -92,6 +103,48 @@ export function take_order_listApi(params) {
|
||||||
export function take_order_count_titleApi(params) {
|
export function take_order_count_titleApi(params) {
|
||||||
return instacne.get('/api/dataview/take_order_count_title', { params })
|
return instacne.get('/api/dataview/take_order_count_title', { params })
|
||||||
}
|
}
|
||||||
//
|
|
||||||
// /api/dataview/take_order_count_title?areaCode=510524&streetCode=510524100&status&page=1&limit=20
|
|
||||||
|
|
||||||
|
|
||||||
|
export function financial_record_titleApi(params) {
|
||||||
|
return instacne.get('/api/dataview/financial_record_title', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export function financial_recordApi(params) {
|
||||||
|
return instacne.get('/api/dataview/financial_record', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function product_status_filterApi(params) {
|
||||||
|
return instacne.get('/api/dataview/product_status_filter', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function financial_record_detailApi(params) {
|
||||||
|
return instacne.get('/api/dataview/financial_record_detail/1', { params })
|
||||||
|
}
|
||||||
|
export function financial_record_detailApi2(params) {
|
||||||
|
return instacne.get('/api/dataview/financial_record_detail/2', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export function bill_listApi(params) {
|
||||||
|
return instacne.get('/api/dataview/bill_list', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function withdraw_listApi(params) {
|
||||||
|
return instacne.get('/api/dataview/withdraw_list', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function street_currday_order_countApi(params) {
|
||||||
|
return instacne.get('/api/dataview/street_currday_order_count', { params })
|
||||||
|
}
|
||||||
|
export function loginApi(params) {
|
||||||
|
return instacne.post('/api/dataview/login', params)
|
||||||
|
}
|
||||||
|
//
|
||||||
|
////api/dataview/login {
|
||||||
|
// "account": "泸县",
|
||||||
|
// "password": "luxian"
|
||||||
|
// }
|
||||||
|
|
|
||||||
|
|
@ -82,6 +82,7 @@ import MapLoader from "@/view/utils/position.js"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let area = ref('')
|
let area = ref('')
|
||||||
|
|
||||||
const u = (name) => {
|
const u = (name) => {
|
||||||
|
|
@ -154,7 +155,8 @@ const offAreaList = (name) => {
|
||||||
}
|
}
|
||||||
const out = () => {
|
const out = () => {
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
window.open("about:blank", "_top").close()
|
// window.open("about:blank", "_top").close()
|
||||||
|
router.replace('/login')
|
||||||
}
|
}
|
||||||
const updateTime = () => {
|
const updateTime = () => {
|
||||||
var date = new Date();
|
var date = new Date();
|
||||||
|
|
|
||||||
|
|
@ -4,44 +4,80 @@
|
||||||
<div style="height:5vh;"></div>
|
<div style="height:5vh;"></div>
|
||||||
<div class="towns">
|
<div class="towns">
|
||||||
<div class="town-li act">{{ area.area_name }} </div>
|
<div class="town-li act">{{ area.area_name }} </div>
|
||||||
<div class="town-li" v-for="(item, index) in streetList">{{ item.street_name }}</div>
|
|
||||||
<div id="transactionUsers" style="width: 100%;height: 30vh;"></div>
|
<div class="town-li" :class="{ act: item.street_code == props.areaCodes.streetCode }"
|
||||||
|
v-for="(item, index) in streetList" @click="hdClick(item.street_code)">{{ item.street_name }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="transactionUsers" v-if="showChart" style="width: 100%;height: 30vh;">
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, defineProps } from "vue"
|
import { ref, reactive, onMounted, defineProps } from "vue"
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { getUserTradeCountApi } from "@/api.js"
|
import { getUserTradeCountApi } from "@/api.js"
|
||||||
import { notEndWith } from "postcss-pxtorem/lib/filter-prop-list";
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
areaCodes: Object,
|
areaCodes: Object,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const hdClick = (code) => {
|
||||||
|
props.areaCodes.streetCode = code
|
||||||
|
init()
|
||||||
|
}
|
||||||
|
|
||||||
const streetList = reactive([])
|
const streetList = reactive([])
|
||||||
const area = reactive({
|
const area = reactive({
|
||||||
"area_code": "",
|
"area_code": "",
|
||||||
"area_name": ""
|
"area_name": ""
|
||||||
})
|
})
|
||||||
|
|
||||||
getUserTradeCountApi(props.areaCodes).then(res => {
|
|
||||||
res.data.streetList.forEach(item => {
|
|
||||||
streetList.push(item)
|
|
||||||
})
|
|
||||||
area.area_name = res.data.area.area_name
|
|
||||||
res.data.userTradeCountList.forEach(item => {
|
|
||||||
|
|
||||||
option.xAxis[0].data.push(item.date.slice(5, item.date.length))
|
const init = () => {
|
||||||
option.series[0].data.push(item.visitUser)
|
|
||||||
|
getUserTradeCountApi(props.areaCodes).then(res => {
|
||||||
|
|
||||||
|
showChart.value = false
|
||||||
|
option.xAxis[0].data.splice(0, option.xAxis[0].data.length)
|
||||||
|
option.series[0].data.splice(0, option.series[0].data.length)
|
||||||
|
option.series[1].data.splice(0, option.series[1].data.length)
|
||||||
|
option.series[2].data.splice(0, option.series[2].data.length)
|
||||||
|
|
||||||
|
if (!streetList.length) {
|
||||||
|
|
||||||
|
res.data.streetList.forEach(item => {
|
||||||
|
streetList.push(item)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
area.area_name = res.data.area.area_name
|
||||||
|
res.data.userTradeCountList.forEach(item => {
|
||||||
|
|
||||||
|
option.xAxis[0].data.push(item.date.slice(5, item.date.length))
|
||||||
|
option.series[0].data.push(item.visitUser)
|
||||||
|
|
||||||
|
option.series[1].data.push(item.orderUser)
|
||||||
|
option.series[2].data.push(item.payOrderUser)
|
||||||
|
|
||||||
|
})
|
||||||
|
showChart.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
initCharts('transactionUsers', option)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}, 10)
|
||||||
|
|
||||||
option.series[1].data.push(item.orderUser)
|
|
||||||
option.series[2].data.push(item.payOrderUser)
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
initCharts('transactionUsers', option)
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
const initCharts = (tag, option) => {
|
const initCharts = (tag, option) => {
|
||||||
var chartDom = document.getElementById(tag);
|
var chartDom = document.getElementById(tag);
|
||||||
|
|
@ -49,9 +85,9 @@ const initCharts = (tag, option) => {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const showChart = ref(false)
|
||||||
|
|
||||||
|
const option = reactive({
|
||||||
let option = {
|
|
||||||
color: ['#015989', '#583936', '#416979'],
|
color: ['#015989', '#583936', '#416979'],
|
||||||
title: {
|
title: {
|
||||||
text: ''
|
text: ''
|
||||||
|
|
@ -76,14 +112,8 @@ let option = {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "white"
|
color: "white"
|
||||||
}
|
}
|
||||||
// data: ['访客人数','下单人数','支付人数']
|
|
||||||
|
|
||||||
},
|
},
|
||||||
// toolbox: {
|
|
||||||
// feature: {
|
|
||||||
// saveAsImage: {}
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
right: '4%',
|
right: '4%',
|
||||||
|
|
@ -201,9 +231,11 @@ let option = {
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
}
|
})
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
@ -213,6 +245,7 @@ let option = {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 1vh 1vw;
|
padding: 1vh 1vw;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.town-li {
|
.town-li {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
@ -224,6 +257,7 @@ let option = {
|
||||||
// margin-left: 2vw;
|
// margin-left: 2vw;
|
||||||
justify-content: fl;
|
justify-content: fl;
|
||||||
margin-left: 2vw;
|
margin-left: 2vw;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.act {
|
.act {
|
||||||
|
|
|
||||||
|
|
@ -1,476 +1,157 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="root">
|
<!-- <div style="background-color: red;position: relative;z-index: 9999; height: 10vh; cursor: pointer;">sadsad</div> -->
|
||||||
<div class="container-shell">
|
<div class="users center" id="orderAmount"></div>
|
||||||
<div class="container-shell-title">jessibuca demo player <span class="tag-version" v-if="version">({{
|
<img class="img-cls" src="/static/town/DRDDJE.png" alt="">
|
||||||
version
|
|
||||||
}})</span></div>
|
|
||||||
<div id="container" style="width: 200px;height: 200px;" ref="container"></div>
|
|
||||||
<div class="input">
|
|
||||||
<span>缓冲(秒):</span>
|
|
||||||
<input style="width: 50px" type="number" ref="buffer" value="0.2" @change="changeBuffer" />
|
|
||||||
<input type="checkbox" v-model="isDebug" ref="isDebug" @change="restartPlay" /><span>开启日志</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input">
|
|
||||||
<div>
|
|
||||||
<input type="checkbox" v-model="isFlv" @change="restartPlay()" /><span>设置Flv格式</span>
|
|
||||||
<input type="checkbox" v-model="controlAutoHide" @change="restartPlay()" /><span>控制栏自动隐藏(移动端不支持)</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="input">
|
|
||||||
<span>解码器：</span>
|
|
||||||
<input type="checkbox" v-model="useMSE" ref="vod" @change="restartPlay('mse')" /><span>MediaSource</span>
|
|
||||||
<input type="checkbox" v-model="useWCS" ref="vod" @change="restartPlay('wcs')" /><span>webcodecs</span>
|
|
||||||
<input type="checkbox" v-model="useWasm" ref="vod" @change="restartPlay('wasm')" /><span>wasm</span>
|
|
||||||
</div>
|
|
||||||
<div class="input">
|
|
||||||
<div>输入URL：</div>
|
|
||||||
<input placeholder="支持ws-raw/ws-flv/http-flv协议" type="input" autocomplete="on" ref="playUrl" value="" />
|
|
||||||
<button v-if="!playing" @click="play">播放</button>
|
|
||||||
<button v-else @click="pause">停止</button>
|
|
||||||
</div>
|
|
||||||
<div class="input" v-if="loaded" style="line-height: 30px">
|
|
||||||
<button @click="destroy">销毁</button>
|
|
||||||
<button v-if="quieting" @click="cancelMute">取消静音</button>
|
|
||||||
<template v-else>
|
|
||||||
<button @click="mute">静音</button>
|
|
||||||
音量
|
|
||||||
<select v-model="volume" @change="volumeChange">
|
|
||||||
<option value="1">100</option>
|
|
||||||
<option value="0.75">75</option>
|
|
||||||
<option value="0.5">50</option>
|
|
||||||
<option value="0.25">25</option>
|
|
||||||
</select>
|
|
||||||
</template>
|
|
||||||
<span>旋转</span>
|
|
||||||
<select v-model="rotate" @change="rotateChange">
|
|
||||||
<option value="0">0</option>
|
|
||||||
<option value="90">90</option>
|
|
||||||
<option value="270">270</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<button @click="fullscreen">全屏</button>
|
|
||||||
<button @click="screenShot">截图</button>
|
|
||||||
<div style="line-height: 30px">
|
|
||||||
<input type="checkbox" ref="operateBtns" v-model="showOperateBtns"
|
|
||||||
@change="restartPlay" /><span>操作按钮</span>
|
|
||||||
<input type="checkbox" ref="operateBtns" v-model="showBandwidth" @change="restartPlay" /><span>网速</span>
|
|
||||||
<span v-if="fps" style="margin-left: 10px">FPS：{{ fps }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="input" v-if="loaded">
|
|
||||||
<input type="checkbox" ref="offscreen" v-model="useOffscreen"
|
|
||||||
@change="restartPlay('offscreen')" /><span>离屏渲染</span>
|
|
||||||
|
|
||||||
<select v-model="scale" @change="scaleChange">
|
|
||||||
<option value="0">完全填充(拉伸)</option>
|
|
||||||
<option value="1">等比缩放</option>
|
|
||||||
<option value="2">完全填充(未拉伸)</option>
|
|
||||||
</select>
|
|
||||||
<button v-if="!playing" @click="clearView">清屏</button>
|
|
||||||
<template v-if="playing">
|
|
||||||
<select v-model="recordType">
|
|
||||||
<option value="webm">webm</option>
|
|
||||||
<option value="mp4">mp4</option>
|
|
||||||
</select>
|
|
||||||
<button v-if="!recording" @click="startRecord">录制</button>
|
|
||||||
<button v-if="!recording" @click="stopAndSaveRecord">暂停录制</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<style lang="scss" scoped>
|
||||||
import { VERSION } from "./version";
|
.img-cls {
|
||||||
|
width: 98%;
|
||||||
function isMobile() {
|
height: 45vh;
|
||||||
return (/iphone|ipad|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
function isPad() {
|
.users {
|
||||||
return (/ipad|android(?!.*mobile)|tablet|kindle|silk/i.test(window.navigator.userAgent.toLowerCase()));
|
margin-top: 4.5vh;
|
||||||
|
position: absolute;
|
||||||
|
width: 98%;
|
||||||
|
height: 35vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
.center {
|
||||||
name: "DemoPlayer",
|
position: absolute;
|
||||||
jessibuca: null,
|
top: 50%;
|
||||||
props: {},
|
left: 50%;
|
||||||
data() {
|
transform: translate(-50%, -50%);
|
||||||
return {
|
}
|
||||||
version: '',
|
</style>
|
||||||
wasm: false,
|
<script setup>
|
||||||
playing: false,
|
|
||||||
quieting: true,
|
import * as echarts from 'echarts';
|
||||||
loaded: false, // mute
|
import { street_currday_order_countApi } from "@/api.js"
|
||||||
showOperateBtns: true,
|
import { ref, reactive } from "vue"
|
||||||
showBandwidth: true,
|
import { areaObj } from '../../store';
|
||||||
hotKey: true,
|
const areaStore = areaObj()
|
||||||
err: "",
|
|
||||||
speed: 0,
|
street_currday_order_countApi(
|
||||||
performance: "",
|
|
||||||
fps: '',
|
{ ...areaStore.area }
|
||||||
volume: 1,
|
|
||||||
rotate: 0,
|
).then(res => {
|
||||||
useWCS: false,
|
|
||||||
useMSE: false,
|
res.data.forEach(item => {
|
||||||
useWasm: true,
|
orderAmount.series[0].data.push(item.yesterdayAmount)
|
||||||
useOffscreen: false,
|
orderAmount.series[1].data.push(item.todayAmount)
|
||||||
recording: false,
|
})
|
||||||
isDebug: true,
|
|
||||||
recordType: 'webm',
|
initCharts('orderAmount', orderAmount)
|
||||||
scale: 0,
|
|
||||||
vConsole: null,
|
})
|
||||||
controlAutoHide: true,
|
|
||||||
isFlv: false,
|
|
||||||
};
|
|
||||||
},
|
const orderAmount = reactive({
|
||||||
mounted() {
|
color: [
|
||||||
if ((isMobile() || isPad()) && window.VConsole) {
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
this.vConsole = new window.VConsole();
|
{ offset: 1, color: '#57D3ED' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
])
|
||||||
|
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 1, color: '#4156C2' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
])
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
}
|
}
|
||||||
this.version = VERSION === '#VERSION#' ? '' : VERSION;
|
|
||||||
this.create();
|
|
||||||
window.onerror = (msg) => (this.err = msg);
|
|
||||||
},
|
},
|
||||||
unmounted() {
|
// color: transparent;
|
||||||
if (this.$options && this.$options.jessibuca) {
|
|
||||||
this.$options.jessibuca.destroy();
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: "white"
|
||||||
}
|
}
|
||||||
this.vConsole.destroy();
|
|
||||||
},
|
},
|
||||||
methods: {
|
grid: {
|
||||||
create(options) {
|
left: '3%',
|
||||||
options = options || {};
|
right: '4%',
|
||||||
const jessibuca = new window.Jessibuca(
|
bottom: '3%',
|
||||||
Object.assign(
|
containLabel: true
|
||||||
{
|
},
|
||||||
container: this.$refs.container,
|
xAxis: [
|
||||||
// videoBuffer: Number(this.$refs.buffer.value), // 缓存时长
|
{
|
||||||
isResize: false,
|
type: 'category',
|
||||||
useWCS: this.useWCS,
|
data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-0时']
|
||||||
useMSE: this.useMSE,
|
}
|
||||||
wcsUseVideoRender: this.useWCS,
|
],
|
||||||
text: "",
|
yAxis: [
|
||||||
// background: "bg.jpg",
|
{
|
||||||
loadingText: "疯狂加载中...",
|
type: 'value',
|
||||||
// hasAudio:false,
|
splitLine: {
|
||||||
debug: this.isDebug,
|
show: true,
|
||||||
hotKey: true,
|
lineStyle: {
|
||||||
// hasAudio:false,
|
type: 'dashed',//背景色为虚线,
|
||||||
controlAutoHide: this.controlAutoHide,
|
color: '#256980'
|
||||||
supportDblclickFullscreen: true,
|
|
||||||
showBandwidth: this.showBandwidth, // 显示网速
|
|
||||||
operateBtns: {
|
|
||||||
fullscreen: this.showOperateBtns,
|
|
||||||
screenshot: this.showOperateBtns,
|
|
||||||
record: this.showOperateBtns,
|
|
||||||
play: this.showOperateBtns,
|
|
||||||
audio: this.showOperateBtns,
|
|
||||||
},
|
|
||||||
forceNoOffscreen: !this.useOffscreen,
|
|
||||||
isNotMute: true,
|
|
||||||
timeout: 10,
|
|
||||||
recordType: 'mp4',
|
|
||||||
isFlv: this.isFlv,
|
|
||||||
},
|
|
||||||
options
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
this.$options.jessibuca = jessibuca;
|
|
||||||
var _this = this;
|
|
||||||
jessibuca.on("load", function () {
|
|
||||||
console.log("on load");
|
|
||||||
});
|
|
||||||
|
|
||||||
jessibuca.on("log", function (msg) {
|
|
||||||
console.log("on log", msg);
|
|
||||||
});
|
|
||||||
jessibuca.on("record", function (msg) {
|
|
||||||
console.log("on record:", msg);
|
|
||||||
});
|
|
||||||
jessibuca.on("pause", function () {
|
|
||||||
console.log("on pause");
|
|
||||||
_this.playing = false;
|
|
||||||
});
|
|
||||||
jessibuca.on("play", function () {
|
|
||||||
console.log("on play");
|
|
||||||
_this.playing = true;
|
|
||||||
});
|
|
||||||
jessibuca.on("fullscreen", function (msg) {
|
|
||||||
console.log("on fullscreen", msg);
|
|
||||||
});
|
|
||||||
|
|
||||||
jessibuca.on("mute", function (msg) {
|
|
||||||
console.log("on mute", msg);
|
|
||||||
_this.quieting = msg;
|
|
||||||
});
|
|
||||||
|
|
||||||
jessibuca.on("mute", function (msg) {
|
|
||||||
console.log("on mute2", msg);
|
|
||||||
});
|
|
||||||
|
|
||||||
jessibuca.on("audioInfo", function (msg) {
|
|
||||||
console.log("audioInfo", msg);
|
|
||||||
});
|
|
||||||
|
|
||||||
jessibuca.on("bps", function (bps) {
|
|
||||||
// console.log('bps', bps);
|
|
||||||
});
|
|
||||||
// let _ts = 0;
|
|
||||||
// this.jessibuca.on("timeUpdate", function (ts) {
|
|
||||||
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
|
|
||||||
// _ts = ts;
|
|
||||||
// });
|
|
||||||
|
|
||||||
jessibuca.on("videoInfo", function (info) {
|
|
||||||
console.log("videoInfo", info);
|
|
||||||
});
|
|
||||||
|
|
||||||
jessibuca.on("error", function (error) {
|
|
||||||
console.log("error", error);
|
|
||||||
});
|
|
||||||
|
|
||||||
jessibuca.on("timeout", function () {
|
|
||||||
console.log("timeout");
|
|
||||||
});
|
|
||||||
|
|
||||||
jessibuca.on('start', function () {
|
|
||||||
console.log('frame start');
|
|
||||||
})
|
|
||||||
|
|
||||||
jessibuca.on("performance", function (performance) {
|
|
||||||
var show = "卡顿";
|
|
||||||
if (performance === 2) {
|
|
||||||
show = "非常流畅";
|
|
||||||
} else if (performance === 1) {
|
|
||||||
show = "流畅";
|
|
||||||
}
|
}
|
||||||
_this.performance = show;
|
|
||||||
});
|
|
||||||
jessibuca.on('buffer', function (buffer) {
|
|
||||||
console.log('buffer', buffer);
|
|
||||||
})
|
|
||||||
|
|
||||||
jessibuca.on('stats', function (stats) {
|
|
||||||
console.log('stats', stats);
|
|
||||||
_this.fps = stats.fps;
|
|
||||||
})
|
|
||||||
|
|
||||||
jessibuca.on('kBps', function (kBps) {
|
|
||||||
console.log('kBps', kBps);
|
|
||||||
});
|
|
||||||
|
|
||||||
// jessibuca.on("play", () => {
|
|
||||||
// this.playing = true;
|
|
||||||
// this.loaded = true;
|
|
||||||
// this.quieting = jessibuca.isMute();
|
|
||||||
// });
|
|
||||||
|
|
||||||
jessibuca.on('recordingTimestamp', (ts) => {
|
|
||||||
console.log('recordingTimestamp', ts);
|
|
||||||
})
|
|
||||||
|
|
||||||
jessibuca.on('playToRenderTimes', (times) => {
|
|
||||||
console.log(times);
|
|
||||||
})
|
|
||||||
|
|
||||||
// this.play();
|
|
||||||
// console.log(this.jessibuca);
|
|
||||||
},
|
|
||||||
play() {
|
|
||||||
// this.jessibuca.onPlay = () => (this.playing = true);
|
|
||||||
|
|
||||||
|
|
||||||
if (this.$refs.playUrl.value) {
|
|
||||||
this.$options.jessibuca.play(this.$refs.playUrl.value).then(() => {
|
|
||||||
console.log('play success');
|
|
||||||
this.playing = true;
|
|
||||||
this.loaded = true;
|
|
||||||
this.quieting = jessibuca.isMute();
|
|
||||||
}).catch((err) => {
|
|
||||||
console.log('play error', err);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mute() {
|
|
||||||
this.$options.jessibuca.mute();
|
|
||||||
},
|
|
||||||
cancelMute() {
|
|
||||||
this.$options.jessibuca.cancelMute();
|
|
||||||
},
|
|
||||||
|
|
||||||
pause() {
|
|
||||||
this.$options.jessibuca.pause().then(() => {
|
|
||||||
console.log('pause success');
|
|
||||||
this.playing = false;
|
|
||||||
this.err = "";
|
|
||||||
this.performance = "";
|
|
||||||
}).catch((err) => {
|
|
||||||
console.log('pause error', err);
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
volumeChange() {
|
|
||||||
this.$options.jessibuca.setVolume(this.volume);
|
|
||||||
},
|
|
||||||
rotateChange() {
|
|
||||||
this.$options.jessibuca.setRotate(this.rotate);
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
if (this.$options.jessibuca) {
|
|
||||||
this.$options.jessibuca.destroy();
|
|
||||||
}
|
|
||||||
this.create();
|
|
||||||
this.playing = false;
|
|
||||||
this.loaded = false;
|
|
||||||
this.performance = "";
|
|
||||||
},
|
|
||||||
|
|
||||||
fullscreen() {
|
|
||||||
this.$options.jessibuca.setFullscreen(true);
|
|
||||||
},
|
|
||||||
|
|
||||||
clearView() {
|
|
||||||
this.$options.jessibuca.clearView();
|
|
||||||
},
|
|
||||||
|
|
||||||
startRecord() {
|
|
||||||
const time = new Date().getTime();
|
|
||||||
this.$options.jessibuca.startRecord(time, this.recordType);
|
|
||||||
},
|
|
||||||
|
|
||||||
stopAndSaveRecord() {
|
|
||||||
this.$options.jessibuca.stopRecordAndSave();
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
screenShot() {
|
|
||||||
this.$options.jessibuca.screenshot();
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
restartPlay(type) {
|
|
||||||
|
|
||||||
if (type === 'mse') {
|
|
||||||
this.useWCS = false;
|
|
||||||
this.useOffscreen = false;
|
|
||||||
this.useWasm = false;
|
|
||||||
} else if (type === 'wcs') {
|
|
||||||
this.useMSE = false
|
|
||||||
this.useWasm = false;
|
|
||||||
} else if (type === 'offscreen') {
|
|
||||||
this.useMSE = false
|
|
||||||
} else if (type === 'wasm') {
|
|
||||||
this.useWCS = false;
|
|
||||||
this.useMSE = false;
|
|
||||||
this.useOffscreen = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.destroy();
|
|
||||||
setTimeout(() => {
|
|
||||||
this.play();
|
|
||||||
}, 100)
|
|
||||||
},
|
},
|
||||||
|
|
||||||
changeBuffer() {
|
],
|
||||||
// this.$options.jessibuca.setBufferTime(Number(this.$refs.buffer.value));
|
series: [
|
||||||
|
{
|
||||||
|
name: '昨日订单额',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
// itemStyle: {
|
||||||
|
// borderWidth: 1,
|
||||||
|
// borderColor: "#384FB4",
|
||||||
|
// },
|
||||||
|
|
||||||
|
backgroundStyle: {
|
||||||
|
color: ['red']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '今日订单额',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
scaleChange() {
|
|
||||||
this.$options.jessibuca.setScaleMode(this.scale);
|
]
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
const initCharts = (tag, option) => {
|
||||||
|
var chartDom = document.getElementById(tag);
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.page {
|
|
||||||
background: url(/bg.jpg);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style scoped>
|
|
||||||
.root {
|
|
||||||
display: flex;
|
|
||||||
place-content: center;
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-shell {
|
|
||||||
position: relative;
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
background: hsla(0, 0%, 50%, 0.5);
|
|
||||||
padding: 30px 4px 10px 4px;
|
|
||||||
/* border: 2px solid black; */
|
|
||||||
width: auto;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0 10px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-shell-title {
|
|
||||||
position: absolute;
|
|
||||||
color: darkgray;
|
|
||||||
top: 4px;
|
|
||||||
left: 10px;
|
|
||||||
text-shadow: 1px 1px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-version {}
|
|
||||||
|
|
||||||
#container {
|
|
||||||
background: rgba(13, 14, 27, 0.7);
|
|
||||||
width: 640px;
|
|
||||||
height: 398px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: white;
|
|
||||||
place-content: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input2 {
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input input[type='input'] {
|
|
||||||
flex: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.err {
|
|
||||||
position: absolute;
|
|
||||||
top: 40px;
|
|
||||||
left: 10px;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
right: 10px;
|
|
||||||
display: flex;
|
|
||||||
place-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option span {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
#container {
|
|
||||||
width: 90vw;
|
|
||||||
height: 52.7vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -307,10 +307,24 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@keyframes jump {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getProductCountApi } from "@/api.js"
|
import { getProductCountApi } from "@/api.js"
|
||||||
import { ref, reactive, defineProps } from "vue"
|
import { ref, reactive, defineProps } from "vue"
|
||||||
|
import Remake from "@/components/Remake.vue"
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
code: Object,
|
code: Object,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
<template>
|
||||||
|
<img class="img-cls" src="/static/town/YHSJ.png" alt="">
|
||||||
|
<div class="user center" id="user"></div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.img-cls {
|
||||||
|
width: 98%;
|
||||||
|
height: 45vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: absolute;
|
||||||
|
width: 98%;
|
||||||
|
height: 40vh;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { onMounted } from "vue"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const userChartOption = {
|
||||||
|
color: [
|
||||||
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 1, color: 'transparent' },
|
||||||
|
{ offset: 0, color: '#0081C3' },
|
||||||
|
])
|
||||||
|
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 1, color: 'transparent' },
|
||||||
|
{ offset: 0, color: '#3E54BF' },
|
||||||
|
]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 1, color: 'transparent' },
|
||||||
|
{ offset: 0, color: '#4DBFD9' },
|
||||||
|
]),
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// color: transparent;
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: "white"
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',//背景色为虚线,
|
||||||
|
color: '#256980'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '新增用户数量',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320],
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#384FB4",
|
||||||
|
},
|
||||||
|
|
||||||
|
backgroundStyle: {
|
||||||
|
color: ['red']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '访问用户数量',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#3E54BF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '累计用户数量',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#4EC1DB",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const initCharts = (tag, option) => {
|
||||||
|
var chartDom = document.getElementById(tag);
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
document.getElementById("user").removeAttribute('_echarts_instance_');
|
||||||
|
|
||||||
|
initCharts('user', userChartOption)
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
<template>
|
||||||
|
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
||||||
|
<div class="order-data">
|
||||||
|
<div class="tit">
|
||||||
|
<div style="display: flex;align-items: center;">
|
||||||
|
<div class="gradient-circle">
|
||||||
|
</div>
|
||||||
|
日订单数据
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;align-items: center;">
|
||||||
|
<div class="gradient-circle">
|
||||||
|
</div>
|
||||||
|
日订单数据
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
|
||||||
|
<div style="width: 100%;height: 50%;" id="orderData2"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.img-cls {
|
||||||
|
width: 98%;
|
||||||
|
height: 45vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-data {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-right: 1vw;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
position: absolute;
|
||||||
|
color: white;
|
||||||
|
// background-color: #fff;
|
||||||
|
top: 6vh;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
.gradient-circle {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: radial-gradient(at top left, transparent, #029BE9);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { onMounted } from "vue"
|
||||||
|
|
||||||
|
|
||||||
|
const orderData = {
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 0.01],
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',//背景色为虚线,
|
||||||
|
color: '#256980'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['当日订单数', '当月订单数'],
|
||||||
|
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
barWidth: 15,
|
||||||
|
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
|
||||||
|
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
|
||||||
|
data: [120, 200],
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) {
|
||||||
|
var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ offset: 1, color: '#0298E5' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ offset: 1, color: '#4358C8' },
|
||||||
|
{ offset: 0, color: 'transparent' },
|
||||||
|
])];
|
||||||
|
return colorList[params.dataIndex]
|
||||||
|
},
|
||||||
|
borderColor: ['blue']
|
||||||
|
|
||||||
|
},
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: "red",
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 图表
|
||||||
|
const initCharts = (tag, option) => {
|
||||||
|
var chartDom = document.getElementById(tag);
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
document.getElementById("orderData").removeAttribute('_echarts_instance_');
|
||||||
|
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
|
||||||
|
|
||||||
|
initCharts('orderData', orderData)
|
||||||
|
initCharts('orderData2', orderData)
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export const VERSION = '#VERSION#'
|
|
||||||
11
src/main.js
11
src/main.js
|
|
@ -2,11 +2,20 @@ import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import dataV from '@jiaminghi/data-view'
|
import dataV from '@jiaminghi/data-view'
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
|
||||||
|
|
||||||
|
import {
|
||||||
|
createPinia
|
||||||
|
} from 'pinia'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
// import '@/components/townDetail/test.js'
|
// import '@/components/townDetail/test.js'
|
||||||
|
|
||||||
import 'amfe-flexible'
|
import 'amfe-flexible'
|
||||||
|
const pinia = createPinia()
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.use(dataV)
|
app.use(dataV)
|
||||||
|
app.use(pinia)
|
||||||
|
app.use(ElementPlus)
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
@ -3,41 +3,58 @@ import { createRouter, createWebHistory } from 'vue-router'
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'index',
|
name: 'home',
|
||||||
component: () => import('@/view/index.vue'),
|
component: () => import('@/view/home.vue'),
|
||||||
|
redirect: "/index",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/index',
|
||||||
|
name: 'index',
|
||||||
|
component: () => import('@/view/index.vue'),
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/townDetail',
|
||||||
|
name: 'townDetail',
|
||||||
|
component: () => import('@/view/townDetail.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/commodity',
|
||||||
|
name: 'commodity',
|
||||||
|
component: () => import('@/view/commodity.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Businesses',
|
||||||
|
name: 'commBusinessesodity',
|
||||||
|
component: () => import('@/view/Businesses.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/storeLogin',
|
||||||
|
name: 'storeLogin',
|
||||||
|
component: () => import('@/view/storeLogin.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/order',
|
||||||
|
name: 'order',
|
||||||
|
component: () => import('@/view/order.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/finance',
|
||||||
|
name: 'finance',
|
||||||
|
component: () => import('@/view/finance.vue'),
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/townDetail',
|
path: '/login',
|
||||||
name: 'townDetail',
|
name: 'login',
|
||||||
component: () => import('@/view/townDetail.vue'),
|
component: () => import('@/view/login.vue'),
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/commodity',
|
|
||||||
name: 'commodity',
|
|
||||||
component: () => import('@/view/commodity.vue'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/Businesses',
|
|
||||||
name: 'commBusinessesodity',
|
|
||||||
component: () => import('@/view/Businesses.vue'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/storeLogin',
|
|
||||||
name: 'storeLogin',
|
|
||||||
component: () => import('@/view/storeLogin.vue'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/order',
|
|
||||||
name: 'order',
|
|
||||||
component: () => import('@/view/order.vue'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/finance',
|
|
||||||
name: 'finance',
|
|
||||||
component: () => import('@/view/finance.vue'),
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import {
|
||||||
|
defineStore
|
||||||
|
} from 'pinia'
|
||||||
|
|
||||||
|
export const areaObj = defineStore('counter', {
|
||||||
|
state: () => ({
|
||||||
|
area: {
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 51052410
|
||||||
|
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
getters: {},
|
||||||
|
actions: {
|
||||||
|
changeArea(obj) {
|
||||||
|
this.area = obj
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -4,8 +4,8 @@
|
||||||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="btns">
|
<div class="btns">
|
||||||
<div class="btn " :class="!status ? 'act-btn' : ''" @click="changeTable(0)">正常开启的商户</div>
|
<div class="btn " :class="status ? 'act-btn' : ''" @click="changeTable(1)">正常开启的商户</div>
|
||||||
<div class="btn" :class="status ? 'act-btn' : ''" @click="changeTable(1)">已关闭的商户</div>
|
<div class="btn" :class="!status ? 'act-btn' : ''" @click="changeTable(0)">已关闭的商户</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="table" v-if="configs.data.length">
|
<div class="table" v-if="configs.data.length">
|
||||||
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
|
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
|
||||||
|
|
@ -21,24 +21,24 @@
|
||||||
// 102B3
|
// 102B3
|
||||||
import { ref, reactive, onMounted } from "vue"
|
import { ref, reactive, onMounted } from "vue"
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import {merchant_listApi} from "@/api.js"
|
import { merchant_listApi } from "@/api.js"
|
||||||
const route = useRouter()
|
const route = useRouter()
|
||||||
let status =ref(0)
|
let status = ref(0)
|
||||||
|
|
||||||
|
|
||||||
const changeTable=(num)=>{
|
const changeTable = (num) => {
|
||||||
|
|
||||||
configs.data.splice(0,configs.data.length)
|
configs.data.splice(0, configs.data.length)
|
||||||
console.log(configs.data)
|
console.log(configs.data)
|
||||||
status.value=num
|
status.value = num
|
||||||
merchant_listApi(
|
merchant_listApi(
|
||||||
{
|
{
|
||||||
areaCode: 510524,
|
areaCode: 510524,
|
||||||
streetCode: 510524100,
|
streetCode: 510524100,
|
||||||
status:status.value,
|
status: status.value,
|
||||||
limit:50
|
limit: 50
|
||||||
}
|
}
|
||||||
).then(res=>{
|
).then(res => {
|
||||||
addConfigData(res.data.list)
|
addConfigData(res.data.list)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -58,36 +58,36 @@ const hdClick = (e) => {
|
||||||
|
|
||||||
}
|
}
|
||||||
const addConfigData = (data) => {
|
const addConfigData = (data) => {
|
||||||
data.forEach((item,i)=>{
|
data.forEach((item, i) => {
|
||||||
if (i % 2 == 0) {
|
if (i % 2 == 0) {
|
||||||
configs.data.push(
|
configs.data.push(
|
||||||
[
|
[
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_id}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.mer_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.mer_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.real_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_address}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_address}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark || '--'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_best}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_best}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>sd</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.margin}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchantCategory.category_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchantCategory.category_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status?'开启':'关闭'}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status ? '开启' : '关闭'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#3D9EB5';cursor: pointer;>登录</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#3D9EB5';cursor: pointer;>登录</div>`,
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
configs.data.push(
|
configs.data.push(
|
||||||
[
|
[
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_id}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_address}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_address}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark || "--"}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_best}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_best}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.margin}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchantCategory.category_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchantCategory.category_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.status?'开启':'关闭'}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.status ? '开启' : '关闭'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`,
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -99,7 +99,7 @@ const addConfigData = (data) => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const configs = reactive({
|
const configs = reactive({
|
||||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||||
|
|
@ -123,7 +123,7 @@ const configs = reactive({
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
changeTable(0)
|
changeTable(1)
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,15 +10,16 @@
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
|
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
|
||||||
v-if="!ShwostoreType">
|
v-if="!ShwostoreType">
|
||||||
<div @click="initProduct(6)" class="manageBtn " :class="{actmanageBtn:type==6}">出售中商品</div>
|
<div @click="initProduct(item.type)" class="manageBtn " v-for="(item) in proFilterList"
|
||||||
<div @click="initProduct(1)" class="manageBtn" :class="{actmanageBtn:type==1}" >仓库中商品</div>
|
:class="{ actmanageBtn: type == item.type }">{{ item.name }}</div>
|
||||||
<div @click="initProduct(2)" class="manageBtn" :class="{actmanageBtn:type==2}">待审核商品</div>
|
<!-- <div @click="initProduct(1)" class="manageBtn" :class="{ actmanageBtn: type == 1 }">仓库中商品</div>
|
||||||
<div @click="initProduct(3)" class="manageBtn" :class="{actmanageBtn:type==3}">审核未通过商品</div>
|
<div @click="initProduct(2)" class="manageBtn" :class="{ actmanageBtn: type == 2 }">待审核商品</div>
|
||||||
|
<div @click="initProduct(3)" class="manageBtn" :class="{ actmanageBtn: type == 3 }">审核未通过商品</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="table" v-if="ShwostoreType && configs.data.length">
|
<div class="table" v-if="ShwostoreType && configs.data.length">
|
||||||
<dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
|
<dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
|
||||||
</div>
|
</div>
|
||||||
<div class="table" v-if="!ShwostoreType &&configs2.data.length">
|
<div class="table" v-if="!ShwostoreType && configs2.data.length">
|
||||||
<dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
|
<dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,12 +30,13 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from "vue"
|
import { ref, reactive, onMounted } from "vue"
|
||||||
import { getProductCategoryListApi,getProductListApi } from "@/api.js"
|
import { getProductCategoryListApi, getProductListApi, product_status_filterApi } from "@/api.js"
|
||||||
import { init } from "echarts";
|
import { areaObj } from "../store";
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
getProductCategoryListApi(
|
getProductCategoryListApi(
|
||||||
{
|
{
|
||||||
areaCode: 510524,
|
...areaStore.area
|
||||||
streetCode: 510524100
|
|
||||||
}
|
}
|
||||||
).then(res => {
|
).then(res => {
|
||||||
a(configs, res.data)
|
a(configs, res.data)
|
||||||
|
|
@ -42,27 +44,34 @@ getProductCategoryListApi(
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let type=ref(6)
|
let type = ref(1)
|
||||||
const initProduct=(num)=>{
|
const initProduct = (num) => {
|
||||||
|
configs2.data.splice(0, configs2.data.length)
|
||||||
|
type.value = num
|
||||||
|
getProductListApi({
|
||||||
|
...areaStore.area,
|
||||||
|
limit: 50,
|
||||||
|
type: type.value
|
||||||
|
}).then(res => {
|
||||||
|
|
||||||
|
console.log(res.data.list)
|
||||||
configs2.data.splice(0,configs2.data.length)
|
a(configs2, res.data.list, true)
|
||||||
type.value=num
|
|
||||||
getProductListApi( {
|
|
||||||
areaCode: 510524,
|
|
||||||
streetCode: 510524100,
|
|
||||||
limit:50,
|
|
||||||
type:type.value
|
|
||||||
}).then(res=>{
|
|
||||||
a(configs2, res.data.list,true)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let proFilterList = reactive([])
|
||||||
|
|
||||||
|
product_status_filterApi({
|
||||||
|
...areaStore.area,
|
||||||
|
}).then(res => {
|
||||||
|
res.data.forEach(item => {
|
||||||
|
proFilterList.push(item)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
const value = ref(2)
|
||||||
|
|
||||||
const tableClick = (e) => {
|
const tableClick = (e) => {
|
||||||
if (e.ceil) {
|
if (e.ceil) {
|
||||||
|
|
@ -88,31 +97,24 @@ const tableClick = (e) => {
|
||||||
|
|
||||||
const ShwostoreType = ref(true)
|
const ShwostoreType = ref(true)
|
||||||
|
|
||||||
const hdClick = (b) => {
|
const a = (aaa, data, flag) => {
|
||||||
console.log(b)
|
|
||||||
}
|
|
||||||
|
|
||||||
const a = (aaa, data,flag) => {
|
|
||||||
if (flag) {
|
if (flag) {
|
||||||
console.log(455454)
|
|
||||||
|
|
||||||
data.forEach((item, i) => {
|
data.forEach((item, i) => {
|
||||||
if (i % 2 == 0) {
|
if (i % 2 == 0) {
|
||||||
aaa.data.push(
|
aaa.data.push(
|
||||||
[
|
[
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.product_id}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >
|
||||||
<img src='${item.image}' style='width:25px;height:25px;margin-top:5px'>
|
<img src='${item.image}' style='width:25px;height:25px;margin-top:5px'>
|
||||||
|
|
||||||
|
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.store_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.store_name}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant?.mer_name || '--'}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.storeCategory?.cate_name || '--'}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.price}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.attrValue[0].sales}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.attrValue[0].stock}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.star}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.star}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.update_time}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.update_time}</div>`,
|
||||||
]
|
]
|
||||||
|
|
@ -120,17 +122,24 @@ const a = (aaa, data,flag) => {
|
||||||
} else {
|
} else {
|
||||||
aaa.data.push(
|
aaa.data.push(
|
||||||
[
|
[
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.product_id}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
|
||||||
<img src='${item.image}' style='width:25px;height:25px;margin-top:5px'></div>`,
|
<img src='${item.image}' style='width:25px;height:25px;margin-top:5px'></div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.store_name}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.storeCategory?.cate_name || '--'}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.price}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.attrValue[0].sales}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.attrValue[0].stock}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
<el-button type="warning" disabled>Warning</el-button>
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.star}</div>`,
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.update_time}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.update_time}</div>`,
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
|
|
@ -139,6 +148,7 @@ const a = (aaa, data,flag) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
else {
|
else {
|
||||||
|
|
||||||
data.forEach((item, i) => {
|
data.forEach((item, i) => {
|
||||||
if (i % 2 == 0) {
|
if (i % 2 == 0) {
|
||||||
aaa.data.push(
|
aaa.data.push(
|
||||||
|
|
@ -222,9 +232,8 @@ const configs2 = reactive({
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initProduct(6)
|
initProduct(1)
|
||||||
// a(configs2)
|
|
||||||
// a(configs)
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,14 @@
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
<div class="btn" :class="headerIndex == 0 ? 'act-btn' : ''" @click="changeTable(0)">提现记录</div>
|
<div class="btn" :class="headerIndex == 0 ? 'act-btn' : ''" @click="changeTable(0)">提现记录</div>
|
||||||
<div class="btn" :class="headerIndex == 1 ? 'act-btn' : ''" @click="changeTable(1)">资金记录</div>
|
<div class="btn" :class="headerIndex == 1 ? 'act-btn' : ''" @click="changeTable(1)">资金记录</div>
|
||||||
<div class="btn" :class="headerIndex == 2 ? 'act-btn' : ''" @click="changeTable(2)">账单管理</div>
|
<div class="btn" :class="headerIndex == 2 ? 'act-btn' : ''" @click="changeTable(2, 1)">账单管理</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-right: 0vw;">
|
<div style="margin-right: 0vw;">
|
||||||
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
|
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
|
||||||
v-if="headerIndex == 2">
|
v-if="headerIndex == 2">
|
||||||
<div class="manageBtn actmanageBtn ">日账单</div>
|
<div class="manageBtn " :class="{ actmanageBtn: billType == 1 }" @click="changeBill(1)">日账单
|
||||||
<div class="manageBtn">月账单</div>
|
</div>
|
||||||
|
<div class="manageBtn" :class="{ actmanageBtn: billType == 2 }" @click="changeBill(2)">月账单</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -24,10 +25,11 @@
|
||||||
|
|
||||||
<div class="table" v-if="true">
|
<div class="table" v-if="true">
|
||||||
<dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
|
<dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
|
||||||
style="width:95vw;height:100%" />
|
style="width:95vw;height:78vh" />
|
||||||
<dv-scroll-board :config="configs1" v-if="headerIndex == 1" style="width:95vw;height:100%" />
|
<dv-scroll-board :config="configs1" v-if="headerIndex == 1 && configs1.data.length"
|
||||||
<dv-scroll-board :config="configs2" v-if="headerIndex == 2" @click='hdClick3'
|
style="width:95vw;height:78vh" />
|
||||||
style="width:95vw;height:100%" />
|
<dv-scroll-board :config="configs2" v-if="headerIndex == 2 && configs2.data.length" @click='hdClick3'
|
||||||
|
style="width:95vw;height:68vh" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Transition>
|
<Transition>
|
||||||
|
|
@ -38,23 +40,24 @@
|
||||||
<div class="pop-content">
|
<div class="pop-content">
|
||||||
<div class="pop-content-head">
|
<div class="pop-content-head">
|
||||||
<span class="gradient-text">日账单
|
<span class="gradient-text">日账单
|
||||||
<span style="font-size: 10px;">2011.11-06</span>
|
<span style="font-size: 10px;">{{ detailData.date }}</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="off" @click="showPop = false"> 关闭</span>
|
<span class="off" @click="showPop = false"> 关闭</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pop-li">
|
<div class="pop-li">
|
||||||
订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">16.6</span>元</span>
|
订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">{{ detailData.income.number
|
||||||
<span>2笔</span>
|
}}</span>元</span>
|
||||||
|
<span>{{ detailData.income.count }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
||||||
|
|
||||||
<div>
|
<div v-for="item in detailData.income.data">
|
||||||
订单支付： <span style="margin: 0 .5vw;"><span class="price"
|
{{ item[0] }} <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||||
style="color: white;">16.6</span>元</span>
|
item[1].slice(0, -1) }}</span>元</span>
|
||||||
<span>2笔</span>
|
<span>{{ item[2] }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<!-- <div>
|
||||||
返回优惠券补贴： <span style="margin: 0 .5vw;"><span class="price"
|
返回优惠券补贴： <span style="margin: 0 .5vw;"><span class="price"
|
||||||
style="color: white;">16.6</span>元</span>
|
style="color: white;">16.6</span>元</span>
|
||||||
<span>2笔</span>
|
<span>2笔</span>
|
||||||
|
|
@ -62,13 +65,16 @@
|
||||||
<div>
|
<div>
|
||||||
返回会员优惠券补贴： <span><span class="price" style="color: white;">16.6</span>元</span>
|
返回会员优惠券补贴： <span><span class="price" style="color: white;">16.6</span>元</span>
|
||||||
<span>2笔</span>
|
<span>2笔</span>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="pop-li" style="margin-top: 3vh;">
|
<div class="pop-li" style="margin-top: 3vh;">
|
||||||
充值金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
|
充值金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.bill.number
|
||||||
|
}}</span>元</span> <span>{{
|
||||||
|
detailData.bill.count }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="pop-li" style="margin-top: 3vh;">
|
<div class="pop-li" style="margin-top: 3vh;">
|
||||||
支出总金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
|
支出总金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.expend.number
|
||||||
|
}}</span>元</span> <span>{{ detailData.expend.count }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -76,19 +82,19 @@
|
||||||
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
应付商户金额 <span style="margin: 0 .5vw;"><span class="price"
|
应付商户金额 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||||
style="color: white;">16.6</span>元</span>
|
detailData.expend.data[0][1].slice(0, -1) }}</span>元</span>
|
||||||
<span>2笔</span>
|
<span>{{ detailData.expend.data[0][2] }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
佣金 <span style="margin: 0 .5vw;"><span class="price"
|
佣金 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||||
style="color: white;">16.6</span>元</span>
|
detailData.expend.data[1][1].slice(0, -1) }}</span>元</span>
|
||||||
<span>2笔</span>
|
<span>{{ detailData.expend.data[1][2] }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
返回手续费 <span style="margin: 0 1vw;"><span class="price"
|
返回手续费 <span style="margin: 0 1vw;"><span class="price" style="color: white;">{{
|
||||||
style="color: white;">16.6</span>元</span>
|
detailData.expend.data[2][1].slice(0, -1) }}</span>元</span>
|
||||||
<span>2笔</span>
|
<span>{{ detailData.expend.data[2][2] }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -98,14 +104,14 @@
|
||||||
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
|
优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||||
style="color: white;">16.6</span>元</span>
|
detailData.expend.data[3][1].slice(0, -1) }}</span>元</span>
|
||||||
<span>2笔</span>
|
<span>{{ detailData.expend.data[3][2] }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
|
会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||||
style="color: white;">16.6</span>元</span>
|
detailData.expend.data[4][1].slice(0, -1) }}</span>元</span>
|
||||||
<span>2笔</span>
|
<span>{{ detailData.expend.data[4][2] }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="opacity: 0;">
|
<div style="opacity: 0;">
|
||||||
返回手续费 <span style="margin: 0 1vw;"><span class="price"
|
返回手续费 <span style="margin: 0 1vw;"><span class="price"
|
||||||
|
|
@ -114,7 +120,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pop-li" style="margin-top: 3vh;">
|
<div class="pop-li" style="margin-top: 3vh;">
|
||||||
平台手续费收入总金额: <span class="price">16.6 </span> 元
|
平台手续费收入总金额: <span class="price">{{ detailData.charge.number }} </span> 元
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -132,7 +138,13 @@
|
||||||
import { ref, reactive, onMounted } from "vue"
|
import { ref, reactive, onMounted } from "vue"
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import Bill from "@/components/Bill.vue"
|
import Bill from "@/components/Bill.vue"
|
||||||
|
import { financial_record_titleApi, financial_recordApi, financial_record_detailApi, financial_record_detailApi2, bill_listApi, withdraw_listApi } from "@/api.js"
|
||||||
|
const billType = ref(1)
|
||||||
|
const changeBill = (num) => {
|
||||||
|
billType.value = num
|
||||||
|
changeTable(2, num)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
const billList = reactive([
|
const billList = reactive([
|
||||||
{
|
{
|
||||||
|
|
@ -207,81 +219,67 @@ const billList = reactive([
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
|
financial_record_titleApi(
|
||||||
|
{
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 510524100
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
).then(res => {
|
||||||
|
res.data.stat.forEach((item, i) => {
|
||||||
|
billList[i].num = item.count
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
const changeTable = (type, num) => {
|
||||||
|
|
||||||
|
if (type == 0) {
|
||||||
|
configs.data.splice(0, configs.data.length)
|
||||||
|
withdraw_listApi(
|
||||||
|
{
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 510524100,
|
||||||
|
limit: 50,
|
||||||
|
}
|
||||||
|
).then(res => {
|
||||||
|
addDta(res.data.list)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (type == 1) {
|
||||||
|
configs1.data.splice(0, configs1.data.length)
|
||||||
|
bill_listApi(
|
||||||
|
{
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 510524100,
|
||||||
|
limit: 50,
|
||||||
|
}
|
||||||
|
).then(res => {
|
||||||
|
addDta(res.data.list)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type == 2) {
|
||||||
|
configs2.data.splice(0, configs2.data.length)
|
||||||
|
financial_recordApi({
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 510524100,
|
||||||
|
limit: 50,
|
||||||
|
type: num
|
||||||
|
}).then(res => {
|
||||||
|
billData = res.data.list
|
||||||
|
addDta(res.data.list)
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
const route = useRouter()
|
|
||||||
const ShwostoreType = ref(false)
|
|
||||||
const changeTable = (type) => {
|
|
||||||
headerIndex.value = type
|
headerIndex.value = type
|
||||||
addConfigHead()
|
addConfigHead()
|
||||||
a(configList[headerIndex.value], congigData[headerIndex.value])
|
// a(configList[headerIndex.value], congigData[headerIndex.value])
|
||||||
}
|
}
|
||||||
const congigData = reactive(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,],
|
|
||||||
q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
],
|
|
||||||
q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
|
|
||||||
],
|
|
||||||
q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
)
|
|
||||||
const hdClick = (e) => {
|
const hdClick = (e) => {
|
||||||
if (e.columnIndex == 10) {
|
if (e.columnIndex == 10) {
|
||||||
// route.push('/storeLogin')
|
// route.push('/storeLogin')
|
||||||
|
|
@ -291,21 +289,113 @@ const hdClick = (e) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const addDta = (data) => {
|
||||||
|
|
||||||
const a = (aaa, data) => {
|
data.reverse().forEach((item, i) => {
|
||||||
for (let i = 0; i < 100; i++) {
|
if (headerIndex.value == 0) {
|
||||||
if (i % 2 == 0) {
|
if (i % 2 == 0) {
|
||||||
aaa.data.push(data.d)
|
configs1.data.push(
|
||||||
} else {
|
|
||||||
aaa.data.push(data.q)
|
[
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.real_name}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.number}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.title}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
|
||||||
|
],
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
configs1.data.push(
|
||||||
|
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.uid}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.nickname}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.number}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.title}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
|
||||||
|
|
||||||
|
]
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
if (headerIndex.value == 1) {
|
||||||
|
|
||||||
|
if (i % 2 == 0) {
|
||||||
|
|
||||||
|
configs1.data.push(
|
||||||
|
|
||||||
|
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.uid}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.nickname}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.number}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.title}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
|
||||||
|
],
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
configs1.data.push(
|
||||||
|
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.uid}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.nickname}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.number}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.title}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
|
||||||
|
|
||||||
|
]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
if (headerIndex.value == 2) {
|
||||||
|
|
||||||
|
if (i % 2 == 0) {
|
||||||
|
|
||||||
|
configs2.data.push(
|
||||||
|
|
||||||
|
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.time}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.income}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.expend}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.charge}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
|
||||||
|
],
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
configs2.data.push(
|
||||||
|
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.time}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.income}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.expend}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.charge}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const configs = reactive({
|
const configs = reactive({
|
||||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||||
oddRowBGC: '',
|
oddRowBGC: '',
|
||||||
evenRowBGC: "",
|
evenRowBGC: "",
|
||||||
rowNum: 20,
|
rowNum: 20,
|
||||||
|
columnWidth: [],
|
||||||
header: [
|
header: [
|
||||||
],
|
],
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -355,10 +445,40 @@ const addConfigHead = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let billData = []
|
||||||
// 详情弹窗
|
// 详情弹窗
|
||||||
const showPop = ref(false)
|
const showPop = ref(false)
|
||||||
|
|
||||||
|
const detailData = reactive({})
|
||||||
|
|
||||||
const hdClick3 = (e) => {
|
const hdClick3 = (e) => {
|
||||||
if (e.columnIndex == 5) {
|
if (e.columnIndex == 5) {
|
||||||
|
|
||||||
|
if (billType.value == 1) {
|
||||||
|
financial_record_detailApi(
|
||||||
|
{ areaCode: 510524, streetCode: 510524100, date: billData[e.rowIndex].time }
|
||||||
|
).then(res => {
|
||||||
|
|
||||||
|
for (let key in res.data) {
|
||||||
|
detailData[key] = res.data[key]
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (billType.value == 2) {
|
||||||
|
financial_record_detailApi2(
|
||||||
|
{ areaCode: 510524, streetCode: 510524100, date: billData[e.rowIndex].time }
|
||||||
|
).then(res => {
|
||||||
|
|
||||||
|
for (let key in res.data) {
|
||||||
|
detailData[key] = res.data[key]
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
showPop.value = true
|
showPop.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -367,8 +487,15 @@ const hdClick3 = (e) => {
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
a(configs, congigData[headerIndex.value])
|
changeTable(0)
|
||||||
addConfigHead()
|
addConfigHead()
|
||||||
|
financial_recordApi({
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 510524100,
|
||||||
|
limit: 50
|
||||||
|
}).then(res => {
|
||||||
|
addDta(res.data.list)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -439,7 +566,6 @@ onMounted(() => {
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60vh;
|
|
||||||
margin-top: 2vh;
|
margin-top: 2vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<Header></Header>
|
||||||
|
<router-view></router-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Header from "@/components/Header.vue"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -27,8 +27,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import option from "./option"
|
|
||||||
import { ref, reactive } from "vue"
|
import { ref, reactive } from "vue"
|
||||||
import topLeft from "@/components/index/topLeft.vue"
|
import topLeft from "@/components/index/topLeft.vue"
|
||||||
import topCenter from "@/components/index/topCenter.vue"
|
import topCenter from "@/components/index/topCenter.vue"
|
||||||
|
|
@ -37,28 +35,19 @@ import bottomLeft from "@/components/index/bottomLeft.vue"
|
||||||
import bottomCenter from "@/components/index/bottomCenter.vue"
|
import bottomCenter from "@/components/index/bottomCenter.vue"
|
||||||
import bottomRight from "@/components/index/bottomRight.vue"
|
import bottomRight from "@/components/index/bottomRight.vue"
|
||||||
|
|
||||||
|
import { areaObj } from '@/store/index.js'
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
const areaCodes = reactive({
|
const areaCodes = reactive({
|
||||||
areaCode: 510524,
|
...areaStore.area
|
||||||
streetCode: 510524100
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
|
|
||||||
// 图表
|
|
||||||
// const initCharts = (tag, option) => {
|
|
||||||
// var chartDom = document.getElementById(tag);
|
|
||||||
// var myChart = echarts.init(chartDom);
|
|
||||||
// myChart.setOption(option);
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// console.log(option.transactionUsers)
|
|
||||||
|
|
||||||
// initCharts('transactionUsers', option.transactionUsers)
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@keyframes jump {
|
@keyframes jump {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
<template>
|
||||||
|
<div class="login-box">
|
||||||
|
<div class="form">
|
||||||
|
<div class="content">
|
||||||
|
<div style="position: relative;margin-bottom: 3VH;">
|
||||||
|
<img src="/static/login/ZH.png" alt="" class="accont-icon">
|
||||||
|
<input class="ipt" type="text" placeholder="请输入账号" v-model="account">
|
||||||
|
<div style="color: red;" v-show="isAccount">请输入账号</div>
|
||||||
|
</div>
|
||||||
|
<div style="position: relative;margin-bottom: 3VH;">
|
||||||
|
<img src="/static/login/MM.png" alt="" class="accont-icon" style="">
|
||||||
|
<input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password">
|
||||||
|
<div style="color: red;" v-show="isPassword">请输入密码</div>
|
||||||
|
<img src="/static/login/KJ.png" v-if="show" alt="" @click="show = false" class="show">
|
||||||
|
<img src="/static/login/BKH.png" v-else @click="show = true" class="show">
|
||||||
|
</div>
|
||||||
|
<div style="background-color: red;position: relative;">
|
||||||
|
<img src="/static/login/DL.png" class="btn" alt="" @click="submit">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.login-box {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-image: url('/static/login/bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
width: 35vw;
|
||||||
|
height: 45vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 25vh;
|
||||||
|
right: 10vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: url("/static/login/DLBG.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
top: 13vh;
|
||||||
|
// background-color: red;
|
||||||
|
left: 10vw;
|
||||||
|
|
||||||
|
.ipt {
|
||||||
|
border: 1px solid #194FA3;
|
||||||
|
padding: 1vh 2vw;
|
||||||
|
background-color: #123266;
|
||||||
|
width: 13VW;
|
||||||
|
outline: none;
|
||||||
|
-webkit-user-select: auto;
|
||||||
|
caret-color: #fff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="password"]::-ms-reveal {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 7vw;
|
||||||
|
cursor: pointer;
|
||||||
|
// margin: 0 auto;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #fff;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.accont-icon {
|
||||||
|
width: 0.8vw;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
left: .5vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.show {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
right: .5vw;
|
||||||
|
width: 1vw;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from "vue"
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { loginApi } from "@/api.js"
|
||||||
|
const router = useRouter()
|
||||||
|
const show = ref(false)
|
||||||
|
const account = ref('')
|
||||||
|
const password = ref('')
|
||||||
|
const isAccount = ref(false)
|
||||||
|
const isPassword = ref(false)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
|
||||||
|
if (!account.value) {
|
||||||
|
isAccount.value = true;
|
||||||
|
return
|
||||||
|
}
|
||||||
|
else isAccount.value = false;
|
||||||
|
if (!password.value) {
|
||||||
|
isPassword.value = true;
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
else isPassword.value = false;
|
||||||
|
|
||||||
|
|
||||||
|
loginApi({
|
||||||
|
account: account.value,
|
||||||
|
password: password.value
|
||||||
|
}).then(res => {
|
||||||
|
|
||||||
|
|
||||||
|
console.log(res)
|
||||||
|
|
||||||
|
localStorage.setItem("TRADE_USER", res.token)
|
||||||
|
// if (res.role_type == 0) {
|
||||||
|
// router.replace('/')
|
||||||
|
// }
|
||||||
|
// else if (res.role_type == 1) {
|
||||||
|
// router.replace('/detail')
|
||||||
|
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
return
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// alert(isAccount.value)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="btns">
|
<div class="btns">
|
||||||
|
|
||||||
<div class="btn" :class="btnFlag[0] ? 'act-btn' : ''" @click="hdClick(0)">订单列表</div>
|
<div class="btn" :class="btnFlag[0] ? 'act-btn' : ''" @click="hdClick(0)">订单列表</div>
|
||||||
<div class="btn" :class="btnFlag[1] ? 'act-btn' : ''" @click="hdClick(1)">退款单</div>
|
<div class="btn" :class="btnFlag[1] ? 'act-btn' : ''" @click="hdClick(1)">退款单</div>
|
||||||
<div class="btn" :class="btnFlag[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div>
|
<div class="btn" :class="btnFlag[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div>
|
||||||
|
|
@ -13,20 +14,20 @@
|
||||||
<div style="color: white;display: flex;">
|
<div style="color: white;display: flex;">
|
||||||
<Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill>
|
<Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill>
|
||||||
|
|
||||||
<div style="display: flex;margin-left: 5VW;" v-show="btnFlag[2]">
|
<!-- <div style="display: flex;margin-left: 5VW;" v-show="btnFlag[2]">
|
||||||
<Bill v-for="(item, key) in billList1" :key="index" :data="item"></Bill>
|
<Bill v-for="(item, key) in billList1" :key="index" :data="item"></Bill>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="table" v-if="configs.data.length">
|
<div class="table" v-if="configs.data.length">
|
||||||
<dv-scroll-board :config="configs" v-if="btnFlag[0]" @click='tableHdClick'
|
<dv-scroll-board :config="configs" v-if="btnFlag[0]" @click='tableHdClick'
|
||||||
style="width:95vw;height:100%" />
|
style="width:95vw;height:70vh" />
|
||||||
<dv-scroll-board :config="configs2" v-if="btnFlag[1] && configs2.data.length" @click='tableHdClick'
|
<dv-scroll-board :config="configs2" v-if="btnFlag[1] && configs2.data.length" @click='tableHdClick'
|
||||||
style="width:95vw;height:100%" />
|
style="width:95vw;height:77vh" />
|
||||||
<dv-scroll-board :config="configs3" v-if="btnFlag[2] && configs3.data.length" @click='tableHdClick'
|
<dv-scroll-board :config="configs3" v-if="btnFlag[2] && configs3.data.length" @click='tableHdClick'
|
||||||
style="width:95vw;height:100%" />
|
style="width:95vw;height:89vh" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -39,7 +40,9 @@
|
||||||
// 102B3
|
// 102B3
|
||||||
import { ref, reactive, onMounted } from "vue"
|
import { ref, reactive, onMounted } from "vue"
|
||||||
import Bill from "@/components/Bill.vue"
|
import Bill from "@/components/Bill.vue"
|
||||||
import { order_listApi, order_list_count_titleApi, refund_order_listApi, take_order_listApi,take_order_count_titleApi } from "@/api.js"
|
import { order_listApi, order_list_count_titleApi, refund_order_listApi, take_order_listApi, take_order_count_titleApi } from "@/api.js"
|
||||||
|
|
||||||
|
const value = ref(1)
|
||||||
|
|
||||||
const billList = reactive([
|
const billList = reactive([
|
||||||
{
|
{
|
||||||
|
|
@ -78,6 +81,28 @@ const billList1 = reactive([
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|
||||||
|
const orderStatus = (status) => {
|
||||||
|
if (status == 0) return "待发货"
|
||||||
|
if (status == 1) return "待收货"
|
||||||
|
if (status == 2) return "待评价"
|
||||||
|
if (status == 3) return "已完成"
|
||||||
|
if (status == 9) return "拼团中"
|
||||||
|
if (status == 10) return "待付尾款"
|
||||||
|
if (status == 11) return "尾款超时未付"
|
||||||
|
if (status == -1) return "已退款"
|
||||||
|
}
|
||||||
|
|
||||||
|
const payType = (type) => {
|
||||||
|
if (type == 0) return "余额支付"
|
||||||
|
if (type == 1) return "微信支付"
|
||||||
|
if (type == 2) return "小程序支付"
|
||||||
|
if (type == 3) return "h5支付"
|
||||||
|
if (type == 4) return "支付宝支付"
|
||||||
|
if (type == 5) return "支付宝扫码支付"
|
||||||
|
if (type == 6) return "微信扫码支付"
|
||||||
|
if (type == 8) return "信用购-先货后款"
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const btnFlag = reactive([true, false, false])
|
const btnFlag = reactive([true, false, false])
|
||||||
|
|
@ -145,7 +170,7 @@ const hdClick = (i) => {
|
||||||
streetCode: 510524100,
|
streetCode: 510524100,
|
||||||
limit: 50
|
limit: 50
|
||||||
}
|
}
|
||||||
).then(res=>{
|
).then(res => {
|
||||||
res.data.forEach((item, index) => {
|
res.data.forEach((item, index) => {
|
||||||
billList[index].num = item.count
|
billList[index].num = item.count
|
||||||
|
|
||||||
|
|
@ -192,7 +217,6 @@ const tableHdClick = (e) => {
|
||||||
const addConfigData = (data) => {
|
const addConfigData = (data) => {
|
||||||
data.forEach((item, i) => {
|
data.forEach((item, i) => {
|
||||||
|
|
||||||
|
|
||||||
if (i % 2 == 0) {
|
if (i % 2 == 0) {
|
||||||
configs.data.push(
|
configs.data.push(
|
||||||
[
|
[
|
||||||
|
|
@ -215,7 +239,7 @@ const addConfigData = (data) => {
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
||||||
<span>总单号：</span>
|
<span>总单号：</span>
|
||||||
<span>35356565656565</span>
|
<span>${item.groupOrder.group_order_sn}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
|
|
@ -226,7 +250,7 @@ const addConfigData = (data) => {
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商品总价</span>
|
<span>商品总价</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.total_price}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
|
|
@ -238,27 +262,27 @@ const addConfigData = (data) => {
|
||||||
<span>用户备注</span>
|
<span>用户备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>2023.11.214</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商家备注</span>
|
<span>商家备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>2023.11.214</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user.nickname}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`,
|
||||||
|
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
|
||||||
|
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
|
||||||
|
<span>${item.orderProduct[0].cart_info.product.store_name} </span>
|
||||||
|
<span>${item.orderProduct[0].cart_info.product.unit_name} </span>
|
||||||
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.cost}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.cost}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${orderStatus(item.status)}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user_address}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${payType(item.pay_type)}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.pay_type}</div>`,
|
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -275,7 +299,7 @@ const addConfigData = (data) => {
|
||||||
top:50%;
|
top:50%;
|
||||||
left:0
|
left:0
|
||||||
'>
|
'>
|
||||||
</div> 1111</div>
|
</div> ${item.order_sn}</div>
|
||||||
|
|
||||||
<div class='card' id='card${i}'
|
<div class='card' id='card${i}'
|
||||||
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
||||||
|
|
@ -318,15 +342,23 @@ const addConfigData = (data) => {
|
||||||
|
|
||||||
|
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user.nickname}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
|
||||||
|
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
|
||||||
|
<span>${item.orderProduct[0].cart_info.product.store_name} </span>
|
||||||
|
<span>${item.orderProduct[0].cart_info.product.unit_name} </span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.cost}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${orderStatus(item.status)}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${payType(item.pay_type)}</div>`,
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -407,12 +439,20 @@ const addConfigData2 = (data) => {
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '>
|
||||||
|
<img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
|
||||||
|
<span>
|
||||||
|
${item.refundProduct[0].product.cart_info.product.store_name}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
${item.refundProduct[0].product.cart_info.product.unit_name}
|
||||||
|
</span>
|
||||||
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
||||||
|
|
||||||
<sapn> ${item.status} </span>
|
<sapn> ${item.status} </span>
|
||||||
<sapn>退款原因： ${item.refund_message} </span>
|
<sapn>退款原因： ${item.refund_message} </span>
|
||||||
<sapn>状态变更时间 ${item.status_tiem} </span>
|
<sapn>状态变更时间 ${item.status_time} </span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -481,11 +521,23 @@ const addConfigData2 = (data) => {
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.refund_price}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '>
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'> <sapn> ${item.status} </span>
|
<img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
|
||||||
|
<span>
|
||||||
|
${item.refundProduct[0].product.cart_info.product.store_name}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
${item.refundProduct[0].product.cart_info.product.unit_name}
|
||||||
|
</span>
|
||||||
|
</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
|
||||||
|
<sapn> ${item.status} </span>
|
||||||
<sapn>退款原因： ${item.refund_message} </span>
|
<sapn>退款原因： ${item.refund_message} </span>
|
||||||
<sapn>状态变更时间 ${item.status_tiem} </span></div>`,
|
<sapn>状态变更时间 ${item.status_time} </span>
|
||||||
|
|
||||||
|
|
||||||
|
</div>`,
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -569,13 +621,9 @@ const addConfigData3 = (data) => {
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
||||||
|
|
||||||
<sapn> ${item.status} </span>
|
<sapn> ${item.status} </span>
|
||||||
<sapn>退款原因： ${item.refund_message} </span>
|
<sapn>退款原因： ${item.refund_message} </span>
|
||||||
<sapn>状态变更时间 ${item.status_tiem} </span>
|
<sapn>状态变更时间 ${item.status_tiem} </span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||||
|
|
@ -596,8 +644,7 @@ const addConfigData3 = (data) => {
|
||||||
top:50%;
|
top:50%;
|
||||||
left:0
|
left:0
|
||||||
'>
|
'>
|
||||||
</div> ${item.refund_order_sn}</div>
|
</div> ${item.order_sn}</div>
|
||||||
|
|
||||||
<div class='card' id='card${i}'
|
<div class='card' id='card${i}'
|
||||||
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
||||||
|
|
||||||
|
|
@ -639,7 +686,7 @@ const addConfigData3 = (data) => {
|
||||||
|
|
||||||
|
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>核销订单</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||||
|
|
@ -672,6 +719,8 @@ const configs = reactive({
|
||||||
oddRowBGC: '',
|
oddRowBGC: '',
|
||||||
evenRowBGC: "",
|
evenRowBGC: "",
|
||||||
rowNum: 20,
|
rowNum: 20,
|
||||||
|
|
||||||
|
columnWidth: [250, 170, 170, 170, 170, 500, 170, 170, 170, 200],
|
||||||
header: [
|
header: [
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
|
||||||
|
|
@ -681,7 +730,7 @@ const configs = reactive({
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>实际支付</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>实际支付</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单状态</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单状态</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单数属地</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单属地</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>支付类型</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>支付类型</div>`,
|
||||||
],
|
],
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -689,6 +738,8 @@ const configs = reactive({
|
||||||
})
|
})
|
||||||
|
|
||||||
const configs2 = reactive({
|
const configs2 = reactive({
|
||||||
|
columnWidth: [300, 150, 150, 150, 150, 150, 600, 600],
|
||||||
|
|
||||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||||
oddRowBGC: '',
|
oddRowBGC: '',
|
||||||
evenRowBGC: "",
|
evenRowBGC: "",
|
||||||
|
|
@ -710,6 +761,8 @@ const configs3 = reactive({
|
||||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||||
oddRowBGC: '',
|
oddRowBGC: '',
|
||||||
evenRowBGC: "",
|
evenRowBGC: "",
|
||||||
|
columnWidth: [300, 150, 150, 150, 150, 150, 600, 150, 150, 150],
|
||||||
|
|
||||||
rowNum: 20,
|
rowNum: 20,
|
||||||
header: [
|
header: [
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
||||||
|
|
@ -757,6 +810,7 @@ onMounted(() => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 2vw;
|
padding: 2vw;
|
||||||
|
// box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -790,7 +844,6 @@ onMounted(() => {
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 70vh;
|
|
||||||
margin-top: 3vh;
|
margin-top: 3vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -803,6 +856,7 @@ onMounted(() => {
|
||||||
|
|
||||||
:deep(.header-item) {
|
:deep(.header-item) {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
// justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,145 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="top box">
|
<div class="top box">
|
||||||
|
|
||||||
|
|
||||||
<div class="l">
|
<div class="l">
|
||||||
<img class="img-cls" src="/static/town/YHSJ.png" alt="">
|
<topLeft></topLeft>
|
||||||
<div class="user center" id="user"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="c" id="">
|
<div class="c" id="">
|
||||||
|
|
||||||
<topCenter :code="route.query.code"></topCenter>
|
<topCenter :code="route.query.code"></topCenter>
|
||||||
|
|
||||||
<!-- <div class="product-list">
|
|
||||||
<div class="product" style="">
|
|
||||||
<div class="bg">
|
|
||||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
|
||||||
<div class="bubble"></div>
|
|
||||||
<div class="bubble1"></div>
|
|
||||||
<div class="bubble2"></div>
|
|
||||||
</div>
|
|
||||||
<div class="product-content">
|
|
||||||
<div style="margin-top: 14vh;position: relative;">商 品 总 数</div>
|
|
||||||
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
|
|
||||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
|
||||||
<div style="margin-top: 2vh;position: relative;"> <span
|
|
||||||
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
|
||||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
|
||||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
|
||||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
|
||||||
|
|
||||||
昨日数据： 0.0
|
|
||||||
</div>
|
|
||||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
|
||||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
|
||||||
|
|
||||||
周环比: 10%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="product" style="">
|
|
||||||
<div class="bg">
|
|
||||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
|
||||||
<div class="bubble"></div>
|
|
||||||
<div class="bubble1"></div>
|
|
||||||
<div class="bubble2"></div>
|
|
||||||
</div>
|
|
||||||
<div class="product-content">
|
|
||||||
<div style="margin-top: 14vh;position: relative;">新 商 品 总 数</div>
|
|
||||||
<div style="font-size: 10px;">NUMBER OF NEW SHOPS</div>
|
|
||||||
<img src="/static/index/JRC.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
|
||||||
|
|
||||||
<div style="margin-top: 2vh;position: relative;"> <span
|
|
||||||
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
|
||||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
|
||||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
|
||||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
|
||||||
|
|
||||||
昨日数据： 0.0
|
|
||||||
</div>
|
|
||||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
|
||||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
|
||||||
|
|
||||||
周环比: 10%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="product" style="">
|
|
||||||
<div class="bg">
|
|
||||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
|
||||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
|
||||||
<div class="bubble"></div>
|
|
||||||
<div class="bubble1"></div>
|
|
||||||
<div class="bubble2"></div>
|
|
||||||
</div>
|
|
||||||
<div class="product-content">
|
|
||||||
<div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
|
|
||||||
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
|
|
||||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
|
||||||
<div style="margin-top: 2vh;position: relative;"> <span
|
|
||||||
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
|
||||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
|
||||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
|
||||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
|
||||||
|
|
||||||
昨日数据： 0.0
|
|
||||||
</div>
|
|
||||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
|
||||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
|
||||||
|
|
||||||
周环比: 10%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="Views">
|
|
||||||
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
|
||||||
<div class="view-content">
|
|
||||||
<div>昨日数据：3333</div>
|
|
||||||
<div style="display: flex;align-items: center;">当前浏览量：
|
|
||||||
<Remake :num="517854" /> 人正在浏览
|
|
||||||
</div>
|
|
||||||
<div>周环比：32%</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="r">
|
<div class="r">
|
||||||
|
<topRight></topRight>
|
||||||
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
|
|
||||||
<div class="order-data">
|
|
||||||
<div class="tit">
|
|
||||||
<div style="display: flex;align-items: center;">
|
|
||||||
<div class="gradient-circle">
|
|
||||||
</div>
|
|
||||||
日订单数据
|
|
||||||
</div>
|
|
||||||
<div style="display: flex;align-items: center;">
|
|
||||||
<div class="gradient-circle">
|
|
||||||
</div>
|
|
||||||
日订单数据
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
|
|
||||||
<div style="width: 100%;height: 50%;" id="orderData2"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom box">
|
<div class="bottom box">
|
||||||
<div class="l">
|
<div class="l">
|
||||||
<div class="user center" id="orderAmount"></div>
|
|
||||||
<img class="img-cls" src="/static/town/DRDDJE.png" alt="">
|
<bottomleft></bottomleft>
|
||||||
<!-- <bottomleft></bottomleft> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="c">
|
<div class="c">
|
||||||
<img class="img-cls" src="/static/town/CJYH.png" alt="">
|
<img class="img-cls" src="/static/town/CJYH.png" alt="">
|
||||||
|
|
@ -155,46 +31,13 @@
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import option from "./option"
|
import option from "./option"
|
||||||
import { ref, reactive } from "vue"
|
|
||||||
import Remake from "@/components/Remake.vue"
|
|
||||||
import bottomRight from "@/components/townDetail/bottomRight.vue"
|
import bottomRight from "@/components/townDetail/bottomRight.vue"
|
||||||
import bottomleft from "@/components/townDetail/bottomleft.vue"
|
import bottomleft from "@/components/townDetail/bottomleft.vue"
|
||||||
import { getProductCountApi } from "@/api.js"
|
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import topCenter from "@/components/townDetail/topCenter.vue"
|
import topCenter from "@/components/townDetail/topCenter.vue"
|
||||||
|
import topLeft from "@/components/townDetail/topLeft.vue"
|
||||||
|
import topRight from "@/components/townDetail/topRight.vue"
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const addFn = (data) => {
|
|
||||||
let list = []
|
|
||||||
data.forEach((item, i) => {
|
|
||||||
list.push(
|
|
||||||
[
|
|
||||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
|
||||||
`<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
|
||||||
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
|
|
||||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: ${item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
|
||||||
`<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
|
|
||||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
|
||||||
</div>`,
|
|
||||||
|
|
||||||
],
|
|
||||||
|
|
||||||
|
|
||||||
)
|
|
||||||
})
|
|
||||||
return list
|
|
||||||
}
|
|
||||||
|
|
||||||
// 图表
|
// 图表
|
||||||
const initCharts = (tag, option) => {
|
const initCharts = (tag, option) => {
|
||||||
var chartDom = document.getElementById(tag);
|
var chartDom = document.getElementById(tag);
|
||||||
|
|
@ -203,16 +46,10 @@ const initCharts = (tag, option) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
document.getElementById("orderData").removeAttribute('_echarts_instance_');
|
|
||||||
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
|
|
||||||
document.getElementById("user").removeAttribute('_echarts_instance_');
|
|
||||||
document.getElementById("orderAmount").removeAttribute('_echarts_instance_');
|
|
||||||
document.getElementById("transactionUsers").removeAttribute('_echarts_instance_');
|
document.getElementById("transactionUsers").removeAttribute('_echarts_instance_');
|
||||||
initCharts('user', option.userChartOption)
|
|
||||||
initCharts('orderAmount', option.orderAmount)
|
|
||||||
initCharts('transactionUsers', option.transactionUsersTown)
|
initCharts('transactionUsers', option.transactionUsersTown)
|
||||||
initCharts('orderData', option.orderData)
|
|
||||||
initCharts('orderData2', option.orderData)
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -220,20 +57,6 @@ onMounted(() => {
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@keyframes jump {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 47vh;
|
height: 47vh;
|
||||||
|
|
@ -253,14 +76,9 @@ onMounted(() => {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
padding-top: 6vh;
|
||||||
.user {
|
|
||||||
position: absolute;
|
|
||||||
width: 98%;
|
|
||||||
height: 35vh;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -335,31 +153,7 @@ onMounted(() => {
|
||||||
position: relative;
|
position: relative;
|
||||||
// background-color: RED;
|
// background-color: RED;
|
||||||
|
|
||||||
.order-data {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-right: 1vw;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.tit {
|
|
||||||
position: absolute;
|
|
||||||
color: white;
|
|
||||||
// background-color: #fff;
|
|
||||||
top: 6vh;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
.gradient-circle {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background: radial-gradient(at top left, transparent, #029BE9);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Loading…
Reference in New Issue