no message

main
HUOJIN\92525 2026-01-20 22:23:55 +08:00
parent 36cb845603
commit eb8b408600
5 changed files with 58 additions and 78 deletions

View File

@ -1,35 +0,0 @@
<template>
<div id="main" ref="chartRef" style="width: 600px; height: 400px"></div>
</template>
<script setup lang="ts">
import { useECharts } from '/@/hooks/web/useECharts';
import { Ref, ref, reactive } from 'vue';
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
var app: any = {};
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById('main')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
option = {
legend: {},
tooltip: {},
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{ product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
{ product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
{ product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
{ product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 },
],
},
xAxis: { type: 'category' },
yAxis: {},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
};
option && myChart.setOption(option);
</script>
<style scoped lang="less"></style>

View File

@ -4,6 +4,7 @@ enum Api {
loginfo = '/sys/loginfo', loginfo = '/sys/loginfo',
visitInfo = '/sys/visitInfo', visitInfo = '/sys/visitInfo',
getChartCardList = '/dashboard/getChartCardList', getChartCardList = '/dashboard/getChartCardList',
queryOutAndInData = '/dashboard/queryOutAndInData',
} }
/** /**
* *
@ -17,3 +18,5 @@ export const getLoginfo = (params) => defHttp.get({ url: Api.loginfo, params },
export const getVisitInfo = (params) => defHttp.get({ url: Api.visitInfo, params }, { isTransformResponse: false }); export const getVisitInfo = (params) => defHttp.get({ url: Api.visitInfo, params }, { isTransformResponse: false });
export const getChartCardList = (params) => defHttp.get({ url: Api.getChartCardList, params }, { isTransformResponse: false }); export const getChartCardList = (params) => defHttp.get({ url: Api.getChartCardList, params }, { isTransformResponse: false });
export const queryOutAndInData = (params) => defHttp.get({ url: Api.queryOutAndInData, params }, { isTransformResponse: false });

View File

@ -115,7 +115,6 @@
chartLoading.value = true; chartLoading.value = true;
try { try {
const response = await getChartCardList({}); const response = await getChartCardList({});
console.log('获取 chartCardList 成功:', response);
chartCardList.value = response.result || []; chartCardList.value = response.result || [];
} catch (error) { } catch (error) {
console.error('获取 chartCardList 失败:', error); console.error('获取 chartCardList 失败:', error);

View File

@ -3,7 +3,7 @@
<div class="salesCard"> <div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }"> <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
<template #rightExtra> <template #rightExtra>
<div class="extra-wrapper"> <!-- <div class="extra-wrapper">
<div class="extra-item"> <div class="extra-item">
<a>今日</a> <a>今日</a>
<a>本周</a> <a>本周</a>
@ -11,22 +11,24 @@
<a>本年</a> <a>本年</a>
</div> </div>
<a-range-picker :style="{ width: '256px' }" /> <a-range-picker :style="{ width: '256px' }" />
</div> </div>-->
</template> </template>
<a-tab-pane loading="true" tab="近一周出入库趋势" key="1"> <a-tab-pane loading="true" tab="本周出入库数据" key="1">
<a-row> <a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<OutAndInBar /> <BarMulti
<!-- :chartData="barData"
<BarMulti :chartData="barData" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor" /> :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }"
--> height="40vh"
:seriesColor="seriesColor"
/>
</a-col> </a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<RankList title="门店销售排行榜" :list="rankList" /> <RankList title="门店销售排行榜" :list="rankList" />
</a-col> </a-col>
</a-row> </a-row>
</a-tab-pane> </a-tab-pane>
<!-- <a-tab-pane tab="销售趋势" key="2"> <!-- <a-tab-pane tab="销售趋势" key="2">
<a-row> <a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<Bar :chartData="barData.reverse()" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor" /> <Bar :chartData="barData.reverse()" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor" />
@ -41,18 +43,16 @@
</a-card> </a-card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue'; import { ref, onMounted } from 'vue';
import RankList from '/@/components/chart/RankList.vue'; import RankList from '/@/components/chart/RankList.vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import BarMulti from '@/components/chart/BarMulti.vue';
import OutAndInBar from '@/components/chart/OutAndInBar.vue'; import { queryOutAndInData } from '@/views/dashboard/Analysis/api';
defineProps({ defineProps({
loading: { loading: {
type: Boolean, type: Boolean,
}, },
}); });
const { getThemeColor } = useRootSetting();
const rankList = []; const rankList = [];
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
rankList.push({ rankList.push({
@ -61,23 +61,36 @@
}); });
} }
const testChartData = [ /*const barData = [
{ name: '2026-01-14', type: '入库', value: 336 }, { name: '2026-01-19', type: '入库', value: 392 },
{ name: '2026-01-14', type: '出库', value: 198 }, { name: '2026-01-19', type: '出库', value: 123 },
{ name: '2026-01-15', type: '入库', value: 392 }, { name: '2026-01-20', type: '入库', value: 392 },
{ name: '2026-01-15', type: '出库', value: 100 }, { name: '2026-01-20', type: '出库', value: 123 },
{ name: '2026-01-16', type: '入库', value: 80 }, ];*/
{ name: '2026-01-16', type: '出库', value: 90 },
{ name: '2026-01-17', type: '入库', value: 60 }, const seriesColor = [
{ name: '2026-01-17', type: '出库', value: 70 }, { type: '入库', color: '#5470c6' },
{ name: '2026-01-18', type: '入库', value: 50 }, { type: '出库', color: '#91cc75' },
{ name: '2026-01-18', type: '出库', value: 40 },
]; ];
// barData
const barData = ref([]);
async function queryData() {
try {
const response = await queryOutAndInData({});
barData.value= response.result.map(item => ({
name: item.createTime,
type: item.type,
value: item.qty
}));
} catch (error) {
console.error('获取数据失败:', error);
}
}
const seriesColor = computed(() => { onMounted(() => {
return getThemeColor.value queryData();
}) });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -3,7 +3,7 @@
<IndexDef v-if="indexStyle === 1"></IndexDef> <IndexDef v-if="indexStyle === 1"></IndexDef>
<IndexBdc v-if="indexStyle == 2"></IndexBdc> <IndexBdc v-if="indexStyle == 2"></IndexBdc>
<IndexTask v-if="indexStyle == 3"></IndexTask> <IndexTask v-if="indexStyle == 3"></IndexTask>
<div style="width: 100%; text-align: right; margin-top: 20px"> <!-- <div style="width: 100%; text-align: right; margin-top: 20px">
首页主题 首页主题
<a-radio-group v-model:value="indexStyle"> <a-radio-group v-model:value="indexStyle">
<a-radio :value="0">默认</a-radio> <a-radio :value="0">默认</a-radio>
@ -11,7 +11,7 @@
<a-radio :value="2">业务统计</a-radio> <a-radio :value="2">业务统计</a-radio>
<a-radio :value="3">我的任务</a-radio> <a-radio :value="3">我的任务</a-radio>
</a-radio-group> </a-radio-group>
</div> </div>-->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';