From 051f46b4ee09ef92df932a5463f5f6bffa1e2274 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期三, 13 九月 2023 09:52:06 +0800
Subject: [PATCH] 点面标绘查询

---
 src/api/api.js                         |   18 +
 src/views/plotting/plottingInquire.vue |  168 ++++++++++++++++----
 src/utils/downloadCSV.js               |  223 +++++++++++++++++++++++++++
 package.json                           |    5 
 src/views/plotting/plotting.vue        |   52 ++++++
 5 files changed, 421 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index 7fdb052..95c95f2 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "default-passive-events": "^2.0.0",
     "echarts": "^5.4.3",
     "element-plus": "^2.3.0",
+    "file-saver": "^2.0.5",
     "jquery": "^3.7.1",
     "js-base64": "^3.7.5",
     "jsencrypt": "^3.3.2",
@@ -30,7 +31,9 @@
     "vue-drag-resize": "^1.5.4",
     "vue-router": "^4.0.3",
     "vuedraggable": "^4.1.0",
-    "vuex": "^4.0.0"
+    "vuex": "^4.0.0",
+    "xlsx": "^0.18.5",
+    "xlsx-js-style": "^1.2.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.4.0",
diff --git a/src/api/api.js b/src/api/api.js
index 8826121..4dce71d 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -79,14 +79,24 @@
   return request.get("/publish/selectSjColorTables", { params: params });
 }
 
-
 //鏁版嵁绠$悊=>鏇存柊鏁扮畝鏈嶅姟
 export function publish_updateSjService(params) {
   return request.post("/publish/updateSjService", params);
 }
 
-
 //鍦ㄧ嚎鍒跺浘=>鍒嗛〉鏌ヨ
 export function exportSelectByPage(params) {
-  return request.get('/export/selectByPage', { params: params });
-}
\ No newline at end of file
+  return request.get("/export/selectByPage", { params: params });
+}
+//鏍呮牸鍒嗘瀽=>鏌ヨ鐐瑰垎鏋�
+export function selectByPoint(params) {
+  return request.get("/rasterAnalysis/selectByPoint", { params: params });
+}
+//鏍呮牸鍒嗘瀽=>鏌ヨ闈㈠垎鏋�
+export function selectByPolygon(params) {
+  return request.get("/rasterAnalysis/selectByPolygon", { params: params });
+}
+//鏍呮牸鍒嗘瀽=>鏌ヨ绾垮垎鏋�
+export function selectByPolyline(params) {
+  return request.get("/rasterAnalysis/selectByPolyline", { params: params });
+}
diff --git a/src/utils/downloadCSV.js b/src/utils/downloadCSV.js
new file mode 100644
index 0000000..8e3624d
--- /dev/null
+++ b/src/utils/downloadCSV.js
@@ -0,0 +1,223 @@
+import XLSXS from "xlsx-js-style";
+export function saveFSDZJsonToExcel(data, name, merges) {
+  //   const data = [
+  //     { 濮撳悕: "寮犱笁", 骞撮緞: 18, 鎬у埆: "鐢�" },
+  //     { 濮撳悕: "鏉庡洓", 骞撮緞: 20, 鎬у埆: "濂�" },
+  //     { 濮撳悕: "鐜嬩簲", 骞撮緞: 22, 鎬у埆: "鐢�" },
+  //   ];
+  //   const wb = XLSX.utils.book_new();
+  //   const ws = XLSX.utils.json_to_sheet(data);
+  //   ws["!cols"] = [
+  //     {
+  //       wpx: 150,
+  //     },
+  //     {
+  //       wpx: 500,
+  //     },
+  //     {
+  //       wpx: 100,
+  //     },
+  //   ];
+  //   XLSXS.utils.book_append_sheet(wb, ws, "Sheet1");
+  //   XLSXS.writeFile(wb, "data-region.xlsx");
+  //============================================================================
+  console.log(data, name, merges);
+  // data鏄偣鍑诲鍑烘寜閽紶閫掕繃鏉ヨ瀵煎嚭鐨勬暟鎹紝name鏄鍑虹殑鏂囦欢鍚嶏紝merges鏄悎骞剁殑鍗曞厓鏍�
+  // 灏嗘暟鎹簮杞垚鎴戜滑闇�瑕佺殑浜岀淮鏁扮粍锛屽簭鍙枫�佸鍚嶈繖浜涙槸琛ㄦ牸鐨勮〃澶�
+  const body = data.map((x) => [
+    x["layerName"],
+    x["min"],
+    x["max"],
+    x["avg"],
+    x["lng"],
+    x["lat"],
+  ]);
+  const header = [
+    // 杩欎釜鏄缃甧xcel琛ㄦ牸鐨勬爣棰橈紝鍗冲湪A1鍗曞厓鏍肩殑鏍囬
+    [
+      {
+        v: ``,
+        t: "s", // 鎸囧畾鏍囬鐨勬牱寮�
+      },
+    ],
+    // 杩欐槸瀵瑰簲body甯搁噺鐨勮〃澶�
+    ["layerName", "min", "max", "avg", "lng", "lat"],
+  ];
+  body.unshift(...header); // 灏嗗畾涔夊ソ鐨勮〃澶存坊鍔犲埌 body 涓�
+  const sheet = XLSXS.utils.aoa_to_sheet(body); // aoa_to_sheet 灏嗕簩缁存暟缁勮浆鎴� sheet
+  // 姝ゅ寮�濮嬪悎骞跺垪锛屽嵆鐩稿悓鍚嶅瓧鐨勮〃鏍煎悎骞跺崟鍏冩牸
+  let includeB = [];
+  let includesBnumber = [];
+  for (let key in sheet) {
+    // console.log(sheet[key]);
+    // if (key.includes("B")) {
+    //   // 绗竴鍒楁槸A,浠h〃搴忓彿锛涚浜屽垪鏄疊锛屼唬琛ㄥ鍚�
+    //   includeB.push(sheet[key]);
+    // }
+    // includeB.push(sheet[key]);
+  }
+  //   includeB.forEach((e, i) => {
+  //     if (!(e.v.includes("濮撳悕") || e.v.includes("鍏辫"))) {
+  //       includesBnumber.push({
+  //         name: e.v,
+  //         number: i + 1, // 鍥犱负鏈夋爣棰橈紝鎵�浠ヨ浠庣2琛屽紑濮�
+  //       });
+  //     }
+  //   });
+  // 鍘婚噸
+  //   let cancelTwice = () => {
+  //     let map = new Map();
+  //     for (let item of includesBnumber) {
+  //       if (!map.has(item.name)) {
+  //         map.set(item.name, item);
+  //       }
+  //     }
+  //     return [...map.values()];
+  //   };
+  //   let newArr = cancelTwice();
+  // 鍚堝苟
+  //   let newMerges = [];
+  //   merges.forEach((e, i) => {
+  //     if (i != 0) {
+  //       newMerges.push(
+  //         // 鍚堝苟锛歴浠h〃鍚堝苟鐨勫紑濮嬪崟鍏冩牸锛宑鏄垪锛宺鏄锛宔鏄唬琛ㄥ悎骞剁殑缁撴潫鍗曞厓鏍�
+  //         {
+  //           s: {
+  //             c: e.s.c,
+  //             r: e.s.r + 1, //r鍔�1鏄洜涓哄姞浜嗚〃鏍肩殑鏍囬
+  //           },
+  //           e: {
+  //             c: e.e.c,
+  //             r: e.e.r + 1,
+  //           },
+  //         }
+  //       );
+  //     } else {
+  //       newMerges.push(e); // 鏍囬鍚堝苟
+  //     }
+  //   });
+  //   merges = newMerges;
+  //   // 璁剧疆鍚堝苟濮撳悕鍒楃殑鍗曞厓鏍�
+  //   newArr.forEach((e, i) => {
+  //     merges.push({
+  //       s: { r: e.number, c: 1 },
+  //       e: {
+  //         r: newArr[i + 1]?.number ? newArr[i + 1].number - 2 : data.length - 1,
+  //         c: 1,
+  //       },
+  //     });
+  //   });
+  //   sheet["!merges"] = merges; // 灏唌erges娣诲姞鍒皊heet涓�
+  // 璁剧疆鍒楀
+  const cols = [{ wch: 100 }, { wch: 15 }, { wch: 12 }, { wch: 12 }];
+  sheet["!cols"] = cols; // 灏哻ols娣诲姞鍒皊heet涓�
+  //   const rows = [{ hpx: 20 }, { hpx: 16 }, { hpx: 18 }];
+  //   sheet["!rows"] = rows; // 灏唕ows娣诲姞鍒皊heet涓紝璁剧疆琛岄珮
+  Object.keys(sheet).forEach((key, i) => {
+    // 璁剧疆鍗曞厓鏍兼牱寮�
+    if (key.indexOf("!") < 0) {
+      if (key == "A1") {
+        // 璁剧疆鏍囬
+        sheet[key].s = {
+          alignment: {
+            horizontal: "center", //姘村钩灞呬腑
+            vertical: "center", //绔栫洿灞呬腑
+          },
+          font: {
+            bold: true,
+            // sz: 14,
+            // name: "瀹嬩綋",
+          },
+        };
+      } else if (
+        key == "A2" ||
+        key == "B2" ||
+        key == "C2" ||
+        key == "D2" ||
+        key == "E2" ||
+        key == "F2" ||
+        key == "G2" ||
+        key == "H2" ||
+        key == "I2"
+      ) {
+        // 璁剧疆琛ㄥご
+        sheet[key].s = {
+          fill: {
+            fgColor: { rgb: "A6A6A6" },
+          },
+          border: {
+            top: { style: "thin" },
+            left: { style: "thin" },
+            bottom: { style: "thin" },
+            right: { style: "thin" },
+          },
+          font: {
+            bold: true,
+            // sz: 12,
+            // name: "瀹嬩綋",
+          },
+        };
+      } else {
+        if (key.includes("A")) {
+          // 搴忓垪鎵�鍦ㄥ垪
+          if (typeof sheet[key].v == "number") {
+            // 鍒楄〃鍒楄姹傚簭鍙疯灞呬腑锛屽悎璁″拰鎬诲悎璁″眳宸�(搴旇鏄郴缁熼粯璁ょ殑锛屽鏋滆璁剧疆灞呭乏鎴栧眳鍙筹紝涔熷彲浠ヨ嚜宸辫缃笅alignment灞炴��)
+            sheet[key].s = {
+              alignment: {
+                horizontal: "center",
+                vertical: "center",
+              },
+              border: {
+                top: { style: "thin" },
+                left: { style: "thin" },
+                bottom: { style: "thin" },
+                right: { style: "thin" },
+              },
+            };
+          } else {
+            sheet[key].s = {
+              border: {
+                top: { style: "thin" },
+                left: { style: "thin" },
+                bottom: { style: "thin" },
+                right: { style: "thin" },
+              },
+            };
+          }
+        } else {
+          sheet[key].s = {
+            border: {
+              top: { style: "thin" },
+              left: { style: "thin" },
+              bottom: { style: "thin" },
+              right: { style: "thin" },
+            },
+            alignment: {
+              horizontal: "left",
+              vertical: "center",
+            },
+          };
+        }
+      }
+    }
+  });
+  // 璁剧疆缁撳熬鐨勮〃鏍�
+  //   let sheetBorder = sheet["!ref"].substring(4); // 鍥犱负瀵煎嚭鐨勫崟鍏冩牸琛屾暟涓嶇‘瀹氾紝鎵�浠ユ嬁鍒版渶鍚庝竴琛岀殑鏁板瓧
+  //   let endSheetBorder = ["C", "D", "E", "F", "G", "H"]; //鍥犱负鏈�鍚庝竴琛岀殑鍚堝苟鐨勫垪鏄竴鏍风殑锛屾墍浠ヨ繖閲屽彲浠ョ洿鎺ュ皢鍒楃殑鍗曞厓鏍煎簭鍙峰啓涓畾鍊�
+  //   endSheetBorder.forEach((e) => {
+  //     let addBorder = e + sheetBorder;
+  //     sheet[addBorder] = {
+  //       v: "",
+  //       t: "s",
+  //       s: {
+  //         border: {
+  //           top: { style: "thin" },
+  //           bottom: { style: "thin" },
+  //         },
+  //       },
+  //     };
+  //   });
+  const workbook = XLSXS.utils.book_new(); // 鍒涘缓铏氭嫙鐨� workbook
+  XLSXS.utils.book_append_sheet(workbook, sheet); // 鍚� workbook 涓坊鍔� sheet
+  XLSXS.writeFile(workbook, "data-region" + ".xlsx"); // 瀵煎嚭 workbook
+}
diff --git a/src/views/plotting/plotting.vue b/src/views/plotting/plotting.vue
index c8fd464..cc61f47 100644
--- a/src/views/plotting/plotting.vue
+++ b/src/views/plotting/plotting.vue
@@ -53,6 +53,9 @@
   watch,
 } from "vue";
 import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
+import { selectByPoint, selectByPolygon } from "@/api/api";
+import WKT from "terraformer-wkt-parser";
+import * as turf from "@turf/turf";
 const emits = defineEmits(["setCloseplotting"]);
 const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
 let list = ref([]);
@@ -64,7 +67,14 @@
 });
 const lineColor = ref(null);
 const metiaColor = ref(null);
-
+//鐐规煡璇㈡帴鍙�
+const selectPoint = async () => {
+  const dt = await selectByPoint();
+};
+//绾挎煡璇㈡帴鍙�
+const selectPolygon = async () => {
+  const dt = await selectByPolygon();
+};
 const setLayerLocation = (res) => {
   var entities = Viewer.entities._entities._array;
   for (var i in entities) {
@@ -132,10 +142,17 @@
       disableDepthTestDistance: Number.POSITIVE_INFINITY,
     },
   });
+  var point = turf.point([geom.lat, geom.lng]);
+
+  var wkt = WKT.convert(point.geometry);
+
   list.value.push({
     name: name,
     layer: layer,
     icon: "d.png",
+    wkt: wkt,
+    lng: geom.lng,
+    lat: geom.lat,
   });
   plotNum.value.point++;
 };
@@ -157,7 +174,16 @@
       clampToGround: true,
     },
   });
+  var linestring = turf.lineString([
+    [-24, 63],
+    [-23, 60],
+    [-25, 65],
+    [-20, 69],
+  ]);
+
+  var wkt = WKT.convert(linestring.geometry);
   list.value.push({
+    wkt: wkt,
     name: name,
     layer: layer,
     icon: "x.png",
@@ -167,10 +193,12 @@
 const setAddEntityPolygon = (res) => {
   var std = [];
   var res_val = res.polygon.hierarchy.getValue().positions;
-
+  var geom;
+  var coord = [];
   for (var i in res_val) {
-    var geom = setCartesianToEightFour(res_val[i]);
+    geom = setCartesianToEightFour(res_val[i]);
     std.push(Cesium.Cartesian3.fromDegrees(geom.lng, geom.lat));
+    coord.push([geom.lng, geom.lat]);
   }
   var name = "Polygon#" + plotNum.value.polygon;
   var layer = Viewer.entities.add({
@@ -186,10 +214,27 @@
       height: 0,
     },
   });
+
+  coord.push(coord[0]);
+
+  var polygon = turf.polygon([coord]);
+  var wkt = WKT.convert(polygon.geometry);
+  console.log(polygon.geometry);
+  let turfPoint = [];
+  polygon.geometry.coordinates[0].forEach((e) => {
+    turfPoint.push(turf.point(e));
+  });
+  var features = turf.featureCollection(turfPoint);
+
+  var center = turf.center(features);
+  console.log(center);
   list.value.push({
+    wkt: wkt,
     name: name,
     layer: layer,
     icon: "m.png",
+    lng: center.geometry.coordinates[0],
+    lat: center.geometry.coordinates[1],
   });
   plotNum.value.polygon++;
 };
@@ -224,7 +269,6 @@
       if (nVal.entitiesData != {} && nVal.entitiesData.name) {
         for (var i in list.value) {
           if (list.value[i].name == nVal.entitiesData.name) {
-            console.log(list.value[i].name);
             list.value.splice(i, 1);
             break;
           }
diff --git a/src/views/plotting/plottingInquire.vue b/src/views/plotting/plottingInquire.vue
index 29c3f85..fe2e31e 100644
--- a/src/views/plotting/plottingInquire.vue
+++ b/src/views/plotting/plottingInquire.vue
@@ -28,7 +28,7 @@
               <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_left">
                 <div class="label">鑼冨洿妗�</div>
                 <el-input
                   v-model="ScopeBox.Scop"
@@ -37,14 +37,15 @@
                 >
                   <template #append>km</template>
                 </el-input>
-              </div>
-              <div class="inquireContent_input_right">
+              </div> -->
+              <div class="inquireContent_input_right" v-show="pixelIsShow">
                 <div class="label">鑼冨洿妗嗗唴鏈�澶у儚绱犲��</div>
                 <el-select
                   v-model="ScopeBox.pixel"
                   class="m-2"
                   placeholder="鍍忕礌鍊�"
                   size="small"
+                  @change="pixelChange"
                 >
                   <el-option
                     v-for="item in options"
@@ -58,15 +59,15 @@
             <div class="inquireContent_msg" v-if="!chartIsshow">
               <div class="inquireContent_msg_k">
                 <span>鎻愬彇鐨勮竟鐣屾</span>
-                <span>{{ ScopeBox.pixel }}</span>
+                <span>{{ ScopeBox.pixel }}脳{{ ScopeBox.pixel }}</span>
               </div>
-              <div class="inquireContent_msg_k">
+              <!-- <div class="inquireContent_msg_k">
                 <span>浣跨敤</span>
                 <span
                   >{{ ScopeBox.Scop * 1000 }}.00,{{ ScopeBox.Scop * 1000 }}.00
                   m/px</span
                 >
-              </div>
+              </div> -->
             </div>
             <div class="inquireContent_table" v-if="!chartIsshow">
               <div class="table">
@@ -78,22 +79,18 @@
                   </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 }}</span>
+                      <span> {{ e.avg }}</span>
                     </div>
                   </div>
                 </div>
               </div>
+            </div>
+            <div class="download">
+              <el-button link @click="download">涓嬭浇 CSV</el-button>
             </div>
           </el-tab-pane>
         </el-tabs>
@@ -116,9 +113,13 @@
 import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
 //echarts
 import BarGraph from "@/components/BarGraph.vue";
+import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
+import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
+import { ElMessage } from "element-plus";
 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 +127,97 @@
 const activeName = ref("second");
 const ScopeBox = ref({
   Scop: "",
-  pixel: "",
+  pixel: "1",
 });
 const options = [
   {
-    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",
   },
 ];
+let resultList = ref([]);
+//鍍忕礌閫夋嫨
+const pixelChange = (val) => {
+  selectPoint({
+    pixel: val,
+    wkt: `POINT (${store.state.plottingInquireData.entitiesData.lng} ${store.state.plottingInquireData.entitiesData.lat})`,
+  });
+};
+//涓嬭浇csv
+const download = () => {
+  saveFSDZJsonToExcel(resultList.value, "123", "");
+};
+//鐐规煡璇㈡帴鍙�
+const selectPoint = async (res) => {
+  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.lng = store.state.plottingInquireData.entitiesData.lng;
+    e.lat = store.state.plottingInquireData.entitiesData.lat;
+    resultList.value.push(e);
+  });
+};
+//闈㈡煡璇㈡帴鍙�
+const selectPolygon = async (res) => {
+  const dt = await selectByPolygon(res);
+
+  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 selectPolyline = async (res) => {
+  const dt = await selectByPolyline(res);
+  console.log(dt);
+};
 const setLayerLocation = () => {
   var entities = Viewer.entities._entities._array;
   for (var i in entities) {
@@ -211,6 +259,24 @@
     inquireData.value = nVal.entitiesData;
     if (nVal.entitiesData.icon == "x.png") {
       chartIsshow.value = true;
+      // selectPolyline({
+      //   pixel: ScopeBox.value.pixel,
+      //   wkt: `POINT (${nVal.entitiesData.lng})`,
+      // })
+    }
+    if (nVal.entitiesData.icon == "m.png") {
+      if (nVal.entitiesData.name == oVal.entitiesData.name) {
+        return;
+      }
+      pixelIsShow.value = false;
+      selectPolygon({ wkt: nVal.entitiesData.wkt });
+      // console.log(nVal);
+    }
+    if (nVal.entitiesData.icon == "d.png") {
+      selectPoint({
+        pixel: ScopeBox.value.pixel,
+        wkt: nVal.entitiesData.wkt,
+      });
     }
   },
   { deep: true }
@@ -332,7 +398,7 @@
     .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);
@@ -353,6 +419,7 @@
             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;
@@ -367,26 +434,44 @@
           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;
+              // padding: 5px;
+              // white-space: nowrap;
+              span {
+                display: block;
+                width: 50%;
+                word-wrap: break-word;
+                // white-space: pre;
+              }
+              span:nth-child(2) {
+                display: flex;
+                justify-content: flex-end;
+              }
             }
             .table_td:nth-child(2) {
               width: 237px;
               display: flex;
               justify-content: space-between;
               align-items: center;
-              padding: 0 10px;
+              // padding: 0 10px;
+              padding-left: 10px;
+              padding-right: 10px;
+              padding-top: 5px;
+              padding-bottom: 5px;
               border-right: 0;
             }
           }
@@ -407,6 +492,17 @@
         }
       }
     }
+    .download {
+      padding-right: 15px;
+      padding-left: 15px;
+      padding-bottom: 14px;
+      display: flex;
+      justify-content: flex-end;
+      .el-button {
+        font-size: 12px;
+        color: #d6e4ff;
+      }
+    }
   }
 }
 </style>

--
Gitblit v1.9.3