<template>
|
<div class="resourceQuery">
|
<moon-map></moon-map>
|
<div class="bottom_btn_TWO">
|
<div
|
v-show="mapFlag == '2D'"
|
class="ChangeMap twoImg"
|
@click="setMapImg('2D')"
|
></div>
|
<div
|
v-show="mapFlag != '2D'"
|
class="ChangeMap threeImg"
|
@click="setMapImg('3D')"
|
></div>
|
</div>
|
<div
|
class="left_menu"
|
@click="leftDialog =true"
|
v-show="!leftDialog"
|
>
|
</div>
|
<div
|
class="left_box"
|
v-show="leftDialog"
|
>
|
<div class="top_box">
|
<div class="input_box">
|
<el-form
|
:model="form"
|
label-width="120px"
|
label-position="top"
|
size="small"
|
>
|
<el-form-item label="">
|
<el-input
|
v-model="form.name"
|
placeholder=""
|
prefix-icon="el-icon-search"
|
/>
|
</el-form-item>
|
<el-form-item label="传感器类型">
|
<el-select
|
style="width: 100%"
|
v-model="form.sensorType"
|
placeholder=""
|
>
|
<el-option
|
v-for="(e, i) in sensorOption"
|
:label="e.name"
|
:value="e.value"
|
:key="i"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="数据类型">
|
<el-select
|
style="width: 100%"
|
v-model="form.mataType"
|
placeholder=""
|
>
|
<el-option
|
v-for="(e, i) in metaOption"
|
:label="e.name"
|
:value="e.value"
|
:key="i"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间范围">
|
<el-date-picker
|
style="width: 100%"
|
v-model="acqTime"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="yyyy-MM-DD HH:mm:ss"
|
>
|
</el-date-picker>
|
</el-form-item>
|
|
</el-form>
|
<div class="KJCX">
|
<div class="KJCX_title">空间查询</div>
|
<div class="KJCX_btn_list">
|
<div
|
class="KJCX_btn"
|
@click="setDrawMenu(1)"
|
>
|
<span>点</span>
|
<div class="btn_bg d"></div>
|
</div>
|
<div
|
class="KJCX_btn"
|
@click="setDrawMenu(2)"
|
>
|
<span>线</span>
|
<div class="btn_bg x"></div>
|
</div>
|
<div
|
class="KJCX_btn"
|
@click="setDrawMenu(3)"
|
>
|
<span>矩形</span>
|
<div class="btn_bg jx"></div>
|
</div>
|
<div
|
class="KJCX_btn"
|
@click="setDrawMenu(4)"
|
>
|
<span>多边形</span>
|
<div class="btn_bg db"></div>
|
</div>
|
<div
|
class="KJCX_btn"
|
@click="setDrawMenu(5)"
|
>
|
<span>清除</span>
|
<div class="btn_bg qc"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
class="btn_close"
|
@click="leftDialog = false"
|
>
|
|
</div>
|
<div class="btn_box">
|
<div class="btn">
|
<el-button
|
type="primary"
|
class="btnbox"
|
@click="setQueryRetrieval"
|
>检索</el-button>
|
</div>
|
<div>
|
<el-button
|
type="primary"
|
class="btnbox delbtn"
|
@click="setQueryRestRetrieval"
|
>重置</el-button>
|
</div>
|
</div>
|
</div>
|
|
<div
|
class="pagination"
|
v-show="listDialog"
|
>
|
<el-pagination
|
small
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="form.pageIndex"
|
:page-sizes="[100, 200, 300, 400]"
|
:page-size="form.pageSize"
|
layout="sizes, prev, pager, next, jumper"
|
:total="form.count"
|
>
|
</el-pagination>
|
</div>
|
<div
|
class="list_box"
|
v-show="listDialog"
|
>
|
<div
|
class="list"
|
v-for="(e, i) in list"
|
:key="i"
|
:class="{ list_active: e.checked }"
|
@click.stop="checkedList(e)"
|
>
|
<div class="attribute_box">
|
<div class="attribute">
|
<span class="attribute_title">图幅名称：</span>
|
<span class="attribute_content">{{ e.name }}</span>
|
</div>
|
<div class="attribute">
|
<span class="attribute_title">存储位置：</span>
|
<span class="attribute_content">{{ e.path }}</span>
|
</div>
|
<div class="attribute">
|
<span class="attribute_title">生产时间：</span>
|
<span class="attribute_content">{{ e.createTime }}</span>
|
</div>
|
<div
|
class="attribute"
|
style="margin: 0"
|
>
|
<span class="attribute_title">数据大小：</span>
|
<span class="attribute_content">{{ e.sizes }}M</span>
|
</div>
|
</div>
|
<div
|
class="all_btn"
|
v-on:click.stop="details(e)"
|
>
|
<i class="el-icon-more"></i>
|
</div>
|
</div>
|
</div>
|
<div
|
class="bottom_box"
|
v-show="listDialog"
|
>
|
<span class="msg_box">显示第{{ (( (form.pageIndex - 1)* form.pageSize) + 1 )}}到{{(form.pageIndex*form.pageSize)
|
|
}}条，共{{ list.length }}条记录，已选择{{
|
listChecked.length
|
}}条</span>
|
<div class="bottom_btn">
|
<el-button
|
type="primary"
|
class="btnbox"
|
@click="setListCheckAll"
|
>全选</el-button>
|
<el-button
|
type="primary"
|
class="btnbox delbtn"
|
@click="setListRemoveCheckAll"
|
>取消</el-button>
|
</div>
|
</div>
|
</div>
|
<div
|
class="details_box"
|
v-show="detailsBox"
|
v-drag="true"
|
>
|
<div class="details_t">
|
<i
|
class="el-icon-close"
|
@click="detailsBox = false"
|
></i>
|
</div>
|
<div class="details_table">
|
<div style="height: 430px;overflow: auto;">
|
<div class="table_header">
|
<div class="table_td">属性</div>
|
<div class="table_td">属性值</div>
|
</div>
|
|
<div
|
class="table_tr"
|
v-for="(e, i) in tableList"
|
:key="i"
|
>
|
<div class="table_td">{{ e.alias}}</div>
|
<div class="table_td">{{ e.value }}</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<el-dialog
|
title="提示"
|
:visible.sync="dialogVisible"
|
width="20%"
|
:before-close="handleClose"
|
>
|
<div class="dialogContent">
|
<el-form ref="form">
|
<el-form-item label="缓冲距离（M）">
|
<el-input-number
|
v-model="bufferNumber"
|
:step="10"
|
></el-input-number>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<span
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button
|
size="small"
|
@click="dialogVisible = false"
|
>取 消</el-button>
|
<el-button
|
type="primary"
|
size="small"
|
@click="setCloseDialog"
|
>确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import * as turf from "@turf/turf"
|
import moonMap from "../../components/MapView/moonMap.vue"; //地图
|
import { meta_type, sensor_type } from "../datamanage/js/layerManage";
|
import { select_meta_ByPageAndCount, encr, selectByPageAndCount } from '../../api/api'
|
export default {
|
components: {
|
moonMap,
|
},
|
data() {
|
return {
|
paginationData: {
|
pageNo: 1,
|
pageSize: 10,
|
},
|
tableList: [],
|
listChecked: [],
|
list: [],
|
currentPage4: 4,
|
form: {
|
name: "",
|
sensorType: 0,
|
mataType: 0,
|
wkt: null,
|
pageIndex: 1,
|
pageSize: 100,
|
count: 0,
|
startDate: null,
|
endDate: null
|
},
|
acqTime: '',
|
sensorOption: [],
|
metaOption: [],
|
detailsBox: false,
|
listDialog: false,
|
leftDialog: true,
|
drawType: null,
|
dialogVisible: false,
|
bufferNumber: 100,
|
geoWkt: null,
|
wktEntity: null,
|
mapFlag: '2D'
|
};
|
},
|
methods: {
|
setMapImg(res) {
|
if (res == "2D") {
|
this.mapFlag = "3D";
|
window.earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE2D;
|
} else if (res == "3D") {
|
this.mapFlag = "2D";
|
window.earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE3D;
|
}
|
},
|
setListCheckAll() {
|
for (var i in this.list) {
|
var checked = this.list[i].checked
|
if (!checked) {
|
this.list[i].checked = true;
|
this.listChecked.push(this.list[i]);
|
this.setAddCheckLayer(this.list[i]);
|
}
|
}
|
},
|
setListRemoveCheckAll() {
|
for (var i in this.list) {
|
if (this.list[i].checked) {
|
this.list[i].checked = false;
|
this.setRemoveCheckLayer(this.list[i]);
|
}
|
|
|
|
}
|
this.listChecked = [];
|
},
|
async details(e) {
|
|
const data = await selectByPageAndCount({
|
ns: 'lf',
|
pageIndex: 1,
|
pageSize: 100000,
|
tab: 'sys_meta'
|
})
|
if (data.code != 200) return
|
var std = [];
|
var result = data.result;
|
for (var i in result) {
|
for (var key in e) {
|
if (result[i].field == key) {
|
result[i].value = e[key]
|
}
|
if (result[i].field == 'gid' && key == 'id') {
|
result[i].value = e[key]
|
}
|
|
}
|
}
|
|
|
this.detailsBox = true;
|
this.tableList = result;
|
},
|
setQueryRestRetrieval() {
|
this.listDialog = false;
|
this.setFromStart();
|
this.setDrawMenu(5);
|
this.listChecked = [];
|
Viewer.entities.removeAll()
|
},
|
async setQueryRetrieval() {
|
if (this.geoWkt) {
|
this.form.wkt = encr(this.geoWkt)
|
} else {
|
this.form.wkt = null;
|
}
|
if (this.acqTime) {
|
this.form.endDate = this.setFromDate(this.acqTime[0])
|
this.form.startDate = this.setFromDate(this.acqTime[1])
|
} else {
|
this.form.endDate = null
|
this.form.startDate = null
|
}
|
const data = await select_meta_ByPageAndCount(this.form);
|
if (data.code != 200) return
|
this.form.count = data.count;
|
var result = data.result;
|
|
for (var i in result) {
|
if (result[i].createTime) {
|
result[i].createTime = this.setFromDate(result[i].createTime)
|
}
|
if (result[i].updateTime) {
|
result[i].updateTime = this.setFromDate(result[i].updateTime)
|
}
|
if (result[i].acqTime) {
|
result[i].acqTime = this.setFromDate(result[i].acqTime)
|
}
|
|
}
|
|
if (result) {
|
this.list = result;
|
} else {
|
this.list = [];
|
}
|
this.listDialog = true;
|
},
|
setFromDate(res) {
|
var time = new Date(res);
|
var y = time.getFullYear();
|
var m = time.getMonth() + 1;
|
var d = time.getDate();
|
var h = time.getHours();
|
var mm = time.getMinutes();
|
var s = time.getSeconds();
|
return (
|
y +
|
'-' +
|
this.add0(m) +
|
'-' +
|
this.add0(d) +
|
' ' +
|
this.add0(h) +
|
':' +
|
this.add0(mm) +
|
':' +
|
this.add0(s)
|
);
|
},
|
//格式化时间
|
add0(m) {
|
|
return m < 10 ? "0" + m : m;
|
},
|
//大小值改变
|
handleSizeChange(val) {
|
this.form.pageIndex = 1;
|
this.form.pageSize = val;
|
this.setQueryRetrieval();
|
|
},
|
handleCurrentChange(val) {
|
this.form.pageIndex = val;
|
this.setQueryRetrieval();
|
|
console.log(`当前页: ${val}`);
|
},
|
checkedList(val) {
|
val.checked = !val.checked;
|
if (val.checked) {
|
this.listChecked.push(val);
|
this.setAddCheckLayer(val);
|
}
|
|
if (this.listChecked.length > 0) {
|
if (!val.checked) {
|
this.listChecked.forEach((e, i) => {
|
if (e.id == val.id) {
|
this.listChecked.splice(i, 1);
|
this.setRemoveCheckLayer(val);
|
}
|
});
|
}
|
}
|
},
|
setAddCheckLayer(res) {
|
if (!res.geom) return
|
var wkt = this.$wkt.parse(res.geom).coordinates[0]
|
var geom = [];
|
for (var i in wkt) {
|
geom.push(Cesium.Cartesian3.fromDegrees(wkt[i][0], wkt[i][1]))
|
}
|
Viewer.entities.add({
|
name: res.name + "&&" + res.id,
|
polygon: {
|
hierarchy: geom,
|
material: Cesium.Color.WHITE.withAlpha(0.1),
|
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
outline: true,
|
outlineColor: Cesium.Color.fromCssColorString("rgba(130,167,33, 1)"),
|
outlineWidth: 10,
|
classificationType: Cesium.ClassificationType.BOTH,//贴地形和3dtile
|
clampToGround: true,//开启贴地
|
height: 0,
|
},
|
|
});
|
},
|
setRemoveCheckLayer(res) {
|
var name = res.name + "&&" + res.id;
|
var entity = Viewer.entities._entities._array
|
for (var i = 0; i < entity.length; i++) {
|
if (entity[i].name == name) {
|
Viewer.entities.remove(entity[i])
|
i--;
|
}
|
}
|
|
|
},
|
setDrawMenu(res) {
|
this.bufferNumber = 100;
|
switch (res) {
|
case 1:
|
this.drawType = 'point';
|
this.dialogVisible = true;
|
break;
|
case 2:
|
this.drawType = 'polyline';
|
this.dialogVisible = true;
|
break;
|
case 3:
|
this.drawType = 'rectangle';
|
this.setDrawEntity();
|
break;
|
case 4:
|
this.drawType = 'polygon';
|
this.setDrawEntity();
|
break
|
case 5:
|
this.setClearWktGeom();
|
break
|
}
|
},
|
handleClose() {
|
this.$confirm('确认关闭？')
|
.then(_ => {
|
this.dialogVisible = false;
|
})
|
.catch(_ => { });
|
},
|
setCloseDialog() {
|
this.dialogVisible = false;
|
this.setDrawEntity();
|
},
|
setDrawEntity() {
|
var config = {}
|
if (this.drawType != 'point') {
|
config = { showSize: false }
|
}
|
if (this.wktEntity) {
|
this.setClearWktGeom();
|
}
|
var that = this;
|
sgworld.Creator.createSimpleGraphic(this.drawType, config, (entity) => {
|
|
that.querySatialQuery(entity);
|
});
|
},
|
querySatialQuery(res) {
|
var res_val;
|
switch (this.drawType) {
|
case 'point':
|
res_val = res.position.getValue();
|
break;
|
case 'polyline':
|
res_val = res.polyline.positions.getValue();
|
break;
|
case 'rectangle':
|
res_val = res.rectangle.coordinates.getValue();
|
break;
|
case 'polygon':
|
res_val = res.polygon.hierarchy.getValue().positions;
|
break;
|
}
|
sgworld.Creator.SimpleGraphic.clear()
|
this.geoWkt = this.getEntityGeometry(res_val, this.drawType)
|
if (this.geoWkt) {
|
this.$nextTick(() => {
|
this.setAddWktEntity(this.geoWkt)
|
})
|
}
|
|
},
|
setAddWktEntity(res) {
|
var wkt = this.$wkt.parse(res).coordinates[0];
|
var geom = [];
|
for (var i in wkt) {
|
geom.push(Cesium.Cartesian3.fromDegrees(wkt[i][0], wkt[i][1], wkt[i][2] ?? 0))
|
}
|
this.wktEntity = Viewer.entities.add({
|
name: '资源查询',
|
polygon: {
|
hierarchy: geom,
|
material: Cesium.Color.WHITE.withAlpha(0.2),
|
//heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
outline: true,
|
outlineColor: Cesium.Color.RED,
|
outlineWidth: 10,
|
classificationType: Cesium.ClassificationType.BOTH,//贴地形和3dtile
|
clampToGround: true,//开启贴地
|
height: 0,
|
},
|
|
});
|
},
|
setClearWktGeom() {
|
if (this.wktEntity) {
|
Viewer.entities.remove(this.wktEntity)
|
this.wktEntity = null;
|
this.geoWkt = null;
|
}
|
|
},
|
getEntityGeometry(res, type) {
|
var res_val;
|
var std = [];
|
if (type == 'point') {
|
var geom = this.setCartesianToEightFour(res);
|
var point = turf.point([geom.lng, geom.lat]);
|
res_val = this.setTurfBuffer(point, this.bufferNumber, 'circle')
|
} else if (type == 'polyline') {
|
for (var i in res) {
|
var geom = this.setCartesianToEightFour(res[i]);
|
std.push([geom.lng, geom.lat])
|
}
|
|
var line = turf.lineString(std, { name: "polyline" })
|
res_val = this.setTurfBuffer(line, this.bufferNumber, 'buffer')
|
} else if (type == 'rectangle') {
|
var geom = new Cesium.Rectangle.subsample(
|
res,
|
Cesium.Ellipsoid.WGS84,
|
res.height
|
)
|
for (var i in geom) {
|
var rectangle = this.setCartesianToEightFour(geom[i]);
|
std.push([rectangle.lng, rectangle.lat])
|
}
|
std.push(std[0])
|
res_val = turf.polygon([std], { name: "polygon" })
|
} else if (type == 'polygon') {
|
for (var i in res) {
|
var polygon = this.setCartesianToEightFour(res[i]);
|
std.push([polygon.lng, polygon.lat])
|
}
|
std.push(std[0])
|
res_val = turf.polygon([std], { name: "polygon" })
|
}
|
return this.setJonToWKT(res_val)
|
},
|
setJonToWKT(res) {
|
let fixedVal = this.fixToPositon(res)
|
var jsonToWkt = this.$wkt.convert(fixedVal.geometry)
|
return jsonToWkt;
|
},
|
setTurfBuffer(geom, distance, type) {
|
|
return turf.buffer(geom, distance, { units: 'miles' });
|
},
|
fixToPositon(restVal, digits = 6) {
|
restVal.geometry.coordinates.forEach(coord => {
|
if (Array.isArray(coord)) {
|
coord.forEach(item => {
|
if (item.length >= 2) {
|
item[0] = Number(item[0].toFixed(digits))
|
item[1] = Number(item[1].toFixed(digits))
|
}
|
})
|
}
|
})
|
return restVal
|
},
|
setCartesianToEightFour(res) {
|
var std = {}
|
let ellipsoid = Viewer.scene.globe.ellipsoid
|
let cartographic = ellipsoid.cartesianToCartographic(res)
|
std.lat = Cesium.Math.toDegrees(cartographic.latitude)
|
std.lng = Cesium.Math.toDegrees(cartographic.longitude)
|
std.alt = cartographic.height
|
return std
|
},
|
getSensorMeta() {
|
this.metaOption = meta_type;
|
this.sensorOption = sensor_type;
|
},
|
setFromStart() {
|
this.form = {
|
name: "",
|
sensorType: 0,
|
mataType: 0,
|
wkt: null,
|
pageIndex: 1,
|
pageSize: 100,
|
count: 0,
|
startDate: null,
|
endDate: null
|
}
|
this.acqTime = ''
|
}
|
},
|
created() { },
|
mounted() {
|
this.getSensorMeta();
|
this.setFromStart();
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.resourceQuery {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.left_menu {
|
top: 10px;
|
left: 10px;
|
position: absolute;
|
width: 20px;
|
height: 20px;
|
background: url("../../assets/img/展开菜单.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.left_box {
|
min-width: 427px;
|
height: auto;
|
left: 10px;
|
top: 10px;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
padding: 10px;
|
position: absolute;
|
z-index: 12;
|
.top_box {
|
padding: 10px;
|
background: #1e2a3d;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.btn_close {
|
top: 20px;
|
right: 20px;
|
position: absolute;
|
width: 20px;
|
height: 20px;
|
background: url("../../assets/img/收起菜单.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.btn_box {
|
.btn {
|
margin-bottom: 37px;
|
}
|
.btnbox {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
}
|
.btnbox:hover {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
.input_box {
|
width: 282px;
|
.KJCX_btn_list {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.KJCX_title {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff;
|
padding-bottom: 6px;
|
}
|
.KJCX_btn {
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff;
|
}
|
.btn_bg {
|
width: 26px;
|
height: 26px;
|
cursor: pointer;
|
margin-left: 7px;
|
}
|
.d {
|
background: url("../../assets/img/d.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.x {
|
background: url("../../assets/img/x.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.jx {
|
background: url("../../assets/img/jx.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.db {
|
background: url("../../assets/img/db.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.qc {
|
background: url("../../assets/img/清除.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
/deep/ .el-input.is-disabled .el-input__wrapper,
|
/deep/ .el-input__wrapper {
|
background: rgba(13, 19, 29, 0.4);
|
border: 1px solid rgba(214, 228, 255, 0.4);
|
}
|
/deep/ .el-input__wrapper.is-focus {
|
/* border: 1px solid #D6E4FF;
|
box-shadow:none; */
|
box-shadow: 0 0 0 1px #d6e4ff;
|
}
|
/deep/ .el-input__inner {
|
color: #d6e4ff;
|
}
|
/deep/ .el-form-item__label {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff !important;
|
padding-bottom: 6px;
|
line-height: 1;
|
}
|
/deep/ .el-date-editor .el-range-input {
|
background: rgba(13, 19, 29, 0.4);
|
}
|
}
|
}
|
.pagination {
|
padding: 10px;
|
background: #1e2a3d;
|
margin: 5px 0;
|
}
|
.list_box {
|
overflow: auto;
|
height: 350px;
|
//height: 42%;
|
|
.list {
|
padding: 10px;
|
background: #0d131d;
|
margin: 2px 0;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
cursor: pointer;
|
.attribute_box {
|
.attribute {
|
font-size: 12px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #d6e4ff;
|
margin-bottom: 10px;
|
}
|
}
|
.all_btn {
|
color: rgba(214, 228, 255, 1);
|
font-size: 18px;
|
cursor: pointer;
|
}
|
}
|
.list_active {
|
background: rgba(104, 156, 255, 0.5);
|
}
|
}
|
.list_box::-webkit-scrollbar {
|
width: 2px;
|
}
|
.list_box::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(115, 161, 250, 0.5);
|
}
|
.list_box::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(105, 105, 105, 0.5);
|
}
|
.bottom_box {
|
width: 100%;
|
box-sizing: border-box;
|
margin-top: 4px;
|
background: #1e2a3d;
|
padding: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.msg_box {
|
font-size: 12px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #d6e4ff;
|
white-space: nowrap;
|
}
|
.bottom_btn {
|
display: flex;
|
|
.btnbox {
|
width: 47px;
|
height: 25px;
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
font-size: 12px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.btnbox:hover {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
}
|
}
|
.details_box {
|
width: 533px;
|
// height: 430px;
|
overflow: auto;
|
background: rgba(7, 8, 14, 0.8);
|
padding: 10px;
|
position: absolute;
|
top: 355px;
|
left: 489px;
|
.details_t {
|
height: 12px;
|
display: flex;
|
justify-content: flex-end;
|
font-size: 12px;
|
color: rgba(142, 151, 168, 1);
|
i {
|
cursor: pointer;
|
}
|
}
|
.details_table {
|
margin-top: 10px;
|
// height: 400px;
|
border: 1px solid rgba(214, 228, 255, 0.4);
|
border-radius: 4px;
|
.table_tr,
|
.table_header {
|
display: flex;
|
background: rgba(38, 47, 71, 0.68);
|
}
|
.table_tr {
|
background: #000;
|
}
|
.table_tr:nth-child(odd) {
|
background: rgba(38, 47, 71, 0.68);
|
}
|
.table_td {
|
font-size: 14px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #d6e4ff;
|
padding-left: 22px;
|
padding-top: 6px;
|
padding-bottom: 6px;
|
}
|
.table_td:nth-child(1) {
|
overflow: hidden;
|
width: 184px;
|
border-right: 1px solid rgba(214, 228, 255, 0.4);
|
}
|
.table_td:nth-child(2) {
|
overflow: hidden;
|
width: 337px;
|
}
|
}
|
}
|
}
|
.dialogContent /deep/.el-icon-plus {
|
color: #606266 !important;
|
}
|
.bottom_btn_TWO {
|
position: absolute;
|
z-index: 39;
|
/* prettier-ignore */
|
bottom: 68PX;
|
/* prettier-ignore */
|
right: 70PX;
|
|
.ChangeMap {
|
/* prettier-ignore */
|
width: 30PX;
|
/* prettier-ignore */
|
height: 30PX;
|
/* prettier-ignore */
|
border: 1PX solid rgba(255, 255, 255, 0.1);
|
}
|
.twoImg {
|
background: url("../../assets/img/2D.png") no-repeat;
|
}
|
.threeImg {
|
background: url("../../assets/img/3D.png") no-repeat;
|
}
|
}
|
</style>
|
