Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/components/Combinations/LayerManage/LayerManage.vue

@@ -337,11 +337,12 @@ export default {
         if (obj.serverType == "geoserver") {
           switch (obj.type) {
             case "wms":
-              // this.vectorlayerlist.push(obj);
+              this.vectorlayerlist.push(obj);
               this.layerparams[obj.id] = this.addWMS(obj);
               store.setlayerparamsList(this.layerparams);
               break;
             case "wmts":
+              this.vectorlayerlist.push(obj);
               this.layerparams[obj.id] = this.addWMTS(obj);
               store.setlayerparamsList(this.layerparams);
               break;

src/components/Query/clickQuery/clickQuery.vue

@@ -1,14 +1,28 @@
 <template>
-  <div class="sm-panel sm-function-module-query" v-show="PoinyQueryShow && vectorShow" v-drag>
+  <div
+    class="sm-panel sm-function-module-query"
+    v-show="PoinyQueryShow && vectorShow"
+    v-drag
+  >
     <div class="sm-panel-header">
       <span>{{ Resource.PoinyQuery }}</span>
       <span class="closeBtn" @click="toggleVisibility">&times;</span>
     </div>
     <!-- <div class="sm-function-module-content-btn"> -->
     <div class="btnList">
-      <span v-for="(item, index) in actionOptions" :key="index" class="icon-span" :title="item.lable"
-        :class="item.isSelect ? 'selected-icon' : ''" @click="changleQueryItem(item)">
-        <i class="iconfont iconSize" :class="item.iconName" style="margin-top: 0px"></i>
+      <span
+        v-for="(item, index) in actionOptions"
+        :key="index"
+        class="icon-span"
+        :title="item.lable"
+        :class="item.isSelect ? 'selected-icon' : ''"
+        @click="changleQueryItem(item)"
+      >
+        <i
+          class="iconfont iconSize"
+          :class="item.iconName"
+          style="margin-top: 0px"
+        ></i>
       </span>
       <!-- <el-button type="primary" size="small" @click.stop="mapLayerQuery"
         >点击</el-button
@@ -19,28 +33,51 @@
     </div>
     <div class="sm-function-module-content-tabs">
       <el-tabs @tab-click="handleTabClick" v-model="activeLayerId">
-        <el-tab-pane :label="item.label" :name="item.id" v-for="(item, index) in layerList" :key="index"></el-tab-pane>
+        <el-tab-pane
+          :label="item.label"
+          :name="item.id"
+          v-for="(item, index) in layerList"
+          :key="index"
+        ></el-tab-pane>
       </el-tabs>
     </div>
     <div class="sm-function-module-content-table">
-      <el-collapse :value="activeNames" @change="handleCollapseChange" v-if="
-        activeLayerId &&
-        queryResults[activeLayerId] &&
-        queryResults[activeLayerId].length > 0
-      ">
-        <el-collapse-item :title="'查询结果' + (index + 1)" :name="'查询结果' + (index + 1)"
-          v-for="(item, index) in queryResults[activeLayerId]" :key="index">
+      <el-collapse
+        :value="activeNames"
+        @change="handleCollapseChange"
+        v-if="
+          activeLayerId &&
+          queryResults[activeLayerId] &&
+          queryResults[activeLayerId].length > 0
+        "
+      >
+        <el-collapse-item
+          :title="'查询结果' + (index + 1)"
+          :name="'查询结果' + (index + 1)"
+          v-for="(item, index) in queryResults[activeLayerId]"
+          :key="index"
+        >
           <template slot="title">
             查询结果{{ index + 1
-            }}<i title="定位" class="header-icon el-icon-s-promotion flyBtn2" @click.stop="flyTo(index)"></i>
+            }}<i
+              title="定位"
+              class="header-icon el-icon-s-promotion flyBtn2"
+              @click.stop="flyTo(index)"
+            ></i>
           </template>
-          <el-table :data="item" :show-header="false" border style="width: 100%" :header-cell-style="{
-            background: 'rgba(10, 25, 38, 0.6)',
-            color: '#66b1ff',
-            fontSize: '14px',
-            fontFamily: 'Microsoft YaHei',
-            fontWeight: '400',
-          }">
+          <el-table
+            :data="item"
+            :show-header="false"
+            border
+            style="width: 100%"
+            :header-cell-style="{
+              background: 'rgba(10, 25, 38, 0.6)',
+              color: '#66b1ff',
+              fontSize: '14px',
+              fontFamily: 'Microsoft YaHei',
+              fontWeight: '400',
+            }"
+          >
             <el-table-column prop="name" label="字段" width="100">
             </el-table-column>
             <el-table-column prop="value" label="值" width="208">
@@ -62,7 +99,7 @@ import { keys } from "lodash";
 import { handModel, handnew, clearTranslate, keyName } from "./modelLayering";
 import CockpitVector from "./CockpitVector.vue";
 import MultiLevelQuery from "./MultiLevelQuery.vue";
-
+import { loadGeoJSON, str2Unicode } from "@/utils/MapHelper/help.js";
 import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
 import * as tdsy from "@/views/cockpit/js/tdsy";
 import * as turf from "@turf/turf";
@@ -146,17 +183,18 @@ export default {
         : true;
     },
   },
-  created() { },
+  created() {},
   watch: {
     activeLayerId(val) {
       if (val && val != "0") {
         for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
           let obj = store.state.vectorlayerlist[i];
           if (obj.id == val) {
-            if (obj.type == "S3M") {
-              this.addGeometrys(true);
+            if (obj.serverType == "geoserver") {
+              this.removeGeoJSON();
+              this.addGeoJson("#0000ff");
             } else {
-              this.addGeometrys();
+              this.addGeometrys(obj.type == "S3M");
             }
             break;
           }
@@ -174,6 +212,7 @@ export default {
     },
   },
   mounted() {
+    console.log(str2Unicode(`fid_城镇`));
     this.$nextTick((res) => {
       query_click = new Cesium.CustomDataSource("query_click");
       viewer.dataSources.add(query_click);
@@ -202,6 +241,7 @@ export default {
     toggleVisibility() {
       this.removeMapLayerQuery();
       this.remove_query_click();
+      this.removeGeoJSON();
       store.setToolBarAction(9);
       tdsy.remove(false);
     },
@@ -262,36 +302,19 @@ export default {
       }
     },
     flyTo(index) {
-      dataSourceLayer.entities.removeAll();
       let geoms = this.queryResultsGeom[this.activeLayerId];
-      let parts = this.queryResultsGeomPart[this.activeLayerId];
       let cur = geoms[index];
       if (cur) {
-        let part = parts[index];
-        let start = 0;
-        let end = 0;
-        for (let k = 0; k < part.length; k++) {
-          let points = [];
-          if (k > 0) {
-            start += part[k - 1];
-          }
-          end += part[k];
-          for (let j = start; j < end; j++) {
-            let cx = cur[j][0];
-            let cy = cur[j][1];
-            points.push(cx);
-            points.push(cy);
-          }
-          // let e = dataSourceLayer.entities.
-          let e = viewer.entities.add({
-            polyline: new Cesium.PolylineGraphics({
-              positions: Cesium.Cartesian3.fromDegreesArray(points),
-              width: 3,
-              material: Cesium.Color.RED.withAlpha(0.9),
-              clampToGround: true,
-            }),
-          });
-          viewer.flyTo(e);
+        if (cur.type) {
+          this.removeGeoJSON();
+          loadGeoJSON(
+            cur,
+            "#0000ff",
+            { isfly: true, fill_a: 0.001 },
+            (data) => (data.name = "geoserver")
+          );
+        } else {
+          this.flyToSuperMap(cur);
         }
       } else {
         this.$message({
@@ -300,6 +323,53 @@ export default {
         });
       }
     },
+    addGeoJson() {
+      let geoms = this.queryResultsGeom[this.activeLayerId];
+      geoms.forEach((geom) => {
+        loadGeoJSON(
+          geom,
+          "#0000ff",
+          { fill_a: 0.001 },
+          (data) => (data.name = "geoserver")
+        );
+      });
+    },
+    removeGeoJSON() {
+      viewer.entities.removeAll();
+      viewer.dataSources._dataSources.forEach((das) => {
+        if (das.name == "geoserver") viewer.dataSources.remove(das);
+      });
+    },
+    flyToSuperMap(cur) {
+      dataSourceLayer.entities.removeAll();
+      let parts = this.queryResultsGeomPart[this.activeLayerId];
+      let part = parts[index];
+      let start = 0;
+      let end = 0;
+      for (let k = 0; k < part.length; k++) {
+        let points = [];
+        if (k > 0) {
+          start += part[k - 1];
+        }
+        end += part[k];
+        for (let j = start; j < end; j++) {
+          let cx = cur[j][0];
+          let cy = cur[j][1];
+          points.push(cx);
+          points.push(cy);
+        }
+        // let e = dataSourceLayer.entities.
+        let e = viewer.entities.add({
+          polyline: new Cesium.PolylineGraphics({
+            positions: Cesium.Cartesian3.fromDegreesArray(points),
+            width: 3,
+            material: Cesium.Color.RED.withAlpha(0.9),
+            clampToGround: true,
+          }),
+        });
+        viewer.flyTo(e);
+      }
+    },
     handleTabClick(item, a) {
       this.activeLayerId = item.name;
     },
@@ -324,6 +394,7 @@ export default {
       let scene = viewer.scene;
       viewer.entities.removeAll();
       dataSourceLayer.entities.removeAll();
+      this.removeGeoJSON();
       //拾取模型
       let pickedFeature = scene.pick(movement.position);
       if (
@@ -345,70 +416,70 @@ export default {
       // "ResultNetWork@管线#1"///"ResultNetWork_Node@管线#1"
       if (eneityName.indexOf("雨水") > -1 || eneityName.indexOf("管线") > -1) {
         // for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
-          // let obj = store.state.vectorlayerlist[i];
-
-          // console.log(obj.url,'url----------',obj);
-          let str1 = eneityName.match(/@(\S*)#/)[1];
-          let str2 = eneityName.match(/(\S*)@/)[1];
-          let str3 = str1 + ":" + str2;
-          // let obj = store.state.vectorlayerlist.find(i => i.title == str1);
-          let obj = store.state.vectorlayerlist.find((i) => {
-            return str1 == i.title
-          });
-          let url1 = obj.url.replace("3D-", "data-");
-          let url2 = url1.replace(
-            "realspace",
-            "data/featureResults.rjson?returnContent=true"
-          );
-          let queryByIDParameters = {
-            getFeatureMode: "ID",
-            datasetNames: [str3],
-            ids: [pickedFeature.id],
-          };
-          let e = await this.mapQuery(url2, queryByIDParameters);
-          if (e && e.totalCount > 0) {
-            // that.layerList.push(store.state.vectorlayerlist[i]);
-            that.layerList.push(obj);
-            for (let u = 0; u < e.features.length; u++) {
-              let cur = [];
-              var linSAr = JSON.parse(JSON.stringify(e.features[u]));
-              if (e.features[u].fieldNames) {
-                linSAr.fieldNames.forEach((fieldName, i) => {
-                  let v = linSAr.fieldValues[i];
-                  if (v != "" && !isNaN(parseFloat(v))) {
-                    v = Math.round(parseFloat(v) * 100) / 100;
-                  }
-
-                  // cur.push({ name: fieldName, value: v });
-                  if (
-                    fieldName.toLowerCase().indexOf("shape") < 0 &&
-                    fieldName.toLowerCase().indexOf("sm") &&
-                    v != ""
-                  ) {
-                    cur.push({ name: fieldName, value: v });
-                  }
-                });
-
-                //获取图层id的参数
-                let substring = pickedFeature.primitive._baseUri.query;
-                for (let p = 0; p < store.state.vectorlayerlist.length; p++) {
-                  if (store.state.vectorlayerlist[p].id == substring) {
-                    that.layerList.push(store.state.vectorlayerlist[p]);
-                    break;
-                  }
+        // let obj = store.state.vectorlayerlist[i];
+
+        // console.log(obj.url,'url----------',obj);
+        let str1 = eneityName.match(/@(\S*)#/)[1];
+        let str2 = eneityName.match(/(\S*)@/)[1];
+        let str3 = str1 + ":" + str2;
+        // let obj = store.state.vectorlayerlist.find(i => i.title == str1);
+        let obj = store.state.vectorlayerlist.find((i) => {
+          return str1 == i.title;
+        });
+        let url1 = obj.url.replace("3D-", "data-");
+        let url2 = url1.replace(
+          "realspace",
+          "data/featureResults.rjson?returnContent=true"
+        );
+        let queryByIDParameters = {
+          getFeatureMode: "ID",
+          datasetNames: [str3],
+          ids: [pickedFeature.id],
+        };
+        let e = await this.mapQuery(url2, queryByIDParameters);
+        if (e && e.totalCount > 0) {
+          // that.layerList.push(store.state.vectorlayerlist[i]);
+          that.layerList.push(obj);
+          for (let u = 0; u < e.features.length; u++) {
+            let cur = [];
+            var linSAr = JSON.parse(JSON.stringify(e.features[u]));
+            if (e.features[u].fieldNames) {
+              linSAr.fieldNames.forEach((fieldName, i) => {
+                let v = linSAr.fieldValues[i];
+                if (v != "" && !isNaN(parseFloat(v))) {
+                  v = Math.round(parseFloat(v) * 100) / 100;
+                }
+
+                // cur.push({ name: fieldName, value: v });
+                if (
+                  fieldName.toLowerCase().indexOf("shape") < 0 &&
+                  fieldName.toLowerCase().indexOf("sm") &&
+                  v != ""
+                ) {
+                  cur.push({ name: fieldName, value: v });
+                }
+              });
+
+              //获取图层id的参数
+              let substring = pickedFeature.primitive._baseUri.query;
+              for (let p = 0; p < store.state.vectorlayerlist.length; p++) {
+                if (store.state.vectorlayerlist[p].id == substring) {
+                  that.layerList.push(store.state.vectorlayerlist[p]);
+                  break;
                 }
-                that.queryResults[substring] = [cur];
-                that.queryResultsGeom[substring] = [];
-                that.activeLayerId = substring;
-              } else {
-                that.$message({
-                  message: "查询结果为空！",
-                  type: "warning",
-                  customClass: "messageIndex",
-                });
               }
+              that.queryResults[substring] = [cur];
+              that.queryResultsGeom[substring] = [];
+              that.activeLayerId = substring;
+            } else {
+              that.$message({
+                message: "查询结果为空！",
+                type: "warning",
+                customClass: "messageIndex",
+              });
             }
           }
+        }
         // }
       }
 
@@ -441,14 +512,14 @@ export default {
       //TODO wanger 分图层查询
       for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
         let obj = store.state.vectorlayerlist[i];
-        if (!obj.source) {
-          continue;
-        }
         // 结果高亮
         this.highlightResultsPng(xy.lng, xy.lat);
-        if (obj.title == "测试WMS") {
+        if (obj.serverType == "geoserver") {
           this.getGeoserver(xy, obj);
         } else {
+          if (!obj.source) {
+            continue;
+          }
           this.superQuery(xy, obj);
         }
       }
@@ -561,37 +632,36 @@ export default {
       }
     },
     async getGeoserver(xy, obj) {
-      let url = "http://192.168.60.52:28085/geoserver/demo/wms";
+      this.queryResults[obj.id] = [];
+      this.queryResultsGeom[obj.id] = [];
+      let url = obj.url.substring(0, obj.url.indexOf("geoserver") + 9) + "/wms";
       let params = {
-        SERVICE: "WMS",
-        VERSION: "1.1.1",
-        REQUEST: "GetFeatureInfo",
-        // FORMAT: "image/png",
-        TRANSPARENT: true,
-        QUERY_LAYERS: "demo:yzq_czkfbj",
-        // STYLES: "",
-        LAYERS: "demo:yzq_czkfbj",
-        // exceptions: "application/vnd.ogc.se_inimage",
-        INFO_FORMAT: "application/json",
-        // FEATURE_COUNT: 50,
-        X: 50,
-        Y: 50,
-        SRS: "EPSG:4326",
-        WIDTH: 101,
-        HEIGHT: 101,
-        BBOX: bbox(xy, 10), // "12152284.626610054,2080930.4355590942,12153248.563804159,2081894.3727532008",
+        service: "WMS",
+        version: "1.1.1",
+        request: "GetFeatureInfo",
+        layers: `${obj.fwgzkj}:${obj.fwmc}`,
+        query_layers: `${obj.fwgzkj}:${obj.fwmc}`,
+        info_format: "application/json",
+        srs: "EPSG:4326",
+        x: 50,
+        y: 50,
+        width: 101,
+        height: 101,
+        bbox: bbox(xy, 10), // "12152284.626610054,2080930.4355590942,12153248.563804159,2081894.3727532008",
       };
       let res = await axios.get(url, { params });
       if (res.data && res.data.features.length > 0) {
         this.addLayerList(obj.title, obj);
-        that.queryResultsGeom[obj.id] = geoms;
         res.data.features.forEach((feitem) => {
           let cur = [];
-          cur.push({ name: feitem, value: feitem });
-          that.queryResults[obj.id].push(cur);
+          Object.keys(feitem.properties).forEach((key) => {
+            cur.push({ name: key, value: feitem.properties[key] });
+          });
+          this.queryResults[obj.id].push(cur);
+          this.queryResultsGeom[obj.id].push(feitem.geometry);
         });
       } else {
-        that.$message({
+        this.$message({
           message: "查询结果为空！",
           type: "warning",
           customClass: "messageIndex",
@@ -638,6 +708,7 @@ export default {
       this.layersData = [];
       viewer.entities.removeAll();
       dataSourceLayer.entities.removeAll();
+      this.removeGeoJSON();
       let title;
       if (store.state.checkedData) title = store.state.checkedData.title;
       //  超图分层分户
@@ -725,9 +796,12 @@ export default {
       this.queryResultsGeomPart = {};
       this.layerList = [];
       viewer.entities.removeAll();
-      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
-      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      if (this.handler.removeInputAction) {
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      }
       dataSourceLayer.entities.removeAll();
+      this.removeGeoJSON();
       viewer.dataSources.remove(dataSourceLayer);
     },
     /**

src/utils/MapHelper/help.js

@@ -223,4 +223,11 @@ export function bbox(latlng, zoom) {
   }
   // console.table({zoom,box,latlng,boxMin, boxMax })
   return `${boxMin.lng},${boxMin.lat},${boxMax.lng},${boxMax.lat}`
-}
+}
+
+export function str2Unicode(str) {
+  var es = [];
+  for (var i = 0; i < str.length; i++)
+    es[i] = ("00" + str.charCodeAt(i).toString(16)).slice(-4);
+  return "\\u" + es.join("\\u");
+} 

src/views/ResourceShare/myApplication/index.vue

@@ -0,0 +1,395 @@
+<template>
+  <div class="ghzc ResourceShare">
+    <div class="innerContainer" v-drag>
+      <custom-form ref="formRef" :model="model" :config="formConfig">
+        <template #time>  </template>
+        <template #type>
+          <el-select v-model="model.placeCode" placeholder="申请状态">
+            <el-option
+              v-for="item in optionList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <template #action>
+          <el-button size="mini" @click="getTableData">查询</el-button>
+          <el-button size="mini" @click="reset()">重置</el-button>
+          <el-button
+            size="mini"
+            v-if="userLevel !== 'city' && userLevel !== 'district'"
+            @click="newly()"
+            >新增</el-button
+          >
+        </template>
+      </custom-form>
+      <!-- :total="table.total"
+    :tableArrDate="table.data" -->
+      <customForm></customForm>
+      <tablePage
+        class="tablePage"
+        title="我的申请"
+        :tableTitle="cloumn"
+        :table="table"
+        ref="tableDialogRef"
+        @currentChange="searchFun"
+      >
+      </tablePage>
+    </div>
+  </div>
+</template>
+
+<script>
+import tablePage from "../../../components/mapView/tablePage.vue";
+import customForm from "../../../components/mapView/custom-form.vue";
+import { FormConfig, TableHeader } from "./config";
+export default {
+  components: {
+    tablePage,
+    customForm,
+  },
+  props: {},
+  data() {
+    return {
+      model: {
+        carNo: "", //网格名称
+        regionCode: "", //地区编码
+        placeCode: "", //所属小区
+      },
+      formConfig: FormConfig,
+      tableData: null,
+      details: {},
+      cloumn: TableHeader,
+      table: { data: [], total: 0 },
+    };
+  },
+  methods: {
+    closeIsShallow() {
+      this.isShallow = false;
+      this.details = [];
+    },
+
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex === this.scrollTop_index) {
+        return "warning-row";
+      }
+      return "";
+    },
+    close() {
+      store.setViewerFlagb(true);
+      tdsy.remove(true);
+      store.state.vectorData = [];
+      store.hideToolBar();
+    },
+
+    change_witch() {
+      if (this.word) this.get_searchWord(this.state);
+      else this.init_vector(this.searchform);
+    },
+
+    async init_vector(params) {
+      const that = this;
+      let obj = {
+        jscType: store.state.cockpit_vector.tablejscType,
+        beginTime: store.state.cockpit_date[0],
+        endTime: store.state.cockpit_date[1],
+        id: store.state.cockpit_region.id,
+        ...params,
+      };
+      if (this.title == "土地供应完成项目" || this.title == "山水工程项目") {
+        obj.beginTime = undefined;
+        obj.endTime = undefined;
+      }
+      if (this.title == "进出平衡") {
+        (obj.jscType = "jsc_gdbh_jcph_zbmc"),
+          (obj.val2 = 0),
+          (obj.val1 = 50000),
+          (obj.beginTime = store.state.cockpit_date[1].slice(0, 4)),
+          (obj.endTime = undefined);
+      }
+      if (this.title == "土地收储计划项目") {
+        obj.beginTime = undefined;
+        obj.endTime = undefined;
+      }
+      let data = await QueryList(obj);
+      data.data.map((res) => {
+        if (res.geom) {
+          res.geom = wellknown.parse(res.geom.split(";")[1]);
+        }
+      });
+      this.active_dableData = data.data;
+      this.tableData = data.data;
+    },
+  },
+  computed: {},
+  watch: {},
+  mounted() {},
+};
+</script>
+
+
+
+<style lang="scss" scoped>
+// @import "../../complianceAnalysis/ghzc.scss";
+.ResourceShare {
+  width: 100%;
+  height: 100%;
+  background: #b6e0ff;
+  position: absolute;
+  z-index: 99;
+  .innerContainer {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: #041024;
+    z-index: 99;
+    top: 0px;
+    background-image: url("/static/images/homepage/00-底框.png");
+    background-size: 100% 100%;
+    padding: 20px;
+  }
+  .tablePage {
+    height: calc(100% - 100px);
+  }
+}
+div::-webkit-scrollbar {
+  width: 9px;
+  height: 19px;
+}
+
+.sm-panel {
+  width: 400px;
+  height: 700px;
+  // z-index: 999999;
+}
+
+.CockpitVectorBox {
+  top: 0px !important;
+}
+
+.BoxCommonVector {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0rem;
+  top: 0rem;
+}
+
+.innerContainerVector {
+  width: 430px;
+  height: 760px; //calc(100% - 20px);
+  position: absolute;
+  top: 28px;
+  z-index: 99;
+  background-image: url("/static/images/ghzc/内容框.png");
+  background-size: 100% 100%;
+  border-top-right-radius: 15px;
+
+  .searchDiv {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-right: 10px;
+
+    .sidiv {
+      //   min-width: calc(50% - 10px);
+      height: 40px;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      display: inline-block;
+    }
+  }
+
+  .shownum {
+    line-height: 20px;
+    padding-top: 10px;
+    padding-left: 5px;
+    background: rgba(10, 25, 38, 1) !important;
+  }
+
+  .search {
+    // margin: 2rem;
+  }
+
+  /deep/ .el-input {
+    display: inline-block;
+  }
+
+  /deep/ .el-input__inner {
+    // background: transparent !important;
+    color: white !important;
+    background: rgba(10, 25, 38, 0.5);
+    border-color: #5ecef09a;
+    // color: #64daff;
+    // font-size: 12px;
+  }
+}
+
+.leftPaneVector {
+  left: 20px;
+
+  .el-icon-close {
+    width: 22px;
+    height: 22px;
+    color: #fff !important;
+    background-color: #335f87;
+    line-height: 23px;
+    padding: 0 5px;
+    border-radius: 4px;
+    top: 10px !important;
+    position: absolute;
+    right: 10px;
+  }
+
+  .PangetitleVector {
+    box-sizing: border-box;
+    width: 100%;
+    height: 42px;
+    background: url("/static/images/overview/titlebox.gif") no-repeat !important;
+    background-size: 100% 100% !important;
+    line-height: 35px;
+    font-size: 14px;
+    padding-left: 15px;
+    // display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .pange_textVector {
+    font-size: 14px !important;
+    font-family: "HarmonyOS Sans, HarmonyOS Sans";
+    font-weight: bold;
+    font-size: 18px;
+    color: #ffffff;
+    margin-left: 30px;
+  }
+
+  .clearBtn {
+    cursor: pointer;
+    // background-color: #3f94f53f;
+    // border: 1px solid #3f93f5;
+    color: #b6e0ff;
+    padding: 5px 15px;
+    display: inline-block;
+    margin-left: 15px;
+
+    &:hover {
+      font-weight: bold;
+    }
+  }
+}
+
+/deep/.el-input__inner:focus {
+  border: 1px solid #1fb1ef;
+}
+
+/deep/.el-input__inner {
+  border: 1px solid rgba(10, 25, 38, 0.5);
+  background: rgba(10, 25, 38, 0.5);
+  border-radius: 18px;
+  height: 30px;
+  color: white;
+  line-height: 30px;
+  // background: #ffffff3b;
+}
+
+/deep/.el-input__icon {
+  line-height: 30px;
+  border-radius: 0 18px 18px 0;
+  cursor: pointer;
+}
+
+/deep/.el-input__suffix {
+  background: #1fb1ef;
+  right: 1px;
+  padding: 0 5px;
+  border-radius: 0 18px 18px 0;
+  opacity: 0.8;
+  color: #fff;
+}
+
+/deep/ .el-autocomplete-suggestion {
+  margin-top: 8px;
+  border-radius: 6px;
+  border: 1px solid #198ec0;
+  background: rgba(10, 25, 38, 0.9);
+  color: rgba(25, 142, 192, 1);
+
+  .popper__arrow {
+    top: -8px;
+    border-bottom-color: rgba(31, 177, 239, 1);
+  }
+
+  .popper__arrow::after {
+    border-bottom-color: rgba(0, 80, 111, 0.9);
+  }
+
+  .el-autocomplete-suggestion__wrap {
+    padding: 2px;
+  }
+}
+
+/deep/ .el-autocomplete-suggestion li {
+  color: #ffffff;
+}
+
+/deep/ .el-autocomplete-suggestion li:hover {
+  background-color: rgba(8, 162, 223, 0.8);
+  border-radius: 6px;
+}
+
+/deep/ .el-table tr {
+  background: rgba(10, 25, 38, 0.5) !important;
+}
+
+/deep/ .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  background: rgba(10, 25, 38, 0.5) !important;
+
+  border-bottom: 0px solid #ebeef5;
+}
+
+/deep/.el-table th.el-table__cell {
+  background: rgba(10, 25, 38, 0.5) !important;
+}
+
+.el-table {
+  color: #fff;
+  background: rgba(10, 25, 38, 0.5) !important;
+}
+
+/deep/ .el-table__fixed-right::before,
+.el-table__fixed::before {
+  background: rgba(10, 25, 38, 0.9) !important;
+}
+
+/deep/ .el-table__fixed-right-patch {
+  background: rgba(10, 25, 38, 0.9) !important;
+}
+
+/deep/ .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  background: rgba(10, 25, 38, 0) !important;
+}
+
+/deep/ .el-table .warning-row {
+  background: rgb(102, 177, 255) !important;
+}
+
+.sm-panel-header {
+  /deep/ .el-icon-close:before {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: larger;
+    font-weight: bold;
+
+    &:hover {
+      color: aqua;
+    }
+  }
+}
+</style>