<template>
|
<div class="plottingInquire" v-if="isShow" v-drag="true">
|
<div class="InquireHeader">
|
<div>标绘查询</div>
|
|
<div>
|
<el-icon @click="setMenuClose" :size="20" style="cursor: pointer">
|
<Close />
|
</el-icon>
|
</div>
|
</div>
|
<div class="inquireContent">
|
<div class="inquireContent_title">
|
<div>用户新建要素</div>
|
</div>
|
<div class="inquireContent_name">
|
<div class="plotting_list_tr_name">
|
<img :src="require(`../../assets/img/${inquireData.icon}`)" class="ico" alt />
|
<span>
|
{{ inquireData.name
|
}}
|
</span>
|
</div>
|
<div class="plotting_list_tr_wkt" v-show="geoWktFlag">{{ geoWkt }}</div>
|
<div class="plotting_list_tr_btn">
|
<div class="tr_btn dw" @click="setLayerLocation()"></div>
|
<div class="tr_btn sc" @click="setLayerRemove()"></div>
|
</div>
|
</div>
|
<div class="tab_box">
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
<!-- <el-tab-pane label="图层属性" name="first">User</el-tab-pane> -->
|
<el-tab-pane label="查询结果" name="second">
|
<div class="inquireContent_input" v-show="pixelIsShow">
|
<!-- <div class="inquireContent_input_left">
|
<div class="label">范围框</div>
|
<el-input
|
v-model="ScopeBox.Scop"
|
size="small"
|
placeholder="范围框"
|
>
|
<template #append>km</template>
|
</el-input>
|
</div>-->
|
<div class="inquireContent_input_right" v-show="!chartIsshow">
|
<div class="label">范围框内最大像素值</div>
|
<el-select
|
v-model="ScopeBox.pixel"
|
class="m-2"
|
placeholder="像素值"
|
size="small"
|
@change="pixelChange"
|
>
|
<el-option
|
v-for="item in pixeloptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
<div class="inquireContent_input_right" v-show="chartIsshow">
|
<div class="label">节点数</div>
|
<el-select
|
v-model="ScopeBox.nodes"
|
class="m-2"
|
placeholder="像素值"
|
size="small"
|
@change="nodesChange"
|
>
|
<el-option
|
v-for="item in nodesoptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="chart" v-if="chartIsshow">
|
<div class="chart_box">
|
<div class="chart_btn">
|
<el-button :icon="Search" link class="linkBtn" @click="openDialog(e)"></el-button>
|
|
<el-button
|
:icon="Download"
|
link
|
class="linkBtn"
|
@click="downloadChart(layerData)"
|
></el-button>
|
<!-- 暂时不用删除 -->
|
<!-- <el-button
|
:icon="Delete"
|
link
|
class="del linkBtn"
|
@click="deleteChart(e)"
|
></el-button>-->
|
</div>
|
<Bar-graph :width="'100%'" :height="'260px'" :layerData="layerData"></Bar-graph>
|
<div class="select">
|
<el-select
|
v-model="layerValue"
|
class="m-2"
|
placeholder="选择图层"
|
size="small"
|
@change="layerChange"
|
>
|
<el-option
|
v-for="(item, i) in layeroptions"
|
:key="i"
|
:label="item.layerName"
|
:value="item.layerName"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="select_box">
|
<!-- 暂时不用 -->
|
<!-- <div class="add_btn btnstyle">
|
<el-button size="small" @click="addCharts"
|
>添加图表</el-button
|
>
|
</div>-->
|
</div>
|
</div>
|
|
<!-- <div
|
class="inquireContent_msg"
|
v-if="!chartIsshow"
|
v-show="pixelIsShow"
|
>
|
<div class="inquireContent_msg_k">
|
<span>提取的边界框</span>
|
<span>{{ ScopeBox.pixel }}×{{ ScopeBox.pixel }}</span>
|
</div>
|
<div class="inquireContent_msg_k">
|
<span>使用</span>
|
<span
|
>{{ ScopeBox.Scop * 1000 }}.00,{{ ScopeBox.Scop * 1000 }}.00
|
m/px</span
|
>
|
</div>
|
</div>-->
|
<div class="inquireContent_table" v-if="!chartIsshow">
|
<div class="table">
|
<div class="table_head">
|
<div class="table_head_td">序号</div>
|
<div class="table_head_td">
|
<span>图层名</span>
|
<span>最大值</span>
|
<span>最小值</span>
|
<span>分析结果</span>
|
</div>
|
</div>
|
<div class="table_content">
|
<div class="table_tr" v-for="(e, i) in resultList" :key="i">
|
<div class="table_td">{{ i + 1 }}</div>
|
<div class="table_td">
|
|
<span>{{ e.layerName }}</span>
|
<span>{{ e.max }}</span>
|
<span>{{ e.min }}</span>
|
<span>{{ e.avg }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="download" v-if="!chartIsshow">
|
<el-button link @click="download">下载分析结果</el-button>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
<div class="dialog" v-if="dialogShow" @click.self="dialogShow = false">
|
<div class="chart">
|
<i @click.capture="closeDialog">
|
<el-icon>
|
<Close />
|
</el-icon>
|
</i>
|
<BarGraphAxisLine :width="'856px'" :height="'636px'" :layerData="layerData"></BarGraphAxisLine>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import menuTool from "@/assets/js/Map/menuTool";
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
watch,
|
} from "vue";
|
import { useStore } from "vuex"; // 引入useStore 方法
|
//echarts
|
import BarGraph from "@/components/BarGraph.vue";
|
import BarGraphAxisLine from "@/components/BarGraphAxisLine.vue";
|
import {
|
saveFSDZJsonToExcel,
|
saveFSDZJsonToExcelLine,
|
} from "@/utils/downloadCSV.js";
|
import {
|
selectByPoint,
|
selectByPolygon,
|
selectByPolyline,
|
rasterAnalysis_selectByWktForPost,
|
} from "@/api/api";
|
import { ElMessage } from "element-plus";
|
import { Search, Delete, Download, Close } from "@element-plus/icons-vue";
|
import WKT from "terraformer-wkt-parser";
|
import * as turf from "@turf/turf";
|
import { getToken } from "../../utils/auth";
|
const store = useStore(); // 该方法用于返回store 实例
|
const emits = defineEmits(["setCloseplotting"]);
|
let isShow = ref(false);
|
let pixelIsShow = ref(true);
|
let inquireData = ref({
|
name: "path #9",
|
icon: "d.png",
|
});
|
const activeName = ref("second");
|
const ScopeBox = ref({
|
Scop: "",
|
pixel: "1",
|
nodes: "16",
|
});
|
let layerValue = ref("");
|
const layeroptions = ref([]);
|
const pixeloptions = [
|
{
|
value: "1",
|
label: "1×1",
|
},
|
{
|
value: "2",
|
label: "2×2",
|
},
|
{
|
value: "4",
|
label: "4×4",
|
},
|
{
|
value: "8",
|
label: "8×8",
|
},
|
{
|
value: "16",
|
label: "16×16",
|
},
|
{
|
value: "32",
|
label: "32×32",
|
},
|
{
|
value: "64",
|
label: "64×64",
|
},
|
{
|
value: "128",
|
label: "128×128",
|
},
|
{
|
value: "256",
|
label: "256×256",
|
},
|
];
|
const nodesoptions = [
|
{
|
value: "16",
|
label: "16",
|
},
|
{
|
value: "32",
|
label: "32",
|
},
|
{
|
value: "64",
|
label: "64",
|
},
|
{
|
value: "96",
|
label: "96",
|
},
|
{
|
value: "128",
|
label: "128",
|
},
|
{
|
value: "192",
|
label: "192",
|
},
|
{
|
value: "256",
|
label: "256",
|
},
|
{
|
value: "384",
|
label: "384",
|
},
|
{
|
value: "512",
|
label: "512",
|
},
|
{
|
value: "768",
|
label: "768",
|
},
|
{
|
value: "1024",
|
label: "1024",
|
},
|
];
|
let resultList = ref([]);
|
let layerData = ref({});
|
let layerArr = ref([]);
|
let dialogShow = ref(false);
|
let layerNameNum = 0;
|
let geoWkt = ref(null);
|
let geoWktFlag = ref(false);
|
let wktType = ref(null);
|
//新增图表
|
const addCharts = () => {
|
layerArr.value.push({ layerName: `null${layerNameNum}`, points: [] });
|
layerNameNum++;
|
};
|
//删除图表
|
const deleteChart = (val) => {
|
layerArr.value.forEach((e, i) => {
|
if (e.layerName == val.layerName) {
|
layerArr.value.splice(i, 1);
|
}
|
});
|
};
|
//关闭
|
const closeDialog = () => {
|
dialogShow.value = false;
|
// alert(1);
|
};
|
//打开
|
const openDialog = (res) => {
|
// layerData.value = res;
|
dialogShow.value = true;
|
};
|
//像素选择
|
const pixelChange = (val) => {
|
// if (store.state.plottingInquireData.entitiesData.icon == "d.png") {
|
|
// }
|
// selectPoint({
|
// pixel: val,
|
// wkt: store.state.plottingInquireData.entitiesData.wkt,
|
// });
|
setOptionStart();
|
setWebScoKet("Point", store.state.plottingInquireData.entitiesData.wkt, val);
|
};
|
//节点选择
|
const nodesChange = (val) => {
|
setOptionStart();
|
setWebScoKet(
|
"PolyLine",
|
store.state.plottingInquireData.entitiesData.wkt,
|
val
|
);
|
// selectPolyline({
|
// nodes: val,
|
// wkt: store.state.plottingInquireData.entitiesData.wkt,
|
// });
|
};
|
|
//图层选择
|
const layerChange = (val, name) => {
|
layeroptions.value.forEach((e) => {
|
if (e.layerName == val) {
|
layerData.value = e;
|
}
|
});
|
|
// layerArr.value.forEach((e) => {
|
// if (e.layerName == name) {
|
// e = layerData.value;
|
// }
|
// console.log(222222222222222, layerArr.value);
|
// });
|
|
// layerArr.value.push(layerData.value);
|
};
|
//节点选择
|
//下载csv
|
const download = () => {
|
saveFSDZJsonToExcel(resultList.value, "123", "");
|
};
|
const downloadChart = (val) => {
|
let arr = [];
|
val.points.forEach((e) => {
|
arr.push({
|
layerName: val.layerName,
|
values: e.vals.toString(),
|
lon: e.x,
|
lat: e.y,
|
});
|
});
|
saveFSDZJsonToExcelLine(arr);
|
};
|
//点查询接口
|
const selectPoint = async (res) => {
|
resultList.value = [];
|
const dt = await selectByPoint(res);
|
|
if (dt.code !== 200) {
|
return ElMessage.error("查询错误");
|
}
|
|
debugger
|
dt.result.forEach((e) => {
|
if (e.code != 200) {
|
e.avg = "-";
|
e.max = "-";
|
e.min = "-";
|
}
|
e.avg = e.avgList.toString();
|
e.max = e.maxList.toString();
|
e.min = e.minList.toString();
|
e.lng = store.state.plottingInquireData.entitiesData.lng;
|
e.lat = store.state.plottingInquireData.entitiesData.lat;
|
|
resultList.value.push(e);
|
});
|
|
console.log(resultList.value);
|
};
|
//面查询接口
|
const selectPolygon = async (res) => {
|
resultList.value = [];
|
const dt = await selectByPolygon(res);
|
|
dt.result.forEach((e) => {
|
if (e.code != 200) {
|
e.avg = "-";
|
e.max = "-";
|
e.min = "-";
|
}
|
e.avg = e.avgList.toString();
|
e.max = e.maxList.toString();
|
e.min = e.minList.toString();
|
e.lng = store.state.plottingInquireData.entitiesData.lng;
|
e.lat = store.state.plottingInquireData.entitiesData.lat;
|
resultList.value.push(e);
|
});
|
};
|
//保留三位小数
|
const keepThreeNum = (value) => {
|
let resValue = 0;
|
//小数点的位置
|
let index = value && value.toString().indexOf(".") + 1;
|
//小数的位数
|
let num = value && Math.abs(Number(value)).toString().length - index;
|
if (index && num > 3) {
|
resValue = value && Number(value).toFixed(3);
|
} else {
|
resValue = value;
|
}
|
return resValue;
|
};
|
|
//线查询接口
|
const selectPolyline = async (res) => {
|
layerArr.value = [];
|
const dt = await selectByPolyline(res);
|
|
dt.result.forEach((e) => {
|
e.points.forEach((element) => {
|
element.vals.forEach((v) => {
|
v = keepThreeNum(v);
|
});
|
});
|
});
|
console.log(dt.result);
|
layeroptions.value = dt.result;
|
|
layerValue.value = layeroptions.value[0].layerName;
|
layerArr.value.push(dt.result[0]);
|
|
layerData.value = dt.result[0];
|
|
// dt.result.forEach((e) => {
|
// if (e.code != 200) {
|
// e.avg = "-";
|
// e.max = "-";
|
// e.min = "-";
|
// }
|
|
// // e.lng = store.state.plottingInquireData.entitiesData.lng;
|
// // e.lat = store.state.plottingInquireData.entitiesData.lat;
|
// // resultList.value.push(e);
|
// });
|
};
|
const setLayerLocation = () => {
|
var entities = Viewer.entities._entities._array;
|
for (var i in entities) {
|
if (entities[i].name == inquireData.value.name) {
|
Viewer.zoomTo(entities[i]);
|
break;
|
}
|
}
|
};
|
const setLayerRemove = () => {
|
var entities = Viewer.entities._entities._array;
|
for (var i in entities) {
|
if (entities[i].name == inquireData.value.name) {
|
Viewer.entities.remove(entities[i]);
|
// inquireData.value = {};
|
let obj = {
|
isshow: false,
|
entitiesData: { name: inquireData.value.name },
|
getData: {},
|
};
|
// store.commit("SET_plotting", obj);
|
store.state.plottingInquireData = obj;
|
|
setCloseWebSocket();
|
inquireData.value = {
|
name: "path #9",
|
icon: "q.png",
|
};
|
isShow.value = false;
|
break;
|
}
|
}
|
};
|
const handleClick = (tab: TabsPaneContext, event: Event) => {};
|
// const setCloseplotting = () => {
|
// emits("setCloseplotting", false);
|
// };
|
let chartIsshow = ref(false);
|
const setMenuClose = () => {
|
isShow.value = false;
|
setCloseWebSocket();
|
store.state.plottingInquireData = null;
|
inquireData.value = {
|
name: "path #9",
|
icon: "q.png",
|
};
|
};
|
const setCloseWebSocket = () => {
|
if (Window.ws) {
|
Window.ws.close();
|
Window.ws.onclose = () => {
|
console.log("服务器关闭");
|
};
|
Window.ws = null;
|
}
|
};
|
const setWebScoKet = async (type, wkt, node) => {
|
const data = await rasterAnalysis_selectByWktForPost({
|
wkt: wkt,
|
size: node,
|
});
|
|
if (data) {
|
return;
|
}
|
};
|
const setOptionStart = () => {
|
|
resultList.value = [];
|
layerArr.value = [];
|
layeroptions.value = [];
|
layerValue.value = '';
|
};
|
const setWebSocketStart = () => {
|
// if (Window.ws) {
|
// setCloseWebSocket();
|
// }
|
setOptionStart();
|
var token = getToken();
|
var url = socketUrl + "?token=" + token;
|
Window.ws = new WebSocket(url);
|
Window.ws.option = () => {};
|
Window.ws.onmessage = (msg) => {
|
// console.log('来自服务器端的数据：' + msg.data); //监听接受来自服务端的信息
|
if (msg.data != "连接成功") {
|
var val = JSON.parse(msg.data);
|
|
if (val.analysisForPost && val.analysisForPost.token == token) {
|
var data = val.analysisForPost;
|
console.log(data)
|
switch (wktType.value) {
|
case "Point":
|
setWebSocketPoint(data);
|
break;
|
case "Polygon":
|
setWebSocketPoint(data);
|
break;
|
case "LineString":
|
setWebSocketPLine(data);
|
break;
|
}
|
}
|
}
|
};
|
};
|
const setWebSocketPoint = (res) => {
|
var obj = {
|
avg: res.avgList.length <= 0 ? "--" : res.avgList.toString(),
|
layerName: res.layerName,
|
max: res.maxList.length <= 0 ? "--" : res.maxList.toString(),
|
min: res.minList.length <= 0 ? "--" : res.minList.toString(),
|
lng: store.state.plottingInquireData.entitiesData.lng,
|
lat: store.state.plottingInquireData.entitiesData.lat,
|
};
|
resultList.value.push(obj);
|
};
|
const setWebSocketPLine = (res) => {
|
res.points.forEach((element) => {
|
element.vals.forEach((v) => {
|
v = keepThreeNum(v);
|
});
|
});
|
layeroptions.value.push(res);
|
var data = layeroptions.value[0];
|
layerValue.value = data.layerName;
|
layerArr.value.push(data);
|
layerData.value = data;
|
};
|
watch(
|
() => store.state.plottingInquireData,
|
(nVal, oVal) => {
|
setOptionStart();
|
setCloseWebSocket();
|
if (!nVal) return;
|
if (nVal.entitiesData.name != inquireData.value.name) {
|
isShow.value = nVal.isshow;
|
inquireData.value = nVal.entitiesData;
|
geoWktFlag.value = false;
|
if (inquireData.value.wkt) {
|
var wkt = WKT.parse(inquireData.value.wkt);
|
wktType.value = wkt.type;
|
if (wkt.type == "Point") {
|
geoWkt.value =
|
wkt.coordinates[0].toFixed(6) + " " + wkt.coordinates[1].toFixed(6);
|
geoWktFlag.value = true;
|
}
|
if (wkt.type == "Polygon") {
|
var Polygon = turf.multiPolygon([wkt.coordinates]);
|
var center = turf.center(Polygon);
|
geoWkt.value =
|
center.geometry.coordinates[0].toFixed(6) +
|
" " +
|
center.geometry.coordinates[1].toFixed(6);
|
geoWktFlag.value = true;
|
}
|
}
|
setWebSocketStart();
|
|
if (nVal.entitiesData.icon == "x.png") {
|
pixelIsShow.value = true;
|
chartIsshow.value = true;
|
setWebScoKet("pline", nVal.entitiesData.wkt, ScopeBox.value.nodes);
|
// selectPolyline({
|
// nodes: ScopeBox.value.nodes,
|
// wkt: nVal.entitiesData.wkt,
|
// });
|
}
|
if (nVal.entitiesData.icon == "m.png") {
|
chartIsshow.value = false;
|
// if (nVal.entitiesData.name == oVal.entitiesData.name) {
|
// return;
|
// }
|
pixelIsShow.value = false;
|
// selectPolygon({ wkt: nVal.entitiesData.wkt });
|
setWebScoKet("polygon", nVal.entitiesData.wkt, 0);
|
}
|
if (nVal && nVal.entitiesData.icon == "d.png") {
|
chartIsshow.value = false;
|
pixelIsShow.value = true;
|
// selectPoint({
|
// pixel: ScopeBox.value.pixel,
|
// wkt: nVal.entitiesData.wkt,
|
// });
|
setWebScoKet("polygon", nVal.entitiesData.wkt, ScopeBox.value.pixel);
|
}
|
}
|
},
|
{ deep: true }
|
);
|
</script>
|
|
<style lang="less" scoped>
|
.plottingInquire {
|
position: absolute;
|
right: 26px;
|
top: 80px;
|
width: 400px;
|
background: rgba(7, 8, 14, 0.8);
|
z-index: 100;
|
|
.InquireHeader {
|
width: 100%;
|
height: 35px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
font-size: 16px;
|
font-weight: 400;
|
color: #d6e4ff;
|
padding: 10px;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.inquireContent {
|
.inquireContent_title {
|
font-size: 14px;
|
font-weight: 400;
|
color: #d6e4ff;
|
margin-bottom: 15px;
|
margin-top: 10px;
|
padding-left: 10px;
|
}
|
|
.inquireContent_name {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 10px;
|
padding-bottom: 16px;
|
|
.plotting_list_tr_name {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.ico {
|
width: 18px;
|
height: 18px;
|
}
|
|
span {
|
font-size: 16px;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 10px;
|
}
|
}
|
|
.plotting_list_tr_wkt {
|
font-size: 12px;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 10px;
|
flex: 1;
|
}
|
|
.plotting_list_tr_btn {
|
display: flex;
|
align-items: center;
|
|
.tr_btn {
|
width: 16px;
|
height: 15px;
|
cursor: pointer;
|
}
|
|
.dw {
|
background: url("../../assets/img/dw.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-right: 18px;
|
}
|
|
.sc {
|
background: url("../../assets/img/sc.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
|
/deep/ .el-tabs__nav {
|
justify-content: center;
|
float: none;
|
}
|
|
/deep/ .el-tabs__item,
|
/deep/ .el-tabs__item.is-active {
|
color: #d6e4ff;
|
font-size: 16px;
|
}
|
|
.inquireContent_input {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-left: 10px;
|
margin-right: 10px;
|
padding-bottom: 14px;
|
border-bottom: 1px solid rgba(214, 228, 255, 0.4);
|
|
.inquireContent_input_left {
|
width: 45%;
|
}
|
|
.inquireContent_input_right {
|
width: 45%;
|
}
|
|
.label {
|
font-size: 14px;
|
font-weight: 400;
|
color: #d6e4ff;
|
padding-bottom: 10px;
|
}
|
}
|
|
.inquireContent_msg {
|
padding: 12px 18px;
|
|
.inquireContent_msg_k {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
span {
|
font-size: 12px;
|
font-weight: 400;
|
color: rgba(214, 228, 255, 0.8);
|
}
|
}
|
}
|
|
.inquireContent_table {
|
padding-right: 15px;
|
padding-left: 15px;
|
padding-bottom: 10px;
|
|
.table {
|
background: rgba(0, 0, 0, 0, 4);
|
border: 1px solid rgba(214, 228, 255, 0.4);
|
border-radius: 4px;
|
|
.table_head {
|
height: 27px;
|
background: #0e151f;
|
// box-shadow: 0px 0px 6px 0px #080c13,
|
// 0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
// border-radius: 4px 4px 0px 0px;
|
display: flex;
|
|
.table_head_td {
|
width: 50px;
|
font-size: 14px;
|
font-weight: 400;
|
color: #d6e4ff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-right: 1px solid rgba(214, 228, 255, 0.4);
|
box-sizing: border-box;
|
}
|
|
.table_head_td:nth-child(2) {
|
width:16.34375vw;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 10px;
|
border-right: 0;
|
}
|
}
|
|
.table_content {
|
height: 440px;
|
overflow: auto;
|
|
.table_tr {
|
// height: 27px;
|
display: flex;
|
background: #000000;
|
|
// padding: 5px 0;
|
.table_td {
|
width: 50px;
|
|
font-size: 12px;
|
font-weight: 400;
|
color: #d6e4ff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-right: 1px solid rgba(214, 228, 255, 0.4);
|
box-sizing: border-box;
|
div{
|
width: 100%;
|
background: skyblue;
|
height: 100%;
|
}
|
// padding: 5px;
|
// white-space: nowrap;
|
span {
|
|
display: block;
|
width: 17%;
|
word-wrap: break-word;
|
// white-space: pre;
|
text-align: left;
|
}
|
|
span:nth-child(2) {
|
// display: flex;
|
// justify-content: flex-end;
|
// margin-left: 5%;
|
// float: right;
|
// width:16.34375vw;
|
text-align: center;
|
// background: skyblue;
|
}
|
}
|
|
.table_td:nth-child(2) {
|
width: 16.34375vw;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 10px;
|
border-right: 0;
|
}
|
}
|
|
.table_tr:nth-child(2n) {
|
background: #0e151f;
|
}
|
}
|
|
.table_content::-webkit-scrollbar {
|
width: 8px;
|
}
|
|
.table_content::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
|
.table_content::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(0, 0, 0, 0);
|
}
|
}
|
}
|
|
.download {
|
padding-right: 15px;
|
padding-left: 15px;
|
padding-bottom: 14px;
|
display: flex;
|
justify-content: flex-end;
|
|
.el-button {
|
font-size: 12px;
|
color: #d6e4ff;
|
}
|
}
|
|
.chart {
|
width: 100%;
|
height: 540px;
|
overflow: auto;
|
}
|
|
.chart::-webkit-scrollbar {
|
width: 8px;
|
}
|
|
.chart::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
|
.chart::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(0, 0, 0, 0);
|
}
|
|
.chart_box {
|
width: 100%;
|
|
.chart_btn {
|
display: flex;
|
justify-content: flex-end;
|
margin: 0 10px;
|
padding-top: 5px;
|
padding-bottom: 5px;
|
|
// border-bottom: 1px solid rgba(214, 228, 255, 0.4);
|
.linkBtn {
|
color: #d6e4ff;
|
}
|
|
.del {
|
color: red;
|
}
|
}
|
}
|
|
.select_box {
|
padding-bottom: 20px;
|
|
.add_btn {
|
display: flex;
|
justify-content: center;
|
}
|
}
|
|
.select {
|
display: flex;
|
justify-content: center;
|
padding-bottom: 10px;
|
}
|
}
|
}
|
|
.dialog {
|
position: absolute;
|
top: 0;
|
height: 0;
|
width: 100vw;
|
height: 100vh;
|
background-color: rgba(255, 255, 255, 0.4);
|
z-index: 110;
|
|
.chart {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: rgb(33, 37, 44);
|
padding: 20px;
|
|
i {
|
position: absolute;
|
right: 2px;
|
top: 2px;
|
color: #fff;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.btnstyle {
|
.el-button {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
|
font-weight: 400;
|
color: #ffffff;
|
}
|
|
.el-button:hover {
|
border: 1px solid #689cff;
|
}
|
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
</style>
|
