综合展示分析

Surpriseplus

2022-12-13 950c7bf191b173b45eedd08fd2d576bb093186ca

综合展示分析

 public/config/config.js

@@ -7,7 +7,6 @@
var wnsUrl = 'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns';
//gisserver
var gisServerUrl = 'http://192.168.20.39:9055/gisserver';

//综合展示
window.sceneConfig = {
  // sdk许可

 src/assets/lang/en.js

@@ -417,7 +417,6 @@
    plotting: 'Plotting',
    layer: 'Layer Manager',
    release: 'Scene Release',
    export: 'Layer Export',
    split: 'Split Screen',
    twod: '2D',
    threed: '3D',

 src/assets/lang/zh.js

@@ -414,7 +414,6 @@
    plotting: '标绘',
    layer: '图层管理',
    release: '场景发布',
    export: '场景导出',
    split: '分屏',
    twod: '二维',
    threed: '三维',

 src/components/MapView/mapMenuPop.vue

@@ -7,7 +7,7 @@
          @click="setTableChange(item)"
          class="leftBoxLi"
        >
          {{ item.tabDesc }}
          {{ item.label }}
        </li>
      </ul>
    </div>
@@ -107,6 +107,7 @@
      this.listdata.wkt = this.$store.state.mapMenuShpFile;
      this.querylayer = this.$store.state.mapSpaceQueryLayer;
      this.option = this.$store.state.mapSpaceQueryLayer;
      debugger;
      this.listdata.name = this.option[0].entity;

      this.getTableDateHidder();

 src/components/MapView/mapMenuTop.vue

@@ -89,12 +89,14 @@
      layerData: [
        {
          id: 1,
          label: '基础数据',
          tabDesc: '基础数据',
          value: 'BD',
          children: [],
        },
        {
          id: 2,
          label: '业务数据',
          tabDesc: '业务数据',
          value: 'BS',
          children: [],
@@ -129,7 +131,7 @@
      ],
      defaultProps: {
        children: 'children',
        label: 'tabDesc',
        label: 'label',
      },
      graphicLayer: null,
    };
@@ -161,6 +163,7 @@
      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        val_Data.label = val_Data.tabDesc + '(' + val_Data.tab + ')';
        if (option[i].ns == 'bd') {
          this.layerData[0].children.push(val_Data);
        } else {

 src/components/MapView/mapSpaceTop.vue

@@ -39,12 +39,14 @@
      layerData: [
        {
          id: 1,
          label: '基础数据',
          tabDesc: '基础数据',
          value: 'BD',
          children: [],
        },
        {
          id: 2,
          label: '基础数据',
          tabDesc: '业务数据',
          value: 'BS',
          children: [],
@@ -52,7 +54,7 @@
      ],
      defaultProps: {
        children: 'children',
        label: 'tabDesc',
        label: 'label',
      },
      mapSpaceQueryLayer: null,
    };
@@ -71,6 +73,7 @@
      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        val_Data.label = val_Data.tabDesc + '(' + val_Data.tab + ')';
        if (option[i].ns == 'bd') {
          this.layerData[0].children.push(val_Data);
        } else {

 src/components/mapviewTwo.vue

@@ -157,12 +157,19 @@
    },
    setLayerVisible() {
      if (this.isActive == true) {
        this.vectorLayer.setVisible(true);
        this.imageLayer.setVisible(false);
        MapViewer.imageryLayers.get(2).show = true;
        MapViewer.imageryLayers.get(1).show = false;
      } else {
        this.vectorLayer.setVisible(false);
        this.imageLayer.setVisible(true);
        MapViewer.imageryLayers.get(2).show = false;
        MapViewer.imageryLayers.get(1).show = true;
      }
      // if (this.isActive == true) {
      //   this.vectorLayer.setVisible(true);
      //   this.imageLayer.setVisible(false);
      // } else {
      //   this.vectorLayer.setVisible(false);
      //   this.imageLayer.setVisible(true);
      // }
    },
    close() {
      this.$emit('close', false);
@@ -177,25 +184,68 @@
    },
    // 初始化地图
    initMap() {
      this.vectorLayer = new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
      // this.vectorLayer = new TileLayer({
      //   source: new XYZ({
      //     url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
      //   }),
      // });
      // this.imageLayer = new TileLayer({
      //   source: new XYZ({
      //     url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
      //   }),
      // });
      // this.map = new Map({
      //   target: 'map',
      //   layers: [this.imageLayer, this.vectorLayer],
      //   view: new View({
      //     center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
      //     zoom: 4,
      //     projection: 'EPSG:3857',
      //   }),
      // });
      //地图初始化
      window.SG = new SmartEarth.SGWorld('map', {
        licenseServer: window.sceneConfig.licenseServer,
      });
      this.imageLayer = new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
        }),

      window.MapViewer = window.SG._Viewer;

      //定位
      SG.Navigate.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
      });
      this.map = new Map({
        target: 'map',
        layers: [this.imageLayer, this.vectorLayer],
        view: new View({
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4,
          projection: 'EPSG:3857',
        }),
      });

      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );

      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtVecBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );
      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtAnnoLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
        })
      );
      if (this.wmsLayer == null) {
        this.getWmsLayerUrl(this.layerFlag);
      }
@@ -205,7 +255,7 @@
      this.isMenuLayer = false;
      this.setLayerVisible();
      if (this.wmsLayer != null) {
        this.map.removeLayer(this.wmsLayer);
        this.wmsLayer.deleteObject();
        this.wmsLayer = null;
      }
      var value;
@@ -216,23 +266,42 @@
      } else if (res == 5) {
        value = 'qqxm';
      }
      this.wmsLayer = new Image({
        source: new ImageWMS({
          ratio: 1,
          url: gisServerUrl + '/wmsserver/' + value,
          crossOrigin: 'anonymous',
          //serverType: 'geoserver',
          params: {
            VERSION: '1.3.0',
            FORMAT: 'image/png',
            LAYERS: '',
            srs: 'EPSG:900913',
            tiled: true,
            styles: '',
      var urls = gisServerUrl + '/wmsserver/' + value;
      console.log('hehe', urls);
      this.wmsLayer = SG.Creator.createImageryProvider(
        'gisserver',
        'wms',
        {
          url: urls,
          layers: '',
          parameters: {
            format: 'image/png',
            transparent: true,
          },
        }),
      });
      this.map.addLayer(this.wmsLayer);
        },
        '0',
        undefined,
        true,
        ''
      );
      //
      // this.wmsLayer = new Image({
      //   source: new ImageWMS({
      //     ratio: 1,
      //     url: gisServerUrl + '/wmsserver/' + value,
      //     crossOrigin: 'anonymous',
      //     //serverType: 'geoserver',
      //     params: {
      //       VERSION: '1.3.0',
      //       FORMAT: 'image/png',
      //       LAYERS: '',
      //       srs: 'EPSG:900913',
      //       tiled: true,
      //       styles: '',
      //     },
      //   }),
      // });
      // this.map.addLayer(this.wmsLayer);
    },
  },
  beforeDestroy() {},
@@ -250,7 +319,7 @@

.header_box {
  height: 40px;
  background: rgb(59, 77, 110);
  background: #454545;
  padding: 0 20px;
  display: flex;


 src/views/Synthesis/LeftMenu.vue

@@ -10,6 +10,7 @@
      <div>{{ $t(item.label) }}</div>
    </div>
    <mapinfo ref="mapinfo" />
    <input type="file" accept=".kml" class="file" style="display: none" />
  </div>
</template>

@@ -342,6 +343,7 @@
          this.setMeasurement(res.id);
          break;
        case 'h':
          sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
          this.setPlot(res.id);
          break;
      }
@@ -376,10 +378,82 @@
            function (entity) {}
          );
          break;
        case 'h5':
          this.handleOpenClick();
          break;
        case 'h6':
          this.handleSaveClick();
          break;
        case 'h7':
          sgworld.Creator.SimpleGraphic.clear();
          break;
      }
    },
    handleSaveClick() {
      let funDownload = function (content, filename) {
        let eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        // 字符内容转变成blob地址
        let blob = new Blob([content]);
        eleLink.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      };
      let entities = new Cesium.EntityCollection();
      let dataSources = sgworld.Viewer.dataSources;
      for (let i = 0, j = dataSources.length; i < j; i++) {
        for (let v of dataSources.get(i).entities.values) {
          entities.add(v);
        }
      }
      for (let v of sgworld.Viewer.entities.values) {
        entities.add(v);
      }

      if (entities.values.length) {
        console.log(sgworld.Viewer.entities);

        let promise = Cesium.exportKml({ entities: sgworld.Viewer.entities });
        console.log(entities);
        // let promise = Cesium.exportKml({ entities: entities });
        promise.then(function (e) {
          funDownload(e.kml, new Date().getTime() + '.kml');
        });
      } else {
        alert('当前场景没有entities实体');
      }
    },
    handleOpenClick() {
      // let that = this;
      let fileInput = document.querySelector('.file');
      fileInput.onchange = function (evt) {
        let files = evt.target.files;
        if (files.length > 0) {
          let file = evt.target.files[0];

          let fileReader = new FileReader();
          fileReader.readAsDataURL(file);
          fileReader.onload = () => {
            sgworld.Viewer.dataSources
              .add(
                Cesium.KmlDataSource.load(fileReader.result, {
                  camera: sgworld.Viewer.scene.camera,
                  canvas: sgworld.Viewer.scene.canvas,
                })
              )
              .then((KmlDataSource) => {
                console.log(KmlDataSource);
                // let entities = kmlDataSource.entities;
              });
          };
        }
        // fileInput.value = null;
      };
      fileInput.click();
    },
    setMeasurement(res) {
      switch (res) {
@@ -591,10 +665,9 @@
            this.addterrainSectionAnalysis();
          }
          break;

        case 'd5':
          if (window.AnalysisFlood) {
            this.clear(res.id);
            this.clear(res);
          } else {
            this.addAnalysisFlood();
          }
@@ -620,6 +693,42 @@
            }
          );
          break;
        case 'd10':
          if (window.TerrainFlattening) {
            window.TerrainFlattening.remove();
            window.TerrainFlattening = null;
          } else {
            sgworld.Creator.createSimpleGraphic(
              'polygon',
              {
                clampToGround: true,
              },
              function (entity) {
                var positions = entity.polygon.hierarchy.getValue().positions;
                sgworld.Creator.SimpleGraphic.remove(entity.id);
                window.TerrainFlattening =
                  sgworld.Creator.createTerrainModifier(
                    '地形压平',
                    positions,
                    10,
                    {}
                  );
              }
            );
          }
          break;
        case 'd11':
          if (window.Excavation) {
            window.Excavation.clear();
            window.Excavation = null;
          } else {
            window.Excavation = sgworld.Analysis.TerrainExcavation(
              10,
              {},
              function () {}
            );
          }
          break;
      }
    },
    clear(res) {
@@ -635,9 +744,8 @@
          }
          break;
        case 'd5':
          window.AnalysisFlood && window.AnalysisFlood.endWater();
          window.AnalysisFlood.endWater();
          window.AnalysisFlood = undefined;

          break;
      }
    },
@@ -673,7 +781,7 @@
              skin: 'other-class',
              content: '/SmartEarthSDK/Workers/analysis/AnalysisDXPM.html',
              end: () => {
                this.dxpmIndex && this.clear('4');
                this.dxpmIndex && this.clear('d4');
              },
            });
          } else {

 src/views/Thematic/index.vue

@@ -1,6 +1,138 @@
<template>
  <div class="themaic">
    <el-card style="height: 100%">
    <div class="headera-title">
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <label class="th_title">{{ $t('themaic.name') }}</label>
          </el-form-item>
          <el-form-item>
            <el-input
              :placeholder="$t('common.pleaseInput')"
              suffix-icon="el-icon-search"
              v-model="input3"
            />
          </el-form-item>
          <el-form-item>
            <div class="title_count" style="color: white">
              {{ $t('themaic.find') }}
              <label style="magin: 0% 15px">{{ listcount }}</label>
              {{ $t('themaic.record') }}
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="header_right">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item :label="$t('themaic.maptltle')">
            <el-select
              v-model="selvalue"
              class="m-2"
              placeholder="Select"
              style="width: 150px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="margin-right: 32px;">
              <label style="margin-right: 10px; color: white"
                >{{ $t('themaic.sortbytime') }}:</label
              >

              <i
                @click="changetime(1)"
                :class="{ active: timeindex == 1 }"
                class="el-icon-caret-bottom"
              ></i>

              <i
                @click="changetime(2)"
                :class="{ active: timeindex == 2 }"
                class="el-icon-caret-top"
              ></i>
            </div>
          </el-form-item>
          <el-form-item>
            <div>
              <label style="margin-right: 10px; color: white"
                >{{ $t('themaic.sortbyviews') }}:</label
              >

              <i
                @click="changeChecked(1)"
                :class="{ active: checkindex == 1 }"
                class="el-icon-caret-bottom"
              ></i>

              <i
                @click="changeChecked(2)"
                :class="{ active: checkindex == 2 }"
                class="el-icon-caret-top"
              ></i>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="themaic_content">
      <div
        @click="showThematic(item)"
        v-for="(item, i) in middleList"
        class="midedle_div"
        :key="i"
      >
        <el-card class="middle_card">
          <table>
            <tr>
              <td>
                <div class="midddle_title">
                  <div class="t1">{{ item.name }}</div>
                  <div>
                    <label class="t2">{{ item.time }}</label
                    ><label class="t2">浏览{{ item.count }}次</label>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div
                  class="middle_image"
                  :style="{
                    background: 'url(' + item.url + ') no-repeat center',
                    'background-size': '100% 100%',
                  }"
                ></div>
              </td>
            </tr>
            <tr>
              <td></td>
            </tr>
          </table>
        </el-card>
      </div>
    </div>
    <div style="display: flex; justify-content: center">
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <el-card style="height: 100%">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="th_title">{{ $t('themaic.name') }}</div>
@@ -95,7 +227,7 @@



           </div> -->
           </div>

            <table>
              <tr>
@@ -126,13 +258,7 @@
          </el-card>
        </div>
      </el-card>
      <el-pagination
        layout="prev, pager, next, jumper"
        :total="pagesize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
      -->
    <el-dialog
      class="themaic_dialog"
      :modal-append-to-body="true"
@@ -142,7 +268,11 @@
      width="99%"
      :before-close="handleClose"
    >
      <map-View @close="close" :typeIndex="typeIndex"></map-View>
      <map-View
        v-if="dialogVisible"
        @close="close"
        :typeIndex="typeIndex"
      ></map-View>
    </el-dialog>
  </div>
</template>
@@ -157,7 +287,8 @@
    return {
      dialogVisible: false,
      input3: '',
      listcount: 7,
      count: 0,
      listcount: 0,
      checkindex: 1,
      timeindex: 1,
      pagesize: 10,
@@ -230,7 +361,10 @@
      typeIndex: '',
    };
  },
  mounted() {},
  mounted() {
    this.count = this.middleList.length;
    this.listcount = this.middleList.length;
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
@@ -274,94 +408,207 @@
    },
    showThematic(res) {
      this.typeIndex = res.index;
      this.dialogVisible = true;

      // var url = "http://localhost/" + res.pop;
      // window.open(
      //   url,
      //   "newwindow",
      //   "height=750, width=1400, top=150,left=400 "
      // );
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
<style lang="less" scoped>
.themaic {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #303030;

  .headera-title {
    width: calc(100% - 2px);
    height: 70px;
    display: flex;
    justify-content: space-between;
    background: #353539;
    .th_title {
      width: 81px;
      height: 20px;
      font-size: 21px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #009cff;
      line-height: 49px;
      margin-left: 30px;
      bottom: 24px;
    }

    .title_count {
      height: 18px;
      font-size: 19px;
      font-family: Source Han Sans CN;
      font-weight: 200;
      color: #ffffff;
    }
    .header_right {
      float: right;
      margin-right: 30px;

      height: 100%;
      width: auto;
    }
    .active {
      color: #409eff;
    }
  }
  .themaic_content {
    width: calc(100% - 54px);
    height: 80%;
    display: flex;
    flex-flow: row wrap;

    justify-content: flex-start;
    padding: 17px 27px 0px 27px;

    .midedle_div {
      width: 456px;
      height: 303px;
      margin-right: 10px;
      .t1 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
      }
      .middle_image {
        height: 220px;
        width: 415px;
      }
      .t2 {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
      }
      .midddle_title {
        display: flex;
        justify-content: space-between;
      }
    }
    .themic_middle_card {
      border: transparent;
    }
    /deep/.el-card {
      background: #454545;
      border: 1px solid #454545;
    }
  }
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #409eff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
  }
  /deep/.el-form-item__content {
    line-height: 70px;
  }
  /deep/ .el-input__inner {
    border: 1px solid white;
    color: white;
  }
  /deep/.el-form-item__label {
    color: white;
    line-height: 70px;
  }
  /deep/ .el-form--inline .el-form-item {
    margin-right: 32px;
  }
}

.themaic .el-divider--horizontal {
  margin: 10px 0 !important;
}
// .themaic .el-divider--horizontal {
//   margin: 10px 0 !important;
// }

.themaic .th_title {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #3b4d6e;
}
// .themaic .th_title {
//   font-size: 22px;
//   font-family: Microsoft YaHei;
//   font-weight: bold;
//   color: #3b4d6e;
// }

.radiusSearch .el-input__wrapper {
  border-radius: 50px;
}
// .radiusSearch .el-input__wrapper {
//   border-radius: 50px;
// }

.themaic .active {
  color: #409eff;
}
// .themaic .active {
//   color: #409eff;
// }

.themaic .themic_middle_card {
  border: transparent;
}
// .themaic .themic_middle_card {
//   border: transparent;

.themaic .themic_middle_card .el-card__body {
  padding: 0px;
}
// }

.themaic .midedle_div {
  width: 23.5%;
  height: 250px;
  float: left;
  margin-right: 1%;
  margin-bottom: 1%;
  position: relative;
}
// .themaic .themic_middle_card .el-card__body {
//   padding: 0px;
// }

.themaic .midedle_div .middle_card {
  width: 100%;
  height: 100%;
}
// .themaic

.themaic .midedle_div .middle_card .el-card__body {
  padding: 10px;
}
// .themaic .midedle_div .middle_card {
//   width: 100%;
//   height: 100%;
// }

.themaic .midedle_div .t1 {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #000000;
}
// .themaic .midedle_div .middle_card .el-card__body {
//   padding: 10px;
// }

.themaic .midedle_div .t2 {
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #3f3f3f;
  margin-right: 10px;
}
// .themaic .midedle_div .t1 {
//   font-size: 16px;
//   font-family: Microsoft YaHei;
//   font-weight: bold;
//   color: #000000;
// }

.themaic .midedle_div .middle_image {
  width: 94%;
  /* margin-top: 10px; */
  height: 73%;
  position: absolute;
}
// .themaic .midedle_div .t2 {
//   font-size: 13px;
//   font-family: Microsoft YaHei;
//   font-weight: 400;
//   color: #3f3f3f;
//   margin-right: 10px;
// }

// .themaic .midedle_div .middle_image {
//   width: 94%;
//   /* margin-top: 10px; */
//   height: 73%;
//   position: absolute;
// }
</style>
<style>
.themaic_dialog .el-dialog {
@@ -386,8 +633,8 @@
  margin: 0;
  font-size: 20px;
}

/* .themaic .el-dialog .el-dialog__header .el-dialog__headerbtn {
  color: #fff;
} */
.el-card {
  background: #303030;
  border: 0px;
}
</style>

 src/views/datamanage/metadataManage.vue

@@ -519,6 +519,7 @@
        return
      }
      this.dialogVisible = true;

      this.attributeData =data.result;

      this.listLoader={