<template>
|
<div class="page">
|
<!-- <div class="page-container"> -->
|
<!-- <div class="page-container-left"> -->
|
<!-- <div class="select-box mt20">
|
<el-form :inline="true" label-width="85px">
|
<el-form-item label="数据模型" prop="energyType">
|
<el-select v-model="modelData" placeholder="请选择模型" filterable @change="changeModel">
|
<el-option v-for="model in modelInfoOptions" :key="model.modelCode"
|
:label="model.modelName" :value="model.modelCode" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div> -->
|
<!-- <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" /> -->
|
<!-- </div> -->
|
<!-- <div class="page-container-right"> -->
|
<BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'">
|
<div class="text-right mt10 mb10 mr10">
|
<el-button type="primary" icon="Setting" @click="reset">重新选择地图</el-button>
|
<el-button type="primary" icon="CircleCheck" @click="handleSaveSetting">保存配置</el-button>
|
</div>
|
<div class="content-box">
|
<div class="svg-box">
|
<el-upload v-if="filePath === '空节点'" class="configure-upload" drag ref="upload" :limit="1"
|
:headers="uploadData.headers" :action="uploadData.url" :with-credentials="true"
|
:on-success="handleFileSuccess" :show-file-list="false">
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
</el-upload>
|
<div id="svgHtml" v-if="filePath !== '空节点'">
|
<div v-html="svgHtml" />
|
</div>
|
</div>
|
<div class="table-box">
|
<el-table :data="tags" height="100%">
|
<el-table-column label="参数" align="center" prop="param" />
|
<el-table-column label="采集点" align="center" prop="tag">
|
<template #default="scope">
|
<el-autocomplete popper-class="my-autocomplete" v-model="scope.row['tag']"
|
:fetch-suggestions="querySearch" placeholder="请输入指标编码">
|
<template #default="{ item }">
|
<div class="name">{{ item.value }}</div>
|
<span class="addr">{{ item.name }}</span>
|
</template>
|
</el-autocomplete>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</BaseCard>
|
<!-- </div> -->
|
<!-- </div> -->
|
</div>
|
</template>
|
|
<script setup>
|
import { listModel } from '@/api/modelConfiguration/businessModel'
|
import { getConfigure, updateEquipmentfile, saveSetting, getAllCollectTag } from "@/api/realTimeMonitor/realTimeMonitor";
|
import { getToken } from "@/utils/auth";
|
const { proxy } = getCurrentInstance();
|
let modelData = ref(null)
|
let modelInfoOptions = ref([]) //下拉列表
|
|
let uploadData = {
|
headers: {
|
Authorization: "Bearer " + getToken()
|
},
|
url: import.meta.env.VITE_APP_BASE_API + "/equipmentFile/upload"
|
}
|
|
//获取下拉列表
|
function searchList() {
|
listModel({ isShow: 1 }).then(response => {
|
modelInfoOptions.value = response.data;
|
if (modelInfoOptions.value.length > 0) {
|
modelData.value = modelInfoOptions.value[0].modelCode;
|
}
|
});
|
}
|
searchList()
|
//选中下拉
|
function changeModel(e) {
|
modelData.value = e
|
}
|
|
//选中树
|
let currentNode = reactive({
|
id: "ec7330c3-8294-4214-8aa3-4a6e84837cc4",
|
label: "美林",
|
nodeCategory: "0"
|
})
|
getConfigureList(currentNode.id)
|
|
// //选中树
|
// let currentNode = ref()
|
// function handleNodeClick(data) {
|
// currentNode.value = data
|
// getConfigureList(data.id)
|
// }
|
|
let filePath = ref()
|
let tags = ref([])
|
let svgHtml = ref()
|
function getConfigureList(id) {
|
getConfigure(id).then(response => {
|
filePath.value = '空节点'
|
console.log(111, response)
|
tags.value = [];
|
svgHtml.value = ''
|
if (response.code === 200) {
|
if (response.data) {
|
filePath.value = import.meta.env.VITE_APP_BASE_API + response.data.filePath;
|
tags.value = response.data.infoList;
|
getSvg();
|
}
|
} else {
|
proxy.$modal.msgError(response.msg)
|
}
|
});
|
|
}
|
let from = ref({
|
nodeId: '',
|
fileName: '',
|
svgType: ''
|
})
|
function handleFileSuccess(response, file, fileList) {
|
console.log('handleFileSuccess-->', response, file, fileList)
|
if (response.code === 200) {
|
from.value.nodeId = currentNode.value.id;
|
from.value.filePath = response.msg;
|
from.value.svgType = 'COLLECT';
|
updateEquipmentfile(from.value).then(result => {
|
if (result.code === 200) {
|
filePath.value = import.meta.env.VITE_APP_BASE_API + response.msg;
|
tags.value = [];
|
getSvg();
|
} else {
|
proxy.$modal.msgError(result.msg)
|
}
|
});
|
} else {
|
proxy.$modal.msgError(response.msg)
|
}
|
}
|
function getSvg() {
|
const xhr = new XMLHttpRequest();
|
xhr.open("GET", filePath.value, true);
|
xhr.send();
|
/* 监听xhr对象 */
|
xhr.addEventListener("load", () => {
|
svgHtml.value = xhr.responseText;
|
let values = xhr.responseXML.getElementsByTagName('text');
|
let tagTemps = [];
|
for (let i = 0; i < values.length; i++) {
|
if (values[i].getAttribute("id") != undefined)
|
tagTemps.push({
|
"param": values[i].textContent,
|
"tag": "",
|
"tagType": "COLLECT"
|
});
|
}
|
console.log(tags.value.length, tagTemps.length);
|
if (tags.value.length === 0 || tags.value.length != tagTemps.length) {
|
tags.value = [];
|
tags.value = tagTemps;
|
console.log("222", tags.value.length, tagTemps.length);
|
}
|
});
|
}
|
function reset() {
|
filePath.value = '空节点';
|
}
|
function handleSaveSetting() {
|
saveSetting(currentNode.value.id, tags.value).then(response => {
|
if (response.code === 200) {
|
proxy.$modal.msgSuccess(response.msg);
|
} else {
|
proxy.$modal.msgError(response.msg);
|
}
|
});
|
}
|
|
function querySearch(queryString, cb) {
|
if (queryString) {
|
getAllCollectTag({ codeOrName: queryString, indexType: 'COLLECT' }).then(response => {
|
// 调用 callback 返回建议列表的数据
|
let result = response.data;
|
let values = [];
|
result.forEach(item => {
|
values.push({
|
value: item.code,
|
name: item.name
|
})
|
});
|
cb(values);
|
});
|
}
|
}
|
</script>
|
|
|
<style scoped lang="scss">
|
@import "@/assets/styles/page.scss";
|
|
.tree-box {
|
height: calc(100vh - 210px) !important;
|
max-height: calc(100vh - 210px) !important;
|
margin-top: 0 !important;
|
}
|
|
|
|
.content-box {
|
height: calc(100vh - 260px);
|
display: flex;
|
|
.svg-box {
|
flex: 1;
|
height: 100%;
|
overflow: auto;
|
|
.el-upload__text {
|
height: calc(100vh - 350px);
|
}
|
|
img {
|
height: 100%;
|
}
|
}
|
|
.table-box {
|
width: 300px;
|
margin: 0;
|
}
|
|
}
|
</style>
|
