<!--
*@description 
*@fileName mars3d.vue
*@author 大眼睛
*@date 2023/05/17 11:17:24
!-->
<template>
  <div class="mars3dbox">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="服务名称">
        <el-input v-model="page.severName" placeholder="服务名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="info" @click="qingkong">清空</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="18"
        ><div class="bg-purple1">
          <el-table
            :data="tableData"
            border
            :cell-style="{ color: '#fff' }"
            :header-cell-style="{ color: '#fff' }"
            style="width: 100%; margin-top: 0.625rem"
            height="50rem"
          >
            <el-table-column
              prop="id"
              label="ID"
              align="center"
              width="50"
            ></el-table-column>
            <!-- <el-table-column
              prop="tableRef"
              label="列表名称"
              align="center"
            ></el-table-column> -->
            <el-table-column
              prop="severName"
              label="服务名称"
              align="center"
            ></el-table-column>
            <el-table-column prop="spaceType" label="空间参考" align="center">
            </el-table-column>
            <el-table-column prop="severType" label="服务类型" align="center">
            </el-table-column>
            <!-- <el-table-column prop="storeType" label="存储类型" align="center">
            </el-table-column> -->
            <el-table-column
              prop="datasourceType"
              label="数据源类型"
              align="center"
            >
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="{ row }">
                <el-button type="success" @click="addition(row)"
                  >添加图层</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 1.25rem"
            background
            layout="prev, pager, next"
            :page-size="page.size"
            :total="page.total"
            :current-page="page.current"
            @size-change="Sizechange"
            @current-change="Currentchange"
          >
          </el-pagination></div
      ></el-col>
      <el-col :span="6"
        ><div class="bg-purple2">
          <div class="classification">
            <el-button @click="classification" type="primary"
              >新增分类</el-button
            >
          </div>
          <div class="tucshu">
            <el-tree
              :data="data"
              :props="defaultProps"
              ref="menuTree"
              node-key="serverName"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                  <i
                    v-if="data.children !== undefined"
                    class="el-icon-folder"
                  ></i>
                  <i v-else class="el-icon-collection-tag"></i>
                  <span>{{ node.label }}</span>
                </span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-edit"
                    @click.stop="() => edit(node, data)"
                  >
                    修改
                  </el-button>
                  <el-button
                    v-if="!data.children"
                    type="text"
                    size="mini"
                    icon="el-icon-delete"
                    @click.stop="() => remove(node, data)"
                  >
                    删除
                  </el-button>
                </span>
              </span></el-tree
            >
          </div>
        </div></el-col
      >
    </el-row>
    <!-- ---------------添加图层弹窗--------------------------------- -->
    <el-dialog
      title="添加图层"
      :visible.sync="tabledialong"
      width="30%"
      :before-close="handleClose"
      destroy-on-close
    >
      <el-form ref="form" :model="tablefrom" label-width="80px">
        <el-form-item label="上级目录">
          <el-select
            v-model="tablefrom.projectTeamName"
            placeholder="请选择上级目录"
          >
            <el-option
              v-for="(item, index) in treeptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tabledialong = false">取 消</el-button>
        <el-button type="primary" @click="Submission">确 定</el-button>
      </span>
    </el-dialog>
    <!-- ---------------创建分类弹窗------------------------------------ -->
    <el-dialog
      title="创建分类"
      :visible.sync="treedialong"
      width="30%"
      :before-close="handleClose"
      destroy-on-close
    >
      <el-form ref="form" :model="tablefrom" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="treefrom.projectTeamName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="treedialong = false">取 消</el-button>
        <el-button type="primary" @click="treeBtn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------- 修改弹窗------------------------------- -->
    <el-dialog
      title="图层修改"
      :visible.sync="dialogVisible"
      width="90%"
      v-if="dialogVisible"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col :span="14"
          ><div class="mars" id="mars3dContainer"></div
        ></el-col>
        <el-col :span="10">
          <el-radio-group v-model="radio1" style="margin: 30px">
            <el-radio-button label="样式"></el-radio-button>
            <el-radio-button label="视角"></el-radio-button>
          </el-radio-group>
          <el-form
            v-if="radio1 == '样式'"
            ref="form"
            inline
            :model="form"
            label-width="80px"
          >
            <el-form-item label="图层名称">
              <el-input style="width: 250px" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item v-if="form.type == 'geojson'" label="图片地址">
              <el-input
                v-model="form.symbol.styleOptions.image"
                style="width: 250px"
                ><el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="imagebtn"
                ></el-button
              ></el-input>
            </el-form-item>
            <el-form-item v-if="form.type == 'geojson'" label="缩放比例">
              <el-input-number
                v-model="form.symbol.styleOptions.scale"
                style="width: 250px"
                :step="0.01"
                :min="0.1"
                :max="1.0"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="图层显示">
              <el-select
                style="width: 250px"
                v-model="form.show"
                placeholder="请选择"
              >
                <el-option label="是" :value="true"> </el-option>
                <el-option label="否" :value="false"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="当前视角">
              <el-select
                style="width: 250px"
                v-model="form.flyTo"
                placeholder="请选择"
              >
                <el-option label="是" :value="true"> </el-option>
                <el-option label="否" :value="false"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="弹窗样式">
              <el-radio-group v-model="resource" style="margin-top: 12px">
                <el-radio style="color: #fff" label="样式一"></el-radio>
                <el-radio style="color: #fff" label="样式二"></el-radio>
                <el-radio style="color: #fff" label="样式三"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.popup" label="弹窗数据">
              <el-button @click="tableBtnadd" type="primary">添加行</el-button>
              <el-table
                :data="form.popup"
                border
                :cell-style="{ color: '#fff' }"
                :header-cell-style="{ color: '#fff' }"
                style="width: 600px; margin-top: 0.625rem"
                height="300px"
              >
                <el-table-column prop="name" label="数据名">
                  <template slot-scope="{ row }">
                    <el-input
                      v-model="row.name"
                      placeholder="请输入内容"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="field" label="数据值">
                  <template slot-scope="scope">
                    <el-select
                      class="data-table-dropdown"
                      :popper-append-to-body="false"
                      v-model="form.popup[scope.$index].field"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in tableheader"
                        :key="index"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="{ row }">
                    <el-button @click="tableBtnremove(row)" type="primary"
                      >删除行</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
          <el-form v-else ref="form" :model="marsform" label-width="80px">
            <el-form-item label="经度值">
              <el-input v-model="marsform.lng" />
            </el-form-item>
            <el-form-item label="纬度值">
              <el-input v-model="marsform.lat" />
            </el-form-item>
            <el-form-item label="高度值">
              <el-input v-model="marsform.alt" />
            </el-form-item>
            <el-form-item label="方向角">
              <el-input v-model="marsform.heading" />
            </el-form-item>
            <el-form-item label="俯仰角">
              <el-input v-model="marsform.pitch" />
            </el-form-item>
            <el-form-item label="翻滚角">
              <el-input v-model="marsform.roll" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------- 分类修改------------------------------- -->
    <el-dialog
      title="分类修改"
      :visible.sync="fenleidilong"
      width="30%"
      v-if="fenleidilong"
      :before-close="handleClose"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="fenleiname"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fenleidilong = false">取 消</el-button>
        <el-button type="primary" @click="fenleisubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------- 图片选择------------------------------- -->
    <el-dialog
      title="图片选择"
      :visible.sync="imgdilong"
      width="30%"
      v-if="imgdilong"
      :before-close="handleClose"
    >
      <el-upload
        :action="url + '/style/uploadStyleImage'"
        :headers="headers"
        :on-success="onSuccess"
        :on-error="onErroe"
        :show-file-list="false"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <div class="tubiao">
        <div class="tubiao_son" v-for="(item, index) in tubiaourl" :key="index">
          <el-image
            @click="imgbtn(item)"
            style="width: 100%; height: 100%"
            :src="item.networkPath"
            fit="fill"
          >
          </el-image>
          <p class="imgremove" @click="removebtn(item.id)">删除</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="imgdilong = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getApplicationInfo,
  createApplication,
  applicationdelete,
  getProjectName,
  getStyle,
  update,
  list,
  addMarsServer,
  getAllStyleImage,
  deleteIds,
  listData,
  getTableName,
} from "../../api/marsinterface";
import { globalApi } from "../../api/urlPatterns";
export default {
  // 组件传参
  props: {},

  data() {
    return {
      resource: "样式一",
      headers: {
        Authorization: localStorage.getItem("X-Token") || "",
      },
      url: globalApi.BASE_URL,
      radio1: "样式",
      // 地图数据
      map: null,
      marsform: {
        lng: "",
        lat: "",
        alt: "",
        heading: "",
        pitch: "",
        roll: "",
      },
      form: {},
      tubiaourl: [],
      // 页面数据
      dialogVisible: false,
      tabledialong: false,
      treedialong: false,
      fenleidilong: false,
      imgdilong: false,
      tableData: [],
      tablefrom: {},
      page: {
        total: 100, //总数量
        size: 10, //每页数量
        current: 1, //当前页
        severName: "",
      },
      // 树结构数据
      treeptions: [],
      treefrom: {
        name: "",
      },
      tucengId: "",
      fenleiform: {},
      fenleiname: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "serverName",
      },
      // 获取弹窗字典
      shujupage: {
        total: 100, //总数量
        size: 10, //每页数量
        current: 1, //当前页
      },
      tableheader: [],
    };
  },

  // 组件注册
  components: {},

  // 数据监听
  watch: {},

  // 计算属性
  compute: {},
  created() {
    this.getApplicationInfo();
    this.getProjectName();
    this.onLoad(this.page);
    this.getAllStyleImage();
  },
  mounted() {},

  // 方法实现
  methods: {
    // 查询
    onSubmit() {
      this.onLoad(this.page);
    },
    qingkong() {
      this.page.severName = "";
      this.onLoad(this.page);
    },
    // 获取弹窗数据
    listData(tableRef) {
      listData({
        pageSize: this.shujupage.size,
        pageNum: this.shujupage.current,
        tableName: tableRef,
      }).then((res) => {
        if (res.data.code == 200) {
          this.tableheader = Object.keys(res.data.rows[0]);
        }
      });
    },
    // 获取图标地址
    getAllStyleImage() {
      getAllStyleImage().then((res) => {
        if (res.data.code == 200) {
          this.tubiaourl = res.data.data;
        } else {
          this.$message.error("获取失败");
        }
      });
    },
    //图片上传成功
    onSuccess(response, fileList) {
      if (response.code == 200) {
        this.$message.success("上传成功");
        this.getAllStyleImage();
      }
    },
    //      文件上传失败
    onErroe(err, file, fileList) {
      // console.log("失败", err);
    },
    // 删除图标
    removebtn(id) {
      this.$confirm("确认删除？")
        .then((_) => {
          deleteIds(id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getAllStyleImage();
            }
          });
        })
        .catch((_) => {});
    },
    // 获取树
    getApplicationInfo() {
      getApplicationInfo().then((res) => {
        this.data = res.data.data;
      });
    },
    //获取所有数分类
    getProjectName() {
      getProjectName().then((res) => {
        if (res.data.code == 200) {
          this.treeptions = res.data.data;
        }
      });
    },
    // 获取图层列表
    onLoad(page) {
      list({
        pageSize: page.size,
        pageNum: page.current,
        severName: page.severName,
      }).then((res) => {
        if (res.data.code == 200) {
          this.page.total = res.data.total;
          this.tableData = res.data.rows;
        }
      });
    },
    // 初始化地图
    initMap(objectdata) {
      let that = this;
      // 创建三维地球场景
      that.map = new mars3d.Map("mars3dContainer", {
        scene: {
          center: objectdata.center,
          showSun: true,
          showMoon: true,
          showSkyBox: true,
          showSkyAtmosphere: true, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
          fog: true,
          fxaa: true,
          globe: {
            showGroundAtmosphere: true, // 关闭大气（球表面白蒙蒙的效果）
            depthTestAgainstTerrain: false,
            baseColor: "#546a53",
          },
          cameraController: {
            zoomFactor: 3.0,
            minimumZoomDistance: 1,
            maximumZoomDistance: 50000000,
            enableRotate: true,
            enableZoom: true,
          },
        },
        control: {
          baseLayerPicker: true, // basemaps底图切换按钮
          homeButton: true, // 视角复位按钮
          sceneModePicker: true, // 二三维切换按钮
          navigationHelpButton: true, // 帮助按钮
          fullscreenButton: true, // 全屏按钮
          contextmenu: { hasDefault: true }, // 右键菜单
        },
        terrain: {
          url: "//data.mars3d.cn/terrain",
          show: true,
        },
        basemaps: [
          {
            pid: 10,
            name: "天地图",
            icon: "img/basemaps/tdt_vec.png",
            type: "group",
            show: true,
            layers: [
              {
                name: "底图",
                type: "tdt",
                layer: "img_d",
                key: ["b6585bc41ee16251dbe6b1af64f375d9"],
              },
              {
                name: "注记",
                type: "tdt",
                layer: "img_z",
                key: ["b6585bc41ee16251dbe6b1af64f375d9"],
              },
            ],
          },
        ],
        layers: [objectdata],
      });
      // that.jcz(objectdata);
      that.marsform = that.map.getCameraView();
      that.marsform.roll = 0;
      that.map.on("cameraChanged", function (event) {
        that.marsform = that.map.getCameraView({ simplify: false });
      });
      return that.map;
    },
    // 创建图层
    jcz(objectdata) {
      let graphicLayer = new mars3d.layer.GeoJsonLayer(objectdata);
      this.map.addLayer(graphicLayer);
    },
    // 添加图层按钮
    addition(row) {
      this.tablefrom = {
        projectTeamName: "",
        serverStoreId: "",
        serverName: "",
      };
      this.tablefrom.serverStoreId = row.id;
      this.tablefrom.serverName = row.severName;
      this.tabledialong = true;
    },
    // 提交图层
    Submission() {
      let { projectTeamName } = this.tablefrom;
      if (projectTeamName != "") {
        addMarsServer(this.tablefrom).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.getApplicationInfo();
            this.tabledialong = false;
          }
        });
      } else {
        this.$message.error("请选择上级目录");
      }
    },
    // 弹窗添加数据
    tableBtnadd() {
      this.form.popup.push({
        field: "",
        name: "",
      });
    },
    // 删除行
    tableBtnremove(row) {
      this.$confirm("确认删除？")
        .then((_) => {
          this.form.popup.forEach((res, index) => {
            if (res.name == row.name) {
              this.form.popup.splice(index, 1);
            }
          });
        })
        .catch((_) => {});
    },
    // 图层修改提交
    submit() {
      let proper = "";
      if (this.form.popup) {
        proper = this.form.popup;
      }
      if (this.resource == "样式一") {
        this.form.center = this.marsform;
        this.form.popupOptions = "";
        update({
          id: this.tucengId,
          style: JSON.stringify(this.form),
          type: 2,
          updateName: this.form.name,
          properties: JSON.stringify(proper),
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("修改成功");
            this.getApplicationInfo();
            this.fenleidilong = false;
          }
        });
        this.dialogVisible = false;
      } else if (this.resource == "样式二") {
        if (this.form.popupOptions == "") {
          this.form.popupOptions = {
            offsetY: -30,
            template: "",
            horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
            verticalOrigin: "Cesium.VerticalOrigin.CENTER",
          };
        }
        this.form.center = this.marsform;
        this.form.popupOptions.template =
          "<div class='marsBlackPanel animation-spaceInDown'><div class='marsBlackPanel-text'>{content}</div><span class='mars3d-popup-close-button closeButton' >×</span></div>";
        let st = `<div class="popup-container"><div class="popup-title">${this.form.name}</div>`;
        for (let index = 0; index < this.form.popup.length; index++) {
          st += `<div class="popup-item">${this.form.popup[index].name}:{${this.form.popup[index].field}}</div>`;
        }
        st += `</div>`;
        this.form.popup = st;
        update({
          id: this.tucengId,
          style: JSON.stringify(this.form),
          type: 2,
          updateName: this.form.name,
          properties: JSON.stringify(proper),
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("修改成功");
            this.getApplicationInfo();
            this.fenleidilong = false;
          }
        });
        this.dialogVisible = false;
      } else if (this.resource == "样式三") {
        if (this.form.popupOptions == "") {
          this.form.popupOptions = {
            offsetY: -30,
            template: "",
            horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
            verticalOrigin: "Cesium.VerticalOrigin.CENTER",
          };
        }
        this.form.center = this.marsform;
        this.form.popupOptions.template = "{content}";
        let st = `<div class='marsTiltPanel marsTiltPanel-theme-blue'><div class='marsTiltPanel-wrap'><div class='area'>
                <div class='arrow-lt'></div>
                <div class='b-t'></div>
                <div class='b-r'></div>
                <div class='b-b'></div>
                <div class='b-l'></div>
                <div class='arrow-rb'></div>
                <div class='label-wrap'>
                <div class='title'>${this.form.name}</div><div class='label-content'>`;
        for (let index = 0; index < this.form.popup.length; index++) {
          st += `<div class='data-li'><div class='data-label'>${this.form.popup[index].name}:</div><div class='data-value'>{${this.form.popup[index].field}}</div></div>`;
        }
        st += `</div></div></div><div class='b-t-l'></div><div class='b-b-r'></div></div><div class='arrow'></div></div>`;
        this.form.popup = st;
        // console.log(this.form);
        update({
          id: this.tucengId,
          style: JSON.stringify(this.form),
          type: 2,
          updateName: this.form.name,
          properties: JSON.stringify(proper),
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("修改成功");
            this.getApplicationInfo();
            this.fenleidilong = false;
          }
        });
        this.dialogVisible = false;
      }
    },
    // 创建树结构
    classification() {
      this.treedialong = true;
      this.treefrom = {
        projectTeamName: "",
        areaName: localStorage.getItem("areaENName")
      };
    },
    // 创建树提交
    treeBtn() {
      if (this.treefrom.serverName != "") {
        createApplication(this.treefrom).then((res) => {
          if (res.data.code == 200) {
            this.getApplicationInfo();
            this.getProjectName();
            this.$message.success("创建成功");
            this.treedialong = false;
          }
        });
      } else {
        this.$message.error("请填写名称");
      }
    },
    // 分类修改数提交
    fenleisubmit() {
      update({
        id: this.tucengId,
        style: JSON.stringify(this.fenleiform),
        type: 1,
        updateName: this.fenleiname,
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.getApplicationInfo();
          this.fenleidilong = false;
        }
      });
    },
    // 删除树
    remove(node, data) {
      console.log(data.id);
      this.$confirm("确认删除？")
        .then((_) => {
          if (data.id == undefined) {
            applicationdelete(data.ids[0]).then((res) => {
              if (res.data.code == 200) {
                this.$message.success("删除成功");
                this.getApplicationInfo();
              }
            });
          } else {
            applicationdelete(data.id).then((res) => {
              if (res.data.code == 200) {
                this.$message.success("删除成功");
                this.getApplicationInfo();
              }
            });
          }
        })
        .catch((_) => {});
    },
    //修改
    edit(node, data) {
      this.form = {};
      this.fenleiform = {};
      this.fenleiname = "";
      this.tucengId = "";
      getStyle(data.id).then((res) => {
        this.tucengId = res.data.data.id;
        const a = this.$refs.menuTree.getNode(data.serverName);
        if (a.data.children === undefined) {
          getTableName({ id: data.serverStoreId }).then((res) => {
            this.listData(res.data.data.tableRef);
          });
          this.form = JSON.parse(res.data.data.attribute);
          console.log("获取的样式", res.data.data);
          console.log("attribute", this.form);
          if (this.form.popup) {
            this.form.popup = JSON.parse(res.data.data.properties) || [];
          }
          this.dialogVisible = true;
          this.$nextTick(() => {
            this.initMap(this.form);
          });
        } else {
          this.fenleiform = JSON.parse(res.data.data.pattribute);
          this.fenleiname = this.fenleiform.name;
          this.fenleidilong = true;
        }
      });
      // console.log(data);
    },
    // 关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 每页数据量切换
    Sizechange() {},
    // 分页切换
    Currentchange(val) {
      this.page.current = val;
      this.onLoad(this.page);
    },
    // 图片选择
    imagebtn() {
      this.imgdilong = true;
    },
    //点击图标
    imgbtn(item) {
      this.$confirm("确定选择此图标?")
        .then((_) => {
          this.form.symbol.styleOptions.image = item.networkPath;
          this.imgdilong = false;
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped>
.mars3dbox {
  width: 100%;
  height: 880px;
  box-sizing: border-box;
  margin-top: 1.25rem;
  padding-right: 10px;
  padding-left: 20px;
}
.mars3dbox .bg-purple1 {
  height: 100%;
}
.mars3dbox .bg-purple2 {
  height: 100%;
}
.classification {
  height: 50px;
}

/*  地图样式 */
.mars {
  width: 100%;
  height: 650px;
  background: #10a2e1;
}
/* 表格 */
::v-deep.mars3dbox .el-table,
.el-table__expanded-cell {
  background: transparent !important;
}
/* “表格内背景颜色“ */
::v-deep.mars3dbox .el-table th,
::v-deep.mars3dbox .el-table tr,
::v-deep.mars3dbox .el-table td {
  background-color: transparent !important;
}
/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
::v-deep.mars3dbox .el-table tbody tr:hover > td {
  background-color: black !important;
}
/*  树结构修改  */
.mars3dbox .bg-purple2 .tucshu .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  padding-right: 0.5rem;
}
.mars3dbox .bg-purple2 .tucshu {
  width: 400px;
  height: 706px;
  border: 1px solid #777777;
  padding: 10px;
}
.mars3dbox .bg-purple2 ::v-deep .el-tree {
  /* // 白色字体 */
  color: #ffffff;
  /* // 整体背景透明 */
  background: rgba(0, 0, 0, 0);
}
.mars3dbox .bg-purple2 ::v-deep .el-checkbox__inner {
  /*// checkbox 背景透明  */
  background: rgba(0, 0, 0, 0);
}
.mars3dbox .bg-purple2 ::v-deep .el-tree-node__content:hover {
  /* // hover 节点背景色，否则是白色 */
  background: rgba(104, 147, 215, 0.4);
}
.mars3dbox .bg-purple2 ::v-deep .el-tree-node:focus > .el-tree-node__content {
  /*  // focus 节点背景透明，否则是白色 */
  background-color: rgba(0, 0, 0, 0);
}

/* 图层弹窗 */
::v-deep.mars3dbox .el-dialog {
  background: rgb(10, 11, 47) !important;
  border: 0.0625rem solid #10a2e1;
}
::v-deep.mars3dbox .el-dialog__title {
  color: #fff;
  font-size: 14px;
}
/* 图层弹窗关闭按钮 */
::v-deep.mars3dbox .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
/* 图层列表页 */
::v-deep.mars3dbox .el-input__inner {
  background-color: transparent;
  border: 0.0625rem solid #00b2ff;
  color: #fff;
}
::v-deep.mars3dbox .el-form-item__label {
  color: #00b2ff;
  line-height: 40px;
}
::v-deep.mars3dbox .el-button--small {
  padding: 10px 40px;
}
::v-deep.el-input-number .el-input-number__decrease .el-icon-minus {
  line-height: 3;
}
::v-deep.el-input-number .el-input-number__increase .el-icon-plus {
  line-height: 3;
}
/*  选择图片  */
.tubiao {
  margin: 10;
  padding: 10px;
  height: 300px;
  border: 1px solid #266a94;
  border-radius: 8px;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}
.tubiao .tubiao_son {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.tubiao .tubiao_son:hover .imgremove {
  animation-name: animationName;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes animationName {
  0% {
    bottom: -30px;
  }
  100% {
    bottom: 0px;
  }
}

.tubiao .tubiao_son .imgremove {
  position: absolute;
  width: 100%;
  height: 30px;
  background: #ff0000;
  text-align: center;
  line-height: 30px;
  bottom: -30px;
  left: 0;
  cursor: pointer;
  color: #fff;
}
.tubiao::-webkit-scrollbar {
  display: block !important;
}
.tubiao::-webkit-scrollbar-thumb {
  background-color: #5374ae;
  border-radius: 5px;
}

/* 设置滚动条的宽度、高度、背景色和边框样式 */
.tubiao::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(121, 121, 121, 0.5);
  border-radius: 5px;
}
</style>
