real3d-portalsite/src/components/Query/clickQuery/clickQuery.vue

<template>
  <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>
      <!-- <el-button type="primary" size="small" @click.stop="mapLayerQuery"
        >点击</el-button
      >
      <el-button type="primary" size="small" @click.stop="removeMapLayerQuery"
        >清除</el-button
      > -->
    </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-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"
        >
          <template slot="title">
            查询结果{{ index + 1
            }}<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-column prop="name" label="字段" width="100">
            </el-table-column>
            <el-table-column prop="value" label="值" width="208">
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- <CockpitVector v-if="store.state.vectorData.length > 0"></CockpitVector> -->
    <MultiLevelQuery ref="MultiLevelQuery" />
  </div>
</template>

<script>
import axios from "axios";
import { GetGDlnfo, GetXzqhTree, GetHouseInfo } from "../../../api/map";
import { keys } from "lodash";
import { handModel, handnew, clearTranslate, keyName } from "./modelLayering";
import CockpitVector from "./CockpitVector.vue";
import MultiLevelQuery from "./MultiLevelQuery.vue";

import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
import * as tdsy from "@/views/cockpit/js/tdsy";
import * as turf from "@turf/turf";
let gwtype;
let query_click = null;
let manager_layer_png = null;
let dataSourceLayer = null;
export default {
  name: "clickQuery",
  components: { CockpitVector, MultiLevelQuery },

  data() {
    return {
      inited: false,
      activeLayerName: "",
      columns: [
        {
          title: "字段",
          key: "name",
        },
        {
          title: "值",
          key: "value",
        },
      ],
      layersDataUrl: window.layersDataUrl,
      layersData: [],
      layerList: [],
      loading: false,
      handler: {},
      activeNames: "查询结果1",
      activeLayerId: "",
      queryResults: {},
      queryResultsGeom: {},
      queryResultsGeomPart: {},
      viewer: null,
      // dataSourceLayer: null,
      actionOptions: [
        {
          index: 1,
          lable: "图层",
          iconName: "el-icon-tickets",
          isSelect: false,
        },
        {
          index: 2,
          lable: "模型",
          iconName: "el-icon-office-building",
          isSelect: false,
        },
        // {
        //   index: 4,
        //   lable: "矢量",
        //   iconName: "el-icon-picture",
        //   isSelect: false,
        // },
        {
          index: 5,
          lable: "联级查询",
          iconName: "el-icon-c-scale-to-original",
          isSelect: false,
        },
        {
          index: 3,
          lable: "清除",
          iconName: "el-icon-delete",
          isSelect: false,
        },
      ],
    };
  },
  computed: {
    PoinyQueryShow: function () {
      return store.state.toolBar[9];
    },
    vectorShow: function () {
      return store.state.cockpit_vector.title ||
        store.state.cockpit_vector.goitem
        ? !store.state.viewer_flag
        : true;
    },
  },
  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);
            } else {
              this.addGeometrys();
            }
            break;
          }
        }
      }
    },
    PoinyQueryShow(val) {
      if (!this.inited) {
        this.inited = !this.inited;
        viewer.entities.removeAll();
        this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        dataSourceLayer = new Cesium.CustomDataSource("query");
        viewer.dataSources.add(dataSourceLayer);
      }
    },
  },
  mounted() {
    this.$nextTick((res) => {
      query_click = new Cesium.CustomDataSource("query_click");
      viewer.dataSources.add(query_click);

      manager_layer_png = new Cesium.CustomDataSource("manager_layer_png");
      viewer.dataSources.add(manager_layer_png);
    });
  },
  methods: {
    isArray2D(arr) {
      // 首先检查arr是否是数组
      if (!Array.isArray(arr)) {
        return false;
      }

      // 检查数组中的每个元素是否也是数组
      for (let i = 0; i < arr.length; i++) {
        if (!Array.isArray(arr[i])) {
          return false;
        }
      }

      // 如果所有元素都是数组，那么arr是二维数组
      return true;
    },
    toggleVisibility() {
      this.removeMapLayerQuery();
      this.remove_query_click();
      store.setToolBarAction(9);
      tdsy.remove(false);
    },
    addGeometrys(fill) {
      viewer.entities.removeAll();
      dataSourceLayer.entities.removeAll();
      let geoms = this.queryResultsGeom[this.activeLayerId];
      let parts = this.queryResultsGeomPart[this.activeLayerId];
      for (let i = 0; i < geoms.length; i++) {
        let cur = geoms[i];
        let part = parts[i];
        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);
          }
          if (fill) {
            viewer.entities.add({
              polyline: new Cesium.PolylineGraphics({
                positions: Cesium.Cartesian3.fromDegreesArray(points),
                width: 3,
                material: Cesium.Color.BLUE.withAlpha(0.9),
                clampToGround: true,
              }),
              polygon: {
                //高程
                hierarchy: new Cesium.PolygonHierarchy(
                  Cesium.Cartesian3.fromDegreesArray(points)
                ),
                classificationType: Cesium.ClassificationType.BOTH,
                clampToGround: false,
                material: Cesium.Color.RED.withAlpha(0.3),
                // material: videoElement,
                // perPositionHeight: true
              },
            });
          } else {
            viewer.entities.add({
              polyline: new Cesium.PolylineGraphics({
                positions: Cesium.Cartesian3.fromDegreesArray(points),
                width: 3,
                material: Cesium.Color.BLUE.withAlpha(0.9),
                clampToGround: true,
              }),
            });
          }
        }
        // viewer.flyTo(viewer.entities);
      }
    },
    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);
        }
      } else {
        this.$message({
          message: "空间范围为空！",
          type: "warning",
        });
      }
    },
    handleTabClick(item, a) {
      this.activeLayerId = item.name;
    },
    // 设置数据
    setData() {
      dataSourceLayer = new Cesium.CustomDataSource("query");
      viewer.dataSources.add(dataSourceLayer);
      this.activeLayerId = "0";
      this.queryResults = {};
      this.queryResultsGeom = {};
      this.queryResultsGeomPart = {};
    },
    /**
     * 左键点击查询图层
     */
    async mapLayerQuery(movement) {
      let that = this;
      that.activeLayerId = "0";
      that.layerList = [];
      that.layersData = [];
      this.remove_query_click();
      let scene = viewer.scene;
      viewer.entities.removeAll();
      dataSourceLayer.entities.removeAll();
      //拾取模型
      let pickedFeature = scene.pick(movement.position);
      if (
        scene.pickPositionSupported &&
        Cesium.defined(pickedFeature) &&
        pickedFeature != null &&
        pickedFeature.primitive
      ) {
        this.pickClick(pickedFeature);
      } else {
        this.pickPosition(movement);
      }
    },
    async pickClick(pickedFeature) {
      let that = this;
      let eneityName = pickedFeature.primitive.name;
      let Pid = "";
      var tempArr = [];
      // "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);
          let str1 = eneityName.match(/@(\S*)#/)[1];
          let str2 = eneityName.match(/(\S*)@/)[1];
          let str3 = str1 + ":" + str2;
          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]);
            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; i++) {
                  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.loading = true;
      that.queryByPickFeature(pickedFeature, function (result, Fields) {
        that.loading = false;
        if (result != null && result.features[0].fieldNames) {
          result.features[0].fieldNames.forEach((fieldName, i) => {
            const Field = Fields.find((c) => c.FieldEn == fieldName);
            let v = result.features[0].fieldValues[i];
            if (!isNaN(parseFloat(v))) {
              v = Math.round(parseFloat(v) * 100) / 100;
            }
            that.layersData.push({
              label: Field ? Field.FieldCn : fieldName,
              value: v,
            });
          });
        } else {
          that.layersData = [];
        }
      });
    },
    async pickPosition(movement) {
      let that = this;
      //拾取图层
      // let pickRay = viewer.camera.getPickRay(movement.position);
      // let artesian3 = viewer.scene.globe.pick(pickRay, viewer.scene);
      let artesian3 = viewer.scene.pickPosition(movement.position);
      let xy = that.cartesian3ToWGS84(artesian3);
      //TODO wanger 分图层查询
      for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
        let obj = store.state.vectorlayerlist[i];
        if (!obj.source) {
          continue;
        }
        let queryByIDParameters = {
          getFeatureMode: "BUFFER",
          // getFeatureMode: "SPATIAL",
          spatialQueryMode: "INTERSECT",
          datasetNames: obj.source.split(","),
          geometry: {
            parts: [1],
            points: [{ y: xy.lat, x: xy.lng }],
            type: "POINT",
          },
          bufferDistance: 0.00005,
          hasGeometry: true,
        };
        let e;

        if (obj.type == "S3M") {
          e = await that.mapQuery(
            window.baseModelQueryLayer,
            queryByIDParameters
          );
        } else {
          e = await that.mapQuery(
            that.calcIserverURI(obj.url),
            queryByIDParameters
          );
        }

        // 结果高亮

        this.highlightResultsPng(xy.lng, xy.lat);
        if (e && e.totalCount > 0) {
          that.layerList.push(store.state.vectorlayerlist[i]);
          let queryData = [];
          let geoms = [];
          let parts = [];
          let parseJson = JSON.parse(obj.legend);
          for (let u = 0; u < e.features.length; u++) {
            let cur = [];
            var linSAr = JSON.parse(JSON.stringify(e.features[u]));
            function condition(ci) {
              return ci.status != undefined && ci.status;
            }
            if (e.features[u].fieldNames) {
              linSAr.fieldNames.forEach((fieldName, i) => {
                let perjson = parseJson.filter(
                  (p) => p.fieldname.toUpperCase() == fieldName
                );
                if (perjson.length > 0) {
                  var show = condition(perjson[0]);
                  var order = perjson[0].order || linSAr.fieldNames.length;
                  if (fieldName != perjson[0].fieldaliasname)
                    fieldName = perjson[0].fieldaliasname;
                }
                if (show) {
                  let v = linSAr.fieldValues[i];
                  if (v != "" && !isNaN(parseFloat(v))) {
                    v = Math.round(parseFloat(v) * 100) / 100;
                  }
                  cur.push({ name: fieldName, value: v, order });
                }
              });
            } else {
              that.$message({
                message: "查询结果为空！",
                type: "warning",
                customClass: "messageIndex",
              });
            }

            //排序
            cur.sort((a, b) => a.order - b.order);
            let urlNew = obj.url + ".json";
            let resNew = await axios.get(urlNew);
            let serCode = resNew.data.prjCoordSys.epsgCode;
            let points = [];
            for (let y = 0; y < e.features[u].geometry.points.length; y++) {
              let c = {};
              if (serCode == 3857) {
                c = that.cartesianToCartographic84(
                  e.features[u].geometry.points[y].x,
                  e.features[u].geometry.points[y].y
                );
              } else {
                c = e.features[u].geometry.points[y];
              }
              points.push([c.x, c.y]);
            }
            parts.push(e.features[u].geometry.parts);
            geoms.push(points);
            queryData.push(cur);
          }

          that.queryResultsGeomPart[obj.id] = parts;
          that.queryResults[obj.id] = queryData;
          that.queryResultsGeom[obj.id] = geoms;
        }
      }
      if (that.layerList.length > 0) {
        that.activeLayerId = that.layerList[0].id;
      } else {
        that.$message({
          message: "查询结果为空！",
          type: "warning",
          customClass: "messageIndex",
        });
      }
    },
    highlightResultsPng(longitude, latitude) {
      manager_layer_png.entities.add({
        name: "manager_layer_png",
        position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 40),
        billboard: {
          // 图像地址，URI或Canvas的属性
          image: "./static/images/overview/go.png",
          height: 34,
          width: 36,
          scale: 1.0,
          zIndex: 2,
          show: true,
        },
      });
    },
    addLayerList(label) {
      if (this.layerList.findIndex((a) => a.label == label) >= 0) return;
      let layers = store.state.vectorlayerlist.filter(
        (element) => element.label === label
      );
      if (layers.length > 0) {
        this.activeLayerId = layers[0].id;
        this.layerList.push(layers[0]);
      }
    },
    /**
     * 左键点击模型查询
     */
    mapModelQuery(movement) {
      this.activeLayerId = "0";
      this.layerList = [];
      this.layersData = [];
      viewer.entities.removeAll();
      dataSourceLayer.entities.removeAll();
      let title;
      if (store.state.checkedData) title = store.state.checkedData.title;
      //  超图分层分户
      if (title == "分层分户" || title == "8号楼-谷") {
        let id = handModel(movement);
      } else {
        handnew(movement);
      }
      let newArr = [];
      GetHouseInfo({ id: "2c01647f-4533-4472-b20b-f5caa4c705b0" }).then(
        (res) => {
          for (const [key, value] of Object.entries(res.data)) {
            newArr.push({ name: keyName[key], value: value });
          }
          this.addLayerList(title);
          this.queryResults[this.activeLayerId] = [newArr];
          this.queryResultsGeom[this.activeLayerId] = [];
        }
      );
    },
    mapQuerys(queryName) {
      this.setData();
      let that = this;
      this.handler.setInputAction(function (movement) {
        that[queryName](movement);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      this.handler.setInputAction(function () {
        that.removeMapLayerQuery();
        clearTranslate();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },
    /**
     * 超图
     * 根据返回的三维对象查询数据信息
     *
     * @param {*} param
     */
    async queryByPickFeature(param, completed) {
      if (param.primitive) {
        let dataUrl = "";
        let datasourceName = "";
        let Fields = [];
        for (const layerData of this.layersDataUrl) {
          for (const datasource of layerData.datasources) {
            if (datasource.Name3D == param.primitive.name) {
              dataUrl = layerData.url;
              datasourceName = datasource.DataName;
              Fields = datasource.Fields;
              break;
            }
          }
        }

        let queryByIDParameters = {
          getFeatureMode: "ID",
          datasetNames: [datasourceName],
          ids: [param.id],
          hasGeometry: "false",
        };
        if (!dataUrl) {
          completed(null);
        } else {
          let e = await this.mapQuery(dataUrl, queryByIDParameters);
          if (completed) {
            completed(e, Fields);
          }
        }
      }
    },
    async mapQuery(url, queryObj) {
      let response = await axios.post(url, queryObj);
      if (response.data.featureCount > 0) {
        return response.data;
      } else {
        return null;
      }
    },
    convertCoordinates(coordArray) {
      return coordArray.map((coord) => [coord.x, coord.y]);
    },
    // 取消左键点击查询
    removeMapLayerQuery() {
      this.queryResults = {};
      this.queryResultsGeom = {};
      this.queryResultsGeomPart = {};
      this.layerList = [];
      viewer.entities.removeAll();
      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
      dataSourceLayer.entities.removeAll();
      viewer.dataSources.remove(dataSourceLayer);
    },
    /**
     * 笛卡尔坐标系转WGS84坐标系(经纬度)
     * @author
     * @param {object} point 点,笛卡尔坐标{x:x,y:y,z:z}
     * @returns {object} -lat: lat, lng: lng, alt: alt
     */
    cartesian3ToWGS84(point) {
      var cartesian3 = new Cesium.Cartesian3(point.x, point.y, point.z);
      var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
      var lat = Cesium.Math.toDegrees(cartographic.latitude);
      var lng = Cesium.Math.toDegrees(cartographic.longitude);
      var alt = cartographic.height;
      return {
        lat: lat,
        lng: lng,
        alt: alt,
      };
    },
    /**
     * 墨卡托坐标系转WGS84坐标系(经纬度)
     * @author
     * @param number x
     * @param number y
     * @returns {object} x: x, y: y, z: z
     */
    cartesianToCartographic84(x, y) {
      let cartesian3InMercator = new Cesium.Cartesian3(x, y, 0);
      let mercator = new Cesium.WebMercatorProjection();
      let p = mercator.unproject(cartesian3InMercator);
      // 将墨卡托坐标转换为WGS84坐标
      // let cartesian3InWGS84 =
      //   Cesium.Ellipsoid.WGS84.cartesianToCartographic(mercator.unproject(cartesian3InMercator));
      return {
        x: Cesium.Math.toDegrees(p.longitude),
        y: Cesium.Math.toDegrees(p.latitude),
        z: p.height,
      };
    },
    calcIserverURI(url) {
      let uriArr = url.split("/");
      uriArr[5] = uriArr[5].replace("map-", "data-");
      uriArr[7] = "data";
      uriArr[8] = "featureResults.rjson?returnContent=true";
      return uriArr.join("/");
    },
    remove_query_click() {
      for (var i = 0; i < 10; i++) {
        query_click.entities.values.forEach((res) => {
          query_click.entities.remove(res);
        });
      }

      // 图标
      var entities = manager_layer_png.entities.values;
      for (var i = entities.length - 1; i >= 0; i--) {
        manager_layer_png.entities.remove(entities[i]);
      }
    },
    //地图数据查询事件
    changleQueryItem(item) {
      switch (item.index) {
        case 1: {
          this.mapQuerys("mapLayerQuery"); //图层点击事件
          this.remove_query_click();
          viewer.entities.removeAll();
          break;
        }
        case 2: {
          this.mapQuerys("mapModelQuery");
          break;
        }
        case 3: {
          this.removeMapLayerQuery(); //清除
          clearTranslate();
          pick_cockpit_vector.clear_data(); //矢量拾取清除
          this.$refs.MultiLevelQuery.clear_data(); //多级查询

          this.remove_query_click();

          break;
        }
        case 4: {
          //驾驶舱矢量数据点选查询
          pick_cockpit_vector.init_handler();
          break;
        }
        case 5: {
          //联级查询
          this.$refs.MultiLevelQuery.init_handler();
          break;
        }
        default:
          break;
      }
    },
  },
  beforeDestroy() {
    this.removeMapLayerQuery();
    clearTranslate();
  },
};
</script>
<style>
.sm-function-module-content-btn {
  text-align: center;
  padding-top: 5px;
}

.flyBtn2 {
  position: absolute;
  right: 47px;
}

.el-tabs__item {
  color: white !important;
}

.sm-function-module-content-tabs {
  height: 45px;
  padding: 1px 5px 0px 5px;
  /* margin-top: 4rem; */
}

.sm-function-module-content-table {
  height: 564px;
  overflow-y: auto;
  padding: 1px 5px 0px 5px;
}

.sm-function-module-query {
  /* padding: 5px 10px; */
  overflow: hidden;
  max-height: 700px;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;

  /* IE 10+ */
  @media (max-width: 1000px) {
    margin: 0.8rem 0;
    padding: 0 15px;
  }

  @media (max-width: 750px) {
    margin: 0.5rem 0;
    padding: 0 10px;
    max-height: 410px;
  }

  @media (max-height: 480px) {
    margin: 0.5rem 0;
    padding: 0 15px;
    max-height: 420px;
    max-width: 280px;
  }

  @media (max-height: 300px) {
    margin: 0.5rem 0;
    padding: 0 10px;
    max-height: 280px;
    max-width: 250px;
  }

  @media (max-height: 250px) {
    max-height: 240px;
  }
}
</style>
<style lang="scss" scoped>
@import "clickQuery";

/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: 1px solid #ebeef5;
}

.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-collapse-item__header {
  background-color: transparent !important;
  color: rgb(217, 237, 254) !important;
}

/deep/ .el-collapse {
  border: none;
  /* border-top: 1px solid #EBEEF5; */
  /* border-bottom: 1px solid #EBEEF5; */
}

/deep/ .el-collapse-item__content {
  padding-bottom: 0px;
}
</style>