SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：图例设置联调，线段增加弹窗展示数据

Browse Source
This commit is contained in:
SunTao
2024-12-18 14:24:33 +08:00
parent f475aa4656
commit 13277b39e0
5 changed files with 235 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/big-screen/index.vue
+83 -55
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-16 17:42:38
* @LastEditTime: 2024-12-18 10:49:32
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@@ -171,6 +171,7 @@
<div class="map-image-select" v-if="elementDiv != 'RoadScreen'">
病害类型筛选：
<el-cascader
ref="screenCascader"
v-model="mapCareSelect"
popper-class="screen-index-cascader"
:options="dieaseOptions"
@@ -213,7 +214,8 @@
<div class="screen-map-popover-content">
<div class="item">
<div>
<span class="name" style="color: #18f7ff">路面病害：</span
<span class="name" style="color: #18f7ff"
>{{ screenMapPopoverName }}病害数：</span
><span class="value">65431213</span>个
</div>
<div>
@@ -222,39 +224,40 @@
><span class="value">65431213</span>个
</div>
</div>
<div class="item">
<!-- <div class="item">
<div>
<span class="name" style="color: #FFEA68"
<span class="name" style="color: #ffea68"
>交安设施病害：</span
><span class="value">65431213</span>个
</div>
<div>
<span class="name" style="color: #FFEA68"
<span class="name" style="color: #ffea68"
>每公里平均病害：</span
><span class="value">65431213</span>个
</div>
</div>
<div class="item">
<div>
<span class="name" style="color: #AE74F3">桥隧病害：</span
<span class="name" style="color: #ae74f3">桥隧病害：</span
><span class="value">65431213</span>个
</div>
<div>
<span class="name" style="color: #AE74F3"
<span class="name" style="color: #ae74f3"
>每公里平均病害：</span
><span class="value">65431213</span>个
</div>
</div>
<div class="item">
<div>
<span class="name" style="color:#6FC36F">绿化问题：</span
<span class="name" style="color: #6fc36f">绿化问题：</span
><span class="value">65431213</span>个
</div>
<div>
<span class="name" style="color:#6FC36F">每公里平均问题：</span
<span class="name" style="color: #6fc36f"
>每公里平均问题：</span
><span class="value">65431213</span>个
</div>
</div>
</div> -->
</div>
<span slot="reference" @click="showMapByCompany">{{
item.name
@@ -510,6 +513,8 @@ export default {
roadSelect: "",
// 总览页面是否展示地图显隐控制
showMap: false,
// 图片背景下popover弹窗病害名称
screenMapPopoverName: "",
// 图标类别切换标识
bottomTipClick: "1",
@@ -706,6 +711,8 @@ export default {
* @return {void}
*/
changeMapCareSelect(value) {
const [node] = this.$refs.screenCascader.getCheckedNodes();
this.screenMapPopoverName = node?.label;
this.getMapCare(value);
},
@@ -940,8 +947,22 @@ export default {
getLinePoint() {
if (!this.markLayerLines) {
mapPciList().then(({ code, data }) => {
if (code === 200 && data) {
this.lineString = data.filter((item) => item.coordinates !== null);
// if (code === 200 && data) {
// this.lineString = data.filter((item) => item.coordinates !== null);
// this.drawLine();
// }
if (code === 200) {
this.lineString = [
[123.09835060586187, 41.95723497452143],
[122.96926125039312, 41.8459984022558],
[123.14366920937749, 41.8185325819433],
[123.10384376992437, 41.71141588272455],
[122.91982277383062, 41.67708360733393],
[123.10109718789312, 41.6207786756933],
[123.37300880898687, 41.63039171280268],
[123.31121071328374, 41.8240257460058],
[123.21782692422124, 41.98195421280268],
];
this.drawLine();
}
});
@@ -954,46 +975,50 @@ export default {
*/
drawLine() {
const features = [];
this.lineString.forEach((element) => {
const lines = element?.coordinates?.split(";")?.map((it) => {
return it.split(",").map(Number);
});
const line = new Feature({
geometry: new geomExports.LineString(lines),
type: "line",
});
line.setStyle([
new Style({
// 填充色
fill: new Fill({
color: "red",
}),
// 边线颜色
stroke: new Stroke({
color: this.getLineColor(element.pci),
width: 5,
}),
// 形状
image: new Circle({
radius: 17,
fill: new Fill({
color: "#ffffff",
}),
}),
// text: new Text({
// text: "121454",
// color: "#ffffff",
// textAlign: "center", //位置
// textBaseline: "middle",
// offsetY: 0,
// fill: new Fill({
// color: "#ffffff",
// }),
// }),
}),
]);
features.push(line);
// this.lineString.forEach((element) => {
// console.log(element,'ddd');
// const lines = element?.coordinates?.split(";")?.map((it) => {
// return it.split(",").map(Number);
// });
const line = new Feature({
geometry: new geomExports.LineString(this.lineString),
data: "15112",
type: "line",
});
line.setStyle([
new Style({
// 填充色
fill: new Fill({
color: "red",
}),
// 边线颜色
stroke: new Stroke({
// color: this.getLineColor(element.pci),
color: "red",
width: 5,
}),
// 形状
image: new Circle({
radius: 17,
fill: new Fill({
color: "#ffffff",
}),
}),
// text: new Text({
// text: "121454",
// color: "#ffffff",
// textAlign: "center", //位置
// textBaseline: "middle",
// offsetY: 0,
// fill: new Fill({
// color: "#ffffff",
// }),
// }),
}),
]);
features.push(line);
// });
const lineSource = new VectorSource({
features,
});
@@ -1616,7 +1641,7 @@ export default {
.disease-content {
width: 100%;
height: 100%;
background-image: url("../../assets/screen/index/map-liaoning.jpg");
background-image: url("../../assets/screen/index/map-liaoning.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
@@ -2058,14 +2083,17 @@ export default {
// 图片地图打点popover弹窗
.screen-map-popover-content {
padding-top: 1rem;
font-family: "DouYu";
font-size: 0.6rem;
color: #cccccc;
.item {
margin-bottom: 0.5rem;
border-bottom: 1px solid #cccccc;
.name {
width: 7rem;
line-height: 1rem;
display: inline-block;
}
.value {
color: rgb(227, 164, 27);
src/views/xj/inspection-warn/warning-line/components/edit-line.vue
+44 -29
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-12-17 13:35:37
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-17 14:18:26
* @LastEditTime: 2024-12-18 11:42:13
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\components\edit-line.vue
* @Description: 图例设置-编辑弹窗
-->
@@ -17,28 +17,28 @@
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="病害名称：" prop="defectTypeName">
<el-form-item label="病害名称：" prop="defectName">
<el-input
disabled
v-model="warningLineForm.defectTypeName"
v-model="warningLineForm.defectName"
placeholder="请输入病害名称"
/>
</el-form-item> </el-col
></el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="范围一：" prop="s1">
<el-input v-model="warningLineForm.s1" placeholder="请输入数字">
<template slot="prepend">>=</template>
<el-form-item label="范围一：" prop="s5">
<el-input v-model="warningLineForm.s5" placeholder="请输入数字">
<template slot="prepend">≥</template>
</el-input>
</el-form-item>
</el-col></el-row
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="范围二：" prop="s2">
<el-input v-model="warningLineForm.s2" placeholder="请输入数字"
><template slot="prepend">>=</template></el-input
<el-form-item label="范围二：" prop="s4">
<el-input v-model="warningLineForm.s4" placeholder="请输入数字"
><template slot="prepend">≥</template></el-input
>
</el-form-item>
</el-col></el-row
@@ -47,28 +47,28 @@
<el-col :span="24">
<el-form-item label="范围三：" prop="s3">
<el-input v-model="warningLineForm.s3" placeholder="请输入数字"
><template slot="prepend">>=</template></el-input
><template slot="prepend">≥</template></el-input
>
</el-form-item>
</el-col></el-row
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="范围四：" prop="s4">
<el-input v-model="warningLineForm.s4" placeholder="请输入数字"
><template slot="prepend">>=</template></el-input
<el-form-item label="范围四：" prop="s2">
<el-input v-model="warningLineForm.s2" placeholder="请输入数字"
><template slot="prepend">≥</template></el-input
>
</el-form-item>
</el-col></el-row
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="范围五：" prop="s5">
<el-form-item label="范围五：" prop="s1">
<el-input
disabled
v-model="warningLineForm.s5"
v-model="warningLineForm.s1"
placeholder="请输入病害名称"
><template slot="prepend">>=</template></el-input
><template slot="prepend">≥</template></el-input
>
</el-form-item>
</el-col></el-row
@@ -82,6 +82,7 @@
</template>
<script>
import { updateWarnLine } from "@/api/xj/warningLine.js";
export default {
name: "EditLine",
props: {
@@ -94,19 +95,25 @@ export default {
return {
// 表单数据
warningLineForm: {
defectTypeName: "",
defectName: "",
defectType: "",
id: "",
s1: 0,
s2: 0,
s3: 0,
s4: 0,
s5: 0,
},
// 表单验证规则
rules: {
s1: [
s5: [
{ required: true, message: "请输入范围一", trigger: "blur" },
{
pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
message: "请输入非负数",
},
],
s2: [
s4: [
{ required: true, message: "请输入范围二", trigger: "blur" },
{
pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
@@ -120,14 +127,14 @@ export default {
message: "请输入非负数",
},
],
s4: [
s2: [
{ required: true, message: "请输入范围四", trigger: "blur" },
{
pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
message: "请输入非负数",
},
],
s5: [
s1: [
{ required: true, message: "请输入范围五", trigger: "blur" },
{
pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
@@ -137,25 +144,33 @@ export default {
},
};
},
watch: {
dialogItem: {
handler(val) {
this.warningLineForm = { ...val };
},
deep: true,
immediate: true,
},
},
methods: {
/**
* @description: 点击确定事件
* @return {*}
*/
submitForm() {
submitForm() {
this.$refs.warningLineForm.validate((valid) => {
if (valid) {
const data = {
...this.warningLineForm,
id: this.dialogItem.id,
};
// updateWarnSetup(data).then(({ code, data }) => {
// if (code === 200) {
// this.$modal.msgSuccess("更新成功");
// this.$emit("cancel");
// }
// });
updateWarnLine(data).then(({ code, data }) => {
if (code === 200) {
this.$modal.msgSuccess("更新成功");
this.$emit("cancel");
}
});
}
});
},
src/views/xj/inspection-warn/warning-line/index.vue
+19 -22
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-12-17 09:18:08
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-17 14:20:15
* @LastEditTime: 2024-12-18 11:16:26
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\index.vue
* @Description: 预警中心-大屏图例设置
-->
@@ -16,20 +16,20 @@
>
<el-table-column type="index" label="序号"> </el-table-column>
<el-table-column label="病害名称" align="center" prop="defectName" />
<el-table-column label="范围一" align="center" prop="s1">
<template slot-scope="scope"> >={{ scope.row.s1 }} </template>
<el-table-column label="范围一" align="center" prop="s5">
<template slot-scope="scope"> ≥{{ scope.row.s5 }} </template>
</el-table-column>
<el-table-column label="范围二" align="center" prop="s2">
<template slot-scope="scope"> >={{ scope.row.s2 }} </template>
<el-table-column label="范围二" align="center" prop="s4">
<template slot-scope="scope"> ≥{{ scope.row.s4 }} </template>
</el-table-column>
<el-table-column label="范围三" align="center" prop="s3">
<template slot-scope="scope"> >={{ scope.row.s3 }} </template>
<template slot-scope="scope"> ≥{{ scope.row.s3 }} </template>
</el-table-column>
<el-table-column label="范围四" align="center" prop="s4">
<template slot-scope="scope"> >={{ scope.row.s4 }} </template>
<el-table-column label="范围四" align="center" prop="s2">
<template slot-scope="scope"> ≥{{ scope.row.s2 }} </template>
</el-table-column>
<el-table-column label="范围五" align="center" prop="s5">
<template slot-scope="scope"> >={{ scope.row.s5 }} </template>
<el-table-column label="范围五" align="center" prop="s1">
<template slot-scope="scope"> ≥{{ scope.row.s1 }} </template>
</el-table-column>
<el-table-column
label="操作"
@@ -65,7 +65,9 @@
</template>
<script>
import { getWarnLineList } from "@/api/xj/warningLine";
import EditLine from "./components/edit-line.vue";
export default {
components: { EditLine },
name: "WarningLine",
@@ -92,19 +94,13 @@ export default {
*/
getList() {
this.loading = true;
setTimeout(() => {
this.warningLineList = [
{
defectName: "病害名称",
s1: "80",
s2: "60",
s3: "40",
s4: "20",
s5: "0",
},
];
getWarnLineList().then(({ code, data }) => {
if(code===200){
this.warningLineList = data;
}
}).finally(() => {
this.loading = false;
}, 500);
});
},
/**
@@ -113,6 +109,7 @@ export default {
* @return {*}
*/
handleUpdate(val) {
this.dialogItem = val;
this.editVisible = true;
},