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