@dfsj/echarts
Version:
专业的水文曲线组件或构造函数以及通用的echart二次封装图表
271 lines (267 loc) • 11.5 kB
JavaScript
/**
*
* @dfsj/echarts： 专业的水文曲线组件或构造函数以及通用的echart二次封装图表
* 版本: v3.7.0-alpha.4
* 作者：yangbo <1747837358@qq.com>
* 日期：2025-07-10 10:24:30
*
*
*/
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, ref, toRefs, reactive, watch, computed, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, unref, withCtx, createVNode, createTextVNode, toDisplayString, Fragment, renderList, createCommentVNode } from 'vue';
import get from 'lodash-es/get';
import { dimensions } from '../utils/statistics.js';
import { ElTable, ElTableColumn, ElConfigProvider, ElPagination } from 'element-plus';
import exportFile from '../utils/export.js';
import dayjs from 'dayjs';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var _hoisted_1 = {
"class": "chart-tabulation-wrap flex flex-col justify-between"
};
var _hoisted_2 = {
"class": "table-container"
};
var _hoisted_3 = {
"class": "table-pager"
};
var script = defineComponent({
__name: 'Table',
props: {
value: {
type: Object,
required: true,
"default": null
},
chart: {
type: null,
required: true,
"default": null
},
visible: {
type: Boolean,
required: true,
"default": false
},
dimensionsFn: {
type: Function,
required: true,
"default": dimensions
},
immediate: {
type: Boolean,
required: true,
"default": true
},
shadow: {
type: Boolean,
required: true,
"default": true
},
page: {
type: Object,
required: false
},
defaultSort: {
type: Object,
required: true,
"default": {
prop: 't0',
order: 'descending'
}
}
},
setup: function setup(__props) {
var locale = ref(zhCn);
var props = __props;
var _toRefs = toRefs(props),
chart = _toRefs.chart,
visible = _toRefs.visible,
value = _toRefs.value,
page = _toRefs.page,
defaultSort = _toRefs.defaultSort;
var dataSource = ref([]);
var dimensions = ref([]);
var source = ref([]);
var pagination = reactive(Object.assign({}, {
total: 0,
currentPage: 1,
pageSize: 100,
pageSizes: [50, 100, 200, 300],
small: false,
background: true,
disabled: false,
layout: 'total, sizes, prev, pager, next, jumper',
pagerCount: 10
}, _objectSpread({}, page.value)));
watch(function () {
return value.value;
}, function (v, o) {
console.log('v,o', v, o);
update();
}, {
deep: true
});
function mergeData(fields, data) {
var mergedData = [];
if (!data) return [];
var _iterator = _createForOfIteratorHelper(data),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var row = _step.value;
var obj = {};
for (var i = 0; i < fields.length; i++) {
var k = "t".concat(fields[i].field);
if (i == 0) {
obj[k] = Date.parse(row[i]) && dayjs(row[i], 'YYYY-MM-DD HH:mm:ss', true).isValid() ? dayjs(row[i]).format('MM/DD HH:mm') : row[i];
} else {
obj[k] = row[i];
}
}
mergedData.push(obj);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return mergedData;
}
computed(function () {
var _chart$value;
if (chart.value) return get(chart === null || chart === void 0 || (_chart$value = chart.value) === null || _chart$value === void 0 ? void 0 : _chart$value.getOption(), '$export', true);
return null;
});
ref(0);
var tableData = computed(function () {
return dataSource.value.slice(pagination.pageSize * (pagination.currentPage - 1), pagination.pageSize * pagination.currentPage);
});
function getSource() {
var _source$value;
if (props.immediate) {
var _value$value;
source.value = ((_value$value = value.value) === null || _value$value === void 0 ? void 0 : _value$value.source) || [];
} else {
var _chart$value2, _option$dataset$0$sou, _option$dataset$;
var option = chart === null || chart === void 0 || (_chart$value2 = chart.value) === null || _chart$value2 === void 0 ? void 0 : _chart$value2.getOption();
source.value = (_option$dataset$0$sou = option === null || option === void 0 || (_option$dataset$ = option.dataset[0]) === null || _option$dataset$ === void 0 ? void 0 : _option$dataset$.source) !== null && _option$dataset$0$sou !== void 0 ? _option$dataset$0$sou : [];
}
pagination.total = ((_source$value = source.value) === null || _source$value === void 0 ? void 0 : _source$value.length) || 0;
}
function getDimensions() {
dimensions.value = ((props === null || props === void 0 ? void 0 : props.dimensionsFn(chart.value, value.value)) || []).filter(function (item) {
return item.selected != false;
});
console.log(props === null || props === void 0 ? void 0 : props.dimensionsFn(chart.value, value.value), dimensions.value);
}
function getDataSource() {
var d = dimensions.value;
var s = source.value;
var result = mergeData(d, s);
dataSource.value = result;
}
function update() {
if (visible.value) {
getSource();
getDimensions();
getDataSource();
} else {
dimensions.value.length = 0;
dataSource.value.length = 0;
}
}
function exportHandle() {
exportFile({
source: source.value,
columns: dimensions.value,
file: '图表数据'
});
}
props.immediate && onMounted(function () {
return setTimeout(update, 200);
});
return function (_ctx, _cache) {
return openBlock(), createElementBlock("div", {
"class": normalizeClass(["assistant tabulation bg-white", {
shadow: _ctx.shadow
}])
}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", {
"class": "export",
onClick: exportHandle
}, _cache[2] || (_cache[2] = [createElementVNode("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24"
}, [createElementVNode("path", {
fill: "currentColor",
d: "M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6m-1 1.5L18.5 9H13m-4.07 3.22H16v7.07l-2.12-2.12L11.05 20l-2.83-2.83l2.83-2.82"
})], -1)])), createElementVNode("div", _hoisted_2, [dataSource.value.length ? (openBlock(), createBlock(unref(ElTable), {
key: 0,
data: tableData.value,
stripe: "",
"default-sort": unref(defaultSort),
height: "100%",
style: {
"width": "100%"
}
}, {
"default": withCtx(function () {
return [createVNode(unref(ElTableColumn), {
sortable: "",
type: "index",
label: "序号",
align: "center",
width: "60px"
}, {
"default": withCtx(function (_ref) {
var $index = _ref.$index;
return [createTextVNode(toDisplayString($index + (pagination.currentPage - 1) * pagination.pageSize + 1), 1)];
}),
_: 1
}), _cache[3] || (_cache[3] = createTextVNode(" > ")), (openBlock(true), createElementBlock(Fragment, null, renderList(dimensions.value, function (item, index) {
return openBlock(), createBlock(unref(ElTableColumn), {
sortable: "",
key: index + (item === null || item === void 0 ? void 0 : item.label),
prop: "t".concat(item === null || item === void 0 ? void 0 : item.field),
align: "center",
"min-width": "120px",
label: item === null || item === void 0 ? void 0 : item.label
}, null, 8, ["prop", "label"]);
}), 128))];
}),
_: 1
}, 8, ["data", "default-sort"])) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_3, [createVNode(unref(ElConfigProvider), {
locale: locale.value
}, {
"default": withCtx(function () {
return [createVNode(unref(ElPagination), {
"hide-on-single-page": "",
"current-page": pagination.currentPage,
"onUpdate:currentPage": _cache[0] || (_cache[0] = function ($event) {
return pagination.currentPage = $event;
}),
"page-size": pagination.pageSize,
"onUpdate:pageSize": _cache[1] || (_cache[1] = function ($event) {
return pagination.pageSize = $event;
}),
"page-sizes": pagination.pageSizes,
small: pagination.small,
disabled: pagination.disabled,
background: pagination.background,
layout: pagination.layout,
total: pagination.total,
"pager-count": pagination.pagerCount
}, null, 8, ["current-page", "page-size", "page-sizes", "small", "disabled", "background", "layout", "total", "pager-count"])];
}),
_: 1
}, 8, ["locale"])])])], 2);
};
}
});
export { script as default };