zhbaor
b0a908d68b
All checks were successful
ci/woodpecker/push/check_format Pipeline was successful
571 lines
20 KiB
JavaScript
571 lines
20 KiB
JavaScript
import { __unplugin_components_0 } from "./HelpText.js";
|
|
import { ECharts, THEME_KEY } from "./index3.js";
|
|
import { defineStore, axios, _export_sfc, ref, onMounted, computed, createElementBlock, createBaseVNode, createBlock, createCommentVNode, createTextVNode, createVNode, withCtx, unref, Fragment, openBlock, provide } from "./index.js";
|
|
import { install$2 as install, install$1, install as install$6 } from "./install2.js";
|
|
import { use, install$4 as install$2, install$3, install$5 as install$4, install$2 as install$5, install$1 as install$7, install$6 as install$8, install as install$9, registerTheme } from "./install.js";
|
|
import { __unplugin_components_1 } from "./Alert.js";
|
|
import { __unplugin_components_3, __unplugin_components_2 } from "./Grid.js";
|
|
import "./Tooltip.js";
|
|
import "./Icon.js";
|
|
import "./next-frame-once.js";
|
|
import "./use-compitable.js";
|
|
import "./get-slot.js";
|
|
const color = ["#e01f54", "#001852", "#f5e8c8", "#b8d2c7", "#c6b38e", "#a4d8c2", "#f3d999", "#d3758f", "#dcc392", "#2e4783", "#82b6e9", "#ff6347", "#a092f1", "#0a915d", "#eaf889", "#6699FF", "#ff6666", "#3cb371", "#d5b158", "#38b6b6"];
|
|
const backgroundColor = "rgba(0,0,0,0)";
|
|
const textStyle = {};
|
|
const title = { "textStyle": { "color": "#333333" }, "subtextStyle": { "color": "#aaaaaa" } };
|
|
const line = { "itemStyle": { "borderWidth": 1 }, "lineStyle": { "width": 2 }, "symbolSize": 4, "symbol": "emptyCircle", "smooth": false };
|
|
const radar = { "itemStyle": { "borderWidth": 1 }, "lineStyle": { "width": 2 }, "symbolSize": 4, "symbol": "emptyCircle", "smooth": false };
|
|
const bar = { "itemStyle": { "barBorderWidth": 0, "barBorderColor": "#ccc" } };
|
|
const pie = { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } };
|
|
const scatter = { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } };
|
|
const boxplot = { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } };
|
|
const parallel = { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } };
|
|
const sankey = { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } };
|
|
const funnel = { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } };
|
|
const gauge = { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" } };
|
|
const candlestick = { "itemStyle": { "color": "#e01f54", "color0": "#001852", "borderColor": "#f5e8c8", "borderColor0": "#b8d2c7", "borderWidth": 1 } };
|
|
const graph = { "itemStyle": { "borderWidth": 0, "borderColor": "#ccc" }, "lineStyle": { "width": 1, "color": "#aaa" }, "symbolSize": 4, "symbol": "emptyCircle", "smooth": false, "color": ["#e01f54", "#001852", "#f5e8c8", "#b8d2c7", "#c6b38e", "#a4d8c2", "#f3d999", "#d3758f", "#dcc392", "#2e4783", "#82b6e9", "#ff6347", "#a092f1", "#0a915d", "#eaf889", "#6699FF", "#ff6666", "#3cb371", "#d5b158", "#38b6b6"], "label": { "color": "#eee" } };
|
|
const map = { "itemStyle": { "areaColor": "#eeeeee", "borderColor": "#444444", "borderWidth": 0.5 }, "label": { "color": "#000000" }, "emphasis": { "itemStyle": { "areaColor": "rgba(255,215,0,0.8)", "borderColor": "#444", "borderWidth": 1 }, "label": { "color": "rgb(100,0,0)" } } };
|
|
const geo = { "itemStyle": { "areaColor": "#eeeeee", "borderColor": "#444444", "borderWidth": 0.5 }, "label": { "color": "#000000" }, "emphasis": { "itemStyle": { "areaColor": "rgba(255,215,0,0.8)", "borderColor": "#444", "borderWidth": 1 }, "label": { "color": "rgb(100,0,0)" } } };
|
|
const categoryAxis = { "axisLine": { "show": true, "lineStyle": { "color": "#333" } }, "axisTick": { "show": true, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "color": "#333" }, "splitLine": { "show": false, "lineStyle": { "color": ["#ccc"] } }, "splitArea": { "show": false, "areaStyle": { "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } };
|
|
const valueAxis = { "axisLine": { "show": true, "lineStyle": { "color": "#333" } }, "axisTick": { "show": true, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "color": "#333" }, "splitLine": { "show": true, "lineStyle": { "color": ["#ccc"] } }, "splitArea": { "show": false, "areaStyle": { "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } };
|
|
const logAxis = { "axisLine": { "show": true, "lineStyle": { "color": "#333" } }, "axisTick": { "show": true, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "color": "#333" }, "splitLine": { "show": true, "lineStyle": { "color": ["#ccc"] } }, "splitArea": { "show": false, "areaStyle": { "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } };
|
|
const timeAxis = { "axisLine": { "show": true, "lineStyle": { "color": "#333" } }, "axisTick": { "show": true, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "color": "#333" }, "splitLine": { "show": true, "lineStyle": { "color": ["#ccc"] } }, "splitArea": { "show": false, "areaStyle": { "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } };
|
|
const toolbox = { "iconStyle": { "borderColor": "#999999" }, "emphasis": { "iconStyle": { "borderColor": "#666666" } } };
|
|
const legend = { "textStyle": { "color": "#333333" } };
|
|
const tooltip = { "axisPointer": { "lineStyle": { "color": "#cccccc", "width": 1 }, "crossStyle": { "color": "#cccccc", "width": 1 } } };
|
|
const timeline = { "lineStyle": { "color": "#293c55", "width": 1 }, "itemStyle": { "color": "#293c55", "borderWidth": 1 }, "controlStyle": { "color": "#293c55", "borderColor": "#293c55", "borderWidth": 0.5 }, "checkpointStyle": { "color": "#e43c59", "borderColor": "#c23531" }, "label": { "color": "#293c55" }, "emphasis": { "itemStyle": { "color": "#a9334c" }, "controlStyle": { "color": "#293c55", "borderColor": "#293c55", "borderWidth": 0.5 }, "label": { "color": "#293c55" } } };
|
|
const visualMap = { "color": ["#e01f54", "#e7dbc3"] };
|
|
const dataZoom = { "backgroundColor": "rgba(47,69,84,0)", "dataBackgroundColor": "rgba(47,69,84,0.3)", "fillerColor": "rgba(167,183,204,0.4)", "handleColor": "#a7b7cc", "handleSize": "100%", "textStyle": { "color": "#333333" } };
|
|
const markPoint = { "label": { "color": "#eee" }, "emphasis": { "label": { "color": "#eee" } } };
|
|
const roma = {
|
|
color,
|
|
backgroundColor,
|
|
textStyle,
|
|
title,
|
|
line,
|
|
radar,
|
|
bar,
|
|
pie,
|
|
scatter,
|
|
boxplot,
|
|
parallel,
|
|
sankey,
|
|
funnel,
|
|
gauge,
|
|
candlestick,
|
|
graph,
|
|
map,
|
|
geo,
|
|
categoryAxis,
|
|
valueAxis,
|
|
logAxis,
|
|
timeAxis,
|
|
toolbox,
|
|
legend,
|
|
tooltip,
|
|
timeline,
|
|
visualMap,
|
|
dataZoom,
|
|
markPoint
|
|
};
|
|
const useReportStore = defineStore("report", () => {
|
|
async function getReportData() {
|
|
const response = await axios.get(`${""}/report/getReportData`);
|
|
return response.data;
|
|
}
|
|
async function getOrundumData() {
|
|
const response = await axios.get(`${""}/report/getOrundumData`);
|
|
return response.data;
|
|
}
|
|
return {
|
|
getReportData,
|
|
getOrundumData
|
|
};
|
|
});
|
|
const _hoisted_1 = { class: "page-title" };
|
|
const _hoisted_2 = { class: "report-card_1" };
|
|
const _hoisted_3 = { class: "report-card_1" };
|
|
const _hoisted_4 = { class: "report-card_1" };
|
|
const _sfc_main = {
|
|
__name: "report",
|
|
setup(__props) {
|
|
use([
|
|
install,
|
|
install$1,
|
|
install$2,
|
|
install$3,
|
|
install$4,
|
|
install$5,
|
|
install$6,
|
|
install$7,
|
|
install$8,
|
|
install$9
|
|
]);
|
|
registerTheme("roma", roma);
|
|
provide(THEME_KEY, "roma");
|
|
const reportStore = useReportStore();
|
|
const { getReportData, getOrundumData } = reportStore;
|
|
const show_iron_chart = ref(false);
|
|
const show_orundum_chart = ref(false);
|
|
const sum_orundum = ref(0);
|
|
const show_alert = ref(false);
|
|
const ReportData = ref([]);
|
|
const HalfMonthData = ref([]);
|
|
onMounted(async () => {
|
|
try {
|
|
ReportData.value = await getReportData();
|
|
HalfMonthData.value = await getOrundumData();
|
|
show_iron_chart.value = true;
|
|
if (HalfMonthData.value.length > 0) {
|
|
show_orundum_chart.value = true;
|
|
sum_orundum.value = HalfMonthData.value[HalfMonthData.value.length - 1]["累计制造合成玉"];
|
|
}
|
|
} catch {
|
|
show_alert.value = true;
|
|
}
|
|
});
|
|
const option_manufactor = computed(() => {
|
|
return {
|
|
title: [
|
|
{
|
|
text: "制造与龙门币"
|
|
}
|
|
],
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {
|
|
show: true,
|
|
backgroundColor: "#FFFFFF"
|
|
}
|
|
}
|
|
},
|
|
dataZoom: [
|
|
//滚动条
|
|
{
|
|
show: false,
|
|
type: "slider",
|
|
realtime: true,
|
|
startValue: ReportData.value.length - 7,
|
|
endValue: ReportData.value.length,
|
|
yAxisIndex: [0],
|
|
bottom: "10",
|
|
left: "30",
|
|
height: 10,
|
|
borderColor: "rgba(0,0,0,0)",
|
|
textStyle: {
|
|
color: "#05D5FF"
|
|
}
|
|
}
|
|
],
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
data: ["订单", "赤金", "经验"],
|
|
selected: {
|
|
订单收入: true,
|
|
赤金: true,
|
|
龙门币订单: true
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
crossStyle: {
|
|
color: "#999"
|
|
}
|
|
},
|
|
formatter: function(params) {
|
|
const tip = `<div style="font-size:1.4rem;">
|
|
<span style="font-size:15px">${params[0].data["日期"]}</span> <br>
|
|
${params[0].marker} <span style="font-size:14px">${params[0].seriesName}:${params[0].data["赤金"]}</span> <br>
|
|
${params[2].marker} <span style="font-size:14px">${params[2].seriesName}:${params[0].data["龙门币订单"]}</span> <br>
|
|
${params[1].marker} <span style="font-size:14px">${params[1].seriesName}:${params[0].data["作战录像"]}</span> <br>
|
|
|
|
</div>`;
|
|
return tip;
|
|
}
|
|
},
|
|
dataset: {
|
|
dimensions: ["日期", "赤金", "反向作战录像", "龙门币订单"],
|
|
source: ReportData.value
|
|
},
|
|
yAxis: {
|
|
type: "category",
|
|
axisPointer: {
|
|
type: "shadow"
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
formatter: function(params) {
|
|
return Math.abs(params);
|
|
},
|
|
scale: true
|
|
// 设置数据自动缩放，要不然数据多的话就堆一块了
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "赤金",
|
|
type: "bar",
|
|
color: "#f5744f",
|
|
position: "inside",
|
|
label: {
|
|
show: true,
|
|
formatter: function(params) {
|
|
if (params.value["龙门币订单"] === 0) {
|
|
return "";
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: "series"
|
|
}
|
|
},
|
|
{
|
|
name: "经验",
|
|
type: "bar",
|
|
stack: "Total",
|
|
color: "#f3e28f",
|
|
position: "inside",
|
|
label: {
|
|
show: true,
|
|
formatter: function(params) {
|
|
if (params.value["反向作战录像"] === 0) {
|
|
return "";
|
|
} else if (params.value["反向作战录像"] < 0) {
|
|
return -params.value["反向作战录像"];
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: "series"
|
|
}
|
|
},
|
|
{
|
|
name: "订单",
|
|
type: "bar",
|
|
stack: "Total",
|
|
color: "#64bfec",
|
|
label: {
|
|
show: true,
|
|
formatter: function(params) {
|
|
if (params.value["赤金"] === 0) {
|
|
return "";
|
|
} else if (params.value["赤金"] < 0) {
|
|
return -params.value["赤金"];
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: "series"
|
|
}
|
|
}
|
|
]
|
|
};
|
|
});
|
|
const option_lmb = computed(() => {
|
|
return {
|
|
title: [
|
|
{
|
|
text: "赤金贸易"
|
|
}
|
|
],
|
|
legend: {
|
|
data: ["赤金", "订单", "订单质量"],
|
|
selected: {
|
|
生产赤金: true,
|
|
龙门币收入: true
|
|
}
|
|
},
|
|
dataZoom: {
|
|
show: false,
|
|
type: "slider",
|
|
realtime: true,
|
|
startValue: ReportData.value.length - 7,
|
|
// 重点
|
|
// // 重点-dataX.length表示x轴数据长度
|
|
endValue: ReportData.value.length,
|
|
xAxisIndex: [0],
|
|
bottom: "10",
|
|
left: "30",
|
|
height: 10,
|
|
borderColor: "rgba(0,0,0,0)",
|
|
textStyle: {
|
|
color: "#05D5FF"
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: { show: false, readOnly: false },
|
|
magicType: { show: true, type: ["line", "bar"] },
|
|
restore: { show: true },
|
|
saveAsImage: {
|
|
show: true,
|
|
backgroundColor: "#FFFFFF"
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
crossStyle: {
|
|
color: "#999"
|
|
}
|
|
}
|
|
},
|
|
dataset: {
|
|
dimensions: ["日期", "赤金", "龙门币订单", "每单获取龙门币"],
|
|
source: ReportData.value
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 "],
|
|
symbolOffset: 10,
|
|
//箭头距离x轴末端距离
|
|
symbolSize: [35, 38]
|
|
//箭头的宽高
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value}"
|
|
}
|
|
},
|
|
{
|
|
type: "value",
|
|
axisLabel: {
|
|
formatter: "{value}"
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "赤金",
|
|
type: "bar",
|
|
yAxisIndex: 0,
|
|
color: "#f5744f",
|
|
tooltip: {
|
|
valueFormatter: function(value) {
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: "订单",
|
|
type: "bar",
|
|
yAxisIndex: 0,
|
|
color: "#64bfec",
|
|
tooltip: {
|
|
valueFormatter: function(value) {
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: "订单质量",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
tooltip: {
|
|
valueFormatter: function(value) {
|
|
return value;
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
});
|
|
const option_orundum = computed(() => {
|
|
return {
|
|
title: [
|
|
{
|
|
text: "合成玉"
|
|
}
|
|
],
|
|
legend: {
|
|
data: ["合成玉", "抽数"],
|
|
selected: {
|
|
合成玉: true,
|
|
抽数: false
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: { show: false, readOnly: false },
|
|
magicType: { show: true, type: ["line", "bar"] },
|
|
restore: { show: true },
|
|
saveAsImage: {
|
|
show: true,
|
|
backgroundColor: "#FFFFFF"
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
crossStyle: {
|
|
color: "#999"
|
|
}
|
|
}
|
|
},
|
|
dataset: {
|
|
dimensions: ["日期", "合成玉", "抽数"],
|
|
source: HalfMonthData.value
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
axisLine: {
|
|
show: true,
|
|
symbol: ["none", "path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 "],
|
|
symbolOffset: 10,
|
|
//箭头距离x轴末端距离
|
|
symbolSize: [35, 38]
|
|
//箭头的宽高
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value}"
|
|
}
|
|
},
|
|
{
|
|
type: "value",
|
|
axisLine: {
|
|
show: true
|
|
},
|
|
position: "right"
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: "line",
|
|
yAxisIndex: 0,
|
|
color: "#faf0b5",
|
|
tooltip: {
|
|
valueFormatter: function(value) {
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: "bar",
|
|
yAxisIndex: 1,
|
|
color: "#e70000",
|
|
tooltip: {
|
|
valueFormatter: function(value) {
|
|
return value;
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
});
|
|
return (_ctx, _cache) => {
|
|
const _component_help_text = __unplugin_components_0;
|
|
const _component_n_alert = __unplugin_components_1;
|
|
const _component_n_gi = __unplugin_components_2;
|
|
const _component_n_grid = __unplugin_components_3;
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
createBaseVNode("div", null, [
|
|
createBaseVNode("h1", _hoisted_1, [
|
|
_cache[1] || (_cache[1] = createTextVNode(" 基建报表 ")),
|
|
createVNode(_component_help_text, null, {
|
|
default: withCtx(() => _cache[0] || (_cache[0] = [
|
|
createBaseVNode("p", null, "若没有数据显示，请查看tmp文件夹中的report.csv文件", -1),
|
|
createBaseVNode("p", null, "若存在空数据删掉对应行或自行填补一个数据", -1),
|
|
createBaseVNode("p", null, "report.csv不存在建议先让mower看看你的基报", -1)
|
|
])),
|
|
_: 1
|
|
})
|
|
])
|
|
]),
|
|
unref(show_alert) ? (openBlock(), createBlock(_component_n_alert, {
|
|
key: 0,
|
|
title: "数据错误",
|
|
type: "error"
|
|
}, {
|
|
default: withCtx(() => _cache[2] || (_cache[2] = [
|
|
createBaseVNode("p", null, "若没有数据显示，请查看tmp文件夹中的report.csv文件", -1),
|
|
createBaseVNode("p", null, "若存在空数据删掉对应行或自行填补一个数据", -1),
|
|
createBaseVNode("p", null, "report.csv不存在建议先让mower看看你的基报", -1)
|
|
])),
|
|
_: 1
|
|
})) : createCommentVNode("", true),
|
|
createBaseVNode("div", null, [
|
|
createVNode(_component_n_grid, {
|
|
"x-gap": "12",
|
|
"y-gap": "12",
|
|
cols: "1 1000:2 ",
|
|
style: { "text-align": "center" },
|
|
autoresize: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(show_iron_chart) ? (openBlock(), createBlock(_component_n_gi, { key: 0 }, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("div", _hoisted_2, [
|
|
createVNode(unref(ECharts), {
|
|
class: "chart",
|
|
option: unref(option_manufactor)
|
|
}, null, 8, ["option"])
|
|
])
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("", true),
|
|
unref(show_iron_chart) ? (openBlock(), createBlock(_component_n_gi, { key: 1 }, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("div", _hoisted_3, [
|
|
createVNode(unref(ECharts), {
|
|
class: "chart",
|
|
option: unref(option_lmb)
|
|
}, null, 8, ["option"])
|
|
])
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("", true),
|
|
unref(show_orundum_chart) ? (openBlock(), createBlock(_component_n_gi, { key: 2 }, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("div", _hoisted_4, [
|
|
createVNode(unref(ECharts), {
|
|
class: "chart",
|
|
option: unref(option_orundum)
|
|
}, null, 8, ["option"])
|
|
])
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("", true)
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 64);
|
|
};
|
|
}
|
|
};
|
|
const report = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-291ce212"]]);
|
|
export {
|
|
report as default
|
|
};
|