创建新仓库
This commit is contained in:
236
src/renderer/components/dialog/adddirectory.vue
Normal file
236
src/renderer/components/dialog/adddirectory.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="adddirectory">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<!-- <span></span> -->
|
||||
<span class="label">{{ title }}</span>
|
||||
<div class="close-box" @click="close">
|
||||
<span class="close"></span>
|
||||
<i>x</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxBody">
|
||||
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px" @keyup.enter.native="submit">
|
||||
<el-form-item label="名称：" prop="source_name">
|
||||
<!-- @input="removeSpaces" -->
|
||||
<el-input size="mini" v-model.trim="form.source_name" placeholder="图层文件夹"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="btnOption">
|
||||
<el-button type="primary" @click="submit">确定</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addSource } from "../../api/gisAPI";
|
||||
import {
|
||||
getKeyOfSelectedNode,
|
||||
getSelectedNode,
|
||||
cusAddNodes,
|
||||
getNodeData,
|
||||
} from "../Tree/treeNode.js";
|
||||
export default {
|
||||
name: "adddirectory",
|
||||
data() {
|
||||
return {
|
||||
title: '添加文件夹',
|
||||
form: {
|
||||
source_id: "",
|
||||
source_name: "图层",
|
||||
},
|
||||
rules: {
|
||||
source_name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
removeSpaces(value) {
|
||||
this.form.source_name = value.replace(/\s/g, '');
|
||||
},
|
||||
close() {
|
||||
this.$changeComponentShow(".adddirectory", false);
|
||||
},
|
||||
submit() {
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.add();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
add() {
|
||||
console.log(window.treeObj);
|
||||
let p_id = getKeyOfSelectedNode(window.treeObj, "source_id");
|
||||
let option = {
|
||||
source_name: this.form.source_name,
|
||||
source_id: this.$md5(new Date().getTime() + "图层"),
|
||||
source_type: "directory",
|
||||
p_id,
|
||||
};
|
||||
let node = getNodeData(option, {});
|
||||
let treeArr = window.treeObj.getNodesByParam("level", 0);
|
||||
//循环treeArr，找到tree_index最大的节点，然后node.tree_index = tree_index + 1
|
||||
let max_tree_index = 0;
|
||||
treeArr.forEach(item => {
|
||||
if (item.tree_index > max_tree_index) {
|
||||
max_tree_index = item.tree_index;
|
||||
}
|
||||
});
|
||||
node.tree_index = max_tree_index + 1;
|
||||
// node.tree_index = tree_index;
|
||||
addSource(node).then((res) => {
|
||||
cusAddNodes(
|
||||
window.treeObj,
|
||||
getSelectedNode(window.treeObj),
|
||||
[node]
|
||||
);
|
||||
this.cancel()
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.$changeComponentShow(".adddirectory", false);
|
||||
this.form = {
|
||||
source_id: "",
|
||||
source_name: "图层",
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.adddirectory {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.box {
|
||||
width: 20vw;
|
||||
height: 10vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--color-sdk-auxiliary-public);
|
||||
font-size: 14px;
|
||||
// z-index: 999999;
|
||||
background: linear-gradient(0deg, var(--color-sdk-bg-gradual)),
|
||||
rgba(0, 0, 0, 0.6);
|
||||
border: 1.5px solid;
|
||||
backdrop-filter: blur(2px);
|
||||
border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1;
|
||||
text-align: left;
|
||||
font-family: "sy-boldface";
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
line-height: 46px;
|
||||
padding: 5px 16px 5px 16px;
|
||||
height: 46px;
|
||||
|
||||
.label {
|
||||
font-family: "Ali-mother-counts-bold";
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
text-shadow: 0px 0px 9px rgb(20 118 255);
|
||||
}
|
||||
|
||||
.close-box {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
border-radius: 0 0 0 90%;
|
||||
overflow: hidden;
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(var(--color-sdk-base-rgb), 1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
}
|
||||
|
||||
.btnOption {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
color: #ffffff;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.el-button:hover {
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
src/renderer/components/dialog/bimInfo.vue
Normal file
130
src/renderer/components/dialog/bimInfo.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="bimInfo" v-draggable>
|
||||
<div class="nav">
|
||||
<span></span>
|
||||
<span>BIM信息</span>
|
||||
<i class="el-icon-close" @click="closeEditor"></i>
|
||||
<!-- <iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals" id="dsa"
|
||||
src="http://192.168.1.15:8081/11.html" width="100%" height="200px"></iframe>-->
|
||||
</div>
|
||||
<el-tabs type="border-card" v-model="activeName">
|
||||
<el-tab-pane label="显示" name="show">
|
||||
<div class="w-e-text" v-html="richText"></div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="编辑" name="edit">
|
||||
<div id="richTextBimEditor"></div>
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getBimInfo, addBimInfo} from "../../api/gisAPI";
|
||||
import richText from "../editor/components/components/richText";
|
||||
|
||||
export default {
|
||||
name: "bimInfo",
|
||||
mixins: [richText],
|
||||
data() {
|
||||
return {
|
||||
richText: "show",
|
||||
activeName: '',
|
||||
source_id: "2af719594eafd89d04221f2cbe815477",
|
||||
bim_id: "7f6ffaa6bb0b408017b62254211691b5"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeName(val) {
|
||||
if (this.activeName == 'edit') {
|
||||
this.$nextTick(() => {
|
||||
this.createEditor("#richTextBimEditor")
|
||||
this.setEditorContent(this.richText)
|
||||
this.closeKeyDownListener()
|
||||
})
|
||||
} else if (this.activeName == 'show') {
|
||||
getBimInfo({
|
||||
source_id: this.source_id,
|
||||
bim_id: this.bim_id
|
||||
}, (res) => {
|
||||
console.log(res)
|
||||
this.richText = res.detail
|
||||
});
|
||||
this.destroyEditor()
|
||||
// richTextBimEditor
|
||||
$("#richTextBimEditor").empty();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeEditor() {
|
||||
this.$changeComponentShow(".bimInfoBox", false)
|
||||
},
|
||||
init(pickedObjectId) {
|
||||
this.bim_id = pickedObjectId
|
||||
this.activeName = 'show'
|
||||
getBimInfo({
|
||||
source_id: this.source_id,
|
||||
bim_id: this.bim_id
|
||||
}, (res) => {
|
||||
console.log(res)
|
||||
this.richText = res.detail
|
||||
});
|
||||
/*getBimInfo({
|
||||
source_id: this.source_id,
|
||||
bim_id: this.bim_id
|
||||
}, (res) => {
|
||||
console.log(res)
|
||||
this.richText = res.detail
|
||||
});*/
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.$recvChanel("saveRichText", () => {
|
||||
console.log("this.richTexts()", this.richTexts())
|
||||
addBimInfo({
|
||||
source_id: this.source_id,
|
||||
bim_id: this.bim_id,
|
||||
detail: this.richTexts()
|
||||
}, res => {
|
||||
this.activeName = "show"
|
||||
// this.$removeChanel("saveRichText")
|
||||
})
|
||||
|
||||
//
|
||||
})
|
||||
|
||||
|
||||
//
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bimInfo {
|
||||
width: 40vw;
|
||||
left: 10vw;
|
||||
top: 13vh;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
|
||||
.nav {
|
||||
background-color: rgba(128, 128, 126, 1);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 6px 5px 9px;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
margin: .5em;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
734
src/renderer/components/dialog/echartsTotal.vue
Normal file
734
src/renderer/components/dialog/echartsTotal.vue
Normal file
@ -0,0 +1,734 @@
|
||||
<template>
|
||||
<div class="echartsTotal" v-draggable>
|
||||
<div class="nav">
|
||||
<span></span>
|
||||
<span>信息统计</span>
|
||||
<i class="el-icon-close" @click="closeEditor"></i>
|
||||
<!-- <iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals" id="dsa"
|
||||
src="http://192.168.1.15:8081/11.html" width="100%" height="200px"></iframe>-->
|
||||
</div>
|
||||
<div class="bodyBox">
|
||||
<el-button style="margin-left: 10px" size="mini" type="primary" @click="drawArea">统计区域</el-button>
|
||||
<div id="chartsTotal"></div>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProvince, queryByArea} from "../../api/gisAPI";
|
||||
|
||||
let myColor = ['#f00', '#ff0', '#0f0', '#ccc', '#ccc', '#ccc'];
|
||||
let data = []
|
||||
export default {
|
||||
name: "echartsTotal",
|
||||
data() {
|
||||
return {
|
||||
provinces: [],
|
||||
option: {
|
||||
grid: {
|
||||
left: '3%', //默认10%
|
||||
right: '4%', //默认10%
|
||||
top: '3%', //默认60
|
||||
bottom: '1%', //默认60
|
||||
containLabel: true
|
||||
//grid区域是否包含坐标轴的刻度标签
|
||||
},
|
||||
title: [
|
||||
/*{
|
||||
text: 'Project',
|
||||
x: '20',
|
||||
y: '20',
|
||||
textStyle: {
|
||||
fontSize: '30',
|
||||
fontWeight: '100',
|
||||
color: '#9c9c9c'
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Infographic',
|
||||
x: '120',
|
||||
y: '20',
|
||||
textStyle: {
|
||||
fontSize: '30',
|
||||
fontWeight: '100',
|
||||
color: '#b7bbc6',
|
||||
},
|
||||
},*/
|
||||
],
|
||||
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 35,
|
||||
textStyle: {
|
||||
color: function (param, index) {
|
||||
return myColor[index]
|
||||
},
|
||||
fontSize: 16,
|
||||
fontFamily: 'FZYaoti',
|
||||
fontWeight: 100,
|
||||
},
|
||||
marginTop: 30,
|
||||
},
|
||||
position: 'bottom',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// type: 'dotted',
|
||||
color: '#9c9c9c',
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#9c9c9c',
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#9c9c9c',
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#b7bbc6',
|
||||
fontFamily: 'FZYaoti',
|
||||
},
|
||||
margin: 10,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#b7bbc6',
|
||||
width: 1,
|
||||
height: 5,
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// realtimeSort: true,
|
||||
type: 'bar',
|
||||
barWidth: 40,
|
||||
// barWidth:"auto",
|
||||
barGap: '-100%',
|
||||
stack: '广告',
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var colorList = [
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#ff68bd'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#ff68bd'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#9e3b72'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#9e3b72'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#ef73ef'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#ef73ef'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#883e89'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#883e89'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#c37ef5'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#c37ef5'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#724892'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#724892'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#8787ff'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#8787ff'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#5959b1'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#5959b1'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#1bdef2'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1bdef2'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#0a8491'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#0a8491'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#37edc4'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#37edc4'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1b8970'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#1b8970'
|
||||
}]),
|
||||
];
|
||||
return colorList[params.dataIndex]
|
||||
},
|
||||
},
|
||||
data: data
|
||||
},
|
||||
/* {
|
||||
"name": "",
|
||||
"type": "pictorialBar",
|
||||
symbol: 'path://M1390,595h79l-39,22Z',
|
||||
"symbolSize": [40, 20],
|
||||
"symbolOffset": [0, 20],
|
||||
"z": 12,
|
||||
itemStyle: {
|
||||
opacity: 1,
|
||||
color: function (params) {
|
||||
var colorList = [
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#ff68bd'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#ff68bd'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#9e3b72'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#9e3b72'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#ef73ef'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#ef73ef'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#883e89'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#883e89'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#c37ef5'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#c37ef5'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#724892'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#724892'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#8787ff'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#8787ff'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#5959b1'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#5959b1'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#1bdef2'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1bdef2'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#0a8491'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#0a8491'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#37edc4'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#37edc4'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1b8970'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#1b8970'
|
||||
}]),
|
||||
];
|
||||
return colorList[params.dataIndex]
|
||||
},
|
||||
},
|
||||
"data": [1, 1, 1, 1, 1, 1]
|
||||
},*/
|
||||
{
|
||||
"name": "",
|
||||
"type": "pictorialBar",
|
||||
symbol: 'path://M1390,595h79l-39,22Z',
|
||||
"symbolSize": [40, 20],
|
||||
"symbolOffset": [0, 0],
|
||||
"z": 12,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
position: 'top',
|
||||
distance: 5,
|
||||
color: '#fff',
|
||||
fontFamily: 'FZYaoti',
|
||||
fontWeight: 100,
|
||||
// textShadowColor: 'rgba(255, 255, 255, .6)',
|
||||
fontSize: 16,
|
||||
// textShadowBlur: '0',
|
||||
// textShadowOffsetX: 1,
|
||||
// textShadowOffsetY: 1,
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 1,
|
||||
// color: function(params) {
|
||||
// var colorList = ['#5a62a3', '#597ba0', '#2698b3', '#37c9a4', '#8ec278', '#8ec278'];
|
||||
// return colorList[params.dataIndex]
|
||||
// },
|
||||
color: function (params) {
|
||||
var colorList = [
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#d2589d'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#d2589d'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#d04d98'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#d04d98'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#c160c1'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#c160c1'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#bc52be'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#bc52be'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#a16ac8'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#a16ac8'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#995fc5'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#995fc5'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#7c7ae5'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#7c7ae5'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#7171e3'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#7171e3'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#1bb7c6'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1bb7c6'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#0ab1c1'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#0ab1c1'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#2ebe9d'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#2ebe9d'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#21bb99'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#21bb99'
|
||||
}]),
|
||||
];
|
||||
return colorList[params.dataIndex]
|
||||
},
|
||||
},
|
||||
"symbolPosition": "end",
|
||||
"data": data
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: "effectScatter",
|
||||
rippleEffect: {
|
||||
period: 1,
|
||||
scale: 5,
|
||||
brushType: 'fill'
|
||||
},
|
||||
z: 20,
|
||||
symbolPosition: 'end',
|
||||
symbol: 'path://M1390,595h79l-39,22Z',
|
||||
"symbolSize": [10, 5],
|
||||
"symbolOffset": [0, 9],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowColor: 'rgba(0, 0, 0, .3)',
|
||||
shadowBlur: 5,
|
||||
shadowOffsetY: 3,
|
||||
shadowOffsetX: 0,
|
||||
color: '#273454',
|
||||
}
|
||||
},
|
||||
data: data
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawArea() {
|
||||
this.mount(() => {
|
||||
console.log("this.provinces*******************************")
|
||||
console.log(this.provinces)
|
||||
let draw = new YJ.Draw.DrawPolygon()
|
||||
draw.start((err, params) => {
|
||||
console.log(params)
|
||||
let province_id = this.booleanOverlaps(params)
|
||||
if (province_id) {
|
||||
|
||||
params.forEach(item => {
|
||||
item.Lng = item.lng
|
||||
item.Lat = item.lat
|
||||
})
|
||||
_echartsMap.get("chartsTotal").showLoading({
|
||||
text: '计算中。。。',
|
||||
showSpinner: false,
|
||||
textColor: 'black',
|
||||
maskColor: 'rgba(255, 255, 255, 1)',
|
||||
fontSize: '26px',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
queryByArea({area: params, province_id}, res => {
|
||||
console.log("queryByArea", res)
|
||||
this.changData(res.list)
|
||||
})
|
||||
} else {
|
||||
this.$message.error("所选区域不在范围内")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
booleanOverlaps(positions1) {
|
||||
let cross = undefined
|
||||
|
||||
function set3Array(positions) {
|
||||
let arr = []
|
||||
positions.forEach(item => {
|
||||
arr.push([item.lng, item.lat])
|
||||
})
|
||||
arr.push(arr[0])
|
||||
return arr
|
||||
}
|
||||
|
||||
|
||||
//绘制的区域
|
||||
let polygon1 = turf.polygon([set3Array(positions1)]);
|
||||
console.log("[set3Array(positions1)]", [set3Array(positions1)])
|
||||
for (let i = 0; i < this.provinces.length; i++) {
|
||||
let item = this.provinces[i]
|
||||
if (item.range && typeof item.range == 'string') {
|
||||
let range = JSON.parse(item.range)
|
||||
console.log("[set3Array(range)]", [set3Array(range)])
|
||||
let polygon2 = turf.polygon([set3Array(range)]);
|
||||
console.log('1', polygon1)
|
||||
console.log('2', polygon2)
|
||||
let iscross = turf.booleanOverlap(polygon1, polygon2);
|
||||
let iscontains1 = turf.booleanContains(polygon1, polygon2);
|
||||
let iscontains2 = turf.booleanContains(polygon2, polygon1);
|
||||
console.log(iscross, iscontains2, iscontains2)
|
||||
if (iscross || iscontains1 || iscontains2) {
|
||||
return item.province_id
|
||||
}
|
||||
}
|
||||
}
|
||||
return ""
|
||||
},
|
||||
closeEditor() {
|
||||
this.$changeComponentShow(".echartsTotalBox", false)
|
||||
},
|
||||
changData(list) {
|
||||
let colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#ff68bd'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#ff68bd'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#9e3b72'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#9e3b72'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#ef73ef'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#ef73ef'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#883e89'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#883e89'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#c37ef5'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#c37ef5'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#724892'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#724892'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#8787ff'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#8787ff'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#5959b1'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#5959b1'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#1bdef2'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1bdef2'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#0a8491'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#0a8491'
|
||||
}]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#37edc4'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#37edc4'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1b8970'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#1b8970'
|
||||
}]),
|
||||
]
|
||||
let myColors = ['#f00', '#ff0', '#0f0', '#ccc', '#ccc', '#ccc'];
|
||||
let num = list.length
|
||||
//有多少个6
|
||||
let p = Math.ceil(num % 6)
|
||||
for (let i = 0; i < p; i++) {
|
||||
colorList = colorList.concat(colorList)
|
||||
myColors = myColors.concat(myColors)
|
||||
}
|
||||
let color = []
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
color.push(new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#ff68bd'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#ff68bd'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#9e3b72'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#9e3b72'
|
||||
}]))
|
||||
}
|
||||
let myChart = _echartsMap.get("chartsTotal")
|
||||
myChart.hideLoading()
|
||||
|
||||
let xdata = []
|
||||
let ydata = []
|
||||
list.forEach(item => {
|
||||
xdata.push(item.name)
|
||||
ydata.push(item.count)
|
||||
})
|
||||
console.log(ydata)
|
||||
console.log(xdata)
|
||||
this.option.series.forEach(i => {
|
||||
i.data = ydata
|
||||
|
||||
i.itemStyle.color = function (params) {
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
})
|
||||
this.option.xAxis.data = xdata
|
||||
this.option.xAxis.axisLabel.textStyle.color = function (param, index) {
|
||||
return myColors[index]
|
||||
}
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
name() {
|
||||
let dom = document.getElementById("chartsTotal");
|
||||
let myChart = echarts.init(dom);
|
||||
/*setInterval(() => {
|
||||
this.changData()
|
||||
}, 3000)*/
|
||||
// const backImg = 'http://echarts.zhangmuchen.top/asset/get/s/data-1623324803979-ugSvPhTCK.png';
|
||||
// myChart._dom.style.backgroundImage = "url('" + backImg + "')";
|
||||
if (this.option && typeof this.option === 'object') {
|
||||
myChart.setOption(this.option);
|
||||
_echartsMap.set("chartsTotal", myChart)
|
||||
}
|
||||
|
||||
},
|
||||
//打开就要做的事情
|
||||
mount(cb) {
|
||||
try {
|
||||
getProvince(res => {
|
||||
this.provinces = res.list
|
||||
cb()
|
||||
})
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
init() {
|
||||
this.changData([])
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.name();
|
||||
})
|
||||
/*$(window).resize(function () {
|
||||
//重置容器高宽
|
||||
_echartsMap.get("chartsTotal").resize();
|
||||
});*/
|
||||
// this.mount()
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.echartsTotal {
|
||||
width: 800px;
|
||||
//min-height: 500px;
|
||||
left: 10vw;
|
||||
top: 13vh;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
|
||||
.nav {
|
||||
background-color: rgba(128, 128, 126, 1);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 6px 5px 9px;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.bodyBox {
|
||||
background: url("../../assets/images/bg.png");
|
||||
}
|
||||
|
||||
#chartsTotal {
|
||||
height: 425px;
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
737
src/renderer/components/dialog/excelSet.vue
Normal file
737
src/renderer/components/dialog/excelSet.vue
Normal file
@ -0,0 +1,737 @@
|
||||
<template>
|
||||
<div class="excelSet" ref="excelSet">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<span></span>
|
||||
<span class="boxHeaderTitle">excel预览</span>
|
||||
<span class="closeBox">
|
||||
<span @click="close">✕</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="boxBody">
|
||||
<div class="buttonBox">
|
||||
<el-button size="small" type="primary" @click="addFolderBtn">添加文件夹</el-button>
|
||||
<el-button size="small" type="primary" :disabled="isUploading" :loading="isUploading"
|
||||
@click="addFileBtn">添加文件</el-button>
|
||||
<el-button size="small" type="primary" style="margin-right: 10px;" @click="delFolderBtn">删除</el-button>
|
||||
<el-select v-if="isSelectLabel" size="small" style="width: 130px;" v-model="label" placeholder="请选择标签列"
|
||||
@change="selectLabel">
|
||||
<el-option v-for="(item, index) in header1" :key="index" :label="item" :value="index"></el-option>
|
||||
</el-select>
|
||||
<input type="file" ref="fileInput" multiple style="display: none;" accept=".xlsx" @change="handleFileChange">
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<div class="left">
|
||||
<!-- 这里需要一个el-tree，根据is_dir来判断是否是文件夹, 如果is_dir为true，则用文件夹图标在name，如果is_dir为0，则显示文件图标在name -->
|
||||
<el-tree class="custom_scroll_bar" :data="treeData" :default-expand-all="true" :props="defaultProps"
|
||||
@node-click="handleNodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node,data }" :title="data.name">
|
||||
<i :class="data.is_dir == 1 ? 'el-icon-folder-opened' : 'el-icon-document'"></i>
|
||||
<!-- 设置超出显示三个点 -->
|
||||
<span class="treeName">{{
|
||||
data.name
|
||||
}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
<!-- 我需要一个原生的table,结构分分明 表头 表体 表尾-->
|
||||
<div class="right">
|
||||
<div class="tableBox">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div>{{ header.caozuo }}</div>
|
||||
</th>
|
||||
<th>
|
||||
<div>{{ header.show }}</div>
|
||||
</th>
|
||||
<template v-for="(item, index) in header">
|
||||
<th v-if="!['show', 'caozuo', 'detail', 'source_id'].includes(index)" :key="index">
|
||||
{{ item }}
|
||||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in content" :key="index">
|
||||
<td>
|
||||
<div>
|
||||
<!-- 编辑 -->
|
||||
<i class="el-icon-edit" title="编辑" @click="editBtn(item)"></i>
|
||||
<!-- 标点 -->
|
||||
<i v-if="!item.detail" class="el-icon-add-location" title="标点" @click="addBtn(item)"></i>
|
||||
<!-- 定位 -->
|
||||
<i v-if="item.detail" class="el-icon-location-outline" title="定位"
|
||||
@click="locationBtn(item)"></i>
|
||||
</div>
|
||||
<!-- <div v-else></div> -->
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<el-switch v-model="item.show" @change="changeShow(item)" />
|
||||
</div>
|
||||
<!-- <div v-else></div> -->
|
||||
</td>
|
||||
<template v-for="(item1, index1) in item">
|
||||
<td v-if="!['show', 'caozuo', 'detail', 'source_id'].includes(index1)" :key="index1">
|
||||
{{ item1 }}
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="page-box">
|
||||
<el-pagination v-show="content.length > 0" background @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="20" layout="prev, pager, next" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getFolder, addFolder, addFile, delFolder, getFileList, updateLabel, updateDetail, updateShow } from "../../api/gisAPI";
|
||||
import { getIP } from "../../utils/index";
|
||||
import { getToken } from "../../utils/auth.js";
|
||||
export default {
|
||||
name: "excelSet",
|
||||
data() {
|
||||
return {
|
||||
title: "Excel设置",
|
||||
form: {
|
||||
name: "",
|
||||
},
|
||||
labelPosition: "left",
|
||||
treeData: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
currentNode: null,
|
||||
currentNodeData: null,
|
||||
header: {},
|
||||
header1: {},
|
||||
content: [],
|
||||
// 排除的数组
|
||||
exclude: ['created_at', 'deleted_at', 'table', 'updated_at', 'file_id', 'id'],
|
||||
exclude1: ['created_at', 'deleted_at', 'table', 'updated_at', 'detail', 'source_id', 'file_id', 'id', 'show'],
|
||||
dialogVisible: false,
|
||||
label: '',
|
||||
labelList: [],
|
||||
isSelectLabel: false,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
page: 1,
|
||||
isUploading: false,
|
||||
debounceTimeout: null,
|
||||
onece: true,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// currentNodeData: {
|
||||
// handler: function (val, oldVal) {
|
||||
// this.page = 1;
|
||||
// this.pageSize = 20;
|
||||
// },
|
||||
// deep: true,
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
this.pageSize = val;
|
||||
this.isDir(false)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
this.page = val;
|
||||
this.isDir(false)
|
||||
},
|
||||
close() {
|
||||
this.$changeComponentShow(".excelSetBox", false);
|
||||
this.currentNodeData = null;
|
||||
this.content = [];
|
||||
this.header = {};
|
||||
this.label = '';
|
||||
this.labelList = [];
|
||||
this.isSelectLabel = false;
|
||||
if (window.$POINT_MAP) {
|
||||
// 循环删除示例
|
||||
window.$POINT_MAP.forEach((item, key) => {
|
||||
item.remove();
|
||||
});
|
||||
window.$POINT_MAP.clear();
|
||||
}
|
||||
},
|
||||
// 删除文件夹
|
||||
delFolderBtn() {
|
||||
if (!this.currentNodeData) {
|
||||
this.$message.error('请先选择文件夹');
|
||||
return;
|
||||
}
|
||||
// 二次确认是否删除
|
||||
this.$confirm('确定要删除吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delFolder({ id: this.currentNodeData.ID }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
let list = res.data.source_ids || []
|
||||
if (list.length > 0) {
|
||||
list.forEach((item) => {
|
||||
let entity = window.$POINT_MAP.get(item);
|
||||
if (entity) {
|
||||
entity.remove();
|
||||
window.$POINT_MAP.delete(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.$message.success('删除成功');
|
||||
this.getFolderList();
|
||||
this.content = [];
|
||||
this.header = {};
|
||||
this.label = '';
|
||||
this.labelList = [];
|
||||
this.currentNodeData = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取文件夹
|
||||
getFolderList() {
|
||||
getFolder().then((res) => {
|
||||
// 这里需要将res.data.list转换为树状结构，如果p_id等于另外一个数据的id，则将这个数据添加到children
|
||||
let treeData = [];
|
||||
res.data.list.forEach(item => {
|
||||
// 先给每个item添加一个children属性
|
||||
item.children = [];
|
||||
let parent = res.data.list.find(parent => parent.ID === item.p_id);
|
||||
if (parent) {
|
||||
parent.children.push(item);
|
||||
} else {
|
||||
treeData.push(item);
|
||||
}
|
||||
});
|
||||
this.treeData = treeData;
|
||||
// 遍历数据，将每个item添加到对应的父节点的children属性中
|
||||
res.data.list.forEach(item => {
|
||||
if (item.ID === this.currentNodeData.ID) {
|
||||
this.currentNodeData = item;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 点击节点
|
||||
handleNodeClick(data) {
|
||||
console.log('data', data);
|
||||
|
||||
this.currentNodeData = data;
|
||||
this.isSelectLabel = false;
|
||||
// console.log('data', data);
|
||||
// this.label = '';
|
||||
this.page = 1;
|
||||
this.pageSize = 20;
|
||||
this.isDir(true);
|
||||
},
|
||||
// 判断调取接口
|
||||
isDir() {
|
||||
// return;
|
||||
if (!this.currentNodeData.is_dir) {
|
||||
this.label = this.currentNodeData.label;
|
||||
this.isSelectLabel = true;
|
||||
this.getFileDetail(this.currentNodeData);
|
||||
}
|
||||
},
|
||||
// 获取文件详情
|
||||
getFileDetail(data) {
|
||||
getFileList({ file_id: data.ID, page: this.page, page_size: this.pageSize }).then((res) => {
|
||||
// if (bool && this.onece) {
|
||||
if (res.data.header.length > 0) {
|
||||
this.header = res.data.header[0];
|
||||
this.header1 = JSON.parse(JSON.stringify(res.data.header[0]));
|
||||
this.header.caozuo = '操作'
|
||||
this.header.show = '显示隐藏';
|
||||
// 将header中的添加一个字段，并删除header中的['created_at', 'deleted_at', 'detail', 'table', 'updated_at']
|
||||
for (const key in this.header) {
|
||||
if (Object.prototype.hasOwnProperty.call(this.header, key)) {
|
||||
if (this.exclude.includes(key)) {
|
||||
delete this.header[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const key in this.header1) {
|
||||
if (Object.prototype.hasOwnProperty.call(this.header1, key)) {
|
||||
if (this.exclude1.includes(key)) {
|
||||
delete this.header1[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
this.labelList = Object.keys(this.header);
|
||||
} else {
|
||||
this.header = {};
|
||||
this.header1 = {};
|
||||
this.labelList = [];
|
||||
}
|
||||
if (res.data.list.length > 0) {
|
||||
this.content = res.data.list;
|
||||
this.total = res.data.total;
|
||||
// 将content中的添加一个字段，并删除item中的['created_at', 'deleted_at', 'detail', 'table', 'updated_at']，把show和caozuo放到最前面
|
||||
this.content.forEach(item => {
|
||||
item.caozuo = '操作';
|
||||
item.show = item.show == 1 ? true : false;
|
||||
this.exclude.forEach(item1 => {
|
||||
delete item[item1];
|
||||
});
|
||||
// console.log('this.currentNodeData = null;', item.detail);
|
||||
if (item.detail) {
|
||||
let detail = JSON.parse(item.detail);
|
||||
this.currentNodeData.id = detail.id;
|
||||
detail.label.text = item[this.label];
|
||||
this.renderPoint(detail);
|
||||
}
|
||||
});
|
||||
// 将header是对象中的添加一个字段，并删除header中的['created_at', 'deleted_at', 'detail', 'table', 'updated_at']
|
||||
} else {
|
||||
this.content = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
// 渲染点坐标
|
||||
renderPoint(option) {
|
||||
console.log('option', option);
|
||||
|
||||
if (window.$POINT_MAP.has(option.id)) {
|
||||
return;
|
||||
}
|
||||
let entity = new YJ.Obj.BillboardObject(
|
||||
window.Earth1,
|
||||
option
|
||||
);
|
||||
window.$POINT_MAP.set(option.id, entity);
|
||||
return entity;
|
||||
},
|
||||
// 添加文件夹
|
||||
addFolderBtn() {
|
||||
//使用el-dialog
|
||||
let p_id = this.currentNode ? this.currentNode.ID : 0;
|
||||
this.$prompt("请输入文件夹名称", "添加文件夹", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
inputValue: '',
|
||||
// 正则验证
|
||||
inputPattern: /^\S+$/,
|
||||
}).then(({ value }) => {
|
||||
addFolder({ name: value, p_id }).then((res) => {
|
||||
this.getFolderList();
|
||||
this.resetBtn();
|
||||
this.$message.success("添加成功");
|
||||
});
|
||||
})
|
||||
},
|
||||
// 恢复默认
|
||||
resetBtn() {
|
||||
this.currentNodeData = null;
|
||||
},
|
||||
// 上传文件
|
||||
// addFileBtn() {
|
||||
// if (!this.currentNodeData || !this.currentNodeData.is_dir) {
|
||||
// this.$message.error('请先选择文件夹');
|
||||
// return;
|
||||
// }
|
||||
// // 防抖
|
||||
// this.$refs.fileInput.click();
|
||||
// },
|
||||
addFileBtn() {
|
||||
if (this.isUploading) return;
|
||||
this.isUploading = true;
|
||||
clearTimeout(this.debounceTimeout);
|
||||
|
||||
this.debounceTimeout = setTimeout(() => {
|
||||
try {
|
||||
if (!this.currentNodeData || !this.currentNodeData.is_dir) {
|
||||
this.$message.error('请先选择文件夹');
|
||||
return;
|
||||
}
|
||||
this.$refs.fileInput.click();
|
||||
} finally {
|
||||
this.isUploading = false;
|
||||
}
|
||||
}, 300);
|
||||
},
|
||||
// 选择文件
|
||||
handleFileChange(e) {
|
||||
let files = e.target.files;
|
||||
// 这里需要多个文件只走一次接口
|
||||
let formData = new FormData()
|
||||
if (files.length == 0) {
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const element = files[i];
|
||||
formData.append('files', element)
|
||||
}
|
||||
formData.append('dir_id', this.currentNodeData.ID)
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '上传中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
// 配置axios请求
|
||||
this.$axios({
|
||||
method: 'post',
|
||||
url: getIP() + '/yjearth4.0/api/v1/customization/qinghai/haidong/import',
|
||||
data: formData,
|
||||
headers: {
|
||||
'token': getToken()
|
||||
},
|
||||
onUploadProgress: (progressEvent) => {
|
||||
console.log('progressEvent', progressEvent);
|
||||
if (progressEvent.lengthComputable) {
|
||||
// 为什么一直到都是100%
|
||||
const percentComplete = Math.round((progressEvent.loaded / progressEvent.total) * 100);
|
||||
console.log(percentComplete);
|
||||
loading.text = `上传中...`;
|
||||
}
|
||||
}
|
||||
}).then(response => {
|
||||
loading.close();
|
||||
const res = response.data;
|
||||
if (res.code == 0) {
|
||||
this.$message.success("上传成功");
|
||||
this.getFolderList();
|
||||
this.currentNodeData = null;
|
||||
} else {
|
||||
this.$message.error(res.message || "上传失败");
|
||||
}
|
||||
}).catch(error => {
|
||||
loading.close();
|
||||
this.$message.error("上传失败: " + error.message);
|
||||
});
|
||||
},
|
||||
// 添加标点
|
||||
addBtn(item) {
|
||||
console.log(this.label);
|
||||
if (!this.label) {
|
||||
this.$message.error('请先选择标签列');
|
||||
return;
|
||||
}
|
||||
new YJ.Draw.DrawPoint(window.Earth1).start(async (err, position) => {
|
||||
if (err == null || err != false) {
|
||||
this.getLabelByLngLat(item, position, false);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 定位
|
||||
locationBtn(item) {
|
||||
console.log('item', item);
|
||||
console.log(window.$POINT_MAP.has(item.source_id));
|
||||
console.log(window.$POINT_MAP.get(item.source_id));
|
||||
|
||||
if (window.$POINT_MAP.has(item.source_id)) {
|
||||
let entity = window.$POINT_MAP.get(item.source_id);
|
||||
if (item.show == 1) {
|
||||
entity.flyTo();
|
||||
}
|
||||
return;
|
||||
}
|
||||
},
|
||||
// 编辑
|
||||
editBtn(item) {
|
||||
console.log(item);
|
||||
let detail = JSON.parse(item.detail);
|
||||
this.$prompt('请输入经纬度坐标(格式：116.397,39.90)', '编辑', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /^([-+]?\d{1,3}\.\d+),\s*([-+]?\d{1,3}\.\d+)$/,
|
||||
inputErrorMessage: '经纬度格式不正确',
|
||||
inputValue: detail ? detail.positions.lng + ',' + detail.positions.lat : ''
|
||||
}).then(({ value }) => {
|
||||
let p = value.split(',');
|
||||
let position = { lng: p[0], lat: p[1], alt: 0 };
|
||||
// 判断是否已经存在
|
||||
let isHave = window.$POINT_MAP.has(item.source_id);
|
||||
this.getLabelByLngLat(item, position, isHave);
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
// 根据坐标获取名称
|
||||
getLabelByLngLat(item, position, isHave = true) {
|
||||
let option = {
|
||||
id: item.source_id,
|
||||
positions: { lng: position.lng, lat: position.lat, alt: position.alt },
|
||||
name: item[this.label],
|
||||
show: item.show,
|
||||
|
||||
billboard: {
|
||||
image:
|
||||
YJ.Global.getBillboardDefaultUrl() ||
|
||||
"http://localhost:55110/GEMarker1/" + "A-ablu-blank.png",
|
||||
},
|
||||
label: {
|
||||
text: item[this.label],
|
||||
},
|
||||
};
|
||||
if (!isHave) {
|
||||
let entity = this.renderPoint(option);
|
||||
if (item.show) {
|
||||
entity.flyTo();
|
||||
}
|
||||
} else {
|
||||
let entity = window.$POINT_MAP.get(item.source_id);
|
||||
entity.lng = position.lng;
|
||||
entity.lat = position.lat;
|
||||
if (item.show) {
|
||||
entity.flyTo();
|
||||
}
|
||||
}
|
||||
updateDetail({
|
||||
file_id: this.currentNodeData.ID, source_id: item.source_id, detail: JSON.stringify(option)
|
||||
}).then((res) => {
|
||||
this.$message.success('添加成功');
|
||||
this.getFolderList();
|
||||
this.getFileDetail(this.currentNodeData)
|
||||
});
|
||||
},
|
||||
// 选择标签列
|
||||
selectLabel(val) {
|
||||
// 判断是否选中了文件夹
|
||||
if (this.currentNodeData.is_dir) {
|
||||
this.$message.error('请先选择文件');
|
||||
return;
|
||||
}
|
||||
this.label = val;
|
||||
this.content.forEach((item) => {
|
||||
let entity = window.$POINT_MAP.get(item.source_id);
|
||||
if (entity) {
|
||||
entity.labelText = item[val] || '';
|
||||
}
|
||||
})
|
||||
updateLabel({ file_id: this.currentNodeData.ID, label: val }).then((res) => {
|
||||
this.$message.success('更新成功');
|
||||
this.getFolderList();
|
||||
});
|
||||
},
|
||||
// 切换显示
|
||||
changeShow(item) {
|
||||
// console.log('item', item);
|
||||
// return;
|
||||
if (window.$POINT_MAP.has(item.source_id)) {
|
||||
let entity = window.$POINT_MAP.get(item.source_id);
|
||||
entity.show = item.show;
|
||||
}
|
||||
updateShow({ file_id: this.currentNodeData.ID, source_id: item.source_id, show: item.show }).then((res) => {
|
||||
this.$message.success('更新成功');
|
||||
this.getFolderList();
|
||||
this.getFileDetail(this.currentNodeData)
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (!window.isStandAlone) {
|
||||
this.getFolderList();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.excelSet {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 1000px;
|
||||
height: 700px;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
||||
padding: 10px;
|
||||
border: 1.5px solid rgba(0, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
pointer-events: all;
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 0.5vh 0;
|
||||
|
||||
.closeBox {
|
||||
right: 0;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
border-radius: 0 0 0 90%;
|
||||
background: #00ffff8f;
|
||||
|
||||
&>span {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.boxHeaderTitle {
|
||||
display: inline-block;
|
||||
width: 230px;
|
||||
height: 34px;
|
||||
//background: url('../../assets/images/junbiaoTitle.png');
|
||||
//background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
|
||||
.buttonBox {
|
||||
height: 30px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
|
||||
.el-button--small {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
.el-input--small .el-input__inner {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
|
||||
.left {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
|
||||
.el-tree {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background: #00ffff30;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover,
|
||||
.el-upload-list__item:hover {
|
||||
background-color: #00ffff30;
|
||||
}
|
||||
|
||||
.treeName {
|
||||
display: inline-block;
|
||||
width: 145px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(100% - 190px);
|
||||
background: #0005058f;
|
||||
|
||||
// table的td居中
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
// td th 添加边框
|
||||
tr td,
|
||||
tr th {
|
||||
border: 1px solid #00ffff8f;
|
||||
}
|
||||
|
||||
tr td {
|
||||
text-align: center;
|
||||
padding: 3px 10px;
|
||||
// 不允许换行
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// tr 下的th 不允许换行
|
||||
tr th {
|
||||
white-space: nowrap;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 美化一下滚动条
|
||||
.tableBox::-webkit-scrollbar,
|
||||
.el-tree::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tableBox::-webkit-scrollbar-thumb,
|
||||
.el-tree::-webkit-scrollbar-thumb {
|
||||
background: #00ffff8f !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.tableBox::-webkit-scrollbar-track,
|
||||
.el-tree::-webkit-scrollbar-track {
|
||||
background: #0005058f !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
src/renderer/components/dialog/fightingDataStyle.vue
Normal file
136
src/renderer/components/dialog/fightingDataStyle.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="fightingDataStyle">
|
||||
<div class="nav">
|
||||
<span>编辑节点</span>
|
||||
<i class="el-icon-close" @click="closeEditor"></i>
|
||||
<!-- <iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals" id="dsa"
|
||||
src="http://192.168.1.15:8081/11.html" width="100%" height="200px"></iframe>-->
|
||||
</div>
|
||||
<div class="baseInformation">
|
||||
<div class="item"> <span>图标：</span>
|
||||
<img style="cursor: pointer" @click="changeImg" :src="'http://localhost:' + staticPort + '/' + detail.image" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<span>文字颜色：</span>
|
||||
<el-color-picker v-model="detail.color" size="mini"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="btnOption">
|
||||
<el-button size="mini" @click="submit">确定</el-button>
|
||||
<el-button size="mini" @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "fightingDataStyle",
|
||||
data() {
|
||||
return {
|
||||
detail: {
|
||||
image: 'GEMarker/A-blu-stars.png',
|
||||
color: '#fff',
|
||||
},
|
||||
staticPort: 55110
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.staticPort = window.staticPort;
|
||||
this.$recvChanel("selectedImg", obj => {
|
||||
console.log(obj)
|
||||
this.detail.image = obj.img
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//确定并打开文件选择器
|
||||
submit() {
|
||||
this.$sendChanel("addResource", this.detail)
|
||||
this.closeEditor()
|
||||
},
|
||||
cancel() {
|
||||
this.$changeComponentShow(".fightingDataStyleBox", false)
|
||||
},
|
||||
closeEditor() {
|
||||
this.cancel()
|
||||
},
|
||||
changeImg() {
|
||||
let _that = this
|
||||
|
||||
let selected = this.detail.image
|
||||
_that.$sendElectronChanel("requireGEMarkerName", {
|
||||
dirName: "GEMarker",
|
||||
// dirName1: "GEMarker1",
|
||||
// dirName1s: "GEMarker1s"
|
||||
})
|
||||
_that.$recvElectronChanel("dirFiles", (e, res) => {
|
||||
_that.$changeComponentShow(".selectImgBox", true)
|
||||
console.log(res)
|
||||
// window.$root_home_index.$refs.selectImg.init(res, selected)
|
||||
window.$root_home_index.$refs.selectImg.init(res, selected, false)
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fightingDataStyle {
|
||||
width: 28vw;
|
||||
//height: 35vh;
|
||||
/*min-height: 340px;
|
||||
min-width: 500px;*/
|
||||
left: 10vw;
|
||||
top: 13vh;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
color: #fff;
|
||||
|
||||
.nav {
|
||||
background-color: rgba(128, 128, 126, 1);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 6px 5px 9px;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.baseInformation {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #275041;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
padding: .5vh 0;
|
||||
font-size: 12px;
|
||||
height: 45px;
|
||||
|
||||
.leftSpan {
|
||||
min-width: 70px;
|
||||
width: 2.5vw;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnOption {
|
||||
display: flex;
|
||||
padding: 0.5vh 0.5vh 1vh;
|
||||
justify-content: flex-end
|
||||
}
|
||||
}
|
||||
</style>
|
||||
343
src/renderer/components/dialog/flyToLocation.vue
Normal file
343
src/renderer/components/dialog/flyToLocation.vue
Normal file
@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="flyToLocation" id="flyToLocationPopup">
|
||||
<div class="title" id="titles">
|
||||
<span class="content">
|
||||
坐标定位
|
||||
<span class="closeBox">
|
||||
<span @click="cancel">✕</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="is84 == 'EPSG:4326'">
|
||||
<div class="name" style="height: 0;">
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>经度：</span>
|
||||
<el-input type="number" size="small" class="public" @input="(val) => lngNum(val)" v-model="lng" :max="180"
|
||||
:min="-180" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>纬度：</span>
|
||||
<el-input type="number" size="small" class="public" @input="(val) => latNum(val)" v-model="lat" :max="90"
|
||||
:min="-90" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>定位：</span>
|
||||
<el-button size="small" @click="submit">
|
||||
<i class="el-icon-location-outline el-icon--left"></i>
|
||||
跳转</el-button>
|
||||
</div>
|
||||
<div class="name" style="height: 0;">
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<!-- <div class="name">
|
||||
<span>高度：</span>
|
||||
<input class="public" @input="a" v-model="alt" />
|
||||
</div>-->
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="name" style="height: 0;">
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>x：</span>
|
||||
<input type="number" class="public" v-model="x" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>y：</span>
|
||||
<input type="number" class="public" v-model="y" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>定位：</span>
|
||||
<el-button size="small" @click="submit">
|
||||
<i class="el-icon-location-outline el-icon--left"></i>
|
||||
跳转</el-button>
|
||||
</div>
|
||||
<div class="name" style="height: 0;">
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<!-- <div class="name">
|
||||
<span>高度：</span>
|
||||
<input class="public" @input="a" v-model="alt" />
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button size="small" type="danger" @click="cancel">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setMove } from "../myHeaderAll/systemPopup/js/moveDiv";
|
||||
|
||||
export default {
|
||||
name: "flyToLocation",
|
||||
data() {
|
||||
return {
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
alt: null,
|
||||
x: 0,
|
||||
y: 0,
|
||||
is84: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setMove("titles", "flyToLocationPopup");
|
||||
},
|
||||
|
||||
methods: {
|
||||
lngNum(val) {
|
||||
// 最大只能输入数字180
|
||||
if (val > 180) {
|
||||
this.lng = 180;
|
||||
return;
|
||||
}
|
||||
// 最小只能输入数字-180
|
||||
if (val < -180) {
|
||||
this.lng = -180;
|
||||
return;
|
||||
}
|
||||
},
|
||||
latNum(val) {
|
||||
// 最大只能输入数字90
|
||||
if (val > 90) {
|
||||
this.lat = 90;
|
||||
return;
|
||||
}
|
||||
// 最小只能输入数字-90
|
||||
if (val < -90) {
|
||||
this.lat = -90;
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
cancel() {
|
||||
console.log();
|
||||
this.$changeComponentShow(".flyToLocationBox", false);
|
||||
this.lng = 0;
|
||||
this.lat = 0;
|
||||
if (window.earthPlaceMap) {
|
||||
window.earthPlaceMap.forEach((item) => {
|
||||
item.remove();
|
||||
});
|
||||
window.earthPlaceMap.clear();
|
||||
}
|
||||
},
|
||||
init(data) {
|
||||
console.log("init", data);
|
||||
this.is84 = data;
|
||||
},
|
||||
submit() {
|
||||
let positions;
|
||||
|
||||
if (window.earthPlaceMap === undefined) {
|
||||
window.earthPlaceMap = new Map();
|
||||
}
|
||||
if (window.earthPlaceMap.size) {
|
||||
window.earthPlaceMap.forEach((item) => {
|
||||
item.remove();
|
||||
});
|
||||
window.earthPlaceMap.clear();
|
||||
}
|
||||
if (this.is84 == "EPSG:4326") {
|
||||
console.log(this.lng, this.lat);
|
||||
if (this.lng === '' || this.lat === '') {
|
||||
this.$message.warning("经度纬度不能为空");
|
||||
return;
|
||||
}
|
||||
if (Number(this.lng) !== NaN && Number(this.lat) !== NaN) {
|
||||
// let id = new YJ.Tools().randomString();
|
||||
positions = { lng: this.lng, lat: this.lat, alt: this.alt };
|
||||
}
|
||||
} else {
|
||||
if (Number(this.x) !== NaN && Number(this.y) !== NaN) {
|
||||
let tool = new YJ.Tools();
|
||||
let result = tool.convert(
|
||||
[{ x: this.x, y: this.y }],
|
||||
this.$store.state.systemSetting.system.coordinate,
|
||||
"EPSG:4326"
|
||||
);
|
||||
let point = result.points[0];
|
||||
positions = { lng: point.x, lat: point.y, alt: point.z };
|
||||
}
|
||||
}
|
||||
let id = "12333fsfsajkhdjwu8877";
|
||||
let params = {
|
||||
id,
|
||||
positions,
|
||||
billboard: {
|
||||
show: true,
|
||||
image:
|
||||
"http://localhost:" +
|
||||
window.staticPort +
|
||||
"/" +
|
||||
"GEMarker1/A-location.png",
|
||||
},
|
||||
show: true,
|
||||
label: {
|
||||
show: true,
|
||||
text: "目标点",
|
||||
// fontSize: 6,
|
||||
color: "#FFF200FF",
|
||||
},
|
||||
heightMode: 2
|
||||
};
|
||||
let entity = new YJ.Obj.BillboardObject(window.Earth1, params);
|
||||
entity.entity.billboard.heightReference = 1;
|
||||
entity.entity.label.heightReference = 1;
|
||||
window.earthPlaceMap.set(id, entity);
|
||||
entity.flyTo({
|
||||
orientation: {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-89.0),
|
||||
roll: Cesium.Math.toRadians(0.0),
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.flyToLocation {
|
||||
width: 15vw;
|
||||
top: 12vh;
|
||||
left: 14vh;
|
||||
border: 1.5px solid;
|
||||
backdrop-filter: blur(2px);
|
||||
background: linear-gradient(0deg, #00ffff33 0%, #00ffff00 100%),
|
||||
rgba(0, 0, 0, 0.6);
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
border-image: linear-gradient(to bottom,
|
||||
rgb(0, 255, 255) 6.25%,
|
||||
rgb(0, 200, 255) 100%) 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.el-input__inner{
|
||||
padding: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
background-color: rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
|
||||
.closeBox {
|
||||
right: 0;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
border-radius: 0 0 0 90%;
|
||||
background: #00ffff8f;
|
||||
|
||||
&>span {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
||||
font-family: 'alimamashuheiti';
|
||||
|
||||
&:hover {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 93%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 30px;
|
||||
margin: 10px 0;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(230, 247, 255, 1);
|
||||
|
||||
.el-button {
|
||||
color: #fff;
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
border-color: rgba(0, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.public {
|
||||
width: 10vw;
|
||||
height: 100%;
|
||||
outline: 0;
|
||||
// background: rgba(0, 0, 0, 0.4);
|
||||
// padding-left: 6px;
|
||||
// box-sizing: border-box;
|
||||
// color: white;
|
||||
// border-radius: 5px;
|
||||
// margin-left: 5px;
|
||||
// border: 1px solid rgba(0, 255, 255, 0.5);
|
||||
|
||||
.el-input__inner {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(0, 255, 255, .5);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 10px 0;
|
||||
margin-top: 25px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
|
||||
.el-button {
|
||||
color: #fff;
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
border-color: rgba(0, 255, 255, .5);
|
||||
}
|
||||
|
||||
.space {
|
||||
margin: 0 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flyToLocation::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -1.5px;
|
||||
top: -6px;
|
||||
width: 70.5px;
|
||||
height: 6px;
|
||||
opacity: 1;
|
||||
background: aqua;
|
||||
clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 6px, 0 6px);
|
||||
}
|
||||
</style>
|
||||
503
src/renderer/components/dialog/junbiao.vue
Normal file
503
src/renderer/components/dialog/junbiao.vue
Normal file
@ -0,0 +1,503 @@
|
||||
<template>
|
||||
<div class="junbiao" ref="junbiao">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<span></span>
|
||||
<span class="boxHeaderTitle"></span>
|
||||
<span class="closeBox">
|
||||
<span @click="close">✕</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="boxBody">
|
||||
<div style="display: flex;margin-bottom: 10px;">
|
||||
<el-input size="small" style="width: 100%;" placeholder="输入关键字进行过滤" @input="searchContent"
|
||||
v-model="filterText">
|
||||
</el-input>
|
||||
<!--<el-button type="primary" @click="searchContent('type')" size="small">搜类型</el-button>-->
|
||||
<!--<el-button type="primary" @click="searchContent('junbiao')" size="small">搜军标</el-button>-->
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<div class="typeBox">
|
||||
<el-tree :data="graphLabelTypeList" :props="graphLabelProps" :expand-on-click-node="false" ref="myTree"
|
||||
node-key="type_id" highlight-current accordion class="custom_scroll_bar" @node-click="graphLabelClick">
|
||||
<!--<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ node.label }}</span>
|
||||
<span style=" position: absolute;right: 5px;">
|
||||
<i class="el-icon-edit" style="color: #409eff" @click="() =>editGraphLabelTypes(data)"></i>
|
||||
<i class="el-icon-delete" style="color:#f00;" @click="() =>delGraphLabelTypes(data)"></i>
|
||||
</span>
|
||||
</span>-->
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="custom_scroll_bar" style="width: 419px;padding-right:6px;height: 340px;overflow-y: auto">
|
||||
<div class="imgItemBox">
|
||||
<template v-for="item in graphTableData">
|
||||
<div class="imgItem" @click="selectImg(item)">
|
||||
<div class="imgBox">
|
||||
<img :src="item.url" :title="item.name" />
|
||||
</div>
|
||||
<span class="label">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<template v-for="item in tabs">
|
||||
<el-tab-pane :label="item.label" :name="item.key">
|
||||
<div class="imgItemBox custom_scroll_bar">
|
||||
<div class="imgItem" v-for="item in iconList[item.key]" @click="selectImg(item)">
|
||||
<img :src="item.url" alt="" :title="item.name">
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getSelectedNode,
|
||||
getNodeData,
|
||||
cusAddNodes,
|
||||
cusRenderNode,
|
||||
nodeType,
|
||||
} from "@/components/Tree/treeNode";
|
||||
import { addSource, delSource } from "@/api/gisAPI";
|
||||
import { getGraphLabelType2 } from "../../api/gisAPI";
|
||||
|
||||
export default {
|
||||
name: "junbiao",
|
||||
data() {
|
||||
return {
|
||||
yuanshishuju: [],
|
||||
allGraphLabels: [],
|
||||
graphLabelTypeList: [],
|
||||
graphLabelProps: {
|
||||
id: "type_id",
|
||||
children: "sonNode",
|
||||
label: "type_name",
|
||||
},
|
||||
graphLabelDataMaps: new Map(),
|
||||
graphTableData: [],
|
||||
filterText: "",
|
||||
selectedGraphLabelType: "",
|
||||
|
||||
tabs: [],
|
||||
treeObj: null,
|
||||
|
||||
activeName: "",
|
||||
|
||||
iconList: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
/* filterText(val) {
|
||||
if (!val)
|
||||
this.$refs.myTree.filter(val);
|
||||
}*/
|
||||
},
|
||||
methods: {
|
||||
searchContent(val) {
|
||||
/* if (key == 'type') {
|
||||
this.$refs.myTree.filter(val);
|
||||
if (!val) {
|
||||
let arr = this.graphLabelTypeList.filter(item => {
|
||||
return item.type_id == this.selectedGraphLabelType
|
||||
})
|
||||
console.log(arr)
|
||||
if (arr.length)
|
||||
this.graphTableData = arr[0].children
|
||||
}
|
||||
} else {*/
|
||||
console.log("搜索值", val);
|
||||
if (val) {
|
||||
this.graphTableData = this.allGraphLabels;
|
||||
this.graphTableData = this.graphTableData.filter((item) => {
|
||||
return item.name.indexOf(val) !== -1;
|
||||
});
|
||||
} else {
|
||||
console.log(this.graphLabelTypeList);
|
||||
console.log(this.graphLabelDataMaps);
|
||||
if (this.selectedGraphLabelType) {
|
||||
this.yuanshishuju.forEach((item) => {
|
||||
if (this.selectedGraphLabelType == item.type_id) {
|
||||
this.graphTableData = [];
|
||||
if (item.children) this.graphTableData = item.children;
|
||||
console.log(
|
||||
"this.graphTableDatathis.graphTableDatathis.graphTableData",
|
||||
this.graphTableData
|
||||
);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.graphTableData = [];
|
||||
}
|
||||
}
|
||||
// }
|
||||
},
|
||||
filterNode(value, data) {
|
||||
console.log(data);
|
||||
console.log(value);
|
||||
console.log(this.selectedGraphLabelType);
|
||||
if (!value) return true;
|
||||
/* if (this.selectedGraphLabelType == data.type_id) {
|
||||
this.graphTableData = []
|
||||
if (data.children)
|
||||
this.graphTableData = data.children
|
||||
}*/
|
||||
return data.type_name.indexOf(value) !== -1;
|
||||
},
|
||||
graphLabelClick(data) {
|
||||
console.log(data);
|
||||
console.log(this.graphLabelDataMaps);
|
||||
console.log(this.yuanshishuju);
|
||||
/* if (this.selectedGraphLabelType == data.type_id) {
|
||||
this.graphTableData = []
|
||||
this.$nextTick(() => {
|
||||
this.$refs.myTree.setCurrentKey(null);
|
||||
})
|
||||
this.selectedGraphLabelType = null
|
||||
} else {*/
|
||||
|
||||
// this.graphTableData = data.children || []
|
||||
|
||||
// }
|
||||
|
||||
if (data.sonNode.length) {
|
||||
let junbiaos = [];
|
||||
this.selectedGraphLabelType = data.type_id;
|
||||
this.yuanshishuju.forEach((item) => {
|
||||
if (item.p_id == data.type_id && item.children)
|
||||
junbiaos = junbiaos.concat(item.children);
|
||||
});
|
||||
this.graphTableData = junbiaos;
|
||||
} else {
|
||||
this.graphTableData = data.children;
|
||||
}
|
||||
},
|
||||
getGraphLabelTypeList() {
|
||||
// const loading = this.$loading({
|
||||
// target: this.$refs.junbiao,
|
||||
// lock: true,
|
||||
// text: "Loading",
|
||||
// spinner: "el-icon-loading",
|
||||
// background: "rgba(0, 0, 0, 0.7)",
|
||||
// });
|
||||
this.graphLabelDataMaps.clear();
|
||||
getGraphLabelType2((res) => {
|
||||
this.resOld = res.list;
|
||||
console.log("111111111111111111", res);
|
||||
// loading.close();
|
||||
if (res.list.length) {
|
||||
this.yuanshishuju = res.list;
|
||||
res.list.forEach((item) => {
|
||||
item.sonNode = [];
|
||||
if (!this.graphLabelDataMaps.has(item.p_id))
|
||||
this.graphLabelDataMaps.set(item.p_id, []);
|
||||
let arr = this.graphLabelDataMaps.get(item.p_id);
|
||||
arr.push(item);
|
||||
this.graphLabelDataMaps.set(item.p_id, arr);
|
||||
if (item.children) {
|
||||
this.allGraphLabels = this.allGraphLabels.concat(item.children);
|
||||
}
|
||||
});
|
||||
this.graphLabelTypeList = this.graphLabelDataMaps.get("-1");
|
||||
|
||||
let appendsonNode = (arr) => {
|
||||
arr.forEach((item) => {
|
||||
if (this.graphLabelDataMaps.has(item.type_id)) {
|
||||
item.sonNode = this.graphLabelDataMaps.get(item.type_id);
|
||||
this.graphLabelDataMaps.delete(item.type_id);
|
||||
}
|
||||
if (item.sonNode && item.sonNode.length) {
|
||||
appendsonNode(item.sonNode);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
appendsonNode(this.graphLabelTypeList);
|
||||
|
||||
/* this.graphLabelTypeList.forEach(item => {
|
||||
if (this.graphLabelDataMaps.has(item.type_id)) {
|
||||
item.sonNode = this.graphLabelDataMaps.get(item.type_id)
|
||||
}
|
||||
})*/
|
||||
|
||||
console.log(
|
||||
"this.graphLabelTypeList之后的array",
|
||||
this.graphLabelTypeList
|
||||
);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.myTree.setCurrentKey(this.graphLabelTypeList[0].type_id);
|
||||
});
|
||||
// this.selectedGraphLabelType = this.graphLabelTypeList[0].type_id
|
||||
// this.selectedGraphLabelType = res.list[0].type_id .sonNode[0]
|
||||
// this.graphTableData = this.graphLabelTypeList[0].children
|
||||
// this.modelTotal = res.total.list[0].length
|
||||
this.graphLabelClick(this.graphLabelTypeList[0]);
|
||||
}
|
||||
});
|
||||
},
|
||||
open() {
|
||||
this.allGraphLabels = [];
|
||||
this.graphLabelTypeList = []
|
||||
this.graphLabelDataMaps = new Map();
|
||||
this.graphTableData = [];
|
||||
this.filterText = "";
|
||||
this.selectedGraphLabelType = "";
|
||||
// if (this.graphLabelTypeList.length !== 0) {
|
||||
this.getGraphLabelTypeList();
|
||||
this.$refs.myTree.setCurrentKey(this.graphLabelTypeList[0].type_id);
|
||||
// } else {
|
||||
// }
|
||||
},
|
||||
|
||||
handleClick() { },
|
||||
selectImg({ key, url, name }) {
|
||||
//jun_biao_id: "67bee03d6370434d7e98bcda940e67e7"
|
||||
// name: "a常用new_37 (23)"
|
||||
// p_id: "8277e0910d750195b448797616e091ad"
|
||||
// url: "http://localhost:8890/yjearth4.0/api/v1/junbiao_2d/static/67bee03d6370434d7e98bcda940e67e7"
|
||||
console.log("vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv", url);
|
||||
this.close();
|
||||
let selectedNode = getSelectedNode(this.treeObj);
|
||||
let source_id = this.$md5(new Date().getTime() + "图像");
|
||||
let p_id = selectedNode
|
||||
? nodeType[selectedNode.source_type].allowChildren
|
||||
? selectedNode.source_id
|
||||
: selectedNode.p_id
|
||||
: -1;
|
||||
|
||||
//数据库对应的数据对象
|
||||
let DbOption = {
|
||||
source_id,
|
||||
source_name: name,
|
||||
source_type: "groundImage",
|
||||
p_id,
|
||||
is_load: true,
|
||||
};
|
||||
|
||||
let draw = new YJ.Draw.DrawPoint(window.Earth1);
|
||||
draw.start((err, position) => {
|
||||
if (err == null) {
|
||||
let option = {
|
||||
id: source_id,
|
||||
url,
|
||||
show: true,
|
||||
width: 100,
|
||||
height: 48,
|
||||
position,
|
||||
};
|
||||
|
||||
let node = getNodeData(DbOption, {
|
||||
id: source_id,
|
||||
url: url,
|
||||
show: true,
|
||||
width: 60,
|
||||
height: 60,
|
||||
position,
|
||||
});
|
||||
|
||||
addSource(node).then((res) => {
|
||||
if ([0, 200].includes(res.code)) {
|
||||
cusRenderNode(DbOption);
|
||||
cusAddNodes(this.treeObj, DbOption.p_id, [node]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log(key, url);
|
||||
},
|
||||
close() {
|
||||
console.log("close");
|
||||
this.$changeComponentShow(".junbiaoBox", false);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$recvChanel("getTreeObj", (treeObj) => {
|
||||
console.log(treeObj);
|
||||
this.treeObj = treeObj;
|
||||
this.$removeChanel("getTreeObj");
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.junbiao {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.box {
|
||||
// width: 30vw;
|
||||
// height: 23vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
||||
padding: 10px;
|
||||
border: 1.5px solid rgba(0, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
|
||||
font-size: 18px;
|
||||
padding: 0.5vh 0;
|
||||
|
||||
// this.$changeComponentShow("#modal", false)
|
||||
.closeBox {
|
||||
right: 0;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
border-radius: 0 0 0 90%;
|
||||
background: #00ffff8f;
|
||||
|
||||
&>span {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.boxHeaderTitle {
|
||||
display: inline-block;
|
||||
width: 230px;
|
||||
height: 34px;
|
||||
background: url('../../assets/images/junbiaoTitle.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
border-color: rgba(0, 255, 255, 1);
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
width: 100%;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.typeBox {
|
||||
.el-tree {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover,
|
||||
.el-upload-list__item:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-tree-node__expand-icon {
|
||||
color: rgba(0, 255, 255, 1);
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: transparent;
|
||||
color: rgba(0, 255, 255, 1);
|
||||
}
|
||||
|
||||
&>div {
|
||||
height: 340px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
border-right: rgba(204, 204, 204, 0.2) 1px solid;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.imgItemBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
//justify-content: space-between;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.imgItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
width: 20%;
|
||||
align-items: center;
|
||||
|
||||
.imgBox {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
background: url('../../assets/images/modelbg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 70px;
|
||||
overflow: hidden;
|
||||
/* 确保超出容器的文本被裁剪 */
|
||||
white-space: nowrap;
|
||||
/* 确保文本在一行内显示 */
|
||||
text-overflow: ellipsis;
|
||||
/* 使用省略号表示文本超出 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
379
src/renderer/components/dialog/junbiao3d.vue
Normal file
379
src/renderer/components/dialog/junbiao3d.vue
Normal file
@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="junbiao3d" ref="junbiao3d">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<span></span>
|
||||
<span class="title">三维军标</span>
|
||||
<span class="closeBox">
|
||||
<span @click="close">✕</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="boxBody">
|
||||
<div class="contentBox">
|
||||
<!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<template v-for="item in tabs">
|
||||
<el-tab-pane :label="item.label" :name="item.key">
|
||||
<div class="imgItemBox custom_scroll_bar">
|
||||
<div class="imgItem" v-for="item in iconList[item.key]" @click="selectImg(item)">
|
||||
<img :src="item.url" alt="" :title="item.name">
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs> -->
|
||||
<template v-for="item in tabs">
|
||||
<div class="imgItemBox custom_scroll_bar">
|
||||
<div class="imgItem" v-for="item in iconList[item.key]" @click="selectImg(item)">
|
||||
<div class="imgBox">
|
||||
<img :src="item.url" alt="" :title="item.name">
|
||||
<div class="label">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSelectedNode, getNodeData, cusAddNodes, cusRenderNode, nodeType } from "@/components/Tree/treeNode";
|
||||
import { addSource, delSource } from "@/api/gisAPI";
|
||||
import { getGraphLabelType } from "../../api/gisAPI";
|
||||
import { getIP } from "../../utils";
|
||||
import { leftClick, rightClick, tileClick, vrLeftClick } from "../Tree/entityClick";
|
||||
export default {
|
||||
name: "junbiao",
|
||||
data() {
|
||||
return {
|
||||
yuanshishuju: [],
|
||||
allGraphLabels: [],
|
||||
graphLabelTypeList: [],
|
||||
graphLabelProps: {
|
||||
id: 'type_id',
|
||||
children: 'sonNode',
|
||||
label: 'type_name'
|
||||
},
|
||||
graphLabelDataMaps: new Map(),
|
||||
graphTableData: [],
|
||||
filterText: "",
|
||||
selectedGraphLabelType: "",
|
||||
|
||||
tabs: [],
|
||||
treeObj: null,
|
||||
|
||||
activeName: "",
|
||||
|
||||
iconList: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/* filterText(val) {
|
||||
if (!val)
|
||||
this.$refs.myTree.filter(val);
|
||||
}*/
|
||||
},
|
||||
methods: {
|
||||
searchContent(val) {
|
||||
/* if (key == 'type') {
|
||||
this.$refs.myTree.filter(val);
|
||||
if (!val) {
|
||||
let arr = this.graphLabelTypeList.filter(item => {
|
||||
return item.type_id == this.selectedGraphLabelType
|
||||
})
|
||||
console.log(arr)
|
||||
if (arr.length)
|
||||
this.graphTableData = arr[0].children
|
||||
}
|
||||
} else {*/
|
||||
console.log("搜索值", val)
|
||||
if (val) {
|
||||
this.graphTableData = this.allGraphLabels
|
||||
this.graphTableData = this.graphTableData.filter((item) => {
|
||||
return item.name.indexOf(val) !== -1;
|
||||
})
|
||||
} else {
|
||||
console.log(this.graphLabelTypeList)
|
||||
console.log(this.graphLabelDataMaps)
|
||||
if (this.selectedGraphLabelType) {
|
||||
this.yuanshishuju.forEach(item => {
|
||||
if (this.selectedGraphLabelType == item.type_id) {
|
||||
this.graphTableData = []
|
||||
if (item.children)
|
||||
this.graphTableData = item.children
|
||||
console.log('this.graphTableDatathis.graphTableDatathis.graphTableData', this.graphTableData);
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
this.graphTableData = []
|
||||
}
|
||||
|
||||
}
|
||||
// }
|
||||
},
|
||||
handleClick() {
|
||||
},
|
||||
selectImg({ key, url, name, glbUrl }) {
|
||||
console.log('glbUrlglbUrlglbUrl', glbUrl);
|
||||
//jun_biao_id: "67bee03d6370434d7e98bcda940e67e7"
|
||||
// name: "a常用new_37 (23)"
|
||||
// p_id: "8277e0910d750195b448797616e091ad"
|
||||
// url: "http://localhost:8890/yjearth4.0/api/v1/junbiao_2d/static/67bee03d6370434d7e98bcda940e67e7"
|
||||
this.close()
|
||||
let selectedNode = getSelectedNode(this.treeObj);
|
||||
new YJ.Draw.DrawPoint(window.Earth1).start(async (err, position) => {
|
||||
if (err == null || err != false) {
|
||||
let source_id = this.$md5(new Date().getTime() + name);
|
||||
let p_id = selectedNode
|
||||
? nodeType[selectedNode.source_type].allowChildren
|
||||
? selectedNode.source_id
|
||||
: selectedNode.p_id
|
||||
: -1;
|
||||
let DbOption = {
|
||||
source_id,
|
||||
source_name: name,
|
||||
source_type: "model",
|
||||
p_id,
|
||||
};
|
||||
|
||||
let option = {
|
||||
id: source_id,
|
||||
position,
|
||||
name: name,
|
||||
show: true,
|
||||
scale: 1,
|
||||
url: glbUrl,
|
||||
maximumScale: 1,
|
||||
host: getIP(),
|
||||
isJunBiao: true
|
||||
};
|
||||
let Model = await new YJ.Obj.Model(window.Earth1, option)
|
||||
window._entityMap.set(option.id, Model)
|
||||
Model.onClick = () => {
|
||||
leftClick(node)
|
||||
}
|
||||
let detailOption = JSON.parse(JSON.stringify(Model.options))
|
||||
detailOption.url = glbUrl
|
||||
let node = getNodeData(DbOption, detailOption)
|
||||
let detail = JSON.parse(node.detail)
|
||||
detail.isJunBiao = true
|
||||
node.detail = JSON.stringify(detail)
|
||||
addSource(node).then((res) => {
|
||||
if ([0, 200].includes(res.code)) {
|
||||
// cusRenderNode(DbOption)
|
||||
cusAddNodes(this.treeObj, DbOption.p_id, [node])
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
close() {
|
||||
console.log("close")
|
||||
this.$changeComponentShow(".junbiao3dBox", false)
|
||||
// this.$changeComponentShow("#modal", false)
|
||||
},
|
||||
open() {
|
||||
this.tabs = []
|
||||
this.iconList = {};
|
||||
let dirObj = {
|
||||
dirName: "junbiao_3d/img",
|
||||
}
|
||||
for (const dirObjElement in dirObj) {
|
||||
this.tabs.push({
|
||||
label: dirObj[dirObjElement] == 'junbiao_3d/img' ? "三维军标" : "其他军标",
|
||||
key: dirObj[dirObjElement],
|
||||
icons: []
|
||||
})
|
||||
}
|
||||
this.activeName = this.tabs[0].key
|
||||
console.log(this.tabs, "this.tabsthis.tabsthis.tabs");
|
||||
|
||||
// $changeComponentShow("#modal", true)
|
||||
this.$sendElectronChanel("requireGEMarkerName", dirObj)
|
||||
this.$recvElectronChanel("dirFiles", (e, res) => {
|
||||
for (const resKey in res) {
|
||||
res[resKey].forEach((item, index) => {
|
||||
let arr = item.split('/')
|
||||
console.log(arr);
|
||||
let obj = {
|
||||
name: arr[arr.length - 1].split(".")[0],
|
||||
url: "http://localhost:" + window.staticPort + "/" + item,
|
||||
key: item,
|
||||
glbUrl: "http://localhost:" + window.staticPort + "/" + arr[0] + "/glb/" + arr[arr.length - 1].split(".")[0] + ".glb"
|
||||
}
|
||||
res[resKey][index] = obj
|
||||
})
|
||||
}
|
||||
this.iconList = res
|
||||
// window.$root_home_index.$refs.selectImg.init(res, selected)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$recvChanel("getTreeObj", (treeObj) => {
|
||||
console.log(treeObj)
|
||||
this.treeObj = treeObj
|
||||
this.$removeChanel("getTreeObj")
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.junbiao3d {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.box {
|
||||
width: 30vw;
|
||||
height: 23vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
||||
padding: 10px;
|
||||
border: 1.5px solid rgba(0, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
color: #fff;
|
||||
|
||||
font-size: 18px;
|
||||
padding: .5vh 0;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
||||
font-family: 'alimamashuheiti';
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.closeBox {
|
||||
right: 0;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
border-radius: 0 0 0 90%;
|
||||
background: #00ffff8f;
|
||||
|
||||
&>span {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
overflow-y: scroll;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.contentBox {
|
||||
width: 100%;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.typeBox {
|
||||
&>div {
|
||||
height: 340px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.imgItemBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
//justify-content: space-between;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.imgItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
width: 20%;
|
||||
|
||||
//height: 100px;
|
||||
.imgBox {
|
||||
img {
|
||||
width: 80px;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
// & {
|
||||
// border-color: red;
|
||||
// }
|
||||
}
|
||||
|
||||
.label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.boxBody::-webkit-scrollbar-thumb {
|
||||
background-color: #00ffff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.boxBody::-webkit-scrollbar-track {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
331
src/renderer/components/dialog/model.vue
Normal file
331
src/renderer/components/dialog/model.vue
Normal file
@ -0,0 +1,331 @@
|
||||
<template>
|
||||
<div class="model666">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<span></span>
|
||||
<span class="boxHeaderTitle"></span>
|
||||
<span>
|
||||
<i class="el-icon-close" @click="close"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="boxBody custom_scroll_bar">
|
||||
<div style="display: flex">
|
||||
<el-input size="small" suffix-icon="el-icon-search" placeholder="输入关键字进行过滤" @input="searchContent"
|
||||
v-model="filterText">
|
||||
</el-input>
|
||||
<!--<el-button type="primary" @click="searchContent('type')" size="small">搜类型</el-button>-->
|
||||
<!--<el-button type="primary" @click="searchContent('junbiao')" size="small">搜军标</el-button>-->
|
||||
</div>
|
||||
<template v-if="searchRes.length">
|
||||
<div class="el-collapse-item__content">
|
||||
<template v-for="model in searchRes">
|
||||
<div class="itemBox" @click="selectModel(model)">
|
||||
<div class="imgbox">
|
||||
<img :src="model.poster_url" alt=""></img>
|
||||
</div>
|
||||
<span>{{ model.model_name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-collapse v-model="activeName" accordion v-if="!filterText" @change="openModel">
|
||||
<template v-for="item in modelTypeList">
|
||||
<el-collapse-item :title="item.type_name" :name="item.type_id">
|
||||
<template v-for="model in item.children">
|
||||
<div class="itemBox" @click="selectModel(model)">
|
||||
<div class="imgbox">
|
||||
<el-image :src="model.poster_url + '?' + Math.random()" alt=""></el-image>
|
||||
|
||||
</div>
|
||||
<span>{{ model.model_name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="!item.children || item.children.length == 0">
|
||||
<div style="height: 60px;visibility: hidden"></div>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</template>
|
||||
</el-collapse>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getModelType } from "../../api/gisAPI";
|
||||
import {
|
||||
getSelectedNode,
|
||||
cusAddNodes,
|
||||
getNodeData,
|
||||
nodeType,
|
||||
} from "../Tree/treeNode";
|
||||
import { addSource } from "@/api/gisAPI";
|
||||
import { leftClick } from "../Tree/entityClick";
|
||||
import { getIP } from "../../utils";
|
||||
|
||||
export default {
|
||||
name: "model",
|
||||
data() {
|
||||
return {
|
||||
treeObj: null,
|
||||
activeName: "",
|
||||
filterText: "",
|
||||
modelTypeList: [],
|
||||
data: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
type: "",
|
||||
allModels: [],
|
||||
searchRes: [],
|
||||
arrModel: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
searchContent(val) {
|
||||
if (val) {
|
||||
this.searchRes = this.allModels.filter((item) => {
|
||||
return item.model_name.indexOf(val) !== -1;
|
||||
});
|
||||
} else {
|
||||
this.searchRes = [];
|
||||
}
|
||||
},
|
||||
selectModel(model) {
|
||||
console.log("选中了模型", model, this.type);
|
||||
this.close();
|
||||
if (this.type == "rightMenu") {
|
||||
this.$sendChanel("selectModel", model);
|
||||
} else if (this.type == "rightMenuChange") {
|
||||
this.$sendChanel("selectModelChange", model);
|
||||
} else {
|
||||
let selectedNode = getSelectedNode(this.treeObj);
|
||||
new YJ.Draw.DrawPoint(window.Earth1).start(async (err, position) => {
|
||||
if (err == null || err != false) {
|
||||
let source_id = this.$md5(new Date().getTime() + model.model_name);
|
||||
let p_id = selectedNode
|
||||
? nodeType[selectedNode.source_type].allowChildren
|
||||
? selectedNode.source_id
|
||||
: selectedNode.p_id
|
||||
: -1;
|
||||
let DbOption = {
|
||||
source_id,
|
||||
source_name: model.model_name,
|
||||
source_type: "model",
|
||||
p_id,
|
||||
};
|
||||
|
||||
let option = {
|
||||
id: source_id,
|
||||
position,
|
||||
name: model.model_name,
|
||||
show: true,
|
||||
scale: 1,
|
||||
url: model.model_url,
|
||||
maximumScale: 1,
|
||||
host: getIP(),
|
||||
};
|
||||
let Model = await new YJ.Obj.Model(window.Earth1, option);
|
||||
window._entityMap.set(option.id, Model);
|
||||
Model.onClick = () => {
|
||||
leftClick(node);
|
||||
};
|
||||
let detailOption = JSON.parse(JSON.stringify(Model.options));
|
||||
detailOption.url = model.model_id + ".glb";
|
||||
let node = getNodeData(DbOption, detailOption);
|
||||
console.log(node);
|
||||
|
||||
addSource(node).then((res) => {
|
||||
if ([0, 200].includes(res.code)) {
|
||||
// cusRenderNode(DbOption)
|
||||
cusAddNodes(this.treeObj, DbOption.p_id, [node]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
openModel(val) {
|
||||
if (val) {
|
||||
let arr = this.arrModel
|
||||
.filter((item) => item.type_id == val)
|
||||
.map((item) => item.children)
|
||||
.flat();
|
||||
this.modelTypeList.forEach((item) => {
|
||||
if (item.type_id == val) {
|
||||
item.children = arr;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
open(key = "second") {
|
||||
this.searchRes = [];
|
||||
this.allModels = [];
|
||||
this.modelTypeList = [];
|
||||
this.arrModel = [];
|
||||
this.filterText = "";
|
||||
this.type = key;
|
||||
getModelType((res) => {
|
||||
if (res.list) {
|
||||
this.arrModel = res.list;
|
||||
this.modelTypeList = res.list.map(({ children, ...rest }) => rest);
|
||||
this.modelTypeList[0].children = res.list[0].children;
|
||||
console.log(this.modelTypeList);
|
||||
res.list.forEach((item) => {
|
||||
if (item.children)
|
||||
this.allModels = this.allModels.concat(item.children);
|
||||
});
|
||||
// this.modelTotal = res.total.list[0].length
|
||||
}
|
||||
});
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
},
|
||||
close() {
|
||||
this.searchRes = [];
|
||||
this.allModels = [];
|
||||
this.modelTypeList = [];
|
||||
this.activeName = "";
|
||||
this.$changeComponentShow(".modelBox", false);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.open()
|
||||
this.$recvChanel("getTreeObj", (treeObj) => {
|
||||
this.treeObj = treeObj;
|
||||
// this.$removeChanel("getTreeObj")
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.model666 {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.box {
|
||||
width: 30vw;
|
||||
height: 21vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 16px;
|
||||
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
||||
padding: 10px;
|
||||
border: 1.5px solid rgba(0, 255, 255, 1);
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 0.5vh 0;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 22px;
|
||||
|
||||
.boxHeaderTitle {
|
||||
display: inline-block;
|
||||
width: 230px;
|
||||
height: 34px;
|
||||
background: url('../../assets/images/title.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
height: 500px;
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
.itemBox {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
.imgbox {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
background: url('../../assets/images/modelbg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
/* 确保超出容器的文本被裁剪 */
|
||||
white-space: nowrap;
|
||||
/* 确保文本在一行内显示 */
|
||||
text-overflow: ellipsis;
|
||||
/* 使用省略号表示文本超出 */
|
||||
}
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 50%;
|
||||
margin-bottom: 18px;
|
||||
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 255, 255, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-input__inner::placeholder {
|
||||
color: rgba(173, 241, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.boxBody::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 255, 255, 1) !important;
|
||||
}
|
||||
|
||||
.boxBody::-webkit-scrollbar-track {
|
||||
background: rgba(0, 51, 51, .1) !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
169
src/renderer/components/dialog/modelSelect.vue
Normal file
169
src/renderer/components/dialog/modelSelect.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="modelSelect">
|
||||
<div class="box">
|
||||
<div class="boxHeader">
|
||||
<span></span>
|
||||
<span>模型选择</span>
|
||||
<i class="el-icon-close" @click="close"></i>
|
||||
</div>
|
||||
<div class="boxBody custom_scroll_bar">
|
||||
<div
|
||||
class="modelItem"
|
||||
v-for="item in modelLists"
|
||||
@click="selectModel(item)"
|
||||
>
|
||||
<img :src="item.poster_url" alt="" :title="55" />
|
||||
<span>{{ item.model_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { modelList } from "../../api/gisAPI";
|
||||
import { $sendChanel } from "../../utils/communication";
|
||||
|
||||
export default {
|
||||
name: "modelSelect",
|
||||
data() {
|
||||
return {
|
||||
modelLists: [],
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
init() {
|
||||
modelList((res) => {
|
||||
console.log("modelList", res);
|
||||
if (res.total == 0) {
|
||||
this.$message.warning("当前模型库无模型");
|
||||
} else {
|
||||
this.modelLists = res.list;
|
||||
/*this.modelLists.forEach(item => {
|
||||
item.fun = this.selectModel
|
||||
})*/
|
||||
}
|
||||
/* it.list = res.list
|
||||
it.list.forEach(item => {
|
||||
item.fun = this.addGlb
|
||||
})
|
||||
this.currentItem = it.list*/
|
||||
});
|
||||
},
|
||||
close() {
|
||||
console.log("close");
|
||||
this.$changeComponentShow(".modelSelectBox", false);
|
||||
// this.$changeComponentShow("#modal", false)
|
||||
},
|
||||
selectModel(item) {
|
||||
console.log("selectModel", item);
|
||||
this.$sendChanel("selectModel", item);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modelSelect {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.box {
|
||||
border: 1px solid red;
|
||||
width: 30vw;
|
||||
height: 21vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
|
||||
font-size: 18px;
|
||||
padding: 0.5vh 0;
|
||||
background-color: #737373cc;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
flex: auto;
|
||||
background-color: #b2e3eff0;
|
||||
|
||||
//.imgItemBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
height: 16vw;
|
||||
overflow-y: auto;
|
||||
//}
|
||||
|
||||
.modelItem {
|
||||
//padding: 7px 8px;
|
||||
display: flex;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
|
||||
img {
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
& {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* .list {
|
||||
height: 16vw;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.listItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
color: #0E212F;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
flex: auto; !* 或者flex: 1 *!
|
||||
}
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
207
src/renderer/components/dialog/textModel.vue
Normal file
207
src/renderer/components/dialog/textModel.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="textModel">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<!-- <span></span> -->
|
||||
<span class="label">{{ title }}</span>
|
||||
<div class="close-box" @click="close">
|
||||
<span class="close"></span>
|
||||
<i>x</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxBody">
|
||||
<el-form :label-position="labelPosition" label-width="120px" :model="form">
|
||||
<!-- label="请输入文本信息" -->
|
||||
<el-form-item>
|
||||
<el-input type="textarea" placeholder="请输入内容" :rows="2" v-model="form.text" @input="textareaInput"
|
||||
:autosize="{ minRows: 2, maxRows: 10 }" class="input-with-select"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="display: flex;justify-content: flex-end;">
|
||||
<el-button type="primary" @click="confirm">确认</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "textModel",
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "top",
|
||||
form: {
|
||||
text: "",
|
||||
},
|
||||
title: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$changeComponentShow(".textModel", false);
|
||||
},
|
||||
cancel() {
|
||||
this.$changeComponentShow(".textModel", false);
|
||||
this.$sendChanel("textModelContent", null);
|
||||
this.form = {
|
||||
text: "",
|
||||
};
|
||||
},
|
||||
isOnlyWhitespace(str) {
|
||||
// 使用正则表达式匹配一个或多个空白字符
|
||||
const regex = /^\s+$/;
|
||||
return regex.test(str);
|
||||
},
|
||||
textareaInput() {
|
||||
let textArray = this.form.text.split('\n')
|
||||
for (let i = 0; i < textArray.length; i++) {
|
||||
if (textArray[i].length > 80) {
|
||||
textArray[i] = textArray[i].slice(0, 80 - textArray[i].length)
|
||||
this.$message.warning("行超过80个字符,请按回车（Enter）后，继续输入")
|
||||
}
|
||||
}
|
||||
if (textArray.length > 70) {
|
||||
textArray.splice(70 - textArray.length)
|
||||
this.$message.warning("超过最大输入字符")
|
||||
}
|
||||
this.form.text = textArray.join('\n')
|
||||
},
|
||||
confirm() {
|
||||
//this.form.text去除空格
|
||||
// this.form.text = this.form.text.replace(/\s+/g, "");
|
||||
let bool = this.isOnlyWhitespace(this.form.text)
|
||||
if (this.form.text.length == 0 || bool) {
|
||||
this.$message.warning("请输入内容");
|
||||
return;
|
||||
}
|
||||
this.$sendChanel("textModelContent", this.form);
|
||||
this.$changeComponentShow(".textModel", false);
|
||||
this.form = {
|
||||
text: "",
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$recvChanel("textTetlie", (text) => {
|
||||
this.title = text;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.textModel {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.box {
|
||||
width: 20vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--color-sdk-auxiliary-public);
|
||||
font-size: 14px;
|
||||
// z-index: 999999;
|
||||
background: linear-gradient(0deg, var(--color-sdk-bg-gradual)),
|
||||
rgba(0, 0, 0, 0.6);
|
||||
border: 1.5px solid;
|
||||
border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1;
|
||||
text-align: left;
|
||||
font-family: "sy-boldface";
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
line-height: 46px;
|
||||
padding: 5px 16px 5px 16px;
|
||||
height: 46px;
|
||||
|
||||
.label {
|
||||
font-family: "Ali-mother-counts-bold";
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
text-shadow: 0px 0px 9px rgb(20 118 255);
|
||||
}
|
||||
|
||||
.close-box {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
border-radius: 0 0 0 90%;
|
||||
overflow: hidden;
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(var(--color-sdk-base-rgb), 1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
color: #ffffff;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.el-button:hover {
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
src/renderer/components/dialog/tufu_select.vue
Normal file
82
src/renderer/components/dialog/tufu_select.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="tufu_select" ref="tufu_select">
|
||||
<span style="-webkit-text-stroke: 1px black;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;">图幅比例尺</span>
|
||||
<el-select v-model="value" size="small" :popper-append-to-body="false"
|
||||
style="width: 100px; vertical-align: middle; display: inline-block;" placeholder="请选择" @change="handleChange">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "tufu",
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ value: "1:100万", label: "1:100万" },
|
||||
{ value: "1:50万", label: "1:50万" },
|
||||
{ value: "1:25万", label: "1:25万" },
|
||||
{ value: "1:10万", label: "1:10万" },
|
||||
{ value: "1:5万", label: "1:5万" },
|
||||
{ value: "1:2.5万", label: "1:2.5万" },
|
||||
{ value: "1:1万", label: "1:1万" },
|
||||
{ value: "1:5000", label: "1:5000" },
|
||||
],
|
||||
value: "1:100万"
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
YJ.Global.SheetIndexShangeScale(window.Earth1, value)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tufu_select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.el-range-editor.is-active .el-range-editor.is-active:hover,
|
||||
.el-select .el-input.is-focus .el-input__inner,
|
||||
.el-input.is-active .el-input__inner,
|
||||
.el-input__inner:focus {
|
||||
border-color: rgba(0, 255, 255, 1);
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
border: 1px solid rgba(0, 255, 255, 1);
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-color: rgba(0, 255, 255, 1);
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
color: rgba(0, 255, 255, 1);
|
||||
background-color: rgba(0, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
218
src/renderer/components/dialog/vrModel.vue
Normal file
218
src/renderer/components/dialog/vrModel.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="vrModel">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<span></span>
|
||||
<span class="title">全景关联</span>
|
||||
<span class="closeBox">
|
||||
<span @click="cancel">✕</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="boxBody">
|
||||
<el-form :label-position="labelPosition" label-width="100px" :model="form">
|
||||
<el-form-item label="文件夹路径">
|
||||
<el-input size="small" placeholder="请输入内容" disabled v-model="form.path"
|
||||
class="input-with-select">
|
||||
<el-button size="small" slot="append" @click="selectPath">路径选择</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="全景图间距">
|
||||
<el-input size="small" type="number" v-model.number="form.distance"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div style="display: flex;justify-content: space-evenly;">
|
||||
<el-button size="small" @click="cancel">取消</el-button>
|
||||
<el-button size="small" @click="confirm">确认</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { find_neighbor } from "../../api/gisAPI";
|
||||
import { Message } from "element-ui";
|
||||
export default {
|
||||
name: "vrModel",
|
||||
data() {
|
||||
return {
|
||||
labelPosition: 'right',
|
||||
form: {
|
||||
path: '',
|
||||
distance: 50,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
console.log("close")
|
||||
this.$changeComponentShow(".vrModel", false)
|
||||
},
|
||||
selectPath() {
|
||||
let option = {
|
||||
properties: ["openDirectory"],
|
||||
filters: []
|
||||
}
|
||||
this.openDirectoryDialog(option, paths => {
|
||||
if (!paths.length) {
|
||||
return
|
||||
}
|
||||
console.log(paths);
|
||||
this.form.path = paths[0]
|
||||
})
|
||||
},
|
||||
openDirectoryDialog(option, cb) {
|
||||
this.$sendElectronChanel("open-directory-dialog", option);
|
||||
this.$recvElectronChanel("selectedItem", (e, paths) => {
|
||||
cb(paths);
|
||||
});
|
||||
},
|
||||
// 导入文件夹
|
||||
importFlie() {
|
||||
find_neighbor(this.form, res => {
|
||||
console.log(res);
|
||||
Message({
|
||||
message: "关联成功",
|
||||
type: 'success',
|
||||
});
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
this.$changeComponentShow(".vrModel", false)
|
||||
this.form = {
|
||||
path: '',
|
||||
distance: '',
|
||||
}
|
||||
},
|
||||
confirm() {
|
||||
if (!this.form.path) {
|
||||
Message({
|
||||
message: "请选择文件夹",
|
||||
type: 'warning',
|
||||
});
|
||||
return
|
||||
}
|
||||
this.importFlie()
|
||||
this.$changeComponentShow(".vrModel", false)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.vrModel {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.box {
|
||||
// width: 30vw;
|
||||
// height: 13vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
||||
padding: 10px;
|
||||
border: 1.5px solid rgba(0, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
color: #fff;
|
||||
|
||||
font-size: 18px;
|
||||
padding: .5vh 0;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
||||
font-family: 'alimamashuheiti';
|
||||
}
|
||||
|
||||
.closeBox {
|
||||
right: 0;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
border-radius: 0 0 0 90%;
|
||||
background: #00ffff8f;
|
||||
|
||||
&>span {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 20px;
|
||||
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
border-color: rgba(0, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-input__inner::placeholder,
|
||||
.el-form-item__label,
|
||||
.el-button,
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
background-color: rgba(0, 255, 255, 0.2);
|
||||
border: 1px solid rgba(0, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
background-color: rgba(0, 255, 255, 0.2);
|
||||
border-color: rgba(0, 255, 255, 0.5);
|
||||
|
||||
.el-button {
|
||||
background-color: rgba(0, 255, 255, 0.2);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -1.5px;
|
||||
top: -6px;
|
||||
width: 70.5px;
|
||||
height: 6px;
|
||||
opacity: 1;
|
||||
background: aqua;
|
||||
clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 6px, 0 6px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user