修改报告三要素

tykong-cidian
duxiaoning 2023-12-04 18:11:03 +08:00
parent 9ffb1bfa32
commit d19ce951aa
12 changed files with 10121 additions and 491 deletions

View File

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="21px" height="24px" viewBox="0 0 21 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 2</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="09-综合制图-指北针" transform="translate(-255.000000, -336.000000)">
<g id="编组-3" transform="translate(255.000000, 334.000000)">
<g id="编组-2" transform="translate(1.000000, 0.000000)">
<polyline id="路径" stroke="#1D1D38" stroke-width="0.5" fill="#000000" points="9.80089502 16.7973109 11.6342284 15.3815126 9.80089502 8.30252101"></polyline>
<g id="编组" transform="translate(9.692704, 20.880542) rotate(180.000000) translate(-9.692704, -20.880542) translate(7.692704, 16.380542)" stroke="#1D1D38" stroke-width="0.5">
<polyline id="路径备份" fill="#000000" points="1.83333333 8.49478992 3.66666667 7.0789916 1.83333333 0"></polyline>
<polyline id="路径备份-3" fill="#FFFFFF" transform="translate(0.916667, 4.247395) scale(-1, 1) translate(-0.916667, -4.247395) " points="0 8.49478992 1.83333333 7.0789916 0 0"></polyline>
<line x1="1.83333333" y1="0" x2="1.83333333" y2="8.49478992" id="路径-3备份"></line>
<line x1="1.83333333" y1="0" x2="1.83333333" y2="8.49478992" id="路径-3备份-3" fill="#000000" transform="translate(1.833333, 4.247395) scale(-1, 1) translate(-1.833333, -4.247395) "></line>
</g>
<g id="编组备份" transform="translate(15.197787, 17.024669) rotate(90.000000) translate(-15.197787, -17.024669) translate(13.197787, 12.524669)" stroke="#1D1D38" stroke-width="0.5">
<polyline id="路径备份" fill="#000000" points="1.83333333 8.49478992 3.66666667 7.0789916 1.83333333 0"></polyline>
<polyline id="路径备份-3" fill="#FFFFFF" transform="translate(0.916667, 4.247395) scale(-1, 1) translate(-0.916667, -4.247395) " points="0 8.49478992 1.83333333 7.0789916 0 0"></polyline>
<line x1="1.83333333" y1="0" x2="1.83333333" y2="8.49478992" id="路径-3备份"></line>
<line x1="1.83333333" y1="0" x2="1.83333333" y2="8.49478992" id="路径-3备份-3" fill="#000000" transform="translate(1.833333, 4.247395) scale(-1, 1) translate(-1.833333, -4.247395) "></line>
</g>
<g id="编组备份-2" transform="translate(4.802213, 17.024669) scale(-1, 1) rotate(90.000000) translate(-4.802213, -17.024669) translate(2.802213, 12.524669)" stroke="#1D1D38" stroke-width="0.5">
<polyline id="路径备份" fill="#000000" points="1.83333333 8.49478992 3.66666667 7.0789916 1.83333333 0"></polyline>
<polyline id="路径备份-3" fill="#FFFFFF" transform="translate(0.916667, 4.247395) scale(-1, 1) translate(-0.916667, -4.247395) " points="0 8.49478992 1.83333333 7.0789916 0 0"></polyline>
<line x1="1.83333333" y1="0" x2="1.83333333" y2="8.49478992" id="路径-3备份"></line>
<line x1="1.83333333" y1="0" x2="1.83333333" y2="8.49478992" id="路径-3备份-3" fill="#000000" transform="translate(1.833333, 4.247395) scale(-1, 1) translate(-1.833333, -4.247395) "></line>
</g>
<polyline id="路径备份-2" stroke="#1D1D38" stroke-width="0.5" fill="#FFFFFF" transform="translate(8.884228, 12.549916) scale(-1, 1) translate(-8.884228, -12.549916) " points="7.96756168 16.7973109 9.80089502 15.3815126 7.96756168 8.30252101"></polyline>
<line x1="9.80089502" y1="8.30252101" x2="9.80089502" y2="16.7973109" id="路径-3" stroke="#1D1D38" stroke-width="0.5"></line>
<line x1="9.80089502" y1="8.30252101" x2="9.80089502" y2="16.7973109" id="路径-3备份-2" stroke="#1D1D38" stroke-width="0.5" fill="#000000" transform="translate(9.800895, 12.549916) scale(-1, 1) translate(-9.800895, -12.549916) "></line>
<text id="N" font-family="MicrosoftYaHei, Microsoft YaHei" font-size="6.85714286" font-weight="normal" fill="#000000">
<tspan x="7.05089502" y="7.61697479">N</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

@ -7,54 +7,23 @@
<div class="otgCardContent">
<el-form :inline="true" :model="simpleForm" class="demo-form-inline">
<el-form-item style="margin-left: 15px">
<el-cascader
v-model="simpleForm.sampleFun"
:disabled="sampleFun !== ''"
:options="funcOpt"
size="mini"
placeholder="请选择抽样方法"
popper-class="cascader-popper"
@change="changeSampleFun"
clearable
:show-all-levels="false"
></el-cascader>
<el-button
v-if="isDeepSpace"
class="edit-btn"
plain
size="mini"
type="primary"
icon="el-icon-edit-outline"
@click="editDeepSpace"
></el-button>
<el-cascader v-model="simpleForm.sampleFun" :disabled="sampleFun !== ''" :options="funcOpt" size="mini"
placeholder="请选择抽样方法" popper-class="cascader-popper" @change="changeSampleFun" clearable
:show-all-levels="false"></el-cascader>
<el-button v-if="isDeepSpace" class="edit-btn" plain size="mini" type="primary" icon="el-icon-edit-outline"
@click="editDeepSpace"></el-button>
</el-form-item>
<el-form-item>
<el-input
v-model="simpleForm.sampleNum"
size="mini"
placeholder="请输入样本个数"
></el-input>
<el-input v-model="simpleForm.sampleNum" size="mini" placeholder="请输入样本个数"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="samplesCk"></el-button>
</el-form-item>
</el-form>
<el-table
ref="multipleTable"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="simpleData"
tooltip-effect="dark"
:header-cell-style="headerRowClass"
style="width: 98%; margin-left: 1%; margin-top: 15px"
highlight-current-row
@current-change="tableRowClk"
:stripe="true"
:cell-style="tableRowClassName"
height="370"
>
<el-table ref="multipleTable" v-loading="loading" element-loading-text=""
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="simpleData"
tooltip-effect="dark" :header-cell-style="headerRowClass" style="width: 98%; margin-left: 1%; margin-top: 15px"
highlight-current-row @current-change="tableRowClk" :stripe="true" :cell-style="tableRowClassName" height="370">
<el-table-column label width="35">
<template slot-scope="scope">
<el-radio :label="scope.row" v-model="radioClkMsg"></el-radio>
@ -62,11 +31,7 @@
</el-table-column>
<el-table-column label="序号" type="index" width="70">
</el-table-column>
<el-table-column
prop="samplesId"
label="样本编号"
show-overflow-tooltip
>
<el-table-column prop="samplesId" label="样本编号" show-overflow-tooltip>
</el-table-column>
<el-table-column label="纬度(°)" sortable show-overflow-tooltip>
<template slot-scope="scope">{{
@ -78,28 +43,13 @@
parseFloat(scope.row.measureLong.toFixed(8))
}}</template>
</el-table-column>
<el-table-column
label="采样时间"
sortable
prop="collectDate"
show-overflow-tooltip
>
<el-table-column label="采样时间" sortable prop="collectDate" show-overflow-tooltip>
</el-table-column>
<el-table-column
label="选取点纬度"
prop="sameNameLat"
></el-table-column>
<el-table-column
label="选取点经度"
prop="sameNameLong"
></el-table-column>
<el-table-column label="选取点纬度" prop="sameNameLat"></el-table-column>
<el-table-column label="选取点经度" prop="sameNameLong"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope"
><i
class="el-icon-delete"
@click="deleteSelected(scope.$index, simpleData)"
></i
></template>
<template slot-scope="scope"><i class="el-icon-delete"
@click="deleteSelected(scope.$index, simpleData)"></i></template>
</el-table-column>
</el-table>
</div>
@ -123,64 +73,50 @@
</div>
</div>
<div class="sscPre">
<div class="sceneShowContent" style="position: relative">
<otg-product-info
@removeLayer="removeLayer('far')"
@addLayer="addLayer('far')"
></otg-product-info>
<div
id="farViewer"
style="height: 100%; width: 100%"
@click="pickValueFar"
></div>
<div :class="checkRealityWait ? 'sceneShowContent onBorder' : 'sceneShowContent'" id="sceneShowContent">
<div v-show="checkRealityWait" class="topContent">
<span class="mapTitle">待检验产品图</span>
</div>
<div class="sceneShowContent" style="position: relative">
<div :id="checkRealityWait ? 'mapContent' : 'cesiumContent'">
<canvas v-show="checkRealityWait" id="grid"></canvas>
<otg-product-info v-show="screenImgStg" @removeLayer="removeLayer('far')"
@addLayer="addLayer('far')"></otg-product-info>
<div id="farViewer" @click="pickValueFar">
<div v-show="checkRealityWait" class="compass">
<img src="../../../assets/images/compass_one.svg" alt="" style="width: 100%; height: 100%;">
</div>
<canvas v-show="checkRealityWait" id="scaleBar"></canvas>
</div>
</div>
<div v-show="checkRealityWait" class="bottomCont">
<span>制图单位中国科学院空天信息创新院</span><br />
<span>制图日期{{ createImgTime }}</span>
</div>
</div>
<div class="sceneShowContent">
<div id="nearViewer" style="height: 100%; width: 100%"></div>
<otg-product-info
@removeLayer="removeLayer('near')"
@addLayer="addLayer('near')"
></otg-product-info>
<otg-product-info @removeLayer="removeLayer('near')" @addLayer="addLayer('near')"></otg-product-info>
<div class="poiCK">
<el-button type="primary" :disabled="ckPoint" @click="ckSamePoi"
>选取点</el-button
>
<el-button
type="primary"
style="margin: 5px 0px"
:disabled="savePoint"
@click="saveSamePoi"
>保存点</el-button
>
<el-button type="primary" :disabled="ckPoint" @click="ckSamePoi"></el-button>
<el-button type="primary" style="margin: 5px 0px" :disabled="savePoint" @click="saveSamePoi"></el-button>
</div>
</div>
<div class="sceneShowContent" style="position: relative">
<div class="sceneShowContent">
<div style="height: 100%">
<img
id="alImg"
src="static/images/otg3.png"
style="height: 100%; width: 100%"
alt="fzImg"
/>
<img id="alImg" src="static/images/otg3.png" style="height: 100%; width: 100%" alt="fzImg" />
</div>
<div class="imgCtrl">
<el-radio-group v-model="imgChoose" @change="changeImg">
<el-radio label="pointPs">点之记</el-radio><br />
<el-radio label="nearImg" style="margin: 5px 0 5px 0"
>近景</el-radio
><br />
<el-radio label="nearImg" style="margin: 5px 0 5px 0">近景</el-radio><br />
<el-radio label="farImg">远景</el-radio>
</el-radio-group>
</div>
</div>
</div>
</div>
<SampleSetting
:stepSampling="stepSampling"
@handleStepSampling="handleStepSampling"
@handleDepthList="handleDepthList"
:sampleCldFun="sampleCldFun"
ref="sampleSettingPanel"
></SampleSetting>
<SampleSetting :stepSampling="stepSampling" @handleStepSampling="handleStepSampling"
@handleDepthList="handleDepthList" :sampleCldFun="sampleCldFun" ref="sampleSettingPanel"></SampleSetting>
</div>
</template>
@ -200,7 +136,7 @@ import SampleSetting from "@/components/ration/sampleSetting/index.vue";
import WKT from "terraformer-wkt-parser";
import Formator from "@/mixins/formator";
import cu from "@/lib/cesiumUtils";
import { drawScaleTwo, drawGrid, getNowFormatDate } from "@/lib/utils"
export default {
components: { Pagination, SampleSetting, OtgProductInfo },
mixins: [Formator],
@ -240,6 +176,9 @@ export default {
projection: {
require: true,
},
checkRealityWait: {
require: true,
}
},
data() {
return {
@ -266,6 +205,8 @@ export default {
funcOpt: [],
isDeepSpace: false,
depthList: [],
createImgTime: null,
screenImgStg: true,
};
},
mounted() {
@ -286,7 +227,105 @@ export default {
this.getSqlData();
this.initParam();
},
watch: {
checkRealityWait(val) {
if (val) {
this.screenImgStg = false;
this.addPointInScreenImg();
window.selfDefine.farViewer.scene.postRender.addEventListener(this.addScale);
window.selfDefine.farViewer.scene.postRender.addEventListener(this.addGrid);
this.createImgTime = getNowFormatDate();
} else {
this.removeListener();
this.createImgTime = null;
this.screenImgStg = true;
}
}
},
destroyed() {
this.removeListener();
},
methods: {
addScale() {
let barWidth = undefined;
let currentScaleUnit = undefined;
var geodesic = new Cesium.EllipsoidGeodesic();
var distances = [
1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000, 3000, 5000,
10000, 20000, 30000, 50000, 100000, 200000, 300000, 500000, 1000000,
2000000, 3000000, 5000000, 10000000, 20000000, 30000000, 50000000,
];
// Find the distance between two pixels at the bottom center of the screen.
let scene = window.selfDefine.farViewer.scene;
let width = scene.canvas.clientWidth;
let height = scene.canvas.clientHeight;
let left = scene.camera.getPickRay(
new Cesium.Cartesian2((width / 2) | 0, height - 1)
);
let right = scene.camera.getPickRay(
new Cesium.Cartesian2((1 + width / 2) | 0, height - 1)
);
let globe = scene.globe;
let leftPosition = globe.pick(left, scene);
let rightPosition = globe.pick(right, scene);
if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) {
barWidth = undefined;
currentScaleUnit = undefined;
return;
}
let leftCartographic =
globe.ellipsoid.cartesianToCartographic(leftPosition);
let rightCartographic =
globe.ellipsoid.cartesianToCartographic(rightPosition);
geodesic.setEndPoints(leftCartographic, rightCartographic);
let pixelDistance = geodesic.surfaceDistance;
// Find the first distance that makes the scale bar less than 100 pixels.
let maxBarWidth = 100;
let distance;
for (
let i = distances.length - 1;
!Cesium.defined(distance) && i >= 0;
--i
) {
if (distances[i] / pixelDistance < maxBarWidth) {
distance = distances[i];
}
}
if (Cesium.defined(distance)) {
currentScaleUnit =
distance >= 1000
? "km" : "m";
barWidth = distance >= 1000
? (distance / 1000).toString()
: distance.toString();
} else {
barWidth = undefined;
currentScaleUnit = undefined;
}
drawScaleTwo(barWidth, currentScaleUnit)
},
addGrid() {
const cesiumExtent = window.selfDefine.farViewer.camera.computeViewRectangle();
const params = {};
params.xmax = Cesium.Math.toDegrees(cesiumExtent.east);
params.ymax = Cesium.Math.toDegrees(cesiumExtent.north);
params.xmin = Cesium.Math.toDegrees(cesiumExtent.west);
params.ymin = Cesium.Math.toDegrees(cesiumExtent.south);
drawGrid(6, 6, 'farViewer', [params.xmax, params.ymax, params.xmin, params.ymin])
},
removeListener() {
window.selfDefine.farViewer.scene.postRender.removeEventListener(this.addScale);
window.selfDefine.farViewer.scene.postRender.removeEventListener(this.addGrid);
},
addPointInScreenImg() {
const dl = this.multipleSelection;
for (let i in dl) {
const lon = dl[i].measureLong,
lat = dl[i].measureLat,
alt = 10;
otgCesiumUtils.addPointToViewer(lon, lat, alt);
}
},
handleStepSampling(newVal) {
this.stepSampling = newVal;
},
@ -374,7 +413,7 @@ export default {
}
ssForm.append("splCount", ssn);
getSamplesByLayer(ssForm).then((res) => {
if (res.length === 0 || res === []) {
if (res.length === 0 || res == []) {
self.multipleSelection = self.simpleData = [];
cu.removePoint();
this.$message.error("当前分层设置返回列表为空");
@ -576,7 +615,82 @@ export default {
margin: 5px 15px 0 15px;
width: 33%;
height: 360px;
background-color: rgb(110, 110, 207);
// background-color: rgb(110, 110, 207);
position: relative;
.topContent {
height: 23px;
width: 100%;
text-align: center;
line-height: 23px;
.mapTitle {
font-size: 20px;
font-weight: bold;
}
}
#mapContent {
height: calc(100% - 100px);
position: relative;
padding-left: 70px;
padding-top: 30px;
#grid {
position: absolute;
left: 0;
right: 0;
top: 0;
left: 0;
}
.compass {
width: 50px;
height: 50px;
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
}
#scaleBar {
width: 200px;
height: 40px;
position: absolute;
bottom: 10px;
left: 20px;
z-index: 2;
}
}
#cesiumContent {
height: 100%;
position: relative;
}
#farViewer {
// width: calc(100% - 5px);
width: 100%;
// height: calc(100% - 5px);
height: 100%;
overflow: hidden;
position: relative;
// border: 2px solid black;
}
.bottomCont {
height: 60px;
text-align: left;
width: fit-content;
transform: translateX(-100%);
margin-left: 100%;
white-space: nowrap;
}
}
.onBorder {
border: 1px solid;
background-color: #fff;
}
.imgCtrl {

View File

@ -52,10 +52,10 @@
</el-form-item>
</el-form>
<el-table ref="multipleTable" v-loading="loading" element-loading-text=""
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
:data="simpleData" tooltip-effect="dark" :header-cell-style="headerRowClass"
style="width: 98%; margin-left: 1%" @selection-change="handleSelectionChange" :stripe="true"
:cell-style="tableRowClassName" height="400" size="medium">
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="simpleData"
tooltip-effect="dark" :header-cell-style="headerRowClass" style="width: 98%; margin-left: 1%"
@selection-change="handleSelectionChange" :stripe="true" :cell-style="tableRowClassName" height="400"
size="medium">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="序号" type="index" width="70">
</el-table-column>
@ -107,7 +107,25 @@
<div class="box1">
<span class="sp1"></span><span class="sp2">待检验产品及样本分布结果</span>
</div>
<div id="sceneShowContent" @click="pickValue" style="overflow: hidden; position: relative"></div>
<div :class="checkRealityWait ? 'sceneShowContent onBorder' : 'sceneShowContent'" id="sceneShowContent">
<div v-show="checkRealityWait" class="topContent">
<span class="mapTitle">待检验产品图</span>
</div>
<div :id="checkRealityWait ? 'mapContent' : 'cesiumContent'">
<canvas v-show="checkRealityWait" id="grid"></canvas>
<div id="cesiumView" @click="pickValue">
<div v-show="checkRealityWait" class="compass">
<img src="../../../assets/images/compass_one.svg" alt="" style="width: 100%; height: 100%;">
</div>
<canvas v-show="checkRealityWait" id="scaleBar"></canvas>
</div>
</div>
<div v-show="checkRealityWait" class="bottomCont">
<span>制图单位中国科学院空天信息创新院</span><br />
<span>制图日期{{ createImgTime }}</span>
</div>
</div>
<!-- <div id="sceneShowContent" @click="pickValue" style="overflow: hidden; position: relative"></div> -->
</div>
</div>
<SampleSetting :stepSampling="stepSampling" @handleStepSampling="handleStepSampling"
@ -132,6 +150,7 @@ import cu from "@/lib/cesiumUtils";
import SampleSetting from "@/components/ration/sampleSetting/index.vue";
import WKT from "terraformer-wkt-parser";
import Formator from "@/mixins/formator";
import { drawScaleTwo, drawGrid, getNowFormatDate } from "@/lib/utils";
export default {
components: {
@ -173,6 +192,9 @@ export default {
},
featureMapData: {
require: true,
},
checkRealityWait: {
require: true,
}
},
filters: {
@ -200,10 +222,11 @@ export default {
funcOpt: [],
isDeepSpace: false,
depthList: [],
createImgTime: null
};
},
mounted() {
cu.initCesium("sceneShowContent");
cu.initCesium("cesiumView");
cu.handleClick();
cu.addlayer(this.geoWorkSpace, this.geoLayerName);
let gp = this.geoLayerPos;
@ -221,7 +244,119 @@ export default {
this.getSqlData();
this.initParam();
},
watch: {
checkRealityWait(val) {
const navigationDiv = document.getElementsByClassName('cesium-widget-cesiumNavigationContainer')
if (val) {
window.selfDefine.viewer.scene.postRender.addEventListener(this.addScale);
window.selfDefine.viewer.scene.postRender.addEventListener(this.addGrid);
this.createImgTime = getNowFormatDate();
if (navigationDiv) navigationDiv[0].style.display = "none";
} else {
this.removeListener();
this.createImgTime = null;
if (navigationDiv) navigationDiv[0].style.display = "block";
}
}
},
destroyed() {
this.removeListener();
},
methods: {
addScale() {
let barWidth = undefined;
let currentScaleUnit = undefined;
var geodesic = new Cesium.EllipsoidGeodesic();
var distances = [
1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000, 3000, 5000,
10000, 20000, 30000, 50000, 100000, 200000, 300000, 500000, 1000000,
2000000, 3000000, 5000000, 10000000, 20000000, 30000000, 50000000,
];
// Find the distance between two pixels at the bottom center of the screen.
let scene = window.selfDefine.viewer.scene;
let width = scene.canvas.clientWidth;
let height = scene.canvas.clientHeight;
let left = scene.camera.getPickRay(
new Cesium.Cartesian2((width / 2) | 0, height - 1)
);
let right = scene.camera.getPickRay(
new Cesium.Cartesian2((1 + width / 2) | 0, height - 1)
);
let globe = scene.globe;
let leftPosition = globe.pick(left, scene);
let rightPosition = globe.pick(right, scene);
if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) {
barWidth = undefined;
currentScaleUnit = undefined;
return;
}
let leftCartographic =
globe.ellipsoid.cartesianToCartographic(leftPosition);
let rightCartographic =
globe.ellipsoid.cartesianToCartographic(rightPosition);
geodesic.setEndPoints(leftCartographic, rightCartographic);
let pixelDistance = geodesic.surfaceDistance;
// Find the first distance that makes the scale bar less than 100 pixels.
let maxBarWidth = 100;
let distance;
for (
let i = distances.length - 1;
!Cesium.defined(distance) && i >= 0;
--i
) {
if (distances[i] / pixelDistance < maxBarWidth) {
distance = distances[i];
}
}
if (Cesium.defined(distance)) {
currentScaleUnit =
distance >= 1000
? "km" : "m";
barWidth = distance >= 1000
? (distance / 1000).toString()
: distance.toString();
} else {
barWidth = undefined;
currentScaleUnit = undefined;
}
drawScaleTwo(barWidth, currentScaleUnit)
},
addGrid() {
const cesiumExtent = window.selfDefine.viewer.camera.computeViewRectangle();
const params = {};
params.xmax = Cesium.Math.toDegrees(cesiumExtent.east);
params.ymax = Cesium.Math.toDegrees(cesiumExtent.north);
params.xmin = Cesium.Math.toDegrees(cesiumExtent.west);
params.ymin = Cesium.Math.toDegrees(cesiumExtent.south);
drawGrid(6, 6, 'cesiumView', [params.xmax, params.ymax, params.xmin, params.ymin])
},
getcurrentdomwidth(dom) {
const domObj = document.getElementById(dom);
const clientWidth = domObj.clientWidth;
const clientHeight = domObj.clientHeight;
const offsetWidth = domObj.offsetWidth;
const offsetHeight = domObj.offsetHeight;
const clientLeft = parseFloat(getComputedStyle(domObj).getPropertyValue('padding-left'));
const clientTop = parseFloat(getComputedStyle(domObj).getPropertyValue('padding-top'));
return {
w: clientWidth,
h: clientHeight,
concentW: offsetWidth,
concentH: offsetHeight,
paddingL: clientLeft,
paddingT: clientTop,
}
},
DegreesCoverttoDuFenMiao(degrees) {
let du = degrees.split(".")[0];
let fen = ("0." + degrees.split(".")[1]) * 60 + '';
let miao = (("0." + fen.split(".")[1]) * 60).toFixed(0);
return du + "°" + fen.split(".")[0] + "" + miao + "″";
},
removeListener() {
window.selfDefine.viewer.scene.postRender.removeEventListener(this.addScale);
window.selfDefine.viewer.scene.postRender.removeEventListener(this.addGrid);
},
handleStepSampling(newVal) {
this.stepSampling = newVal;
},
@ -540,10 +675,88 @@ export default {
line-height: 40px;
}
#sceneShowContent {
margin: 10px;
height: calc(100% - 60px);
background-color: rgb(110, 110, 207);
// #sceneShowContent {
// margin: 10px;
// height: calc(100% - 60px);
// background-color: rgb(110, 110, 207);
// }
.sceneShowContent {
height: calc(100% - 55px);
padding: 5px;
.topContent {
height: 30px;
width: 100%;
text-align: center;
line-height: 30px;
.mapTitle {
font-size: 22px;
font-weight: bold;
}
}
#mapContent {
height: calc(100% - 100px);
position: relative;
padding-left: 70px;
padding-top: 30px;
#grid {
position: absolute;
left: 0;
right: 0;
top: 0;
left: 0;
}
.compass {
width: 50px;
height: 50px;
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
}
#scaleBar {
width: 300px;
height: 40px;
position: absolute;
bottom: 10px;
left: 30px;
z-index: 2;
}
}
#cesiumContent {
height: 100%;
position: relative;
padding-top: 5px;
padding-left: 5px;
}
#cesiumView {
width: calc(100% - 10px);
height: calc(100% - 10px);
overflow: hidden;
position: relative;
border: 2px solid black;
}
.bottomCont {
height: 60px;
text-align: left;
width: fit-content;
transform: translateX(-100%);
margin-left: 100%;
white-space: nowrap;
}
}
.onBorder {
border: 1px solid;
}
.box1 {

View File

@ -8,97 +8,42 @@
<div>
<el-form :inline="true" :model="simpleForm" class="demo-form-inline">
<el-form-item>
<el-cascader
v-model="simpleForm.sampleFun"
:disabled="sampleFun !== ''"
:options="funcOpt"
size="mini"
placeholder="请选择抽样方法"
popper-class="cascader-popper"
@change="changeSampleFun"
clearable
:show-all-levels="false"
></el-cascader>
<el-button
v-if="isDeepSpace"
class="edit-btn"
plain
size="mini"
type="primary"
icon="el-icon-edit-outline"
@click="editDeepSpace"
></el-button>
<el-cascader v-model="simpleForm.sampleFun" :disabled="sampleFun !== ''" :options="funcOpt" size="mini"
placeholder="请选择抽样方法" popper-class="cascader-popper" @change="changeSampleFun" clearable
:show-all-levels="false"></el-cascader>
<el-button v-if="isDeepSpace" class="edit-btn" plain size="mini" type="primary" icon="el-icon-edit-outline"
@click="editDeepSpace"></el-button>
</el-form-item>
<el-form-item>
<el-input
v-model="simpleForm.sampleNum"
size="mini"
placeholder="请输入样本个数"
></el-input>
<el-input v-model="simpleForm.sampleNum" size="mini" placeholder="请输入样本个数"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="samplesCk"></el-button>
</el-form-item>
</el-form>
<el-table
ref="multipleTable"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="simpleData"
tooltip-effect="dark"
:header-cell-style="headerRowClass"
style="width: 98%; margin-left: 1%"
@selection-change="handleSelectionChange"
:stripe="true"
:cell-style="tableRowClassName"
height="460"
>
<el-table ref="multipleTable" v-loading="loading" element-loading-text=""
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="simpleData"
tooltip-effect="dark" :header-cell-style="headerRowClass" style="width: 98%; margin-left: 1%"
@selection-change="handleSelectionChange" :stripe="true" :cell-style="tableRowClassName" height="460">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="序号" type="index" width="70">
</el-table-column>
<el-table-column
prop="samplesId"
label="样本编号"
show-overflow-tooltip
min-width="100px;"
>
<el-table-column prop="samplesId" label="样本编号" show-overflow-tooltip min-width="100px;">
</el-table-column>
<el-table-column
prop="lat"
label="纬度"
sortable
show-overflow-tooltip
>
<el-table-column prop="lat" label="纬度" sortable show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="lng"
label="经度"
sortable
show-overflow-tooltip
>
<el-table-column prop="lng" label="经度" sortable show-overflow-tooltip>
</el-table-column>
<!-- <el-table-column :label="smLabel" show-overflow-tooltip>
<template slot-scope="scope">{{
scope.row.paramStr | getSampleVal
}}</template>
</el-table-column> -->
<el-table-column
prop="collectDate"
label="采样时间"
sortable
show-overflow-tooltip
min-width="120px;"
>
<el-table-column prop="collectDate" label="采样时间" sortable show-overflow-tooltip min-width="120px;">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope"
><i
class="el-icon-delete"
@click="deleteSelected(scope.$index, simpleData)"
></i
></template>
<template slot-scope="scope"><i class="el-icon-delete"
@click="deleteSelected(scope.$index, simpleData)"></i></template>
</el-table-column>
</el-table>
</div>
@ -106,23 +51,29 @@
</div>
<div class="smBodyRight">
<div class="box1">
<span class="sp1"></span
><span class="sp2">待检验产品及样本分布结果</span>
<span class="sp1"></span><span class="sp2">待检验产品及样本分布结果</span>
</div>
<div
class="sceneShowContent"
id="cesiumView"
@click="pickValue"
style="overflow: hidden; position: relative"
></div>
<div :class="checkRealityWait ? 'sceneShowContent onBorder' : 'sceneShowContent'" id="sceneShowContent">
<div v-show="checkRealityWait" class="topContent">
<span class="mapTitle">待检验产品图</span>
</div>
<SampleSetting
:stepSampling="stepSampling"
@handleStepSampling="handleStepSampling"
@handleDepthList="handleDepthList"
:sampleCldFun="sampleCldFun"
ref="sampleSettingPanel"
></SampleSetting>
<div :id="checkRealityWait ? 'mapContent' : 'cesiumContent'">
<canvas v-show="checkRealityWait" id="grid"></canvas>
<div id="cesiumView" @click="pickValue">
<div v-show="checkRealityWait" class="compass">
<img src="../../../assets/images/compass_one.svg" alt="" style="width: 100%; height: 100%;">
</div>
<canvas v-show="checkRealityWait" id="scaleBar"></canvas>
</div>
</div>
<div v-show="checkRealityWait" class="bottomCont">
<span>制图单位中国科学院空天信息创新院</span><br />
<span>制图日期{{ createImgTime }}</span>
</div>
</div>
</div>
<SampleSetting :stepSampling="stepSampling" @handleStepSampling="handleStepSampling"
@handleDepthList="handleDepthList" :sampleCldFun="sampleCldFun" ref="sampleSettingPanel"></SampleSetting>
</div>
</template>
@ -137,6 +88,8 @@ import cu from "@/lib/cesiumUtils";
import SampleSetting from "@/components/ration/sampleSetting/index.vue";
import WKT from "terraformer-wkt-parser";
import Formator from "@/mixins/formator";
import { drawScaleTwo, drawGrid, getNowFormatDate } from "@/lib/utils";
export default {
components: {
SampleSetting,
@ -175,6 +128,9 @@ export default {
productSubType: {
require: true,
},
checkRealityWait: {
require: true,
}
},
filters: {
getSampleVal(paramStr) {
@ -201,6 +157,7 @@ export default {
funcOpt: [],
isDeepSpace: false,
depthList: [],
createImgTime: null
};
},
mounted() {
@ -215,7 +172,119 @@ export default {
this.getSplData();
this.initParam();
},
watch: {
checkRealityWait(val) {
const navigationDiv = document.getElementsByClassName('cesium-widget-cesiumNavigationContainer')
if (val) {
window.selfDefine.viewer.scene.postRender.addEventListener(this.addScale);
window.selfDefine.viewer.scene.postRender.addEventListener(this.addGrid);
this.createImgTime = getNowFormatDate();
if (navigationDiv) navigationDiv[0].style.display = "none";
} else {
this.removeListener();
this.createImgTime = null;
if (navigationDiv) navigationDiv[0].style.display = "block";
}
}
},
destroyed() {
this.removeListener();
},
methods: {
addScale() {
let barWidth = undefined;
let currentScaleUnit = undefined;
var geodesic = new Cesium.EllipsoidGeodesic();
var distances = [
1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000, 3000, 5000,
10000, 20000, 30000, 50000, 100000, 200000, 300000, 500000, 1000000,
2000000, 3000000, 5000000, 10000000, 20000000, 30000000, 50000000,
];
// Find the distance between two pixels at the bottom center of the screen.
let scene = window.selfDefine.viewer.scene;
let width = scene.canvas.clientWidth;
let height = scene.canvas.clientHeight;
let left = scene.camera.getPickRay(
new Cesium.Cartesian2((width / 2) | 0, height - 1)
);
let right = scene.camera.getPickRay(
new Cesium.Cartesian2((1 + width / 2) | 0, height - 1)
);
let globe = scene.globe;
let leftPosition = globe.pick(left, scene);
let rightPosition = globe.pick(right, scene);
if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) {
barWidth = undefined;
currentScaleUnit = undefined;
return;
}
let leftCartographic =
globe.ellipsoid.cartesianToCartographic(leftPosition);
let rightCartographic =
globe.ellipsoid.cartesianToCartographic(rightPosition);
geodesic.setEndPoints(leftCartographic, rightCartographic);
let pixelDistance = geodesic.surfaceDistance;
// Find the first distance that makes the scale bar less than 100 pixels.
let maxBarWidth = 100;
let distance;
for (
let i = distances.length - 1;
!Cesium.defined(distance) && i >= 0;
--i
) {
if (distances[i] / pixelDistance < maxBarWidth) {
distance = distances[i];
}
}
if (Cesium.defined(distance)) {
currentScaleUnit =
distance >= 1000
? "km" : "m";
barWidth = distance >= 1000
? (distance / 1000).toString()
: distance.toString();
} else {
barWidth = undefined;
currentScaleUnit = undefined;
}
drawScaleTwo(barWidth, currentScaleUnit)
},
addGrid() {
const cesiumExtent = window.selfDefine.viewer.camera.computeViewRectangle();
const params = {};
params.xmax = Cesium.Math.toDegrees(cesiumExtent.east);
params.ymax = Cesium.Math.toDegrees(cesiumExtent.north);
params.xmin = Cesium.Math.toDegrees(cesiumExtent.west);
params.ymin = Cesium.Math.toDegrees(cesiumExtent.south);
drawGrid(6, 6, 'cesiumView', [params.xmax, params.ymax, params.xmin, params.ymin])
},
getcurrentdomwidth(dom) {
const domObj = document.getElementById(dom);
const clientWidth = domObj.clientWidth;
const clientHeight = domObj.clientHeight;
const offsetWidth = domObj.offsetWidth;
const offsetHeight = domObj.offsetHeight;
const clientLeft = parseFloat(getComputedStyle(domObj).getPropertyValue('padding-left'));
const clientTop = parseFloat(getComputedStyle(domObj).getPropertyValue('padding-top'));
return {
w: clientWidth,
h: clientHeight,
concentW: offsetWidth,
concentH: offsetHeight,
paddingL: clientLeft,
paddingT: clientTop,
}
},
DegreesCoverttoDuFenMiao(degrees) {
let du = degrees.split(".")[0];
let fen = ("0." + degrees.split(".")[1]) * 60 + '';
let miao = (("0." + fen.split(".")[1]) * 60).toFixed(0);
return du + "°" + fen.split(".")[0] + "" + miao + "″";
},
removeListener() {
window.selfDefine.viewer.scene.postRender.removeEventListener(this.addScale);
window.selfDefine.viewer.scene.postRender.removeEventListener(this.addGrid);
},
handleStepSampling(newVal) {
this.stepSampling = newVal;
},
@ -308,7 +377,7 @@ export default {
}
ssForm.append("splCount", ssn);
getSamplesByLayer(ssForm).then((res) => {
if (res.length === 0 || res === []) {
if (res.length === 0 || res == []) {
self.multipleSelection = self.simpleData = [];
cu.removePoint();
self.$message.error("当前分层设置返回列表为空");
@ -420,12 +489,14 @@ export default {
margin-top: 10px;
margin-bottom: 10px;
}
.smBodyLeft {
width: 56%;
height: 570px;
float: left;
margin-right: 4px;
}
.smBodyRight {
width: calc(44% - 4px);
height: 570px;
@ -433,21 +504,26 @@ export default {
float: left;
margin-bottom: 10px;
}
.smps {
height: 570px;
background-color: white;
margin-bottom: 5px;
}
/deep/.smps .el-form-item {
margin-left: 15px;
margin-bottom: 10px;
}
/deep/.smps .el-table th > .cell {
/deep/.smps .el-table th>.cell {
font-size: 15px;
}
/deep/.smps .el-table .cell {
font-size: 13px;
}
.block .pagination-container {
padding: 0px;
margin-top: 6px;
@ -458,9 +534,11 @@ export default {
height: 165px;
background-color: white;
}
/deep/.pixelDeal .el-form-item {
margin-left: 15px;
}
.cardsp {
display: block;
margin-left: 17px;
@ -468,16 +546,91 @@ export default {
color: #606266;
line-height: 40px;
}
.sceneShowContent {
margin: 10px;
height: calc(100% - 60px);
background-color: rgb(110, 110, 207);
height: calc(100% - 55px);
padding: 5px;
.topContent {
height: 30px;
width: 100%;
text-align: center;
line-height: 30px;
.mapTitle {
font-size: 22px;
font-weight: bold;
}
}
#mapContent {
height: calc(100% - 100px);
position: relative;
padding-left: 70px;
padding-top: 30px;
#grid {
position: absolute;
left: 0;
right: 0;
top: 0;
left: 0;
}
.compass {
width: 50px;
height: 50px;
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
}
#scaleBar {
width: 300px;
height: 40px;
position: absolute;
bottom: 10px;
left: 30px;
z-index: 2;
}
}
#cesiumContent {
height: 100%;
position: relative;
padding-top: 5px;
padding-left: 5px;
}
#cesiumView {
width: calc(100% - 10px);
height: calc(100% - 10px);
overflow: hidden;
position: relative;
border: 2px solid black;
}
.bottomCont {
height: 60px;
text-align: left;
width: fit-content;
transform: translateX(-100%);
margin-left: 100%;
white-space: nowrap;
}
}
.onBorder {
border: 1px solid;
}
.box1 {
height: 40px;
line-height: 40px;
border-bottom: 1px solid rgb(205, 205, 205, 0.5);
}
.sp1 {
display: inline-block;
width: 7px;
@ -487,6 +640,7 @@ export default {
margin-left: 20px;
margin-top: 8px;
}
.sp2 {
margin-left: 10px;
font-size: 20px;
@ -494,11 +648,13 @@ export default {
color: #354595;
vertical-align: top;
}
.sp3 {
position: relative;
top: -13px;
margin-left: 10px;
}
//
/deep/.sampleFunParam .el-upload-dragger .el-icon-upload {
margin: 0;
@ -506,9 +662,11 @@ export default {
font-size: 20px;
color: black;
}
.sampleFunParam .upload-demo {
display: inline-block;
}
/deep/.sampleFunParam .el-upload-dragger {
width: 150px;
height: 35px;
@ -516,6 +674,7 @@ export default {
margin-top: 20px;
border: 1px solid #d9d9d9;
}
/deep/.sampleFunParam .el-dialog__body {
padding: 20px 10px;
text-align: center;

View File

@ -34,7 +34,20 @@ class CesiumUtils {
tileMatrixSetID: "GoogleMapsCompatible",
show: true,
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
})
}),
// html2canvas截图场景黑屏解决
contextOptions: {
webgl: {
alpha: true,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: true,
//通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer: true,
failIfMajorPerformanceCaveat: true
}
}
};
let viewer = new Cesium.Viewer(divMapId, options);
window.selfDefine.viewer = viewer;
@ -169,7 +182,7 @@ class CesiumUtils {
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
const that = this;
handler.setInputAction(function(movement) {
handler.setInputAction(function (movement) {
// 清除历史单击点
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
// movement.position 像素的x、y坐标

9013
src/lib/html2canvas.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -29,7 +29,20 @@ class otgCesiumUtils {
tileMatrixSetID: "GoogleMapsCompatible",
show: true,
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
})
}),
// html2canvas截图场景黑屏解决
contextOptions: {
webgl: {
alpha: true,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: true,
//通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer: true,
failIfMajorPerformanceCaveat: true
}
}
};
let farViewer = new Cesium.Viewer(divMapId[0], options);
let nearViewer = new Cesium.Viewer(divMapId[1], options);
@ -143,6 +156,15 @@ class otgCesiumUtils {
}
}
}
static addPointToViewer(pLon, pLat, pAlt) {
this.farViewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(pLon, pLat, pAlt),
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW
}
});
}
static addPointToFarViewer(pLon, pLat, pAlt) {
var peOfFarViewer = this.farViewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(pLon, pLat, pAlt),
@ -179,7 +201,7 @@ class otgCesiumUtils {
this.handler = new Cesium.ScreenSpaceEventHandler(self.nearViewer.scene.canvas);
let ellipsoid = self.nearViewer.scene.globe.ellipsoid;
//单击鼠标左键画点
this.handler.setInputAction(function(movement) {
this.handler.setInputAction(function (movement) {
let cartesian = self.nearViewer.scene.camera.pickEllipsoid(
movement.position,
self.nearViewer.scene.globe.ellipsoid

128
src/lib/utils.js Normal file
View File

@ -0,0 +1,128 @@
// 绘制黑白相间比例尺
export function drawScaleTwo(value, currentScaleUnit) {
var canvas = document.querySelector('#scaleBar');
var ctx = canvas.getContext('2d');
canvas.height = 23;
// canvas.style.border = "1px solid #000"
// 把当前的上下文的状态保存起来
ctx.transform(1, 0, 0, 1, 15, 0);
ctx.save();
//设置比例尺文字样式
const fontSize = '12';
ctx.font = "normal bold " + fontSize + "px Arial";
ctx.fillStyle = 'white'
ctx.textBaseline = "hanging";
//比例尺最小格宽度、高度
const width = 35;
//绘制文字
ctx.transform(1, 0, 0, 1, -10, 0);
for (let i = 0; i < 6; i++) {
// if (i < 1) {
// ctx.fillText(0, width * i, 0);
// } else {
ctx.fillText(parseFloat((i / 5 * value).toFixed(1)), width * i, 0);
// }
}
ctx.transform(1, 0, 0, 1, 8, 0);
ctx.fillText(currentScaleUnit, width * 5 + 10, 10);
// 把上一次保存的ctx状态还原。
ctx.restore();
for (let i = 0; i < 5; i++) {
//开一个新路径,开启新状态的绘图
ctx.beginPath();
ctx.rect(width * i, fontSize, width, 8);
// i === 3 || i == 0 ? (i === 3 ? ctx.rect(28 * 4, fontSize, 28 * 2, 8) : ctx.rect(28 * i, fontSize, 28, 8)) : ctx
// .rect(28 * i, fontSize, 28 * i, 8)
//描边的意思
ctx.stroke();
//设置填充的样式
i % 2 === 0 ? ctx.fillStyle = 'black' : ctx.fillStyle = 'white'
//进行填充的工作
ctx.fill();
}
}
//绘制格网
export function drawGrid(row, col, viewDom, extent) {
var canvas = document.querySelector('#grid')
const thematicMapDom = getcurrentdomwidth('mapContent')
canvas.width = thematicMapDom.w
canvas.height = thematicMapDom.h
// canvas.style.border = '1px solid black'
var ctx = canvas.getContext('2d')
//获取格网dom真实宽高
const gridDom = getcurrentdomwidth('grid')
//获取专题图dom真实宽高
const map2dDom = getcurrentdomwidth(viewDom)
//每一小格宽度
const gridW = map2dDom.concentW / col
//每一小格高度
const gridH = map2dDom.concentH / row
//每一小格高度
// const gridH=10
for (let i = 0; i < col; i++) {
//绘制上下格网
ctx.moveTo(i * gridW + (thematicMapDom.paddingL) + 1, thematicMapDom.paddingT) //画笔移动到100100点
ctx.lineTo(i * gridW + (thematicMapDom.paddingL) + 1, thematicMapDom.paddingT - 2) //从画笔位置画一条直线到200100点
ctx.moveTo(i * gridW + (thematicMapDom.paddingL - gridDom.paddingL) + 1, thematicMapDom.concentH + thematicMapDom.paddingT) //画笔移动到100100点
ctx.lineTo(i * gridW + (thematicMapDom.paddingL - gridDom.paddingL) + 1, thematicMapDom.concentH + thematicMapDom.paddingT + 6) //从画笔位置画一条直线到200100点
//设置线宽
ctx.lineWidth = 1
//设置描边样式
ctx.strokeStyle = 'blue' //rgb(),rgba(),red,#fff
ctx.stroke() //描边
//绘制上下坐标文字[113, 30.2, 115, 32.2]
const fontSize = '12'
ctx.font = "normal bold " + fontSize + "px Arial"
ctx.textBaseline = "bottom"
ctx.fillText(DegreesCoverttoDuFenMiao(((extent[2] - extent[0]) / col * i + extent[0]).toString()) + 'E', i * gridW + (thematicMapDom.paddingL - gridDom.paddingL) - 18, thematicMapDom.paddingT)
}
for (let i = 0; i < row; i++) {
//绘制左右格网
ctx.moveTo(thematicMapDom.paddingL, i * gridH + thematicMapDom.paddingT + 1)
ctx.lineTo(thematicMapDom.paddingL - 2, i * gridH + thematicMapDom.paddingT + 1)
ctx.moveTo(thematicMapDom.paddingL + thematicMapDom.concentW + 4, i * gridH + thematicMapDom.paddingT + 1)
ctx.lineTo(thematicMapDom.paddingL + thematicMapDom.concentW + 6, i * gridH + thematicMapDom.paddingT + 1)
//设置线宽
ctx.lineWidth = 2
//设置描边样式
ctx.strokeStyle = 'blue' //rgb(),rgba(),red,#fff
ctx.stroke() //描边
//设置比例尺文字样式
ctx.textAlign = "right"
const fontSize = '12'
ctx.font = "normal bold " + fontSize + "px Arial"
ctx.textBaseline = "hanging"
ctx.fillText(DegreesCoverttoDuFenMiao(((extent[3] - extent[1]) / col * i + extent[1]).toString()) + 'N', thematicMapDom.paddingL - 2, i * gridH + thematicMapDom.paddingT + 1)
}
}
function getcurrentdomwidth(dom) {
const domObj = document.getElementById(dom);
const clientWidth = domObj.clientWidth;
const clientHeight = domObj.clientHeight;
const offsetWidth = domObj.offsetWidth;
const offsetHeight = domObj.offsetHeight;
const clientLeft = parseFloat(getComputedStyle(domObj).getPropertyValue('padding-left'));
const clientTop = parseFloat(getComputedStyle(domObj).getPropertyValue('padding-top'));
return {
w: clientWidth,
h: clientHeight,
concentW: offsetWidth,
concentH: offsetHeight,
paddingL: clientLeft,
paddingT: clientTop,
}
}
function DegreesCoverttoDuFenMiao(degrees) {
let du = degrees.split(".")[0];
let fen = ("0." + degrees.split(".")[1]) * 60 + '';
let miao = (("0." + fen.split(".")[1]) * 60).toFixed(0);
return du + "°" + fen.split(".")[0] + "" + miao + "″";
}
//获取当前日期函数
export function getNowFormatDate() {
let date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
strDate = date.getDate();
return `${year}${month}${strDate}`
}

View File

@ -444,9 +444,9 @@ export default {
const localTiffPath = null;
let rt = rpm.tifPath.split("/");
//i访
const httpTiffPath =
"http://10.0.31.126:8085/microwaveData/tif/" + rt[rt.length - 1];
// const httpTiffPath = rpm.tifPath;
// const httpTiffPath =
// "http://10.0.31.126:8085/microwaveData/tif/" + rt[rt.length - 1];
const httpTiffPath = rpm.tifPath;
const polarizationMethod = "HH";
exportWord(
pdfMsg,

View File

@ -4,65 +4,25 @@
<router-view></router-view>
</transition>
<!-- 订单展示 -->
<div
class="page"
v-show="pageshow"
v-loading="checkRealityWait"
element-loading-text="正在检验..."
element-loading-spinner="el-icon-loading"
>
<div class="page" v-show="pageshow" v-loading="checkRealityWait" element-loading-text="..."
element-loading-spinner="el-icon-loading">
<div class="cardfrist">
<div class="box1">
<span class="sp1"></span><span class="sp2">订单信息</span>
</div>
<el-table
:header-cell-style="{ background: '#E4E9F1' }"
:cell-style="tableRowClassName"
:data="orderData"
style="width: 98%; margin-left: 1%; margin-top: 15px"
>
<el-table-column
prop="orderCode"
label="订单编号"
sortable
width="180"
align="center"
>
<el-table :header-cell-style="{ background: '#E4E9F1' }" :cell-style="tableRowClassName" :data="orderData"
style="width: 98%; margin-left: 1%; margin-top: 15px">
<el-table-column prop="orderCode" label="订单编号" sortable width="180" align="center">
</el-table-column>
<el-table-column
prop="orderSource"
label="订单来源"
sortable
align="center"
>
<el-table-column prop="orderSource" label="订单来源" sortable align="center">
</el-table-column>
<el-table-column
prop="uploadDate"
label="提交时间"
sortable
align="center"
>
<el-table-column prop="uploadDate" label="提交时间" sortable align="center">
</el-table-column>
<el-table-column
prop="fileName"
label="文件名"
sortable
align="center"
>
<el-table-column prop="fileName" label="文件名" sortable align="center">
</el-table-column>
<el-table-column
prop="fileSize"
label="产品大小"
sortable
align="center"
>
<el-table-column prop="fileSize" label="产品大小" sortable align="center">
</el-table-column>
<el-table-column
prop="fileFormat"
label="文件格式"
sortable
align="center"
>
<el-table-column prop="fileFormat" label="文件格式" sortable align="center">
</el-table-column>
<el-table-column label="元数据" align="center">
<el-button type="primary" @click="changeshow"></el-button>
@ -75,128 +35,59 @@
<span class="sp1"></span><span class="sp2">元数据查看</span>
</div>
<div class="cstop">
<el-form
:inline="true"
:model="formInline"
class="demo-form-inline"
:disabled="true"
>
<el-form :inline="true" :model="formInline" class="demo-form-inline" :disabled="true">
<el-form-item label="卫星" class="ysjMsg">
<el-input
class="ysjMsgMrg"
v-model="formInline.satellite"
placeholder="卫星名称"
></el-input>
<el-input class="ysjMsgMrg" v-model="formInline.satellite" placeholder="卫星名称"></el-input>
</el-form-item>
<el-form-item label="载荷名称" class="ysjMsg">
<el-input
v-model="formInline.load"
placeholder="载荷方式"
></el-input>
<el-input v-model="formInline.load" placeholder="载荷方式"></el-input>
</el-form-item>
<el-form-item label="空间分辨率" class="ysjMsg2">
<el-input
v-model="formInline.resRatio"
placeholder="空间分辨率"
></el-input>
<el-input v-model="formInline.resRatio" placeholder="空间分辨率"></el-input>
</el-form-item>
<el-form-item label="时间" class="ysjMsg">
<el-input
class="ysjMsgMrg"
v-model="formInline.producedDate"
placeholder="生产时间"
></el-input>
<el-input class="ysjMsgMrg" v-model="formInline.producedDate" placeholder="生产时间"></el-input>
</el-form-item>
<el-form-item
label="级别"
prop="resource"
style="width: 20%"
class="ysjMsg2"
>
<el-form-item label="级别" prop="resource" style="width: 20%" class="ysjMsg2">
<el-radio-group v-model="formInline.proLevel">
<el-radio label="3"></el-radio>
<el-radio label="4"></el-radio>
<el-radio label="5"></el-radio>
</el-radio-group> </el-form-item
><br />
</el-radio-group> </el-form-item><br />
<el-form-item label="坐标系统" class="ysjMsg">
<el-input
v-model="formInline.coordinateSys"
placeholder="坐标系统"
></el-input>
<el-input v-model="formInline.coordinateSys" placeholder="坐标系统"></el-input>
</el-form-item>
<el-form-item label="最小纬度" class="ysjMsg">
<el-input
v-model="formInline.minLat"
placeholder="最小纬度"
></el-input>
<el-input v-model="formInline.minLat" placeholder="最小纬度"></el-input>
</el-form-item>
<el-form-item label="最大纬度" class="ysjMsg2">
<el-input
style="margin-left: 6px"
v-model="formInline.maxLat"
placeholder="最大纬度"
></el-input>
<el-input style="margin-left: 6px" v-model="formInline.maxLat" placeholder="最大纬度"></el-input>
</el-form-item>
<el-form-item label="最小经度" class="ysjMsg">
<el-input
v-model="formInline.minLon"
placeholder="最小经度"
></el-input>
<el-input v-model="formInline.minLon" placeholder="最小经度"></el-input>
</el-form-item>
<el-form-item label="最大经度" class="ysjMsg2">
<el-input
v-model="formInline.maxLon"
placeholder="最大经度"
></el-input>
<el-input v-model="formInline.maxLon" placeholder="最大经度"></el-input>
</el-form-item>
</el-form>
</div>
</div>
<!-- 正射校正 -->
<OtgCorrection
:sampleFun="sampleFun"
:sampleCldFun="sampleCldFun"
:pixelFun="pixelFun"
:pixelNum="pixelNum"
:geoWorkSpace="geoWorkSpace"
:geoLayerName="geoLayerName"
:geoLayerPos="geoLayerPos"
:orderId="orderId"
:productSubType="productSubType"
:projection="projection"
ref="otgCorrectionPanel"
v-if="productSubType === 45"
></OtgCorrection>
<OtgCorrection :sampleFun="sampleFun" :sampleCldFun="sampleCldFun" :pixelFun="pixelFun" :pixelNum="pixelNum"
:geoWorkSpace="geoWorkSpace" :geoLayerName="geoLayerName" :geoLayerPos="geoLayerPos" :orderId="orderId"
:productSubType="productSubType" :projection="projection" :checkRealityWait="checkRealityWait"
ref="otgCorrectionPanel" v-if="productSubType === 45">
</OtgCorrection>
<!-- 地表覆盖 -->
<Qualitative
:sampleFun="sampleFun"
:sampleCldFun="sampleCldFun"
:pixelFun="pixelFun"
:pixelNum="pixelNum"
:geoWorkSpace="geoWorkSpace"
:geoLayerName="geoLayerName"
:geoLayerPos="geoLayerPos"
:orderId="orderId"
:productSubType="productSubType"
:featureMapData="featureMapData"
ref="qualitativePanel"
v-else-if="productSubType === 39 || productSubType === 47"
></Qualitative>
<Qualitative :sampleFun="sampleFun" :sampleCldFun="sampleCldFun" :pixelFun="pixelFun" :pixelNum="pixelNum"
:geoWorkSpace="geoWorkSpace" :geoLayerName="geoLayerName" :geoLayerPos="geoLayerPos" :orderId="orderId"
:productSubType="productSubType" :featureMapData="featureMapData" :checkRealityWait="checkRealityWait"
ref="qualitativePanel" v-else-if="productSubType === 39 || productSubType === 47"></Qualitative>
<!-- 土壤水份等 -->
<SoilMositure
:sampleFun="sampleFun"
:sampleCldFun="sampleCldFun"
:pixelFun="pixelFun"
:pixelNum="pixelNum"
:geoWorkSpace="geoWorkSpace"
:geoLayerName="geoLayerName"
:geoLayerPos="geoLayerPos"
:orderId="orderId"
:productSubType="productSubType"
ref="soilMositurePanel"
v-else
></SoilMositure>
<SoilMositure :sampleFun="sampleFun" :sampleCldFun="sampleCldFun" :pixelFun="pixelFun" :pixelNum="pixelNum"
:geoWorkSpace="geoWorkSpace" :geoLayerName="geoLayerName" :geoLayerPos="geoLayerPos" :orderId="orderId"
:productSubType="productSubType" :checkRealityWait="checkRealityWait" ref="soilMositurePanel" v-else>
</SoilMositure>
<!-- 真实性检验方法 -->
<div class="cardfive" v-if="!hasPixelFun">
<div class="box1">
@ -204,29 +95,15 @@
</div>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="检验方法">
<el-select
v-model="formInline.truthCheckFun"
multiple
:disabled="truthFun"
placeholder="请选择"
>
<el-option
v-for="item in truthCheckFunOpt"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model="formInline.truthCheckFun" multiple :disabled="truthFun" placeholder="请选择">
<el-option v-for="item in truthCheckFunOpt" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="btngroup">
<el-button class="shbtn" type="primary" @click="todaichuli"
>取消</el-button
>
<el-button class="shbtn" type="primary" @click="changepage"
>确定</el-button
>
<el-button class="shbtn" type="primary" @click="todaichuli"></el-button>
<el-button class="shbtn" type="primary" @click="changepage"></el-button>
</div>
</div>
<div class="card2" v-if="hasPixelFun">
@ -240,49 +117,24 @@
<span class="cardsp">目标分辨率{{ pixelNum }}</span>
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="像元级处理模型:">
<el-select
v-model="pixelFun"
placeholder="选择像元级处理方法"
@change="pixelFunChanged"
ref="pixelSel"
>
<el-select v-model="pixelFun" placeholder="选择像元级处理方法" @change="pixelFunChanged" ref="pixelSel">
<el-option label="" value=""></el-option>
<el-option
label="均值法"
value="1"
v-if="
(globalSampleFun !== 1 && globalSampleFun !== '1') ||
<el-option label="均值法" value="1" v-if="(globalSampleFun !== 1 && globalSampleFun !== '1') ||
globalSampleFun === null ||
globalSampleFun === ''
"
></el-option>
<el-option
label="最邻近法"
value="6"
v-if="
(globalSampleFun !== 1 && globalSampleFun !== '1') ||
"></el-option>
<el-option label="最邻近法" value="6" v-if="(globalSampleFun !== 1 && globalSampleFun !== '1') ||
globalSampleFun === null ||
globalSampleFun === ''
"
></el-option>
<el-option
label="克里格法"
value="7"
v-if="
(globalSampleFun !== 1 && globalSampleFun !== '1') ||
"></el-option>
<el-option label="克里格法" value="7" v-if="(globalSampleFun !== 1 && globalSampleFun !== '1') ||
globalSampleFun === null ||
globalSampleFun === ''
"
></el-option>
<el-option
label="块克里格法"
value="9"
v-if="
(globalSampleFun !== 1 && globalSampleFun !== '1') ||
"></el-option>
<el-option label="块克里格法" value="9" v-if="(globalSampleFun !== 1 && globalSampleFun !== '1') ||
globalSampleFun === null ||
globalSampleFun === ''
"
></el-option>
"></el-option>
<el-option label="MSN法" value="10"></el-option>
</el-select>
</el-form-item>
@ -297,18 +149,8 @@
</div>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="检验方法:">
<el-select
v-model="formInline.truthCheckFun"
multiple
:disabled="truthFun"
placeholder="请选择"
>
<el-option
v-for="item in truthCheckFunOpt"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model="formInline.truthCheckFun" multiple :disabled="truthFun" placeholder="请选择">
<el-option v-for="item in truthCheckFunOpt" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
@ -316,12 +158,8 @@
</div>
<div class="cardfive">
<div class="btngroup">
<el-button class="shbtn" type="primary" @click="todaichuli"
>取消</el-button
>
<el-button class="shbtn" type="primary" @click="changepage"
>确定</el-button
>
<el-button class="shbtn" type="primary" @click="todaichuli"></el-button>
<el-button class="shbtn" type="primary" @click="changepage"></el-button>
</div>
</div>
</div>
@ -341,7 +179,7 @@ import {
resetCheck
} from "@/api/lang/pendingOrder";
import qs from "qs";
import html2canvas from "@/lib/html2canvas.js"
import { productSubTypeVal, truthFunVal } from "@/lib/contract.js";
export default {
@ -381,8 +219,8 @@ export default {
featureMapData: [],
orderId: undefined,
userId: null,
userName:null,
token:null,
userName: null,
token: null,
formInline: {
truthCheckFun: [],
satellite: "", //
@ -439,10 +277,10 @@ export default {
const pm = (self.productMsg = am.productMsg);
self.geoWorkSpace = pm.geoWorkspace;
self.geoLayerName = pm.geoLayerName;
// self.tifPath = pm.ftpPath;
self.tifPath = pm.ftpPath;
//访
let rt = pm.ftpPath.split('/');
self.tifPath ='http://10.0.31.125:18030/inspection/files/' + rt[rt.length - 1];
// let rt = pm.ftpPath.split('/');
// self.tifPath = 'http://10.0.31.125:18030/inspection/files/' + rt[rt.length - 1];
self.projection = pm.projection;
//
@ -492,9 +330,9 @@ export default {
}
},
todaichuli() {
resetCheck({orderId:this.orderId}).then(res=>{
if(res.code === 200){
window.location.href =`${DAICHULI_URL}?orderid=${this.orderId}&token=${this.token}`;
resetCheck({ orderId: this.orderId }).then(res => {
if (res.code === 200) {
window.location.href = `${DAICHULI_URL}?orderid=${this.orderId}&token=${this.token}`;
}
})
},
@ -520,7 +358,6 @@ export default {
}
this.sampleList = smpVal.multipleSelection;
// if (featureMapData !== [] || featureMapData.length !== 0)
// this.updateCoverType(featureMapData);
@ -540,8 +377,12 @@ export default {
this.addCotSamples(this.sampleList, allSampleData, orderId);
//
this.updateTruthFun(orderId, tcf);
this.checkRealityWait = true;
// setTimeout(() => {
// this.screenCapture(this.sampleList, this.geoLayerPos).then(imgRes => {
// this.checkRealityWait = false;
// })
// }, 2000)
//
var formData = new FormData();
formData.append("orderId", orderId); //ID
@ -555,13 +396,10 @@ export default {
formData.append("featureMapping", JSON.stringify(featureMapData));
formData.append("polarizationMethod", 'HH');
checkReality(formData).then((res) => {
console.log("真实性校验:", res);
this.checkRealityWait = false;
// console.log("", res);
if (res?.code === 200 && res.message === "success") {
this.$message({
message: "真实性检验完成",
type: "success",
});
this.$nextTick(function () {
this.screenCapture(this.sampleList, this.geoLayerPos).then(imgRes => {
const rm = res.data;
const reportMsg = {
pdSubType: this.productSubType,
@ -574,8 +412,8 @@ export default {
sampleList: this.sampleList,
orderId: this.orderId,
userId: this.userId,
userName:this.userName,
token:this.token,
userName: this.userName,
token: this.token,
orderMsg: this.orderMsg,
productMsg: this.productMsg,
};
@ -583,14 +421,107 @@ export default {
this.configration.path.inspection,
JSON.stringify(reportMsg)
);
this.$message({
message: "真实性检验完成",
type: "success",
});
this.checkRealityWait = false;
// console.log(reportMsg, imgRes);
this.$router.push({ name: "报告生成", params: reportMsg });
});
})
} else {
this.$message({
message: res.message,
type: "error",
});
this.checkRealityWait = false;
}
});
},
screenCapture(allSampel, gp) {
return new Promise((resolve) => {
const allLon = [], allLat = [];
if (this.productSubType === productSubTypeVal.ACS_ORTHOPHOTO) {
for (let i in allSampel) {
allLon.push(allSampel[i].measureLong);
allLat.push(allSampel[i].measureLat);
}
} else {
for (let i in allSampel) {
allLon.push(allSampel[i].lng);
allLat.push(allSampel[i].lat);
}
}
const sampleExtent = [Math.min(...allLon), Math.min(...allLat), Math.max(...allLon), Math.max(...allLat)]
this.setViewToRect(sampleExtent[0], sampleExtent[1], sampleExtent[2], sampleExtent[3]);
this.getCaptrue().then(res => {
this.setViewToRect(gp[0], gp[1], gp[2], gp[3]);
this.getCaptrue().then(res1 => {
if (this.productSubType === productSubTypeVal.ACS_ORTHOPHOTO) window.selfDefine.farViewer.entities.removeAll();
else window.selfDefine.viewer.entities.removeAll();
setTimeout(() => {
this.getCaptrue().then(res2 => {
resolve({
sampleImgFd: res,
sampleImg: res1,
productImg: res2
})
});
}, 1000)
})
})
})
},
getCaptrue() {
return new Promise((resolve, reject) => {
const sceneDom = document.getElementById('sceneShowContent');
if (sceneDom !== null) {
html2canvas(sceneDom, {
useCORS: true,
height: sceneDom.offsetHeight,
width: sceneDom.offsetWidth,
scrollY: 0,
scrollX: 0
}).then(async (cbCanvas) => {
resolve(cbCanvas.toDataURL())
// cbCanvas.toBlob(blob => {
// const href = window.URL.createObjectURL(new Blob([blob]))
// const link = document.createElement('a')
// link.href = href
// link.download = '.png'
// document.body.appendChild(link)
// link.click()
// document.body.removeChild(link)
// resolve(href)
// }, 'image/png')
});
}
})
},
setViewToRect(minLon, minLat, maxLon, maxLat) {
minLon = Number(minLon);
minLat = Number(minLat);
maxLon = Number(maxLon);
maxLat = Number(maxLat);
const ctLon = ((minLon + maxLon) / 2).toFixed(8);
const ctLat = ((minLat + maxLat) / 2).toFixed(8);
const west = minLon * 2 - ctLon;
const south = minLat * 2 - ctLat;
const east = maxLon * 2 - ctLon;
const north = maxLat * 2 - ctLat;
const rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);
if (this.productSubType === productSubTypeVal.ACS_ORTHOPHOTO) {
window.selfDefine.farViewer.camera.setView({
destination: rectangle
});
} else {
window.selfDefine.viewer.camera.setView({
destination: rectangle
});
}
},
addCotSamples(samplesList, allSampleData, orderId) {
for (let i in samplesList) {
@ -778,7 +709,7 @@ export default {
background-color: #354595;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
/deep/.el-radio__input.is-checked+.el-radio__label {
color: #606266;
}

View File

@ -159,8 +159,8 @@ export default {
}
},
changePage(orderMsg) {
// 150424 150208 PL_DF_DF_20220905175209_8648 150166 PL_DF_DF_20220905112508_4567 150533 PL_DF_DF_20230221173349_4569 152279
this.$router.push("/orderUnprocessed?orderId=152586&token=WEB*1696828528663@DCLS_ZZX-yg000087_29e20440e8ea4c8692a0f9bc22ad3e0b");
// 152945 150208 PL_DF_DF_20220905175209_8648 153029 PL_DF_DF_20220905112508_4567 150533 PL_DF_DF_20230221173349_4569 152946
this.$router.push("/orderUnprocessed?orderId=153029&token=WEB*1701681396582@7282_ZZX-yg000087_44bb4c27458645c6b4d2a30717d73e9a");
},
},
};

View File

@ -21,7 +21,7 @@ module.exports = {
open: false,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: "http://124.16.188.131:18030",
target: "http://124.16.188.131:28030",
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: ""
@ -35,7 +35,7 @@ module.exports = {
}
},
[process.env.VUE_APP_REALITY_API]: {
target: "http://124.16.188.131:18092/microwave",
target: "http://124.16.188.131:28092/microwave",
// target: "http://192.168.1.104:18092/microwave",
changeOrigin: true,
pathRewrite: {
@ -43,7 +43,7 @@ module.exports = {
}
},
[process.env.VUE_APP_FILE_API]: {
target: "http://124.16.188.131:18093/file",
target: "http://124.16.188.131:28093/file",
// target: "http://192.168.1.104:18093/file",
changeOrigin: true,
pathRewrite: {