From 36fbd1e5a40e319e6ac5f43d11c99ba4b66e93a3 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期三, 29 十一月 2023 16:50:16 +0800
Subject: [PATCH] 坡度分析下载修改
---
src/views/plotting/plottingInquire.vue | 780 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 703 insertions(+), 77 deletions(-)
diff --git a/src/views/plotting/plottingInquire.vue b/src/views/plotting/plottingInquire.vue
index 29c3f85..c34f64f 100644
--- a/src/views/plotting/plottingInquire.vue
+++ b/src/views/plotting/plottingInquire.vue
@@ -1,34 +1,38 @@
<template>
- <div class="plottingInquire" v-if="isShow">
- <div class="InquireHeader">鏍囩粯鏌ヨ</div>
+ <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 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>
+ <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-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="chart_box" v-if="chartIsshow">
- <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
- </div>
- <div class="inquireContent_input" v-if="!chartIsshow">
- <div class="inquireContent_input_left">
+ <div class="inquireContent_input" v-show="pixelIsShow">
+ <!-- <div class="inquireContent_input_left">
<div class="label">鑼冨洿妗�</div>
<el-input
v-model="ScopeBox.Scop"
@@ -37,28 +41,60 @@
>
<template #append>km</template>
</el-input>
- </div>
- <div class="inquireContent_input_right">
+ </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"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
+ <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="inquireContent_msg" v-if="!chartIsshow">
+ <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 }}</span>
+ <span>{{ ScopeBox.pixel }}脳{{ ScopeBox.pixel }}</span>
</div>
<div class="inquireContent_msg_k">
<span>浣跨敤</span>
@@ -67,37 +103,48 @@
m/px</span
>
</div>
- </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>
+ <span>鏈�灏忓��</span>
+ <span>鍒嗘瀽缁撴灉</span>
</div>
</div>
<div class="table_content">
- <div class="table_tr">
- <div class="table_td">1</div>
+ <div class="table_tr" v-for="(e, i) in resultList" :key="i">
+ <div class="table_td">{{ i + 1 }}</div>
<div class="table_td">
- <span> 骞冲潎鍦扮悆鑳借搴�120m [1]: </span>
- <span> 112.993 </span>
- </div>
- </div>
- <div class="table_tr">
- <div class="table_td">2</div>
- <div class="table_td">
- <span> 骞冲潎鍦扮悆鑳借搴�120m [1]: </span>
- <span> 112.993 </span>
+
+ <span>{{ e.layerName }} <label v-show="e.unit"> [{{ e.unit }}]</label></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>
@@ -116,9 +163,26 @@
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(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
+let pixelIsShow = ref(true);
let inquireData = ref({
name: "path #9",
icon: "d.png",
@@ -126,50 +190,278 @@
const activeName = ref("second");
const ScopeBox = ref({
Scop: "",
- pixel: "",
+ pixel: "1",
+ nodes: "16",
});
-const options = [
+let layerValue = ref("");
+const layeroptions = ref([]);
+const pixeloptions = [
{
- value: "1脳1",
+ value: "1",
label: "1脳1",
},
{
- value: "2脳2",
+ value: "2",
label: "2脳2",
},
{
- value: "4脳4",
+ value: "4",
label: "4脳4",
},
{
- value: "8脳8",
+ value: "8",
label: "8脳8",
},
{
- value: "16脳16",
+ value: "16",
label: "16脳16",
},
{
- value: "32脳32",
+ value: "32",
label: "32脳32",
},
{
- value: "64脳64",
+ value: "64",
label: "64脳64",
},
{
- value: "Option3",
- label: "Option3",
- },
- {
- value: "128脳128",
+ value: "128",
label: "128脳128",
},
{
- value: "256脳256",
+ 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("鏌ヨ閿欒");
+ }
+
+ 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) {
@@ -192,25 +484,170 @@
};
// 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) => {
- console.log(tab, event);
-};
+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,
+ unit: res.unit
+ };
+ 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) => {
- isShow.value = nVal.isshow;
- inquireData.value = nVal.entitiesData;
- if (nVal.entitiesData.icon == "x.png") {
- chartIsshow.value = true;
+ 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 }
@@ -222,9 +659,10 @@
position: absolute;
right: 26px;
top: 80px;
- width: 320px;
+ width: 400px;
background: rgba(7, 8, 14, 0.8);
z-index: 100;
+
.InquireHeader {
width: 100%;
height: 35px;
@@ -236,7 +674,10 @@
color: #d6e4ff;
padding: 10px;
box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
}
+
.inquireContent {
.inquireContent_title {
font-size: 14px;
@@ -246,20 +687,24 @@
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;
@@ -267,34 +712,49 @@
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;
@@ -303,12 +763,15 @@
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;
@@ -316,12 +779,15 @@
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;
@@ -329,14 +795,17 @@
}
}
}
+
.inquireContent_table {
padding-right: 15px;
padding-left: 15px;
- padding-bottom: 14px;
+ 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;
@@ -344,6 +813,7 @@
// 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;
@@ -353,9 +823,11 @@
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: 237px;
+ width: 16.34375vw;
display: flex;
justify-content: space-between;
align-items: center;
@@ -363,26 +835,59 @@
border-right: 0;
}
}
+
.table_content {
height: 440px;
overflow: auto;
+
.table_tr {
- height: 27px;
+ // height: 27px;
display: flex;
background: #000000;
+
+ // padding: 5px 0;
.table_td {
width: 50px;
- font-size: 14px;
+
+ 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);
- white-space: nowrap;
+ 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: 237px;
+ width: 16.34375vw;
display: flex;
justify-content: space-between;
align-items: center;
@@ -390,23 +895,144 @@
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>
--
Gitblit v1.9.3