GitBucket
Newer
<template>
<div id="PointAndLine">
<div class="items-content">
<div
class="contentitem"
v-for="p in GXOBJ"
:key="p"
v-show="p.name != 'geometry'"
:class="[p.type]"
>
<el-tooltip class="item" effect="light" placement="top" :content="p.name">
<div class="name gxname">{{ p.name }}</div>
</el-tooltip>
<div v-if="p.type == 'img'">
<div class="">
<el-image
v-for="i in p.value.split(',')"
:key="i"
style="width: 100px; height: 100px; margin-left: 5px"
:src="i"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="p.value.split(',')"
:initial-index="4"
fit="cover"
/>
</div>
</div>
<el-tooltip
v-else
popper-class="custom-tooltip"
class="item"
effect="light"
placement="top"
:content="typeof p.value == 'number' ? p.value.toFixed(3) : p.value || '-'"
>
<div class="value gxvalue">
：{{ typeof p.value == "number" ? p.value.toFixed(3) : p.value || "-" }}
</div>
</el-tooltip>
</div>
<div class="buttoncss" v-if="typearr.includes(dataCode)">
<el-button type="primary" @click="guanxianAnalysis('up')">上游分析</el-button>
<el-button type="primary" @click="guanxianAnalysis('down')">下游分析</el-button>
<!-- <el-button type="primary" @click="guanxianAnalysis('updown')" >上下游分析</el-button>
<el-button type="primary" @click="guanxianAnalysis('connectivity')">连通性分析</el-button> -->
<!-- <el-button type="primary" @click="guanxianAnalysis('question')">问题分析</el-button> -->
</div>
</div>
</div>
</template>
<script setup name="PointAndLine">
import bus from "@/bus";
import {
downStreamAnalyse,
upStreamAnalyse,
connectAnalyse,
selectByPointNumber,
getByPipeLineCode,
} from "@/api/MonitorAssetsOnMap";
const { proxy } = getCurrentInstance();
const props = defineProps({
// 数据id
dataID: {
type: String,
},
dataCode: {
type: String,
},
// 默认打开tabs的key
RefreshName: {
type: String,
},
tabsType: {
type: String,
},
typeName: {
type: String,
},
Getproperties: {
type: Object,
},
});
const typearr = ["pipeline_point", "pipeline_info", "pipeline_info_text"];
const setnamobj = ref([]);
const GXOBJ = ref();
// [
// { name: '湖泊名称', value: '' },
// { name: '湖泊类型', value: '' },
// { name: '所属水系', value: '' },
// { name: '境内面积km²', value: '' },
// { name: '总面积km²', value: '' },
// { name: '湖泊库容(万m³)', value: '' },
// { name: '总库容(万m³)', value: '' },
// { name: '岸线长度km', value: '' },
// { name: '水质目标', value: '' },
// { name: '常水位(m)', value: '' },
// { name: '生态水位(m)', value: '' },
// { name: '控制水位(m)', value: '' },
// { name: '管理部门', value: '', type: '' },
// { name: '描述', value: '', type: 'textarea' },
// { name: '图片', value: '1,2', type: 'img' },
// ]
/**
* 根据经纬度和属性区分名称
* @param {Object} properties - 包含其他属性的对象
*/
function Distinguishnames() {
console.log("props", props);
let properties = cleanKeyNames(props.Getproperties);
console.log("properties", properties);
// 假设GXOBJ.value 与本函数无关，如果它也需要被清空或重置，可以取消下面这行的注释
GXOBJ.value = [];
// 清除现有的 setnamobj.value（如果需要的话）
setnamobj.value = [];
switch (props.dataCode) {
case "pipeline_info_text":
// setnamobj.value = [
// '管段编码',
// '起始井号',
// '终止井号',
// '管线材质',
// '管径',
// '起点埋深',
// '终点埋深',
// '起点高程',
// '终点高程',
// '管段类型',
// '道路名称',
// '管网归属',
// '测区',
// '维护管理单位',
// '管段长度',
// ];
pointOrline("line");
return;
case "pipeline_info":
pointOrline("line");
// setnamobj.value = [
// '管段编码',
// '起始井号',
// '终止井号',
// '管线材质',
// '管径',
// '起点埋深',
// '终点埋深',
// '起点高程',
// '终点高程',
// '管段类型',
// '道路名称',
// '管网归属',
// '测区',
// '维护管理单位',
// '管段长度',
// ];
return;
case "pipeline_point":
pointOrline("point");
// let nameobj = [
// '设施编号',
// '地面高程',
// '井盖尺寸',
// '井盖材质',
// '井深',
// '井径',
// '特征',
// '类型',
// '附属物',
// '管网归属',
// '维护管理单位',
// '道路名称',
// ];
// GXOBJ.value.push({ name: k, value: properties[k] });
// let dmgc = '';
// let js = '';
// // 井底高程：地面高程-井深
// for (var k in properties) {
// if (nameobj.includes(k)) {
// GXOBJ.value.push({ name: k, value: properties[k] });
// } //
// if (k == '地面高程') {
// dmgc = properties[k];
// }
// if (k == '井深') {
// js = properties[k];
// }
// }
// GXOBJ.value.push({ name: '井底高程', value: dmgc - js || 0 });
return;
// break;
case "已建管网测点":
setnamobj.value = ["站点名称", "站点编号"];
GXOBJ.value = [
{ name: "站点名称", value: properties.st_name },
{ name: "站点编号", value: properties.st_code },
];
break;
case "point":
setnamobj.value = [
"管段编码",
"起始井号",
"终止井号",
"管线材质",
"管径",
"起点埋深",
"终点埋深",
"起点高程",
"终点高程",
"管段类型",
"道路名称",
"管网归属",
"测区",
"维护管理单位",
"管段长度",
"大管套小管",
"断头管",
"雨污混接",
"管网逆坡",
];
GXOBJ.value = [
{ name: "所在排水系统", value: properties.drainageSystem },
{ name: "起始井号", value: properties.startPointNumber },
{ name: "终止井号", value: properties.endPointNumber },
{ name: "管线材质", value: properties.pipelineTexture },
{ name: "管径", value: properties.pipelineDiameter },
{ name: "起点埋深", value: properties.startGroundDepth },
{ name: "终点埋深", value: properties.endGroundDepth },
{ name: "起点高程", value: properties.startCopNoseElevation },
{ name: "终点高程", value: properties.endCopNoseElevation },
{ name: "管段类型", value: properties.sectionType },
{ name: "道路名称", value: properties.roadName },
{ name: "管网归属", value: properties.ownershipUnits },
{ name: "管段长度", value: properties.pipelineLength },
{ name: "建设年代", value: properties.constructionDate },
// { name: "大管套小管", value: properties.bigCoverSmallReason },
// { name: "断头管", value: properties.cutOffReason},
// { name: "雨污混接", value: properties.mixReason },
// { name: "管网逆坡", value: properties.reverseSlopeReason },
// { name: "流向错误", value: properties.flowDirectionWrongReason },
];
if (properties.bigCoverSmallReason) {
GXOBJ.value = [
...GXOBJ.value,
{ name: "大管套小管", value: properties.bigCoverSmallReason },
];
}
if (properties.cutOffReason) {
GXOBJ.value = [
...GXOBJ.value,
{ name: "断头管", value: properties.cutOffReason },
];
}
if (properties.mixReason) {
GXOBJ.value = [...GXOBJ.value, { name: "雨污混接", value: properties.mixReason }];
}
if (properties.reverseSlopeReason) {
GXOBJ.value = [
...GXOBJ.value,
{ name: "管网逆坡", value: properties.reverseSlopeReason },
];
}
// if (properties.flowDirectionWrongReason) {
// GXOBJ.value = [...GXOBJ.value, { name: '流向错误', value: properties.flowDirectionWrongReason }];
// }
// 流向错误
break;
case "缺陷管点":
setnamobj.value = [
"填报单位",
"所属流域",
"投入使用年限",
"管网是否已移交",
"管道材质",
"管道类型",
"管道缺陷类型",
"维护管理单位",
"联系方式",
"负责人",
"道路名称",
"需改造长度m",
"需要改造内容",
];
break;
default:
// 如果没有匹配到任何id，可以设置默认值或空数组
setnamobj.value = [];
console.log("未知的id:", props.dataCode);
return;
}
setobj(properties);
}
function pointOrline(type) {
if (type == "point") {
// 井底高程：地面高程-井深
let prams = {
pointNumber: props.Getproperties["外业点号"],
};
selectByPointNumber(prams).then((res) => {
console.log(res.data);
let obj = res.data;
GXOBJ.value = [
{ name: "设施编号", value: obj.pointNumber || "-" },
{ name: "地面高程", value: obj.groundElevation || "-" },
{ name: "井盖尺寸", value: obj.manholeCoverSize || "-" },
{ name: "井盖材质", value: obj.pointTexture || "-" },
{ name: "井深", value: obj.bottomBuriedDepth || "-" },
{ name: "井径", value: obj.wellDiameter || "-" },
{ name: "特征", value: obj.features || "-" },
{ name: "坡度", value: obj.slope || "-" },
{ name: "类型", value: obj.pointType || "-" },
{ name: "附属物", value: obj.appendage || "-" },
{ name: "管网归属", value: obj.ownershipUnits || "-" },
{ name: "维护管理单位", value: obj.operationalUnits || "-" },
{ name: "道路名称", value: obj.roadName || "-" },
{ name: "井底高程", value: obj.groundElevation - obj.bottomBuriedDepth || "-" },
];
});
}
if (type == "line") {
let prams = {
pipeLineCode: props.Getproperties["管段编码"],
};
getByPipeLineCode(prams).then((res) => {
console.log(res.data);
let obj2 = res.data;
GXOBJ.value = [
{ name: "排水系统", value: obj2.drainageSystem || "-" },
{ name: "管道类别", value: obj2.pipelineType || "-" },
{ name: "起点编号", value: obj2.startPointNumber || "-" },
{ name: "终点编号", value: obj2.endPointNumber || "-" },
{ name: "管线材质", value: obj2.pipelineTexture || "-" },
{ name: "管径", value: obj2.pipelineDiameter || "-" },
{ name: "起点埋深", value: obj2.startGroundDepth || "-" },
{ name: "终点埋深", value: obj2.endGroundDepth || "-" },
{ name: "起点高程", value: obj2.startCopNoseElevation || "-" },
{ name: "终点高程", value: obj2.endCopNoseElevation || "-" },
{ name: "道路名称", value: obj2.roadName || "-" },
{ name: "权属单位", value: obj2.ownershipUnits || "-" },
{ name: "管段长度", value: obj2.pipelineLength || "-" },
{ name: "断面类型", value: obj2.sectionType || "-" },
{ name: "管径1", value: obj2.sectionDataTwo || "-" },
];
});
}
}
function setobj(properties) {
console.log("aaaa", properties, setnamobj.value);
if (properties) {
for (var k in properties) {
if (setnamobj.value.includes(k)) {
GXOBJ.value.push({ name: k, value: properties[k] });
}
}
// 创建一个映射，用于快速查找setnamobj.value中元素的索引
let indexMap = {};
setnamobj.value.forEach((name, index) => {
indexMap[name] = index;
});
// 使用sort方法和自定义比较函数来排序GXOBJ.value
GXOBJ.value.sort((a, b) => {
return indexMap[a.name] - indexMap[b.name];
});
}
}
function cleanKeyNames(obj) {
let newObj = {};
// 遍历输入对象的所有属性
for (let key in obj) {
// 假设“清理”过程就是去除键名中的换行符（尽管在标准情况下这是不必要的）
let cleanKey = key.replace(/\n/g, ""); // 去除换行符
// 将清理后的键名和原始属性值复制到新对象中
newObj[cleanKey] = obj[key];
}
return newObj;
}
const key = "问题管线";
const isConnectivity = ref(false); //记录是否选择连通性分析
const oldConnectivityData = ref({}); //上一个择连通性分析数据
const guanxianAnalysis = async (type) => {
let properties = props.Getproperties;
// properties['起始外业点号'] = 'I2206PYS1010172';
// properties['终止外业点号'] = 'I2206PYS1010221';
console.log("properties123", properties);
console.log("type123", type);
let results = {};
bus.emit("removeMapDatas", [key]);
const methods = {
up: upStreamAnalyse,
down: downStreamAnalyse,
connectivity: connectAnalyse,
question: upStreamAnalyse,
}[type];
if (!isConnectivity.value && type == "connectivity") {
oldConnectivityData.value = properties;
isConnectivity.value = true;
proxy.$modal.msgWarning("请再次选择需要连通性分析的另一条管线或管点进行分析");
bus.emit("closedia", [key]);
return;
} else if (isConnectivity.value) {
//流通性分析 第二条管网
proxy.$modal.msgSuccess("正在进行流通性分析······");
isConnectivity.value = false;
results = await methods({
startPointNumber:
oldConnectivityData.value["起始外业点号"] || properties["外业点号"],
endPointNumber: properties["终止外业点号"] || properties["外业点号"],
});
oldConnectivityData.value = {};
gx_DataFun(results, properties, type);
bus.emit("closedia", [key]);
} else if (type == "updown") {
let params = {
startPointNumber: properties["起始外业点号"] || properties["外业点号"],
endPointNumber: properties["终止外业点号"] || properties["外业点号"],
};
await upStreamAnalyse(params).then((res) => {
console.log("上下游1", res);
gx_DataFun(res, properties, type);
});
await downStreamAnalyse(params).then((res) => {
console.log("上下游2", res);
gx_DataFun(res, properties, type);
});
} else {
oldConnectivityData.value = {};
isConnectivity.value = false;
proxy.$modal.msgSuccess("正在分析中······");
results = await methods({
startPointNumber: properties["起始外业点号"] || properties["外业点号"],
endPointNumber: properties["终止外业点号"] || properties["外业点号"],
});
gx_DataFun(results, properties, type);
}
};
// 管线分析处理方法
const gx_DataFun = (results, properties, type) => {
proxy.$modal.msgSuccess("分析完成！");
const properKs = [
{ key: "bigCoverSmallFlag", value: "大管套小管" },
{ key: "cutOffFlag", value: "断头管" },
{ key: "mixFlag", value: "雨污混接" },
{ key: "reverseSlopeFlag", value: "管网逆坡" },
// { key: 'flowDirectionWrongFlag', value: '流向错误' },
];
//问题管线
// errorText(i.properties)
const questionLinePoints = results.data.pipelineInfoList
.filter((i) => properKs.map((k) => eval(i[k.key])).filter(Boolean)[0])
.map((i) => ({
...turf.center(turf.feature(Terraformer.WKT.parse(i.geometrys))),
properties: i,
}))
.map((i) => ({
...i,
properties: {
...i.properties,
name: `${key}:\n${properKs
.map((k, o) => eval(i.properties[k.key]) && k.value)
.filter(Boolean)
.map((k, o) => o + 1 + "、" + k)
.join("\n")}`,
geometrys: Terraformer.WKT.convert(i.geometry),
},
}));
/* const siteKey = 'rainwater_pipeline_water_level';
results.data.siteList = [
{
id: '2',
stCode: '0236190002',
name: '管网（雨水）楚平路与康福路交叉口',
geometry: 'POINT(114.38523754387444 30.481550658487215)',
pointType: siteKey,
recordTime: '',
siteData: {
siteType: 'flow',
monitorTargetType: 'pipeline',
stName: '管网（雨水）楚平路与康福路交叉口',
stCode: '0236190002',
tt: '2024-10-31 10:35:00',
ut: '2024-10-31 10:35:21',
installHeight: '',
onlineStatus: 'online',
faultStatus: 'normal',
dynamicTableMonitor: 'cond,cq1,sbl1,va,z',
monitorPropertyList: [
{
monitorCode: 'z',
monitorName: '水位1',
unit: '(米)',
},
{
monitorCode: 'va',
monitorName: '流速1',
unit: '(米/秒)',
},
{
monitorCode: 'sbl1',
monitorName: '小时水量1',
unit: '(立方米/小时)',
},
{
monitorCode: 'cq1',
monitorName: '累计流量1',
unit: '(立方米)',
},
{
monitorCode: 'cond',
monitorName: '电导率',
unit: '(微西门/厘米)',
},
],
monitorValueList: [
{
monitorCode: 'z',
monitorValue: '0.092',
tt: '2024-11-04 17:00:00',
},
{
monitorCode: 'va',
monitorValue: '0.0',
tt: '2024-11-04 17:00:00',
},
{
monitorCode: 'sbl1',
monitorValue: '0.0',
tt: '2024-11-04 17:00:00',
},
{
monitorCode: 'cq1',
monitorValue: '75483.58521',
tt: '2024-11-04 17:00:00',
},
{
monitorCode: 'cond',
monitorValue: '408.0',
tt: '2024-11-04 17:00:00',
},
],
z: '0.092',
va: '0.0',
sbl1: '0.0',
cq1: '75483.58521',
cond: '408.0',
},
pipeWarn: {
id: '1',
delFlag: '',
createBy: '',
createTime: '',
updateBy: '',
updateTime: '',
remark: '',
status: '',
siteRuleId: '',
siteCode: '0236190002',
locationId: '',
warnTypeCode: 'GWGSWYX',
warnLevel: '',
warnDatetime: '',
warnFormula: '',
warnFactor: '',
warnFactorValue: '',
triggerRecognizedFlag: false,
triggerWarnFactor: '',
timeThreshold: '',
confirmStatus: 0,
createDatetime: '',
warnTypeName: '管网高水位运行',
warnFactorName: '',
warnFormulaName: '',
siteName: '',
siteId: '',
warnFactorValueName: '',
concernStatus: false,
warnMessage: '',
warnEndDatetime: '',
facilityTypeCode: '',
regionName: '',
locationName: '',
partitionNames: '',
lonLat: '',
siteAsName: '',
facilityTypeId: '',
facilityAttrTypeName: '',
},
},
];*/
const siteList = (results.data.siteList || [])
.filter((i) => i.geometry)
.map((i) =>
turf.feature(Terraformer.WKT.parse(i.geometry), {
...i,
type: i.pointType + "_" + i.pipeWarn.warnTypeCode,
name: [i.pipeWarn.warnTypeName, "持续时间:" + (i.pipeWarn.duration || 0)].join(
"\n"
),
})
);
// const siteList = (results.data.siteList || []).filter(i => i.geometry).map(i => turf.feature(Terraformer.WKT.parse(i.geometry),({...i,type:siteKey,name:[i.name,i.pipeWarn.warnTypeName].concat(i.siteData.monitorPropertyList.map((o,o_idx) => `${o.monitorName}${o.unit}：\t${i.siteData.monitorValueList[o_idx].monitorValue}`)).join('\n')})))
//上下游管线
let pipelines = results.data.pipelineInfoList
.map((i) =>
turf.feature(Terraformer.WKT.parse(i.geometrys), {
...i,
area: i.pipelineType == "YS" ? "雨水" : "污水",
})
)
.map((i) =>
i.properties.flowDirection == 1
? turf.lineString(turf.getCoords(i).flat().reverse(), i.properties)
: i
);
newfiberMap
.getLayers()
.filter((i) => i.newfiberId == "水系流向")[0]
.getSource()
.setData(turf.featureCollection(pipelines));
bus.emit("setGeoJSON", { json: turf.featureCollection(questionLinePoints), key });
siteList.length &&
bus.emit("setGeoJSON", { json: turf.featureCollection(siteList), key: siteKey });
};
onMounted(() => {
console.log("props", props);
Distinguishnames();
});
</script>
<style lang="scss" scoped>
#PointAndLine {
width: 100%;
height: 100%;
color: #ccefff;
}
.items-content {
width: 100%;
height: 100%;
display: flex;
padding: 0 10px;
flex-wrap: wrap;
overflow: hidden;
overflow-y: auto;
.contentitem {
min-height: 30px;
line-height: 30px;
width: 50%;
display: flex;
.name {
width: 80px;
color: #ccefff;
text-align: right;
}
.value {
width: calc(90% - 80px);
font-size: 12px;
font-weight: bold;
color: #ccefff;
}
.gxname {
text-align: right;
width: 110px;
}
.gxvalue {
width: calc(90% - 100px);
white-space: nowrap;
/* 确保文本在一行内显示 */
overflow: hidden;
/* 隐藏超出容器宽度的文本 */
text-overflow: ellipsis;
/* 使用省略号表示被截断的文本 */
}
}
}
.img,
.textarea {
width: 100% !important;
}
.buttoncss {
width: 100%;
margin-left: 55px;
}
</style>