<template>
<div id="mod1">
<!-- <dv-loading v-if="loading">Loading...</dv-loading> -->
<div class="content" v-if="!empty">
<div>
<div id="Dom"></div>
</div>
<div>
<div id="Dom2"></div>
</div>
<!-- 修改按钮 -->
<div class="edit-btn">
<el-tooltip class="item" effect="dark" content="变更日期" placement="left-start">
<i class="el-icon-edit" @click="handleEdit"></i>
</el-tooltip>
</div>
<!-- 覆盖层 -->
<div class="cover" v-if="cover">
<div class="cover-content">
<div class="block">
<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
<div class="block">
<el-button type="primary" @click="handleSearch">确认</el-button>
<el-button type="warning" @click="cover = false">取消</el-button>
</div>
</div>
</div>
</div>
<el-empty v-else description="暂无数据"></el-empty>
</div>
</template>
<script>
// 在script顶部添加
import * as echarts from 'echarts';
import moment from 'moment';
export default {
data() {
return {
loading: true,
empty: false,
cover: false,
params: {
ctName: '',
ctid: '',
PDID: '',
PDCNAME: '',
kh: '',
fDate: '',
tDate: '',
ntype: '1',
KHLB: '',
},
list: {},
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近六个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
picker.$emit('pick', [start, end]);
}
}]
},
value2: ''
}
},
mounted() {
//$moment
this.params.fDate = moment().subtract(1, 'year').format('YYYY/MM/DD');
this.params.tDate = moment().format('YYYY/MM/DD');
this.getData()
},
beforeDestroy() {
},
methods: {
// 获取数据
async getData() {
const tag = localStorage.getItem('tag'),
userName = encodeURIComponent(localStorage.getItem('userName').replace(/^"(.*)"$/, '$1'));
try {
let res = await this.$http.get('/x-1/tube/getQuerySaleDay', {
headers: {
'class-tag': tag,
'class-identity': userName,
},
params: this.params
});
let data = res.data;
if (data === undefined) {
this.empty = true;
return
}
/* 处理数据格式 */
let total = data.map(item => {
const newItem = {};
for (const key in item) {
const value = item[key];
if (typeof value === 'number') newItem[key] = value;
else if (value === null) newItem[key] = 0;
}
return newItem;
}).reduce((acc, item) => {
Object.entries(item).forEach(([key, value]) => {
acc[key] = (acc[key] || 0) + value;
});
return acc;
}, {});
/* 构建汇总对象 */
const processedObj = {};
for (const [key, value] of Object.entries(total)) {
if (/^\d{2}-\d{2}$/.test(key)) {
processedObj[key] = value;
} else {
switch (key) {
case '小计':
processedObj['总计'] = value;
break;
case '吨价(RMB)':
processedObj['平均吨价(RMB)'] = (total['吨价(RMB)'] / data.length).toFixed(2);
break;
case '重量(吨)':
processedObj['总重量(吨)'] = value.toFixed(5);
break;
case '金额(RMB)':
processedObj['总金额(RMB)'] = value.toFixed(2);
break;
default:
processedObj[key] = value;
}
}
}
const txtKeys = ["总计", "总重量(吨)", "平均吨价(RMB)", "总金额(RMB)", "已送货", "未送货"];
const result = {
txt: {},
month: {}
};
for (const key in processedObj) {
if (txtKeys.includes(key)) {
result.txt[key] = processedObj[key];
} else {
result.month[key] = processedObj[key];
}
}
this.list = result
this.init(); // 确保在所有数据处理完成后调用
} catch (error) {
console.error('Error fetching data:', error);
}
},
init() {
var chartDom = document.getElementById('Dom');
var chartDom2 = document.getElementById('Dom2');
var myChart = echarts.init(chartDom);
var myChart2 = echarts.init(chartDom2);
var option;
var option2;
option = {
title: {
text: '客户订单汇总量 (12个自然月，数据截至今日)',
x: "left",
y: "top",
textStyle: {
fontSize: 12,
fontWeight: "bolder",
color: "#333"
},
},
color: ['#409EFF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
feature: {
// saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '0%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: Object.keys(this.list.month)
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: (value) => {
return `${value / 10000} 万`;
}
}
}
],
series: [
{
name: '销售量',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: Object.values(this.list.month)
}
]
};
option && myChart.setOption(option);
//再加入一个饼图
option2 = {
title: {
text: '客户订单状态比例 (12个自然月，数据截至今日)',
x: "left",
y: "top",
textStyle: {
fontSize: 12,
fontWeight: "bolder",
color: "#333"
},
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
grid: {
left: '3%',
right: '4%',
bottom: '0%',
containLabel: true
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '80%'],
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
label: {
show: true,
//显示名称，比例，数值
formatter: `{b}\n{d}%\n{c}`
},
data: [
{ value: this.list.txt['已送货'], name: '已送货' },
{ value: this.list.txt['未送货'], name: '未送货' },
]
}
]
};
option2 && myChart2.setOption(option2);
},
handleEdit() {
this.cover = true;
},
}
}
</script>
<style lang="scss" scoped>
$box-height: 520px;
$box-width: 100%;
#mod1 {
padding: 20px 16px;
height: $box-height;
#Dom {
height: $box-height/2+10px;
width: $box-width;
}
#Dom2 {
height: 190px;
width: $box-width;
margin-top: 15px;
}
.content {
height: 100%;
background-color: #fff;
position: relative;
.edit-btn {
position: absolute;
top: 8px;
right: 8px;
.el-icon-edit {
color: #829e02;
font-size: 22px;
cursor: pointer;
}
}
}
.text {
color: #333;
}
.chart-box {
margin-top: 16px;
width: 170px;
height: 170px;
.active-ring-name {
padding-top: 10px;
}
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: $box-height - 40px;
background-color: #fff;
z-index: 999;
//动画渐进渐出
transition: all 0.3s ease-in-out;
}
.cover-content {
width: 100%;
height: $box-height - 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
}
</style>，这是我的代码，要如何修改
本文介绍了如何在Ring0级别创建一个警告框，通过UtilsZwRoutine函数调用ZwRaiseHardError系统调用，结合LoadWarnBox函数加载ntdll.dll库获取相关地址。代码中涉及DbgPrint调试输出及RtlInitUnicodeString等内核API。
扫一扫
1116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
