<template>
|
<div class="table-box">
|
<!-- 根据布局模式渲染不同的组件 -->
|
|
<ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam">
|
<!-- Expand -->
|
<template #expand="scope">
|
{{ scope.row }}
|
</template>
|
<template #baoliu8="scope">
|
<VueUiGizmo :config="config" :dataset="scope.row.baoliu8" />
|
</template>
|
<template #Sign="scope">
|
<span style="margin-left: 10px">
|
<b>{{ t("Anchor.anchorId") }}</b>
|
<el-divider direction="vertical" border-style="dashed" />
|
{{ scope.row.anchorid }}
|
</span>
|
</template>
|
<template #Context="scope">
|
<el-tabs>
|
<el-tab-pane :label="t('Anchor.basicInfo')">
|
<p>
|
{{ t("Anchor.type") }}：<el-tag effect="plain">
|
{{ scope.row.baoliu21 }}
|
</el-tag>
|
</p>
|
<p>
|
{{ t("Anchor.power") }}：<el-tag effect="plain" type="danger">
|
{{ scope.row.baoliu8 }}
|
</el-tag>
|
</p>
|
<p>
|
{{ t("Anchor.version") }}：<el-tag effect="plain" type="success">
|
{{ scope.row.version }}
|
</el-tag>
|
</p>
|
<!-- 基本信息字段 -->
|
</el-tab-pane>
|
<el-tab-pane :label="t('Anchor.positionInfo')">
|
<p>
|
{{ t("Anchor.xCoordinate") }}：
|
<el-tag effect="plain">
|
{{ scope.row.posx }}
|
</el-tag>
|
</p>
|
<p>
|
{{ t("Anchor.yCoordinate") }}：
|
<el-tag effect="plain" type="danger">
|
{{ scope.row.posy }}
|
</el-tag>
|
</p>
|
<p>
|
{{ t("Anchor.zCoordinate") }}：
|
<el-tag effect="plain" type="success">
|
{{ scope.row.posz }}
|
</el-tag>
|
</p>
|
<!-- 位置信息字段 -->
|
</el-tab-pane>
|
<el-tab-pane :label="t('Anchor.latLngInfo')">
|
<p>
|
{{ t("Anchor.longitude") }}：
|
<el-tag effect="plain">
|
{{ scope.row.baoliu6 }}
|
</el-tag>
|
</p>
|
<p>
|
{{ t("Anchor.latitude") }}：
|
<el-tag effect="plain" type="danger">
|
{{ scope.row.baoliu7 }}
|
</el-tag>
|
</p>
|
<p>
|
{{ t("Anchor.layer") }}：
|
<el-tag effect="plain" type="success">
|
{{ scope.row.layer }}
|
</el-tag>
|
</p>
|
<!-- 经纬信息字段 -->
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
<template #Footer="scope">
|
<span>
|
<b>{{ t("Anchor.status") }}：</b>
|
<el-tag :type="getStatusType(scope.row.anchormode)">{{ getStatusText(scope.row.anchormode) }}</el-tag>
|
</span>
|
</template>
|
<!-- 表格操作 -->
|
</ProTable>
|
|
<UserDrawer ref="drawerRef" />
|
<ImportExcel ref="dialogRef" />
|
</div>
|
</template>
|
|
<script setup lang="tsx" name="useProTable">
|
import { ref, reactive } from "vue";
|
import { User } from "@/api/interface";
|
import {} from "@/hooks/useHandleData";
|
// import { ElMessage } from "element-plus";
|
|
import ProTable from "@/components/ProTable/card.vue";
|
import ImportExcel from "@/components/ImportExcel/index.vue";
|
import UserDrawer from "@/views/proTable/components/UserDrawer.vue";
|
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
import {} from "@element-plus/icons-vue";
|
import { getAnchorList } from "@/api/modules/hxzk/device/anchor";
|
import { VueUiGizmo } from "vue-data-ui";
|
import "vue-data-ui/style.css";
|
import { useI18n } from "vue-i18n";
|
|
// 使用 useI18n 获取 i18n 实例
|
const { t } = useI18n({
|
useScope: "global"
|
});
|
|
// ProTable 实例
|
const proTable = ref<ProTableInstance>();
|
|
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
const initParam = reactive({ type: 1 });
|
const getTableList = (params: any) => {
|
let newParams = JSON.parse(JSON.stringify(params));
|
|
// 提取 tableList 对象
|
const { pageSize, pageNum, anchorid, ...restParams } = newParams;
|
const tableList = { pageSize, pageNum };
|
|
// 提取 person 对象
|
const { ...restParams2 } = restParams;
|
const achor = { anchorid };
|
|
// 处理 createTime 字段
|
if (restParams2.createTime) {
|
restParams2.startTime = restParams2.createTime[0];
|
restParams2.endTime = restParams2.createTime[1];
|
delete restParams2.createTime;
|
}
|
|
// 合并所有参数
|
const finalParams = {
|
...restParams2,
|
tableList,
|
achor
|
};
|
|
return getAnchorList(finalParams);
|
};
|
|
// 表格配置项
|
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
{ type: "selection", fixed: "left", width: 70 },
|
{
|
prop: "anchorid",
|
search: { el: "input", span: 4 },
|
label: t("Anchor.anchorId")
|
},
|
|
{
|
prop: "anchormode",
|
label: t("Anchor.status"),
|
render: scope => {
|
const statusText = scope.row.anchormode === "1" ? t("Anchor.statusOnline") : t("Anchor.statusOffline");
|
const tagType = scope.row.anchormode === "1" ? "success" : "danger";
|
return (
|
<el-tag size="large" effect="plain" type={tagType}>
|
{statusText}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "baoliu8",
|
label: t("Anchor.power")
|
},
|
{
|
prop: "version",
|
label: t("Anchor.version")
|
},
|
{
|
prop: "posx",
|
label: t("Anchor.xCoordinate"),
|
render: scope => {
|
return (
|
<el-tag size="large" effect="drak">
|
{scope.row.posx}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "posy",
|
label: t("Anchor.yCoordinate"),
|
render: scope => {
|
return (
|
<el-tag size="large" effect="drak">
|
{scope.row.posy}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "posz",
|
label: t("Anchor.zCoordinate")
|
},
|
{
|
prop: "layer",
|
label: t("Anchor.layer"),
|
render: scope => {
|
return (
|
<el-tag size="large" effect="dark" type="danger">
|
{scope.row.layer}
|
</el-tag>
|
);
|
}
|
},
|
|
{
|
prop: "baoliu6",
|
label: t("Anchor.longitude"),
|
width: 130,
|
render: scope => {
|
return (
|
<el-tag size="large" effect="Plain" type="success">
|
{scope.row.baoliu6}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "baoliu7",
|
label: t("Anchor.latitude"),
|
width: 130,
|
render: scope => {
|
return (
|
<el-tag size="large" effect="Plain" type="success">
|
{scope.row.baoliu7}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "baoliu21",
|
label: t("Anchor.type"),
|
render: scope => {
|
return (
|
<el-tag size="large" effect="plain">
|
{scope.row.baoliu21}
|
</el-tag>
|
);
|
}
|
},
|
{
|
prop: "company",
|
label: t("Person.company"),
|
render: scope => {
|
return (
|
<el-tag size="large" effect="plain">
|
{scope.row.company}
|
</el-tag>
|
);
|
}
|
}
|
]);
|
// 电量配置项
|
const config = ref({
|
type: "battery",
|
size: 60,
|
stroke: "#8a8a8aff",
|
color: "#33ff57ff",
|
useGradient: false,
|
gradientColor: "rgba(255, 0, 0, 1)",
|
showPercentage: true,
|
textColor: "rgba(26, 26, 26, 1)",
|
fontFamily: "inherit",
|
formatter: null
|
});
|
|
// 根据 anchormode 的值返回状态文字
|
const getStatusText = anchormode => {
|
return anchormode === "1" ? t("Anchor.statusOnline") : t("Anchor.statusOffline");
|
};
|
|
// 根据 anchormode 的值返回标签类型
|
const getStatusType = anchormode => {
|
return anchormode === "1" ? "success" : "danger";
|
};
|
// 打开 drawer(新增、查看、编辑)
|
const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null);
|
</script>
|
