quick-admin-vue3-core
Version:
以快（计算机执行效率、开发效率）为核心的后台管理系统开发模板
627 lines (626 loc) • 18.9 kB
JavaScript
import { defineComponent as z, ref as C, computed as B, createBlock as S, openBlock as n, reactive as $, resolveComponent as m, createElementBlock as f, createVNode as e, createElementVNode as o, withCtx as t, Fragment as A, renderList as w, createCommentVNode as R, toDisplayString as Y } from "vue";
import { n as u } from "./index-C0qRtkRj.js";
import { br as V, _ as x } from "./Chart.vue_vue_type_script_setup_true_lang-D42ckqgo.js";
import { _ as v } from "./ChartLine.vue_vue_type_script_setup_true_lang-BUIkbh_u.js";
import { _ as N } from "./ChartBar.vue_vue_type_script_setup_true_lang-B_hUELNo.js";
import { _ as O } from "./ChartPie.vue_vue_type_script_setup_true_lang-BhbIzByD.js";
import { _ as W } from "./platform-DsTwHxm6.js";
import { _ as T, a as j } from "./MultiCharts.vue_vue_type_script_setup_true_lang-D9H0hEEJ.js";
import D from "./Setting-V0z0YlwI.js";
import { _ as M } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const E = /* @__PURE__ */ z({
__name: "ChartRadar",
props: {
theme: {},
width: {},
height: {},
title: {},
data: { default: () => [
["type", "维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
["Allocated", 1e3, 2e3, 3e3, 4e3, 5e3, 6e3],
["Spending", 6e3, 5e3, 4e3, 3e3, 2e3, 1e3]
] },
option: { default: () => ({}) }
},
setup(h) {
const { merge: g } = W, _ = {
title: {
text: "雷达图示例"
// ...titleCfg,
},
legend: {
data: ["Allocated", "Spending"]
}
// radar: {
// // shape: 'circle',
// // 去掉max，不然会抛出警告：The ticks may be not readable when set min: 0, max: 7000 and alignTicks: true
// indicator: [
// { name: "维度1" }, // max: 7000
// { name: "维度2" }, // max: 7000
// { name: "维度3" }, // max: 7000
// { name: "维度4" }, // max: 7000
// { name: "维度5" }, // max: 7000
// { name: "维度6" }, // max: 7000
// ],
// },
// dataset: {
// source: [
// ["type", "维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
// ["Allocated", 1000, 2000, 3000, 4000, 5000, 6000],
// ["Spending", 6000, 5000, 4000, 3000, 2000, 1000],
// ],
// },
// series: [
// {
// type: "radar",
// // data: [
// // {
// // name: "Allocated",
// // value: [1000, 2000, 3000, 4000, 5000, 6000],
// // },
// // {
// // name: "Spending",
// // value: [6000, 5000, 4000, 3000, 2000, 1000],
// // },
// // ],
// },
// ],
}, y = h, r = C(null), s = B(() => {
const { option: p, data: d, title: i } = y;
return g(
{},
_,
{
...i && { title: { text: i, ...V } },
radar: {
// shape: 'circle',
// 去掉max，不然会抛出警告：The ticks may be not readable when set min: 0, max: 7000 and alignTicks: true
indicator: d[0].slice(1).map((b) => ({ name: b }))
},
dataset: {
source: d
},
series: [{ type: "radar" }]
},
p
);
});
return (p, d) => (n(), S(x, {
class: "chart-radar",
option: s.value,
ref_key: "chartRef",
ref: r
}, null, 8, ["option"]));
}
}), F = { class: "page" }, H = { class: "row f-sb-s" }, L = {
key: 0,
class: "notices all-hide-scroll"
}, P = { class: "f-1" }, q = { class: "q-line-1" }, G = { class: "row" }, I = { class: "row f-sb-s" }, U = { class: "row f-sb-s" }, J = /* @__PURE__ */ z({
name: "Home",
__name: "index",
setup(h) {
const _ = {
//通图图表
tttb: [
["product", "2015", "2016", "2017"],
["XX1", 43.3, 85.8, 93.7],
["XX2", 83.1, 73.4, 55.1],
["XX3", 86.4, 65.2, 82.5],
["XX4", 72.4, 53.9, 39.1]
],
//基础万能图
jcwnt: [],
//饼图
bt: [
["XX1", 120],
["XX2", 149],
["XX3", 172]
],
//自定义option
zdyopt: {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line"
}
]
},
//折线图
zxt: [
["product", "2015", "2016", "2017"],
["YY1", 43.3, 85.8, 93.7],
["YY2", 83.1, 73.4, 55.1],
["YY3", 86.4, 65.2, 82.5],
["YY4", 72.4, 53.9, 39.1]
],
//柱状图（多维度）
zztdwd: [
["product", "2015", "2016", "2017"],
["示例1", 43.3, 85.8, 93.7],
["示例2", 83.1, 73.4, 55.1],
["示例3", 86.4, 65.2, 82.5],
["示例4", 72.4, 53.9, 39.1]
],
//柱状图（多个）
zztdg: [
[
["name", "国内", "国外"],
["示例1", 30, 22],
["示例2", 14, 42],
["示例3", 18, 23]
// ["name", "国内"],
// ["建筑工程", 30],
// ["能源化工", 14],
// ["交通运输", 18],
],
[
["name", "国内", "国外"],
["示例1", 23, 62],
["示例2", 65, 88],
["示例3", 66, 48]
// ["name", "国内"],
// ["建筑工程", 23],
// ["能源化工", 65],
// ["交通运输", 66],
]
],
// 单例多图
dldt: [
{
type: "line",
title: "折线图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 4, 30],
["2019-01-02", 110, 21, 5, 30],
["2019-01-03", 120, 22, 6, 30],
["2019-01-04", 140, 23, 7, 30],
["2019-01-05", 150, 24, 8, 30],
["2019-01-06", 160, 25, 9, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "金额($)" },
series: { smooth: !0 }
},
{
type: "line",
title: "折线图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "%" },
series: { smooth: !0 }
},
{
type: "line",
title: "折线图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 4, 30],
["2019-01-02", 110, 21, 5, 30],
["2019-01-03", 120, 22, 6, 30],
["2019-01-04", 140, 23, 7, 30],
["2019-01-05", 150, 24, 8, 30],
["2019-01-06", 160, 25, 9, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "金额($)" },
series: { smooth: !0 }
},
{
type: "bar",
title: "柱状图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "数量" },
series: {
barWidth: 5,
itemStyle: {
borderRadius: [8, 8, 0, 0]
}
}
},
{
type: "bar",
title: "柱状图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "数量" },
series: {
barWidth: 5,
itemStyle: {
borderRadius: [8, 8, 0, 0]
}
}
},
{
type: "bar",
title: "柱状图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "数量" },
series: {
barWidth: 5,
itemStyle: {
borderRadius: [8, 8, 0, 0]
}
}
},
{
type: "pie",
title: "饼状图",
dataset: [
["type", "销售额"],
["销售额", 100],
["订单量", 110],
["客单价", 120],
["动销率", 150]
],
xAxis: { show: !1 },
yAxis: { show: !1 },
series: [{ radius: 70 }, { radius: [45, 70] }]
},
{
type: "pie",
title: "饼状图",
dataset: [
["type", "销售额"],
["销售额", 100],
["订单量", 110],
["客单价", 120],
["动销率", 150]
],
xAxis: { show: !1 },
yAxis: { show: !1 },
series: [{ radius: 70 }, { radius: [45, 70] }]
},
{
type: "pie",
title: "饼状图",
dataset: [
["type", "销售额"],
["销售额", 100],
["订单量", 110],
["客单价", 120],
["动销率", 150]
],
xAxis: { show: !1 },
yAxis: { show: !1 },
series: [{ radius: 70 }, { radius: [45, 70] }]
},
{
type: "line",
title: "折线图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "%" },
series: { smooth: !0 }
},
{
type: "bar",
title: "柱状图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "数量" },
series: {
barWidth: 10,
itemStyle: {
borderRadius: [8, 8, 0, 0]
}
}
},
{
type: "pie",
title: "饼状图",
dataset: [
["type", "销售额"],
["销售额", 100],
["订单量", 110],
["客单价", 120],
["动销率", 150]
],
xAxis: { show: !1 },
yAxis: { show: !1 },
series: [{ radius: 70 }, { radius: [45, 70] }]
}
]
}, y = [
{
label: "我的待办",
value: 1,
cols: [
{ prop: "follow", label: "关注" },
{ prop: "title", label: "标题" },
{ prop: "from_unit", label: "来文单位" },
{ prop: "accept_time", label: "接受时间" }
],
api: u
},
{
label: "我的待阅",
value: 2,
cols: [
{ prop: "follow", label: "关注1" },
{ prop: "title", label: "标题1" },
{ prop: "from_unit", label: "来文单位1" },
{ prop: "accept_time", label: "接受时间1" }
],
api: u
},
{
label: "我的已办",
value: 3,
cols: [
{ prop: "follow", label: "关注2" },
{ prop: "title", label: "标题2" },
{ prop: "from_unit", label: "来文单位2" },
{ prop: "accept_time", label: "接受时间2" }
],
api: u
},
{
label: "我发起的",
value: 4,
cols: [
{ prop: "follow", label: "关注3" },
{ prop: "title", label: "标题3" },
{ prop: "from_unit", label: "来文单位3" },
{ prop: "accept_time", label: "接受时间3" }
],
api: u
}
], r = C(1), s = $({
tttb: [],
jcwnt: [],
bt: [],
zdyopt: [],
zxt: [],
zztdwd: [],
zztdg: []
});
function p() {
setTimeout(() => {
Object.assign(s, _);
}, 100);
}
return p(), (d, i) => {
const b = m("BaseCrud"), X = m("el-tab-pane"), k = m("el-tabs"), a = m("BaseSection");
return n(), f("div", F, [
e(D),
o("div", H, [
e(a, {
gap: !1,
class: "section f-2",
title: "待办事项",
badge: "10"
}, {
default: t(() => [
e(k, {
modelValue: r.value,
"onUpdate:modelValue": i[0] || (i[0] = (l) => r.value = l),
onTabClick: i[1] || (i[1] = (l) => r.value = l.paneName),
type: "border-card"
}, {
default: t(() => [
(n(), f(A, null, w(y, (l, c) => e(X, {
label: l.label,
name: l.value,
key: c
}, {
default: t(() => [
r.value === l.value ? (n(), S(b, {
key: 0,
cols: l.cols,
fetch: l.api,
tableAttrs: { size: "small", maxHeight: 200 },
pageAttrs: {
size: "small",
pageSizes: [5, 10, 15, 20, 25]
},
showSetBtn: !1,
pagination: { currPage: 1, pageSize: 5 }
}, null, 8, ["cols", "fetch"])) : R("", !0)
]),
_: 2
}, 1032, ["label", "name"])), 64))
]),
_: 1
}, 8, ["modelValue"])
]),
_: 1
}),
e(a, {
gap: !1,
class: "section f-1",
title: "消息通知",
badge: "120"
}, {
default: t(() => [
(n(), f("ul", L, [
(n(), f(A, null, w(20, (l, c) => o("li", {
class: "item f-sb-c",
key: c
}, [
o("div", P, [
o("span", q, "这是第" + Y(c + 1) + "条消息", 1)
]),
i[2] || (i[2] = o("time", { class: "time f-0 ml-half" }, "2023-06-19", -1))
])), 64))
]))
]),
_: 1
})
]),
o("div", G, [
e(a, {
gap: !1,
class: "section f-1",
title: "通图图表 - 折线图"
}, {
default: t(() => [
e(v, {
data: s.tttb
}, null, 8, ["data"])
]),
_: 1
})
]),
o("div", I, [
e(a, {
gap: !1,
class: "section f-1",
title: "基础万能图 - Chart(带默认配置)"
}, {
default: t(() => [
e(x)
]),
_: 1
}),
e(a, {
gap: !1,
class: "section f-1",
title: "饼图 - ChartPie"
}, {
default: t(() => [
e(O, {
data: s.bt
}, null, 8, ["data"])
]),
_: 1
}),
e(a, {
gap: !1,
class: "section f-1",
title: "雷达图 - ChartRadar（后续完善）"
}, {
default: t(() => [
e(E)
]),
_: 1
})
]),
o("div", U, [
e(a, {
gap: !1,
class: "section f-1",
title: "自定义option - Chart"
}, {
default: t(() => [
e(x, {
option: s.zdyopt
}, null, 8, ["option"])
]),
_: 1
}),
e(a, {
gap: !1,
class: "section f-1",
title: "折线图 - ChartLine"
}, {
default: t(() => [
e(v, {
data: s.zxt
}, null, 8, ["data"])
]),
_: 1
}),
e(a, {
gap: !1,
class: "section f-1",
title: "柱状图 - ChartBar（多维度）"
}, {
default: t(() => [
e(N, {
data: s.zztdwd
}, null, 8, ["data"])
]),
_: 1
}),
e(a, {
gap: !1,
class: "section f-1",
title: "柱状图 - ChartBars（多个）"
}, {
default: t(() => [
e(T, {
datas: s.zztdg
}, null, 8, ["datas"])
]),
_: 1
})
]),
e(a, {
gap: !1,
class: "section row f-1",
title: "单例多图 - MultiCharts（后续完善）"
}, {
default: t(() => [
e(j, {
data: s.dldt,
layout: "4x3",
log: "单例多图"
}, null, 8, ["data"])
]),
_: 1
})
]);
};
}
}), re = /* @__PURE__ */ M(J, [["__scopeId", "data-v-858c608f"]]);
export {
re as default
};