@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" />
111 lines (108 loc) • 4.12 kB
JavaScript
import { ElScrollbar } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/scrollbar/style/css';
import { defineComponent, ref, onMounted, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, normalizeStyle, toDisplayString, createVNode, withCtx } from 'vue';
import { queryEventDataByTimePoint } from './api/index.mjs';
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__ */ 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__ */ 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 = ref({});
const tableProps = 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 queryEventDataByTimePoint(params);
return res?.data;
};
onMounted(async () => {
if (props.isUseBuiltInApi)
tableData.value = await getData();
else
tableData.value = props.data || [];
});
return (_ctx, _cache) => {
const _component_el_scrollbar = ElScrollbar;
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
_hoisted_4,
(openBlock(true), createElementBlock(Fragment, null, renderList(tableProps.value, (item) => {
return openBlock(), createElementBlock("div", {
key: item.prop,
class: normalizeClass(item.width ? "fixed-width" : "auto-width"),
style: normalizeStyle({ width: item.width })
}, toDisplayString(item.label), 7);
}), 128))
]),
createVNode(_component_el_scrollbar, { class: "custom-table-body" }, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(tableData.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: item.id,
class: "custom-table-row"
}, [
createElementVNode("div", _hoisted_5, toDisplayString(index + 1), 1),
(openBlock(true), createElementBlock(Fragment, null, renderList(tableProps.value, (prop) => {
return openBlock(), createElementBlock("div", {
key: prop.prop,
class: 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: normalizeStyle({ width: prop.width })
}, toDisplayString(item[prop.prop]), 7);
}), 128))
]);
}), 128))
]),
_: 1
})
])
]);
};
}
});
export { _sfc_main as default };