@ganwei-web/gw-base-components-plus 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/echartList/barEchart/dist/index.es.js +152 -0
- package/echartList/barEchart/dist/index.umd.js +1 -0
- package/echartList/barEchart/dist/style.css +1 -0
- package/echartList/curve/dist/index.es.js +217 -0
- package/echartList/curve/dist/index.umd.js +1 -0
- package/echartList/curve/dist/style.css +1 -0
- package/echartList/historyEchart/dist/index.es.js +292 -0
- package/echartList/historyEchart/dist/index.umd.js +10 -0
- package/echartList/historyEchart/dist/style.css +1 -0
- package/echartList/solid-bar/dist/index.es.js +290 -0
- package/echartList/solid-bar/dist/index.umd.js +1 -0
- package/echartList/solid-bar/dist/style.css +1 -0
- package/echartList/solid-circle/dist/index.es.js +332 -0
- package/echartList/solid-circle/dist/index.umd.js +6 -0
- package/echartList/solid-circle/dist/style.css +1 -0
- package/echartList/solid-pie/dist/index.es.js +336 -0
- package/echartList/solid-pie/dist/index.umd.js +6 -0
- package/echartList/solid-pie/dist/style.css +1 -0
- package/element-plus-adapter/dist/ElementPlusAdapter.cjs +902 -0
- package/element-plus-adapter/dist/ElementPlusAdapter.cjs.map +1 -0
- package/element-plus-adapter/dist/ElementPlusAdapter.css +789 -0
- package/element-plus-adapter/dist/ElementPlusAdapter.iife.js +903 -0
- package/element-plus-adapter/dist/ElementPlusAdapter.iife.js.map +1 -0
- package/element-plus-adapter/dist/ElementPlusAdapter.js +902 -0
- package/element-plus-adapter/dist/ElementPlusAdapter.js.map +1 -0
- package/equip-list-vue2/dist/index.es.js +1275 -0
- package/equip-list-vue2/dist/index.umd.js +1 -0
- package/equip-list-vue2/dist/style.css +1 -0
- package/equip-list-vue3/dist/index.es.js +1510 -0
- package/equip-list-vue3/dist/index.umd.js +1 -0
- package/equip-list-vue3/dist/style.css +1 -0
- package/equip-select-vue2/dist/index.es.js +231 -0
- package/equip-select-vue2/dist/index.umd.js +1 -0
- package/equip-select-vue2/dist/style.css +1 -0
- package/equip-select-vue3/dist/index.es.js +231 -0
- package/equip-select-vue3/dist/index.umd.js +1 -0
- package/equip-select-vue3/dist/style.css +1 -0
- package/equipProcessing/dist/index.es.js +203 -0
- package/equipProcessing/dist/index.umd.js +1 -0
- package/loadMore/dist/index.es.js +12 -0
- package/loadMore/dist/index.umd.js +1 -0
- package/loading/dist/index.es.js +25 -0
- package/loading/dist/index.umd.js +1 -0
- package/loading/dist/style.css +1 -0
- package/package.json +11 -0
- package/player/dist/index.es.js +1080 -0
- package/player/dist/index.umd.js +14 -0
- package/player/dist/style.css +1 -0
- package/selectV2/dist/index.es.js +190 -0
- package/selectV2/dist/index.umd.js +1 -0
- package/selectV2/dist/style.css +1 -0
- package/showPassword/dist/index.es.js +72 -0
- package/showPassword/dist/index.umd.js +1 -0
- package/table/dist/index.es.js +182 -0
- package/table/dist/index.umd.js +1 -0
- package/table/dist/style.css +1 -0
- package/widthSetting/dist/index.es.js +113 -0
- package/widthSetting/dist/index.umd.js +1 -0
- package/widthSetting/dist/style.css +1 -0
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { createElementBlock as l, createElementVNode as d, openBlock as h, resolveDirective as n, withDirectives as c } from "vue";
|
|
2
|
+
|
|
3
|
+
import "./style.css";
|
|
4
|
+
function x(t, a) {
|
|
5
|
+
let e;
|
|
6
|
+
return function(r) {
|
|
7
|
+
let i = this, o = arguments;
|
|
8
|
+
e && clearTimeout(e), e = setTimeout(() => {
|
|
9
|
+
e = null, t.call(i, o);
|
|
10
|
+
}, a);
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
const f = {
|
|
14
|
+
props: {
|
|
15
|
+
status: {
|
|
16
|
+
type: Boolean,
|
|
17
|
+
default: !0
|
|
18
|
+
},
|
|
19
|
+
echartData: {
|
|
20
|
+
type: Object,
|
|
21
|
+
default: () => {
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
yUnit: {
|
|
25
|
+
type: String,
|
|
26
|
+
default: "℃"
|
|
27
|
+
},
|
|
28
|
+
colorList: {
|
|
29
|
+
type: Array,
|
|
30
|
+
default: () => ["#00f0ff", "#008af5"]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
watch: {
|
|
34
|
+
echartData: function(t) {
|
|
35
|
+
this.echartData.length > 0 && (this.setEchartData(), this.drawEchart());
|
|
36
|
+
},
|
|
37
|
+
status: function(t) {
|
|
38
|
+
this.loading = t, this.setEchartData(), this.drawEchart();
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
data() {
|
|
42
|
+
return {
|
|
43
|
+
loading: !0,
|
|
44
|
+
echartId: -1,
|
|
45
|
+
xData: [],
|
|
46
|
+
echart: "",
|
|
47
|
+
reflesh: !0
|
|
48
|
+
};
|
|
49
|
+
},
|
|
50
|
+
created() {
|
|
51
|
+
this.echartId = this.generateUUID();
|
|
52
|
+
},
|
|
53
|
+
mounted() {
|
|
54
|
+
window.addEventListener("resize", x(() => {
|
|
55
|
+
this.echart.resize();
|
|
56
|
+
}, 500)), this.setEchartData(), this.drawEchart(), this.loading = this.status;
|
|
57
|
+
},
|
|
58
|
+
methods: {
|
|
59
|
+
fontSize(t, a) {
|
|
60
|
+
let e = document.getElementById(a).clientWidth;
|
|
61
|
+
if (!e) { return; }
|
|
62
|
+
let r = e / 400;
|
|
63
|
+
return t * r;
|
|
64
|
+
},
|
|
65
|
+
generateUUID() {
|
|
66
|
+
let t = (/* @__PURE__ */ new Date()).getTime();
|
|
67
|
+
return window.performance && typeof window.performance.now == "function" && (t += performance.now()), "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
|
|
68
|
+
let r = (t + Math.random() * 16) % 16 | 0;
|
|
69
|
+
return t = Math.floor(t / 16), (e === "x" ? r : r & 3 | 8).toString(16);
|
|
70
|
+
});
|
|
71
|
+
},
|
|
72
|
+
setEchartData() {
|
|
73
|
+
this.echartData.series.forEach((t, a) => {
|
|
74
|
+
t.type = "bar", t.barWidth = "50%", t.label = {
|
|
75
|
+
show: !0,
|
|
76
|
+
position: "top",
|
|
77
|
+
color: this.colorList[0]
|
|
78
|
+
};
|
|
79
|
+
});
|
|
80
|
+
},
|
|
81
|
+
drawEchart() {
|
|
82
|
+
let t = {
|
|
83
|
+
color: this.colorList,
|
|
84
|
+
tooltip: {
|
|
85
|
+
trigger: "axis",
|
|
86
|
+
axisPointer: {
|
|
87
|
+
type: "shadow"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
legend: {
|
|
91
|
+
show: !1
|
|
92
|
+
},
|
|
93
|
+
xAxis: {
|
|
94
|
+
type: "category",
|
|
95
|
+
data: this.echartData.xData,
|
|
96
|
+
axisLabel: {
|
|
97
|
+
color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2",
|
|
98
|
+
fontSize: this.fontSize(12, this.echartId)
|
|
99
|
+
},
|
|
100
|
+
axisLine: {
|
|
101
|
+
lineStyle: {
|
|
102
|
+
color: "#8c9097"
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
axisTick: {
|
|
106
|
+
show: !1
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
yAxis: {
|
|
110
|
+
name: "(" + this.yUnit + ")",
|
|
111
|
+
nameTextStyle: {
|
|
112
|
+
color: "#999fa8",
|
|
113
|
+
padding: [0, 0, 5, -30]
|
|
114
|
+
},
|
|
115
|
+
axisLabel: {
|
|
116
|
+
fontSize: this.fontSize(12, this.echartId)
|
|
117
|
+
},
|
|
118
|
+
axisLine: { show: !1 }
|
|
119
|
+
},
|
|
120
|
+
series: this.echartData.series,
|
|
121
|
+
grid: {
|
|
122
|
+
x: "8%",
|
|
123
|
+
y: "20%",
|
|
124
|
+
x2: "4%",
|
|
125
|
+
y2: "15%"
|
|
126
|
+
},
|
|
127
|
+
backgroundColor: "transparent"
|
|
128
|
+
};
|
|
129
|
+
this.echart = this.$echart.init(document.getElementById(this.echartId)), this.echart.setOption(t);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
const u = (t, a) => {
|
|
134
|
+
const e = t.__vccOpts || t;
|
|
135
|
+
for (const [r, i] of a) { e[r] = i; }
|
|
136
|
+
return e;
|
|
137
|
+
}, p = f, g = ["id"];
|
|
138
|
+
function w(t, a, e, r, i, o) {
|
|
139
|
+
const s = n("loading");
|
|
140
|
+
return c((h(), l("div", {
|
|
141
|
+
class: "barEchart",
|
|
142
|
+
key: t.reflesh
|
|
143
|
+
}, [
|
|
144
|
+
d("div", { id: t.echartId }, null, 8, g)
|
|
145
|
+
])), [
|
|
146
|
+
[s, t.loading]
|
|
147
|
+
]);
|
|
148
|
+
}
|
|
149
|
+
const _ = /* @__PURE__ */ u(p, [["render", w], ["__scopeId", "data-v-2ef76664"]]);
|
|
150
|
+
export {
|
|
151
|
+
_ as default
|
|
152
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(a, n){ typeof exports == "object" && typeof module < "u" ? module.exports = n(require("vue")) : typeof define == "function" && define.amd ? define(["vue"], n) : (a = typeof globalThis < "u" ? globalThis : a || self, a.index = n(a.Vue)) })(this, function(a){ "use strict";function n(t, i){ let e;return function(r){ let o = this, s = arguments;e && clearTimeout(e), e = setTimeout(()=>{ e = null, t.call(o, s) }, i) } }const c = {props: {status: {type: Boolean, default: !0}, echartData: {type: Object, default: ()=>{}}, yUnit: {type: String, default: "℃"}, colorList: {type: Array, default: ()=>["#00f0ff", "#008af5"]}}, watch: {echartData: function(t){ this.echartData.length > 0 && (this.setEchartData(), this.drawEchart()) }, status: function(t){ this.loading = t, this.setEchartData(), this.drawEchart() }}, data(){ return{loading: !0, echartId: -1, xData: [], echart: "", reflesh: !0} }, created(){ this.echartId = this.generateUUID() }, mounted(){ window.addEventListener("resize", n(()=>{ this.echart.resize() }, 500)), this.setEchartData(), this.drawEchart(), this.loading = this.status }, methods: {fontSize(t, i){ let e = document.getElementById(i).clientWidth;if(!e){ return; }let r = e / 400;return t * r }, generateUUID(){ let t = new Date().getTime();return window.performance && typeof window.performance.now == "function" && (t += performance.now()), "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e){ let r = (t + Math.random() * 16) % 16 | 0;return t = Math.floor(t / 16), (e === "x" ? r : r & 3 | 8).toString(16) }) }, setEchartData(){ this.echartData.series.forEach((t, i)=>{ t.type = "bar", t.barWidth = "50%", t.label = {show: !0, position: "top", color: this.colorList[0]} }) }, drawEchart(){ let t = {color: this.colorList, tooltip: {trigger: "axis", axisPointer: {type: "shadow"}}, legend: {show: !1}, xAxis: {type: "category", data: this.echartData.xData, axisLabel: {color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2", fontSize: this.fontSize(12, this.echartId)}, axisLine: {lineStyle: {color: "#8c9097"}}, axisTick: {show: !1}}, yAxis: {name: "(" + this.yUnit + ")", nameTextStyle: {color: "#999fa8", padding: [0, 0, 5, -30]}, axisLabel: {fontSize: this.fontSize(12, this.echartId)}, axisLine: {show: !1}}, series: this.echartData.series, grid: {x: "8%", y: "20%", x2: "4%", y2: "15%"}, backgroundColor: "transparent"};this.echart = this.$echart.init(document.getElementById(this.echartId)), this.echart.setOption(t) }}}, u = "", h = (t, i)=>{ const e = t.__vccOpts || t;for(const[r, o]of i){ e[r] = o; }return e }, d = c, l = ["id"];function f(t, i, e, r, o, s){ const x = a.resolveDirective("loading");return a.withDirectives((a.openBlock(), a.createElementBlock("div", {class: "barEchart", key: t.reflesh}, [a.createElementVNode("div", {id: t.echartId}, null, 8, l)])), [[x, t.loading]]) }return h(d, [["render", f], ["__scopeId", "data-v-2ef76664"]]) });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.barEchart[data-v-2ef76664]{width:100%;color:#fff;height:100%;display:flex;justify-content:center;align-items:center}.barEchart div[data-v-2ef76664]{height:100%;width:100%}
|
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
import { createElementBlock as n, createElementVNode as s, normalizeStyle as h, openBlock as l, toDisplayString as c } from "vue";
|
|
2
|
+
|
|
3
|
+
import "./style.css";
|
|
4
|
+
const d = (t, i) => {
|
|
5
|
+
const e = t.__vccOpts || t;
|
|
6
|
+
for (const [o, a] of i) { e[o] = a; }
|
|
7
|
+
return e;
|
|
8
|
+
}, y = {
|
|
9
|
+
props: {
|
|
10
|
+
name: {
|
|
11
|
+
type: String,
|
|
12
|
+
default: ""
|
|
13
|
+
},
|
|
14
|
+
realTime: {
|
|
15
|
+
type: Boolean,
|
|
16
|
+
default: !1
|
|
17
|
+
},
|
|
18
|
+
xData: {
|
|
19
|
+
type: Array,
|
|
20
|
+
default: () => []
|
|
21
|
+
},
|
|
22
|
+
yData: {
|
|
23
|
+
type: Array,
|
|
24
|
+
default: () => []
|
|
25
|
+
},
|
|
26
|
+
unit: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: ""
|
|
29
|
+
},
|
|
30
|
+
width: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: "100%"
|
|
33
|
+
},
|
|
34
|
+
height: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: "100%"
|
|
37
|
+
},
|
|
38
|
+
showLegend: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: !1
|
|
41
|
+
},
|
|
42
|
+
layoutOptions: {
|
|
43
|
+
type: Object
|
|
44
|
+
},
|
|
45
|
+
seriesOptions: {
|
|
46
|
+
type: Array,
|
|
47
|
+
default: () => []
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
computed: {
|
|
51
|
+
styleObject() {
|
|
52
|
+
return {
|
|
53
|
+
width: this.width,
|
|
54
|
+
height: this.height
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
watch: {
|
|
59
|
+
xData(t) {
|
|
60
|
+
this.option.xAxis.data = t, this.myChart.setOption(this.option);
|
|
61
|
+
},
|
|
62
|
+
yData(t) {
|
|
63
|
+
t.forEach((i, e) => {
|
|
64
|
+
let o = Object.assign({}, this.seriesBasic);
|
|
65
|
+
o.data = i, this.option.series[e].data = i;
|
|
66
|
+
}), this.myChart.setOption(this.option);
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
data() {
|
|
70
|
+
return {
|
|
71
|
+
echartId: "",
|
|
72
|
+
myChart: null,
|
|
73
|
+
option: {
|
|
74
|
+
color: ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],
|
|
75
|
+
grid: {
|
|
76
|
+
left: "30px",
|
|
77
|
+
top: "10%",
|
|
78
|
+
right: "55px",
|
|
79
|
+
bottom: "11%",
|
|
80
|
+
containLabel: !0,
|
|
81
|
+
color: "red"
|
|
82
|
+
},
|
|
83
|
+
tooltip: {
|
|
84
|
+
style: {
|
|
85
|
+
color: "red"
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
xAxis: {
|
|
89
|
+
boundaryGap: !1,
|
|
90
|
+
splitLine: {
|
|
91
|
+
show: !1
|
|
92
|
+
},
|
|
93
|
+
axisLine: {
|
|
94
|
+
lineStyle: {
|
|
95
|
+
color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#e6e6e6" : "#999fa8",
|
|
96
|
+
width: 1
|
|
97
|
+
// 这里是为了突出显示加上的
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
axisLabel: {
|
|
101
|
+
margin: 12,
|
|
102
|
+
textStyle: {
|
|
103
|
+
color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2",
|
|
104
|
+
fontSize: "13"
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
labels: {
|
|
108
|
+
style: {
|
|
109
|
+
color: "#d3d8e2"
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
style: {
|
|
113
|
+
color: "#d3d8e2"
|
|
114
|
+
},
|
|
115
|
+
data: [1, 2, 3, 4, 5, 6]
|
|
116
|
+
},
|
|
117
|
+
yAxis: {
|
|
118
|
+
gridLineColor: "#3b4357",
|
|
119
|
+
gridLineWidth: 1,
|
|
120
|
+
type: "value",
|
|
121
|
+
axisLine: {
|
|
122
|
+
show: !1
|
|
123
|
+
},
|
|
124
|
+
axisTick: {
|
|
125
|
+
show: !1
|
|
126
|
+
},
|
|
127
|
+
axisLabel: {
|
|
128
|
+
margin: 12,
|
|
129
|
+
textStyle: {
|
|
130
|
+
color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2",
|
|
131
|
+
fontSize: "13"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
style: {
|
|
135
|
+
color: "#d3d8e2",
|
|
136
|
+
fontWeight: "bold",
|
|
137
|
+
fontSize: "12px",
|
|
138
|
+
fontFamily: "Trebuchet MS, Verdana, sans-serif"
|
|
139
|
+
},
|
|
140
|
+
title: {
|
|
141
|
+
style: {
|
|
142
|
+
color: "#d3d8e2",
|
|
143
|
+
fontWeight: "bold",
|
|
144
|
+
fontSize: "12px",
|
|
145
|
+
fontFamily: "Trebuchet MS, Verdana, sans-serif"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
labels: {
|
|
149
|
+
style: {
|
|
150
|
+
color: "#d3d8e2"
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
legend: {
|
|
155
|
+
orient: "horizontal",
|
|
156
|
+
textStyle: {
|
|
157
|
+
color: "#A1E2FF"
|
|
158
|
+
},
|
|
159
|
+
show: this.showLegend,
|
|
160
|
+
icon: "circle"
|
|
161
|
+
},
|
|
162
|
+
series: []
|
|
163
|
+
},
|
|
164
|
+
seriesBasic: {
|
|
165
|
+
type: "line",
|
|
166
|
+
stack: "Total",
|
|
167
|
+
emphasis: {
|
|
168
|
+
lineStyle: {
|
|
169
|
+
width: 2
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
smooth: !0,
|
|
173
|
+
sampling: "average",
|
|
174
|
+
lineStyle: {
|
|
175
|
+
width: 2
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
},
|
|
180
|
+
created() {
|
|
181
|
+
this.echartId = this.myUtils.generateUUID();
|
|
182
|
+
},
|
|
183
|
+
mounted() {
|
|
184
|
+
this.drawEchart();
|
|
185
|
+
},
|
|
186
|
+
methods: {
|
|
187
|
+
drawEchart() {
|
|
188
|
+
let t = document.getElementById(this.echartId);
|
|
189
|
+
this.myChart = this.$echart.init(t), this.option = Object.assign({}, this.option, this.layoutOptions), this.yData.forEach((i, e) => {
|
|
190
|
+
let o = this.seriesOptions[e] ? this.seriesOptions[e] : {}, a = this.merge(Object.assign({}, this.seriesBasic), o);
|
|
191
|
+
a.data = i, this.option.series.push(a);
|
|
192
|
+
}), this.myChart.setOption(this.option);
|
|
193
|
+
},
|
|
194
|
+
merge(t, i) {
|
|
195
|
+
if (typeof i == "object" && !Array.isArray(i)) {
|
|
196
|
+
for (let e of Object.keys(i)) { !t[e] || typeof t[e] != "object" || Array.isArray(i[e]) ? t[e] = i[e] : this.merge(t[e], i[e]); }
|
|
197
|
+
}
|
|
198
|
+
return t;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}, p = { class: "name" }, g = ["id"];
|
|
202
|
+
function m(t, i, e, o, a, r) {
|
|
203
|
+
return l(), n("div", {
|
|
204
|
+
class: "solidChart",
|
|
205
|
+
style: h([r.styleObject])
|
|
206
|
+
}, [
|
|
207
|
+
s("div", p, c(e.name), 1),
|
|
208
|
+
s("div", {
|
|
209
|
+
class: "chartBox",
|
|
210
|
+
id: a.echartId
|
|
211
|
+
}, null, 8, g)
|
|
212
|
+
], 4);
|
|
213
|
+
}
|
|
214
|
+
const w = /* @__PURE__ */ d(y, [["render", m], ["__scopeId", "data-v-806b797c"]]);
|
|
215
|
+
export {
|
|
216
|
+
w as default
|
|
217
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(o, r){ typeof exports == "object" && typeof module < "u" ? module.exports = r(require("vue")) : typeof define == "function" && define.amd ? define(["vue"], r) : (o = typeof globalThis < "u" ? globalThis : o || self, o.index = r(o.Vue)) })(this, function(o){ "use strict";const r = "", n = (t, i)=>{ const e = t.__vccOpts || t;for(const[s, a]of i){ e[s] = a; }return e }, l = {props: {name: {type: String, default: ""}, realTime: {type: Boolean, default: !1}, xData: {type: Array, default: ()=>[]}, yData: {type: Array, default: ()=>[]}, unit: {type: String, default: ""}, width: {type: String, default: "100%"}, height: {type: String, default: "100%"}, showLegend: {type: Boolean, default: !1}, layoutOptions: {type: Object}, seriesOptions: {type: Array, default: ()=>[]}}, computed: {styleObject(){ return{width: this.width, height: this.height} }}, watch: {xData(t){ this.option.xAxis.data = t, this.myChart.setOption(this.option) }, yData(t){ t.forEach((i, e)=>{ let s = Object.assign({}, this.seriesBasic);s.data = i, this.option.series[e].data = i }), this.myChart.setOption(this.option) }}, data(){ return{echartId: "", myChart: null, option: {color: ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"], grid: {left: "30px", top: "10%", right: "55px", bottom: "11%", containLabel: !0, color: "red"}, tooltip: {style: {color: "red"}}, xAxis: {boundaryGap: !1, splitLine: {show: !1}, axisLine: {lineStyle: {color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#e6e6e6" : "#999fa8", width: 1}}, axisLabel: {margin: 12, textStyle: {color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2", fontSize: "13"}}, labels: {style: {color: "#d3d8e2"}}, style: {color: "#d3d8e2"}, data: [1, 2, 3, 4, 5, 6]}, yAxis: {gridLineColor: "#3b4357", gridLineWidth: 1, type: "value", axisLine: {show: !1}, axisTick: {show: !1}, axisLabel: {margin: 12, textStyle: {color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2", fontSize: "13"}}, style: {color: "#d3d8e2", fontWeight: "bold", fontSize: "12px", fontFamily: "Trebuchet MS, Verdana, sans-serif"}, title: {style: {color: "#d3d8e2", fontWeight: "bold", fontSize: "12px", fontFamily: "Trebuchet MS, Verdana, sans-serif"}}, labels: {style: {color: "#d3d8e2"}}}, legend: {orient: "horizontal", textStyle: {color: "#A1E2FF"}, show: this.showLegend, icon: "circle"}, series: []}, seriesBasic: {type: "line", stack: "Total", emphasis: {lineStyle: {width: 2}}, smooth: !0, sampling: "average", lineStyle: {width: 2}}} }, created(){ this.echartId = this.myUtils.generateUUID() }, mounted(){ this.drawEchart() }, methods: {drawEchart(){ let t = document.getElementById(this.echartId);this.myChart = this.$echart.init(t), this.option = Object.assign({}, this.option, this.layoutOptions), this.yData.forEach((i, e)=>{ let s = this.seriesOptions[e] ? this.seriesOptions[e] : {}, a = this.merge(Object.assign({}, this.seriesBasic), s);a.data = i, this.option.series.push(a) }), this.myChart.setOption(this.option) }, merge(t, i){ if(typeof i == "object" && !Array.isArray(i)){ for(let e of Object.keys(i)){ !t[e] || typeof t[e] != "object" || Array.isArray(i[e]) ? t[e] = i[e] : this.merge(t[e], i[e]); } }return t }}}, d = {class: "name"}, c = ["id"];function h(t, i, e, s, a, y){ return o.openBlock(), o.createElementBlock("div", {class: "solidChart", style: o.normalizeStyle([y.styleObject])}, [o.createElementVNode("div", d, o.toDisplayString(e.name), 1), o.createElementVNode("div", {class: "chartBox", id: a.echartId}, null, 8, c)], 4) }return n(l, [["render", h], ["__scopeId", "data-v-806b797c"]]) });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.solidChart[data-v-806b797c]{color:#fff}.solidChart .name[data-v-806b797c]{height:40px;font-size:18px}.solidChart .chartBox[data-v-806b797c]{width:100%;height:calc(100% - 40px)}.solidChart .chartBox div[data-v-806b797c],.solidChart .chartBox canvas[data-v-806b797c]{width:100%;height:100%!important}
|
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
import { createCommentVNode as s, createElementBlock as l, openBlock as i } from "vue";
|
|
2
|
+
|
|
3
|
+
import "./style.css";
|
|
4
|
+
function d(e, o) {
|
|
5
|
+
let t;
|
|
6
|
+
return function(a) {
|
|
7
|
+
let r = this, n = arguments;
|
|
8
|
+
t && clearTimeout(t), t = setTimeout(() => {
|
|
9
|
+
t = null, e.call(r, n);
|
|
10
|
+
}, o);
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
const h = {
|
|
14
|
+
props: {
|
|
15
|
+
historyTime: {
|
|
16
|
+
type: Array,
|
|
17
|
+
default: () => []
|
|
18
|
+
},
|
|
19
|
+
historyValue: {
|
|
20
|
+
type: Array,
|
|
21
|
+
default: () => []
|
|
22
|
+
},
|
|
23
|
+
status: {
|
|
24
|
+
type: Boolean,
|
|
25
|
+
default: !0
|
|
26
|
+
},
|
|
27
|
+
reflesh: {
|
|
28
|
+
type: Boolean,
|
|
29
|
+
default: !0
|
|
30
|
+
},
|
|
31
|
+
refleshExtream: {
|
|
32
|
+
type: Function
|
|
33
|
+
},
|
|
34
|
+
resize: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
default: !1
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
watch: {
|
|
40
|
+
status: function(e) {
|
|
41
|
+
this.historyValue.length > 0 && this.onInquire();
|
|
42
|
+
},
|
|
43
|
+
reflesh: function(e) {
|
|
44
|
+
console.log(e), this.onInquire();
|
|
45
|
+
},
|
|
46
|
+
resize() {
|
|
47
|
+
this.echart && this.echart.resize();
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
data() {
|
|
51
|
+
return {
|
|
52
|
+
echart: null,
|
|
53
|
+
echartId: "",
|
|
54
|
+
zoomLock: !1
|
|
55
|
+
// reflesh: true
|
|
56
|
+
};
|
|
57
|
+
},
|
|
58
|
+
created() {
|
|
59
|
+
this.echartId = this.generateUUID();
|
|
60
|
+
},
|
|
61
|
+
destroyed() {
|
|
62
|
+
window.removeEventListener("resize", this.echart.resize());
|
|
63
|
+
},
|
|
64
|
+
mounted() {
|
|
65
|
+
window.addEventListener("resize", d(() => {
|
|
66
|
+
this.echart && this.echart.resize();
|
|
67
|
+
}, 500)), this.onInquire();
|
|
68
|
+
},
|
|
69
|
+
methods: {
|
|
70
|
+
generateUUID() {
|
|
71
|
+
let e = (/* @__PURE__ */ new Date()).getTime();
|
|
72
|
+
return window.performance && typeof window.performance.now == "function" && (e += performance.now()), "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
|
|
73
|
+
let a = (e + Math.random() * 16) % 16 | 0;
|
|
74
|
+
return e = Math.floor(e / 16), (t === "x" ? a : a & 3 | 8).toString(16);
|
|
75
|
+
});
|
|
76
|
+
},
|
|
77
|
+
// 历史曲线
|
|
78
|
+
onInquire() {
|
|
79
|
+
this.historyValue.length > 0 && setTimeout(() => {
|
|
80
|
+
this.echart = this.$echart.init(
|
|
81
|
+
document.getElementById(this.echartId),
|
|
82
|
+
"light"
|
|
83
|
+
);
|
|
84
|
+
let e = {
|
|
85
|
+
grid: {
|
|
86
|
+
left: "30px",
|
|
87
|
+
top: "10%",
|
|
88
|
+
right: "55px",
|
|
89
|
+
bottom: "14%",
|
|
90
|
+
containLabel: !0,
|
|
91
|
+
color: "red"
|
|
92
|
+
},
|
|
93
|
+
tooltip: {
|
|
94
|
+
style: {
|
|
95
|
+
color: "red"
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
xAxis: {
|
|
99
|
+
type: "category",
|
|
100
|
+
splitLine: {
|
|
101
|
+
show: !1
|
|
102
|
+
},
|
|
103
|
+
axisLine: {
|
|
104
|
+
lineStyle: {
|
|
105
|
+
color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#e6e6e6" : "#999fa8",
|
|
106
|
+
width: 1
|
|
107
|
+
// 这里是为了突出显示加上的
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
axisLabel: {
|
|
111
|
+
margin: 12,
|
|
112
|
+
textStyle: {
|
|
113
|
+
color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2",
|
|
114
|
+
fontSize: "13"
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
labels: {
|
|
118
|
+
style: {
|
|
119
|
+
color: "#d3d8e2"
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
style: {
|
|
123
|
+
color: "#d3d8e2"
|
|
124
|
+
},
|
|
125
|
+
data: this.historyTime
|
|
126
|
+
},
|
|
127
|
+
yAxis: {
|
|
128
|
+
gridLineColor: "#3b4357",
|
|
129
|
+
gridLineWidth: 1,
|
|
130
|
+
type: "value",
|
|
131
|
+
axisLine: {
|
|
132
|
+
show: !1
|
|
133
|
+
},
|
|
134
|
+
axisTick: {
|
|
135
|
+
show: !1
|
|
136
|
+
},
|
|
137
|
+
axisLabel: {
|
|
138
|
+
margin: 12,
|
|
139
|
+
textStyle: {
|
|
140
|
+
color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2",
|
|
141
|
+
fontSize: "13"
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
style: {
|
|
145
|
+
color: "#d3d8e2",
|
|
146
|
+
fontWeight: "bold",
|
|
147
|
+
fontSize: "12px",
|
|
148
|
+
fontFamily: "Trebuchet MS, Verdana, sans-serif"
|
|
149
|
+
},
|
|
150
|
+
title: {
|
|
151
|
+
style: {
|
|
152
|
+
color: "#d3d8e2",
|
|
153
|
+
fontWeight: "bold",
|
|
154
|
+
fontSize: "12px",
|
|
155
|
+
fontFamily: "Trebuchet MS, Verdana, sans-serif"
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
labels: {
|
|
159
|
+
style: {
|
|
160
|
+
color: "#d3d8e2"
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
dataZoom: [
|
|
165
|
+
{
|
|
166
|
+
type: "slider",
|
|
167
|
+
show: !0,
|
|
168
|
+
xAxisIndex: [0],
|
|
169
|
+
start: 0,
|
|
170
|
+
end: 100,
|
|
171
|
+
yAxisIndex: [3],
|
|
172
|
+
// minSpan: 5,
|
|
173
|
+
fillerColor: "transparent",
|
|
174
|
+
textStyle: {
|
|
175
|
+
color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2",
|
|
176
|
+
fontSize: "10"
|
|
177
|
+
},
|
|
178
|
+
labelFormatter: function(o, t) {
|
|
179
|
+
return t.split(" ")[0] + `
|
|
180
|
+
` + t.split(" ")[1];
|
|
181
|
+
},
|
|
182
|
+
selectedDataBackground: {
|
|
183
|
+
lineStyle: {
|
|
184
|
+
color: "#39CC7E",
|
|
185
|
+
type: "solid"
|
|
186
|
+
},
|
|
187
|
+
areaStyle: {
|
|
188
|
+
color: "transparent"
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
dataBackground: {
|
|
192
|
+
lineStyle: {
|
|
193
|
+
color: "#184e31"
|
|
194
|
+
},
|
|
195
|
+
areaStyle: {
|
|
196
|
+
color: "transparent"
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
],
|
|
201
|
+
// dataZoom: [
|
|
202
|
+
// {
|
|
203
|
+
// show: true,
|
|
204
|
+
// type: 'slider',
|
|
205
|
+
// top: '90%',
|
|
206
|
+
// start: 0,
|
|
207
|
+
// end: 10,
|
|
208
|
+
// textStyle: {
|
|
209
|
+
// color: (window.localStorage.getItem('theme') && window.localStorage.getItem('theme') == 'light') ? '#595959' : '#d3d8e2',
|
|
210
|
+
// fontSize: '10'
|
|
211
|
+
// },
|
|
212
|
+
// labelFormatter: function (value, time) {
|
|
213
|
+
// return time.split(' ')[0] + '\n' + time.split(' ')[1];
|
|
214
|
+
// },
|
|
215
|
+
// handleSize: 20,
|
|
216
|
+
// fillerColor: 'transparent',
|
|
217
|
+
// // backgroundColor: '#8fdffe99',
|
|
218
|
+
// handleStyle: {
|
|
219
|
+
// // borderColor: 'red',
|
|
220
|
+
// shadowBlur: 4,
|
|
221
|
+
// shadowOffsetX: 1,
|
|
222
|
+
// shadowOffsetY: 1,
|
|
223
|
+
// // shadowColor: 'red',
|
|
224
|
+
// opacity: 0.5
|
|
225
|
+
// },
|
|
226
|
+
// dataBackground: {
|
|
227
|
+
// areaStyle: {
|
|
228
|
+
// // color: 'red'
|
|
229
|
+
// }
|
|
230
|
+
// }
|
|
231
|
+
// }
|
|
232
|
+
// ],
|
|
233
|
+
series: [
|
|
234
|
+
{
|
|
235
|
+
data: this.historyValue,
|
|
236
|
+
type: "line",
|
|
237
|
+
smooth: !0,
|
|
238
|
+
sampling: "average",
|
|
239
|
+
itemStyle: {
|
|
240
|
+
normal: {
|
|
241
|
+
color: "#39CC7E",
|
|
242
|
+
//改变折线点的颜色
|
|
243
|
+
lineStyle: {
|
|
244
|
+
color: "#39CC7E"
|
|
245
|
+
//改变折线颜色
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
lineStyle: {
|
|
250
|
+
width: 2
|
|
251
|
+
},
|
|
252
|
+
emphasis: {
|
|
253
|
+
lineStyle: {
|
|
254
|
+
width: 2
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
]
|
|
259
|
+
};
|
|
260
|
+
this.echart.setOption(e), this.echart.on("dataZoom", (o) => {
|
|
261
|
+
this.$nextTick(() => {
|
|
262
|
+
o.batch ? (o.batch[0].start, o.batch[0].end) : (o.start, o.end);
|
|
263
|
+
let t = this.echart.getModel().option, a = t.dataZoom[0].startValue, r = t.dataZoom[0].endValue;
|
|
264
|
+
return this.refleshExtream(a, r), this.echart;
|
|
265
|
+
});
|
|
266
|
+
}), this.echart.hideLoading();
|
|
267
|
+
}, 500);
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
};
|
|
271
|
+
const c = (e, o) => {
|
|
272
|
+
const t = e.__vccOpts || e;
|
|
273
|
+
for (const [a, r] of o) { t[a] = r; }
|
|
274
|
+
return t;
|
|
275
|
+
}, u = h, f = { class: "historyEchart" }, x = ["id"], y = ["data-noData"];
|
|
276
|
+
function m(e, o, t, a, r, n) {
|
|
277
|
+
return i(), l("div", f, [
|
|
278
|
+
e.historyValue.length > 0 ? (i(), l("div", {
|
|
279
|
+
id: e.echartId,
|
|
280
|
+
key: e.reflesh
|
|
281
|
+
}, null, 8, x)) : s("", !0),
|
|
282
|
+
e.historyValue.length == 0 ? (i(), l("div", {
|
|
283
|
+
key: 1,
|
|
284
|
+
class: "noDataTips",
|
|
285
|
+
"data-noData": e.$t("publics.noData")
|
|
286
|
+
}, null, 8, y)) : s("", !0)
|
|
287
|
+
]);
|
|
288
|
+
}
|
|
289
|
+
const p = /* @__PURE__ */ c(u, [["render", m], ["__scopeId", "data-v-1fae3189"]]);
|
|
290
|
+
export {
|
|
291
|
+
p as default
|
|
292
|
+
};
|