fix:修改地图图例,图例设置,联调接口,完善地图绘线逻辑

This commit is contained in:
SunTao 2024-12-23 14:48:39 +08:00
parent fb2053ee4f
commit b96dcf1cbe
11 changed files with 259 additions and 242 deletions

View File

@ -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,
});
}

View File

@ -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);

View File

@ -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: 点击搜索事件

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-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;

View File

@ -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() {

View File

@ -37,7 +37,6 @@ export default {
handler() {
this.geteEhartList();
},
immediate: true,
},
},
mounted() {

View File

@ -211,7 +211,6 @@ export default {
handler() {
this.getTableData();
},
immediate: true,
},
},
mounted() {

View File

@ -96,7 +96,6 @@ export default {
handler() {
this.getData();
},
immediate: true,
},
},
mounted() {

View File

@ -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() {

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-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>

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-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"