fix:修改地图图例,图例设置,联调接口,完善地图绘线逻辑
This commit is contained in:
parent
fb2053ee4f
commit
b96dcf1cbe
@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-24 15:03:28
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-18 10:09:30
|
||||
* @LastEditTime: 2024-12-23 09:33:37
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\screen\index.js
|
||||
* @Description: 大屏首页接口
|
||||
* @Description: 大屏首页接口
|
||||
*/
|
||||
import request from "@/utils/request";
|
||||
|
||||
@ -35,9 +35,9 @@ export function mapPointList(query) {
|
||||
}
|
||||
|
||||
// 获取地图绘制线段数据接口
|
||||
export function mapPciList(query) {
|
||||
export function mapLineList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/mapPci",
|
||||
url: "/roadline/getLine",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
@ -139,3 +139,12 @@ export function getNoticeList(params) {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
//获取大屏工单信息
|
||||
export function getWorkOrderList(params) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getMaintenanceCount",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:46:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-18 09:46:30
|
||||
* @LastEditTime: 2024-12-23 11:07:04
|
||||
* @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
|
||||
* @Description: 公共地图
|
||||
-->
|
||||
@ -60,7 +60,6 @@ import { Draw, Modify, Select, Snap } from "ol/interaction";
|
||||
import * as styleExports from "ol/style";
|
||||
import { Polygon, LineString } from "ol/geom";
|
||||
import Overlay from "ol/Overlay";
|
||||
import { throttle } from "lodash";
|
||||
|
||||
export default {
|
||||
name: "FssmMap",
|
||||
@ -390,7 +389,7 @@ export default {
|
||||
// 获取弹窗数据
|
||||
const popupData = feature.get("data");
|
||||
// 获取弹窗内元素并赋值
|
||||
this.$refs.popupContent.innerHTML = `<span>路段名称:</span><span>${popupData}</span><br/><span>起始桩号:</span><span>${popupData}</span><br/><span>终止桩号:</span><span>${popupData}</span>`;
|
||||
this.$refs.popupContent.innerHTML = `<span>路段名称:</span><span>${popupData.name}</span><br/><span>病害数:</span><span>${popupData.count}个</span><br/><span>起始桩号:</span><span>${popupData.stakeStart}</span><br/><span>终止桩号:</span><span>${popupData.stakeEnd}</span>`;
|
||||
dislogLay.setPosition(coordinate);
|
||||
} else {
|
||||
dislogLay.setPosition(undefined);
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 11:56:02
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-10 13:15:08
|
||||
* @LastEditTime: 2024-12-23 13:23:20
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
|
||||
* @Description: 病害巡检-病害日志
|
||||
-->
|
||||
@ -203,6 +203,11 @@ export default {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 各个种类下详细的病害类型
|
||||
eventType:{
|
||||
type: Array,
|
||||
default: ()=>[],
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -231,7 +236,7 @@ export default {
|
||||
// 路段名称下拉数据
|
||||
segmentList: [],
|
||||
// 病害类型下拉数据
|
||||
eventType: [],
|
||||
// eventType: [],
|
||||
// 病害状态下拉数据
|
||||
defectStatus: [
|
||||
{ label: "已修复", value: "2" },
|
||||
@ -252,7 +257,7 @@ export default {
|
||||
bottomTipClick: {
|
||||
handler() {
|
||||
this.trafficForm.defectType = "";
|
||||
this.getAllDefectType();
|
||||
// this.getAllDefectType();
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
@ -260,7 +265,7 @@ export default {
|
||||
mounted() {
|
||||
this.getData();
|
||||
this.getLineList();
|
||||
this.getAllDefectType();
|
||||
// this.getAllDefectType();
|
||||
this.getSegmentList();
|
||||
},
|
||||
methods: {
|
||||
@ -300,18 +305,18 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取病害类型下拉数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getAllDefectType() {
|
||||
DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.eventType = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
// /**
|
||||
// * @description: 获取病害类型下拉数据
|
||||
// * @param {*}
|
||||
// * @return {*}
|
||||
// */
|
||||
// getAllDefectType() {
|
||||
// DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
|
||||
// if (code === 200) {
|
||||
// this.eventType = data;
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
|
||||
/**
|
||||
* @description: 点击搜索事件
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-20 14:31:34
|
||||
* @LastEditTime: 2024-12-23 14:29:26
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -138,6 +138,7 @@
|
||||
:is="item.component"
|
||||
:bottomTipClick="bottomTipClick"
|
||||
:companyId="companyId"
|
||||
:eventType="defectSelectList"
|
||||
@imagePoint="getimagePoint"
|
||||
></component>
|
||||
</template>
|
||||
@ -168,36 +169,8 @@
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
<!-- 大屏工单数据 -->
|
||||
<div
|
||||
class="work-order"
|
||||
v-if="elementDiv === 'OverviewScreen' && !showMap"
|
||||
>
|
||||
<div class="work-order-left">
|
||||
<div
|
||||
class="btn-time"
|
||||
:class="workOrderType === 1 ? 'btn-time-click' : ''"
|
||||
size="mini"
|
||||
@click="changeOrder(1)"
|
||||
>
|
||||
本周
|
||||
</div>
|
||||
<div
|
||||
class="btn-time"
|
||||
:class="workOrderType === 2 ? 'btn-time-click' : ''"
|
||||
size="mini"
|
||||
@click="changeOrder(2)"
|
||||
>
|
||||
本月
|
||||
</div>
|
||||
<div
|
||||
class="btn-time"
|
||||
:class="workOrderType === 3 ? 'btn-time-click' : ''"
|
||||
size="mini"
|
||||
@click="changeOrder(3)"
|
||||
>
|
||||
本年
|
||||
</div>
|
||||
</div>
|
||||
<!-- && !showMap -->
|
||||
<div class="work-order" v-if="elementDiv === 'OverviewScreen'">
|
||||
<div class="work-order-right">
|
||||
<div
|
||||
class="loop-div"
|
||||
@ -212,33 +185,55 @@
|
||||
ref="refcountofore"
|
||||
:start-val="1000"
|
||||
:end-val="item.value"
|
||||
:duration="1000"
|
||||
:duration="500"
|
||||
></CountTo>
|
||||
件
|
||||
</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-order-left">
|
||||
<div
|
||||
class="btn-time"
|
||||
:class="workOrderType === 'week' ? 'btn-time-click' : ''"
|
||||
size="mini"
|
||||
@click="changeOrder('week')"
|
||||
>
|
||||
本周
|
||||
</div>
|
||||
<div
|
||||
class="btn-time"
|
||||
:class="workOrderType === 'month' ? 'btn-time-click' : ''"
|
||||
size="mini"
|
||||
@click="changeOrder('month')"
|
||||
>
|
||||
本月
|
||||
</div>
|
||||
<div
|
||||
class="btn-time"
|
||||
:class="workOrderType === 'year' ? 'btn-time-click' : ''"
|
||||
size="mini"
|
||||
@click="changeOrder('year')"
|
||||
>
|
||||
本年
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图图例 -->
|
||||
<div class="map-legend" v-if="elementDiv != 'RoadScreen'">
|
||||
<span>≥{{ mapLegendList.s5 }}</span>
|
||||
<span>≥{{ mapLegendList.s4 }}</span>
|
||||
<span>≥{{ mapLegendList.s3 }}</span>
|
||||
<span>≥{{ mapLegendList.s2 }}</span>
|
||||
<span>≥{{ mapLegendList.s1 }}</span>
|
||||
<span>≤{{ mapLegendList.s1 }}</span>
|
||||
<span>≤{{ mapLegendList.s2 }}</span>
|
||||
<span>≤{{ mapLegendList.s3 }}</span>
|
||||
<span>≤{{ mapLegendList.s4 }}</span>
|
||||
<span>>{{ mapLegendList.s4 }}</span>
|
||||
</div>
|
||||
<!-- 病害筛选下拉框 -->
|
||||
<div
|
||||
class="map-image-select"
|
||||
:style="{
|
||||
top: elementDiv === 'DiseaseScreen' || showMap ? '10%' : '23%',
|
||||
}"
|
||||
v-if="elementDiv != 'RoadScreen'"
|
||||
>
|
||||
<span>病害类型筛选:</span>
|
||||
<!-- || showMap -->
|
||||
<div class="map-image-select" v-if="elementDiv != 'RoadScreen'">
|
||||
<!-- <span>病害类型筛选:</span> -->
|
||||
<!-- v-if="elementDiv === 'DiseaseScreen' || showMap" -->
|
||||
<el-cascader
|
||||
v-if="elementDiv === 'OverviewScreen'"
|
||||
ref="screenCascader"
|
||||
v-model="mapCareSelect"
|
||||
popper-class="screen-index-cascader"
|
||||
@ -252,6 +247,21 @@
|
||||
@change="changeMapCareSelect"
|
||||
clearable
|
||||
></el-cascader>
|
||||
<el-select
|
||||
v-if="elementDiv === 'DiseaseScreen'"
|
||||
v-model="defectSelect"
|
||||
popper-class="screen-select"
|
||||
placeholder="请选择病害类型"
|
||||
clearable
|
||||
@change="getLinePoint"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectSelectList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 图片背景返回 -->
|
||||
<div class="return-image" v-if="showMap">
|
||||
@ -285,48 +295,16 @@
|
||||
<div>
|
||||
<span class="name" style="color: #18f7ff"
|
||||
>{{ screenMapPopoverName }}病害数:</span
|
||||
><span class="value">65431213</span>个
|
||||
><span class="value">{{ item.all }}</span
|
||||
>个
|
||||
</div>
|
||||
<div>
|
||||
<span class="name" style="color: #18f7ff"
|
||||
>每公里平均病害:</span
|
||||
><span class="value">65431213</span>个
|
||||
><span class="value">{{ item.per }}</span
|
||||
>个
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="item">
|
||||
<div>
|
||||
<span class="name" style="color: #ffea68"
|
||||
>交安设施病害:</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
<div>
|
||||
<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="value">65431213</span>个
|
||||
</div>
|
||||
<div>
|
||||
<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="value">65431213</span>个
|
||||
</div>
|
||||
<div>
|
||||
<span class="name" style="color: #6fc36f"
|
||||
>每公里平均问题:</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<span slot="reference" @click="showMapByCompany(item)">{{
|
||||
item.name
|
||||
@ -336,13 +314,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 总览地图 -->
|
||||
<fssm-map ref="overViewMap" v-if="showMap"> </fssm-map>
|
||||
<fssm-map
|
||||
ref="overViewMap"
|
||||
:centerPoint="overViewMapPoint"
|
||||
v-if="showMap"
|
||||
>
|
||||
</fssm-map>
|
||||
<!-- 病害巡检、道路资产地图 -->
|
||||
<fssm-map
|
||||
v-if="elementDiv !== 'OverviewScreen' && !showMap"
|
||||
ref="roadMap"
|
||||
:showChange="true"
|
||||
:controlStyle="{ top: '14%', left: '26%' }"
|
||||
:controlStyle="{ top: '20%', left: '26%' }"
|
||||
@feature-select="featureSelect"
|
||||
@map-zoom="getZoom"
|
||||
></fssm-map>
|
||||
@ -472,12 +455,14 @@ import "animate.css";
|
||||
import {
|
||||
selectTypeList,
|
||||
mapPointList,
|
||||
mapPciList,
|
||||
mapLineList,
|
||||
comppanyImg,
|
||||
getItemTypes,
|
||||
getDefectTypes,
|
||||
getNoticeList,
|
||||
getWorkOrderList,
|
||||
} from "@/api/xj/screen/index";
|
||||
import { DefectType } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
components: {
|
||||
@ -569,12 +554,12 @@ export default {
|
||||
],
|
||||
// 顶端工单数据
|
||||
workOrderList: [
|
||||
{ name: "生成工单数", value: 562254 },
|
||||
{ name: "未完成工单数", value: 562254 },
|
||||
{ name: "已完成工单数", value: 562254 },
|
||||
{ name: "生成工单数", value: 100 },
|
||||
{ name: "未完成工单数", value: 100 },
|
||||
{ name: "已完成工单数", value: 100 },
|
||||
],
|
||||
// 工单时间选择绑定
|
||||
workOrderType: 1,
|
||||
workOrderType: "",
|
||||
// 图片背景下打点坐标数据
|
||||
mapCareList: [],
|
||||
// 图例循环数据
|
||||
@ -602,6 +587,10 @@ export default {
|
||||
|
||||
// 图标类别切换标识
|
||||
bottomTipClick: "1",
|
||||
// 对应病害类别细类
|
||||
defectSelectList: [],
|
||||
// 对应病害类别系类绑定
|
||||
defectSelect: "",
|
||||
// 切换地图图标类别按钮
|
||||
changeMapBtn: [
|
||||
{ name: "路面", click: "1" },
|
||||
@ -667,6 +656,8 @@ export default {
|
||||
this.getMapCare();
|
||||
this.getDieaseTypeList();
|
||||
this.getMessageList();
|
||||
this.changeOrder("week");
|
||||
this.getAllDefectType();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
@ -758,7 +749,7 @@ export default {
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取图片背景左上角病害类型下拉
|
||||
* @description: 获取图片背景级联病害类型下拉
|
||||
* @return {void}
|
||||
*/
|
||||
getDieaseTypeList() {
|
||||
@ -770,14 +761,31 @@ export default {
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 图片背景左上角病害类型下拉修改
|
||||
* @description: 图片背景级联病害类型下拉修改
|
||||
* @return {void}
|
||||
*/
|
||||
changeMapCareSelect(value) {
|
||||
const [node] = this.$refs.screenCascader.getCheckedNodes();
|
||||
this.screenMapPopoverName = node?.label;
|
||||
this.getMapCare(value);
|
||||
this.getLinePoint();
|
||||
this.changeOrder(this.workOrderType);
|
||||
if (this.elementDiv === "OverviewScreen" && !this.showMap) {
|
||||
const [node] = this.$refs.screenCascader.getCheckedNodes();
|
||||
this.screenMapPopoverName = node?.label;
|
||||
this.getMapCare(value);
|
||||
} else if (this.elementDiv != "OverviewScreen" || this.showMap) {
|
||||
this.getLinePoint();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取病害类型select下拉数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getAllDefectType() {
|
||||
DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.defectSelectList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
@ -785,15 +793,21 @@ export default {
|
||||
* @return {void}
|
||||
*/
|
||||
changeOrder(val) {
|
||||
if (this.workOrderType != val) {
|
||||
this.workOrderType = val;
|
||||
this.companyId;
|
||||
this.workOrderList = [
|
||||
{ name: "生成工单数", value: 54 },
|
||||
{ name: "未完成工单数", value: 5254 },
|
||||
{ name: "已完成工单数", value: 554 },
|
||||
];
|
||||
}
|
||||
this.workOrderType = val;
|
||||
getWorkOrderList({
|
||||
companyId: this.companyId,
|
||||
type: val,
|
||||
classType: this.mapCareSelect.length > 0 ? this.mapCareSelect[0] : "",
|
||||
defectType: this.mapCareSelect.length > 1 ? this.mapCareSelect[1] : "",
|
||||
}).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.workOrderList = [
|
||||
{ name: "生成工单数", value: data.createdCount },
|
||||
{ name: "未完成工单数", value: data.unFinishedCount },
|
||||
{ name: "已完成工单数", value: data.finishedCount },
|
||||
];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
@ -807,14 +821,8 @@ export default {
|
||||
};
|
||||
comppanyImg(data).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.mapLegendList = {
|
||||
s1: "0",
|
||||
s2: "20",
|
||||
s3: "40",
|
||||
s4: "60",
|
||||
s5: "80",
|
||||
};
|
||||
this.mapCareList = data;
|
||||
this.mapLegendList = data.basLinetypeSetting;
|
||||
this.mapCareList = data.company;
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -825,8 +833,10 @@ export default {
|
||||
*/
|
||||
showMapByCompany(val) {
|
||||
this.companyId = val.id;
|
||||
this.overViewMapPoint = [val.lon * 1, val.lat * 1];
|
||||
this.showMap = true;
|
||||
this.getLinePoint();
|
||||
this.changeOrder(this.workOrderType);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -1047,26 +1057,25 @@ export default {
|
||||
this.markLayerLines = null;
|
||||
});
|
||||
}
|
||||
mapPciList({
|
||||
companyId: this.companyId,
|
||||
defectType: this.mapCareSelect,
|
||||
}).then(({ code, data }) => {
|
||||
// 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],
|
||||
];
|
||||
let data = {};
|
||||
if (this.elementDiv === "OverviewScreen") {
|
||||
data = {
|
||||
companyId: this.companyId,
|
||||
classType: this.mapCareSelect.length > 0 ? this.mapCareSelect[0] : "",
|
||||
defectType:
|
||||
this.mapCareSelect.length > 1 ? this.mapCareSelect[1] : "",
|
||||
};
|
||||
} else {
|
||||
data = {
|
||||
companyId: this.companyId,
|
||||
classType: this.bottomTipClick,
|
||||
defectType: this.defectSelect,
|
||||
};
|
||||
}
|
||||
mapLineList(data).then(({ code, data }) => {
|
||||
if (code === 200 && data) {
|
||||
this.mapLegendList = data.basLinetypeSetting;
|
||||
this.lineString = data.lines;
|
||||
this.drawLine();
|
||||
}
|
||||
});
|
||||
@ -1078,50 +1087,42 @@ export default {
|
||||
*/
|
||||
drawLine() {
|
||||
const features = [];
|
||||
// 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,
|
||||
this.lineString.forEach((element) => {
|
||||
const lines = JSON.parse(element.line).map((it) => {
|
||||
return [it.lon, it.lat];
|
||||
});
|
||||
const line = new Feature({
|
||||
geometry: new geomExports.LineString(lines),
|
||||
data: {
|
||||
name: element.segmentName,
|
||||
count: element.defectCount,
|
||||
stakeEnd: element.stakeEnd,
|
||||
stakeStart: element.stakeStart,
|
||||
},
|
||||
type: "line",
|
||||
});
|
||||
line.setStyle([
|
||||
new Style({
|
||||
// 填充色
|
||||
fill: new Fill({
|
||||
color: "#ffffff",
|
||||
color: "red",
|
||||
}),
|
||||
// 边线颜色
|
||||
stroke: new Stroke({
|
||||
color: this.getLineColor(element.status),
|
||||
width: 3,
|
||||
}),
|
||||
// 形状
|
||||
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);
|
||||
// });
|
||||
]);
|
||||
features.push(line);
|
||||
});
|
||||
const lineSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
@ -1150,16 +1151,16 @@ export default {
|
||||
* @return {string}
|
||||
*/
|
||||
getLineColor(value) {
|
||||
if (value > 92) {
|
||||
if (value === 1) {
|
||||
return "#0ABE67";
|
||||
} else if (92 >= value > 80) {
|
||||
return "#03BDE7";
|
||||
} else if (80 >= value > 70) {
|
||||
return "#E7CA03";
|
||||
} else if (70 >= value > 60) {
|
||||
} else if (value === 2) {
|
||||
return "#19C1E6";
|
||||
} else if (value === 3) {
|
||||
return "#E5CA18";
|
||||
} else if (value === 4) {
|
||||
return "#D47F07";
|
||||
} else {
|
||||
return "#E64548";
|
||||
return "#E55557";
|
||||
}
|
||||
},
|
||||
|
||||
@ -1170,7 +1171,9 @@ export default {
|
||||
*/
|
||||
changeIconType(value) {
|
||||
if (this.bottomTipClick !== value) {
|
||||
this.defectSelect = "";
|
||||
this.bottomTipClick = value;
|
||||
this.getAllDefectType();
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
@ -1181,7 +1184,7 @@ export default {
|
||||
// 地图右上角多选按钮隐藏
|
||||
this.showIconList = false;
|
||||
// this.getIconType();
|
||||
// this.getCenterPiont();
|
||||
this.getLinePoint();
|
||||
}
|
||||
},
|
||||
|
||||
@ -1269,6 +1272,8 @@ export default {
|
||||
if (this.elementDiv !== item) {
|
||||
this.elementDiv = item.component;
|
||||
this.roadSelect = "";
|
||||
// 清除已经点击的公司
|
||||
this.companyId = null;
|
||||
if (item.component === "OverviewScreen") {
|
||||
/* 清空线段图层 */
|
||||
this.markLayerLines = null;
|
||||
@ -1698,19 +1703,24 @@ export default {
|
||||
// 筛选病害类型下拉
|
||||
.map-image-select {
|
||||
position: absolute;
|
||||
left: 28%;
|
||||
top: 13%;
|
||||
left: 26%;
|
||||
font-size: 0.9rem;
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
font-family: "DouYu";
|
||||
z-index: 1;
|
||||
|
||||
.el-select {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 返回图片背景下拉
|
||||
.return-image {
|
||||
position: absolute;
|
||||
left: 28%;
|
||||
top: 14%;
|
||||
left: 26%;
|
||||
top: 9%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -1718,7 +1728,7 @@ export default {
|
||||
.work-order {
|
||||
width: 35%;
|
||||
height: 12%;
|
||||
left: 28%;
|
||||
left: 34.5%;
|
||||
top: 10%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-20 10:50:40
|
||||
* @LastEditTime: 2024-12-23 09:59:12
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
|
||||
* @Description: 总览大屏-病害三维饼图
|
||||
-->
|
||||
@ -153,7 +153,6 @@ export default {
|
||||
handler() {
|
||||
this.getChartList();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -37,7 +37,6 @@ export default {
|
||||
handler() {
|
||||
this.geteEhartList();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -211,7 +211,6 @@ export default {
|
||||
handler() {
|
||||
this.getTableData();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -96,7 +96,6 @@ export default {
|
||||
handler() {
|
||||
this.getData();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-20 11:22:56
|
||||
* @LastEditTime: 2024-12-23 09:53:28
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
|
||||
* @Description: 总览大屏-今日巡查
|
||||
-->
|
||||
@ -134,7 +134,6 @@ export default {
|
||||
handler() {
|
||||
this.getData();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-12-17 13:35:37
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-18 11:42:13
|
||||
* @LastEditTime: 2024-12-23 10:59:39
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\components\edit-line.vue
|
||||
* @Description: 图例设置-编辑弹窗
|
||||
-->
|
||||
@ -27,18 +27,18 @@
|
||||
></el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="范围一:" prop="s5">
|
||||
<el-input v-model="warningLineForm.s5" placeholder="请输入数字">
|
||||
<template slot="prepend">≥</template>
|
||||
<el-form-item label="范围一:" prop="s1">
|
||||
<el-input v-model="warningLineForm.s1" 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="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
|
||||
@ -47,32 +47,31 @@
|
||||
<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="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
|
||||
>
|
||||
<el-row :gutter="24">
|
||||
<!-- <el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="范围五:" prop="s1">
|
||||
<el-form-item label="范围五:" prop="s5">
|
||||
<el-input
|
||||
disabled
|
||||
v-model="warningLineForm.s1"
|
||||
v-model="warningLineForm.s5"
|
||||
placeholder="请输入病害名称"
|
||||
><template slot="prepend">≥</template></el-input
|
||||
><template slot="prepend">≤</template></el-input
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col></el-row
|
||||
>
|
||||
> -->
|
||||
</el-form>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-12-17 09:18:08
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-18 11:16:26
|
||||
* @LastEditTime: 2024-12-23 11:44:13
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\index.vue
|
||||
* @Description: 预警中心-大屏图例设置
|
||||
-->
|
||||
@ -16,21 +16,21 @@
|
||||
>
|
||||
<el-table-column type="index" label="序号"> </el-table-column>
|
||||
<el-table-column label="病害名称" align="center" prop="defectName" />
|
||||
<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="范围二" 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="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="s2">
|
||||
<template slot-scope="scope"> ≥{{ scope.row.s2 }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column label="范围五" align="center" prop="s1">
|
||||
<template slot-scope="scope"> ≥{{ scope.row.s1 }} </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="s5">
|
||||
<template slot-scope="scope"> ≤{{ scope.row.s5 }} </template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user