<template>
|
<div
|
v-drag="true"
|
class="showDetailsBox"
|
>
|
<div class="detailsTitles">
|
<div>
|
属性信息
|
</div>
|
<div>
|
<el-icon
|
@click="setDetailsClose"
|
:size="14"
|
>
|
<Close />
|
</el-icon>
|
</div>
|
</div>
|
<div class="detailsContent">
|
<ul>
|
<li
|
v-for="(value,key) in tableData"
|
:key="key"
|
>
|
{{ key }} : {{value}}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
nextTick,
|
watch,
|
} from "vue";
|
import store from "@/store";
|
import {
|
dataQuery_selectTabByEntity,
|
inquiry_selectFields,
|
inquiry_selectDomains,
|
dataQuery_selectByGid,
|
} from "@/api/api";
|
import { ElMessage } from "element-plus";
|
const detailsData = ref({
|
gid: null,
|
name: null,
|
});
|
const tabByEntity = ref();
|
const fieldData = ref([]);
|
const domainData = ref([]);
|
const attributeData = ref([]);
|
const optionData = ref([]);
|
const tableData = ref({});
|
const setDetailsClose = () => {
|
store.state.details.showDetails = false;
|
};
|
//查询实体类
|
const getTableByEntity = async () => {
|
const res = await dataQuery_selectTabByEntity({
|
name: detailsData.value.name,
|
});
|
if (res.code != 200) {
|
ElMessage.error("未查询到实体类");
|
return;
|
}
|
tabByEntity.value = res.result;
|
getLayerFileds();
|
};
|
//查询字段信息
|
const getLayerFileds = async () => {
|
const data = await inquiry_selectFields({
|
name: detailsData.value.name,
|
});
|
if (data.code != 200) {
|
ElMessage.error("未查询到字段信息");
|
return;
|
}
|
var val = data.result;
|
val.filter((res) => {
|
if (res.field.indexOf("_") > -1) {
|
var str = res.field.split("_");
|
res.field = str[0] + str[1][0].toUpperCase() + str[1].slice(1);
|
return res;
|
} else {
|
return res;
|
}
|
});
|
fieldData.value = val;
|
getLayerDomains();
|
};
|
const getLayerDomains = async () => {
|
const data = await inquiry_selectDomains({ name: detailsData.value.name });
|
if (data.code != 200) {
|
ElMessage.error("未查询到值域信息");
|
return;
|
}
|
domainData.value = data.result;
|
optionData.value = data.result;
|
getLayerAttribute();
|
};
|
const getLayerAttribute = () => {
|
for (var i in fieldData.value) {
|
if (fieldData.value[i].showtype == 1) {
|
attributeData.value.push(fieldData.value[i]);
|
}
|
}
|
getLayrData();
|
};
|
const getLayrData = async () => {
|
const data = await dataQuery_selectByGid(detailsData.value);
|
if (data.code != 200) {
|
ElMessage.error("未查询到属性信息");
|
return;
|
}
|
var valste = data.result;
|
valste.dirid = valste.dirName;
|
valste.depid = valste.depName;
|
valste.verid = valste.verName;
|
valste.createuser = valste.createName;
|
valste.updateuser = valste.updateName;
|
if (valste.createtime) {
|
valste.createtime = format(valste.createtime);
|
}
|
if (valste.updatetime) {
|
valste.updatetime = format(valste.updatetime);
|
}
|
for (var j in optionData.value) {
|
if (
|
optionData.value[j].domainNa != null &&
|
optionData.value[j].domainNa != undefined
|
) {
|
valste[optionData.value[j].field] = optionData.value[j].domainNa;
|
}
|
}
|
var arr = {};
|
for (var i = attributeData.value.length - 1; i >= 0; i--) {
|
var vla = attributeData.value[i];
|
if (vla.domainNa) {
|
var val = optionData.value.filter((res) => {
|
if (res.domName == vla.domainNa && res.domCode == valste[vla.field]) {
|
return res;
|
}
|
});
|
var vlue = null;
|
if (val.length > 0) {
|
vlue = val[0].codeDesc;
|
} else {
|
vlue = "";
|
}
|
arr[vla.alias] = vlue;
|
} else {
|
arr[vla.alias] = valste[vla.field];
|
}
|
}
|
tableData.value = sortObj(arr);
|
};
|
const sortObj = (obj) => {
|
var arr = [];
|
for (var i in obj) {
|
arr.push([obj[i], i]);
|
}
|
arr.reverse();
|
var len = arr.length;
|
var obj = {};
|
|
for (var i = 0; i < len; i++) {
|
if (arr[i][1].indexOf("时间") > -1) {
|
obj[arr[i][1]] = format(arr[i][0]);
|
} else {
|
obj[arr[i][1]] = arr[i][0];
|
}
|
}
|
return obj;
|
};
|
|
//格式化时间
|
const format = (shijianchuo) => {
|
//shijianchuo是整数，否则要parseInt转换
|
var time = new Date(shijianchuo);
|
var y = time.getFullYear();
|
var m = time.getMonth() + 1;
|
var d = time.getDate();
|
var h = time.getHours();
|
var mm = time.getMinutes();
|
var s = time.getSeconds();
|
return y + "-" + add0(m) + "-" + add0(d) + " " + h + ":" + mm + ":" + s;
|
};
|
//格式化时间
|
const add0 = (m) => {
|
return m < 10 ? "0" + m : m;
|
};
|
const setLayerStart = () => {
|
detailsData.value.gid = store.state.details.gid;
|
detailsData.value.name = store.state.details.tab.replaceAll("_", "");
|
|
getTableByEntity();
|
};
|
onMounted(() => {
|
setLayerStart();
|
});
|
watch(
|
() => store.state.details,
|
(nVal, oVal) => {
|
if (nVal) {
|
setLayerStart();
|
}
|
},
|
{ deep: true }
|
);
|
</script>
|
|
<style lang="less" scoped>
|
.showDetailsBox {
|
padding: 10px;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
z-index: 33;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
position: absolute;
|
bottom: 5%;
|
right: 5%;
|
width: 250px;
|
height: 350px;
|
.detailsTitles {
|
padding: 5px;
|
width: calc(100% - 10px);
|
height: 25px;
|
color: #d6e4ff;
|
font-size: 14px;
|
border-bottom: 1px solid #d6e4ff;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.detailsContent {
|
color: #d6e4ff;
|
font-size: 12px;
|
padding: 5px;
|
height: 305px;
|
overflow-y: auto;
|
width: calc(100% - 10px);
|
li {
|
color: #d6e4ff;
|
font-size: 12px;
|
height: 30px;
|
}
|
}
|
::-webkit-scrollbar {
|
width: 10px;
|
}
|
/* Change the scrollbar background color here */
|
::-webkit-scrollbar-track {
|
background-color: rgba(0, 0, 0, 0);
|
}
|
/* Change the scrollbar button color and roundedness here */
|
::-webkit-scrollbar-thumb {
|
background-color: rgba(104, 156, 255, 0.2);
|
border-radius: 0.5rem;
|
}
|
}
|
</style>
|
