@ued_fpi/data-visual
Version:
<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />
115 lines (110 loc) • 4.2 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const es = require('element-plus/es');
require('element-plus/es/components/base/style/css');
require('element-plus/es/components/scrollbar/style/css');
const vue = require('vue');
const index = require('./api/index.js');
const _hoisted_1 = { class: "dv-bmp-event-list" };
const _hoisted_2 = { class: "custom-table" };
const _hoisted_3 = { class: "custom-table-header" };
const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("div", {
style: { "width": "46px" },
class: "fixed-width"
}, " 序号 ", -1);
const _hoisted_5 = {
class: "custom-table-cell fixed-width",
style: { "width": "46px" }
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "index",
props: {
siteCodeList: Array,
envTypeCodeList: Array,
centerLatitude: String,
centerLongitude: String,
timeStamp: [Number, String],
// 是否使用内置接口进行数据查询
isUseBuiltInApi: {
type: Boolean,
default: true
},
// 不使用内部接口查询时,组件使用的数据
data: Array
},
setup(__props) {
const props = __props;
const tableData = vue.ref({});
const tableProps = vue.ref([
{
label: "事件名称",
prop: "eventName"
},
{
label: "状态",
prop: "currentDisposalStatusName",
width: "72px"
},
{
label: "距离",
prop: "distance",
width: "80px"
}
]);
const getData = async () => {
const params = {
siteCodeList: props.siteCodeList,
envTypeCodeList: props.envTypeCodeList,
centerLatitude: props.centerLongitude,
centerLongitude: props.centerLongitude,
timeStamp: props.timeStamp
};
const res = await index.queryEventDataByTimePoint(params);
return res?.data;
};
vue.onMounted(async () => {
if (props.isUseBuiltInApi)
tableData.value = await getData();
else
tableData.value = props.data || [];
});
return (_ctx, _cache) => {
const _component_el_scrollbar = es.ElScrollbar;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
_hoisted_4,
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableProps.value, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item.prop,
class: vue.normalizeClass(item.width ? "fixed-width" : "auto-width"),
style: vue.normalizeStyle({ width: item.width })
}, vue.toDisplayString(item.label), 7);
}), 128))
]),
vue.createVNode(_component_el_scrollbar, { class: "custom-table-body" }, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableData.value, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item.id,
class: "custom-table-row"
}, [
vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(index + 1), 1),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableProps.value, (prop) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: prop.prop,
class: vue.normalizeClass(["custom-table-cell", [prop.width ? "fixed-width" : "auto-width", prop.prop === "currentDisposalStatusName" ? item[prop.prop] === 0 ? "undisposed" : item[prop.prop] === 1 ? "handing" : "disposed" : ""]]),
style: vue.normalizeStyle({ width: prop.width })
}, vue.toDisplayString(item[prop.prop]), 7);
}), 128))
]);
}), 128))
]),
_: 1
})
])
]);
};
}
});
exports.default = _sfc_main;