坡度分析下载修改

surprise

2023-11-29 36fbd1e5a40e319e6ac5f43d11c99ba4b66e93a3

 src/views/plotting/plottingInquire.vue

@@ -1,27 +1,34 @@
<template>
  <div class="plottingInquire" v-if="isShow">
    <div class="InquireHeader">标绘查询</div>
  <div class="plottingInquire" v-if="isShow" v-drag="true">
    <div class="InquireHeader">
      <div>标绘查询</div>

      <div>
        <el-icon @click="setMenuClose" :size="20" style="cursor: pointer">
          <Close />
        </el-icon>
      </div>
    </div>
    <div class="inquireContent">
      <div class="inquireContent_title">用户新建要素</div>
      <div class="inquireContent_title">
        <div>用户新建要素</div>
      </div>
      <div class="inquireContent_name">
        <div class="plotting_list_tr_name">
          <img
            :src="require(`../../assets/img/${inquireData.icon}`)"
            class="ico"
            alt=""
          /><span>{{ inquireData.name }}</span>
          <img :src="require(`../../assets/img/${inquireData.icon}`)" class="ico" alt />
          <span>
            {{ inquireData.name
            }}
          </span>
        </div>
        <div class="plotting_list_tr_wkt" v-show="geoWktFlag">{{ geoWkt }}</div>
        <div class="plotting_list_tr_btn">
          <div class="tr_btn dw" @click="setLayerLocation()"></div>
          <div class="tr_btn sc" @click="setLayerRemove()"></div>
        </div>
      </div>
      <div class="tab_box">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!-- <el-tab-pane label="图层属性" name="first">User</el-tab-pane> -->
          <el-tab-pane label="查询结果" name="second">
            <div class="inquireContent_input" v-show="pixelIsShow">
@@ -34,56 +41,89 @@
                >
                  <template #append>km</template>
                </el-input>
              </div> -->
              <div class="inquireContent_input_right">
              </div>-->
              <div class="inquireContent_input_right" v-show="!chartIsshow">
                <div class="label">范围框内最大像素值</div>
                <el-select
                  v-model="ScopeBox.pixel"
                  class="m-2"
                  placeholder="像素值"
                  size="small"
                  @change="pixelChange"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                <el-select v-model="ScopeBox.pixel" class="m-2" placeholder="像素值" size="small" @change="pixelChange">
                  <el-option v-for="item in pixeloptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div class="inquireContent_input_right" v-show="chartIsshow">
                <div class="label">节点数</div>
                <el-select v-model="ScopeBox.nodes" class="m-2" placeholder="像素值" size="small" @change="nodesChange">
                  <el-option v-for="item in nodesoptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
            <div class="chart_box" v-if="chartIsshow">
              <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
            <div class="chart" v-if="chartIsshow">
              <div class="chart_box">
                <div class="chart_btn">
                  <el-button :icon="Search" link class="linkBtn" @click="openDialog(e)"></el-button>

                  <el-button :icon="Download" link class="linkBtn" @click="downloadChart(layerData)"></el-button>
                  <!-- 暂时不用删除 -->
                  <!-- <el-button
                    :icon="Delete"
                    link
                    class="del linkBtn"
                    @click="deleteChart(e)"
                  ></el-button>-->
                </div>
                <Bar-graph :width="'100%'" :height="'260px'" :layerData="layerData"></Bar-graph>
                <div class="select">
                  <el-select v-model="layerValue" class="m-2" placeholder="选择图层" size="small" @change="layerChange">
                    <el-option v-for="(item, i) in layeroptions" :key="i" :label="item.layerName"
                      :value="item.layerName" />
                  </el-select>
                </div>
              </div>
              <div class="select_box">
                <!-- 暂时不用 -->
                <!-- <div class="add_btn btnstyle">
                  <el-button size="small" @click="addCharts"
                    >添加图表</el-button
                  >
                </div>-->
              </div>
            </div>
            <div class="inquireContent_msg" v-if="!chartIsshow">

            <!-- <div
              class="inquireContent_msg"
              v-if="!chartIsshow"
              v-show="pixelIsShow"
            >
              <div class="inquireContent_msg_k">
                <span>提取的边界框</span>
                <span>{{ ScopeBox.pixel }}×{{ ScopeBox.pixel }}</span>
              </div>
              <!-- <div class="inquireContent_msg_k">
              <div class="inquireContent_msg_k">
                <span>使用</span>
                <span
                  >{{ ScopeBox.Scop * 1000 }}.00,{{ ScopeBox.Scop * 1000 }}.00
                  m/px</span
                >
              </div> -->
            </div>
              </div>
            </div>-->
            <div class="inquireContent_table" v-if="!chartIsshow">
              <div class="table">
                <div class="table_head">
                  <div class="table_head_td">序号</div>
                  <div class="table_head_td">
                    <span> 图层名 </span>
                    <span> 分析结果 </span>
                    <span>图层名</span>
                    <span>最大值</span>
                    <span>最小值</span>
                    <span>分析结果</span>
                  </div>
                </div>
                <div class="table_content">
                  <div class="table_tr" v-for="(e, i) in resultList" :key="i">
                    <div class="table_td">{{ i + 1 }}</div>
                    <div class="table_td">
                      <span> {{ e.layerName }}</span>
                      <span> {{ e.avg }}</span>

                      <span>{{ e.layerName }} <label v-show="e.unit"> [{{ e.unit }}]</label></span>
                      <span>{{ e.max }}</span>
                      <span>{{ e.min }}</span>
                      <span>{{ e.avg }}</span>
                    </div>
                  </div>
                </div>
@@ -95,6 +135,16 @@
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  <div class="dialog" v-if="dialogShow" @click.self="dialogShow = false">
    <div class="chart">
      <i @click.capture="closeDialog">
        <el-icon>
          <Close />
        </el-icon>
      </i>
      <BarGraphAxisLine :width="'856px'" :height="'636px'" :layerData="layerData"></BarGraphAxisLine>
    </div>
  </div>
</template>
@@ -113,9 +163,22 @@
import { useStore } from "vuex"; // 引入useStore 方法
//echarts
import BarGraph from "@/components/BarGraph.vue";
import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
import BarGraphAxisLine from "@/components/BarGraphAxisLine.vue";
import {
  saveFSDZJsonToExcel,
  saveFSDZJsonToExcelLine,
} from "@/utils/downloadCSV.js";
import {
  selectByPoint,
  selectByPolygon,
  selectByPolyline,
  rasterAnalysis_selectByWktForPost,
} from "@/api/api";
import { ElMessage } from "element-plus";
import { Search, Delete, Download, Close } from "@element-plus/icons-vue";
import WKT from "terraformer-wkt-parser";
import * as turf from "@turf/turf";
import { getToken } from "../../utils/auth";
const store = useStore(); // 该方法用于返回store 实例
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
@@ -128,8 +191,11 @@
const ScopeBox = ref({
  Scop: "",
  pixel: "1",
  nodes: "16",
});
const options = [
let layerValue = ref("");
const layeroptions = ref([]);
const pixeloptions = [
  {
    value: "1",
    label: "1×1",
@@ -167,22 +233,146 @@
    label: "256×256",
  },
];
const nodesoptions = [
  {
    value: "16",
    label: "16",
  },
  {
    value: "32",
    label: "32",
  },
  {
    value: "64",
    label: "64",
  },
  {
    value: "96",
    label: "96",
  },
  {
    value: "128",
    label: "128",
  },
  {
    value: "192",
    label: "192",
  },
  {
    value: "256",
    label: "256",
  },
  {
    value: "384",
    label: "384",
  },
  {
    value: "512",
    label: "512",
  },
  {
    value: "768",
    label: "768",
  },
  {
    value: "1024",
    label: "1024",
  },
];
let resultList = ref([]);
let layerData = ref({});
let layerArr = ref([]);
let dialogShow = ref(false);
let layerNameNum = 0;
let geoWkt = ref(null);
let geoWktFlag = ref(false);
let wktType = ref(null);
//新增图表
const addCharts = () => {
  layerArr.value.push({ layerName: `null${layerNameNum}`, points: [] });
  layerNameNum++;
};
//删除图表
const deleteChart = (val) => {
  layerArr.value.forEach((e, i) => {
    if (e.layerName == val.layerName) {
      layerArr.value.splice(i, 1);
    }
  });
};
//关闭
const closeDialog = () => {
  dialogShow.value = false;
  // alert(1);
};
//打开
const openDialog = (res) => {
  // layerData.value = res;
  dialogShow.value = true;
};
//像素选择
const pixelChange = (val) => {
  if (store.state.plottingInquireData.entitiesData.icon == "d.png") {
    selectPoint({
      pixel: val,
      wkt: store.state.plottingInquireData.entitiesData.wkt,
    });
  }
  // if (store.state.plottingInquireData.entitiesData.icon == "d.png") {

  // }
  // selectPoint({
  //   pixel: val,
  //   wkt: store.state.plottingInquireData.entitiesData.wkt,
  // });
  setOptionStart();
  setWebScoKet("Point", store.state.plottingInquireData.entitiesData.wkt, val);
};
//节点选择
const nodesChange = (val) => {
  setOptionStart();
  setWebScoKet(
    "PolyLine",
    store.state.plottingInquireData.entitiesData.wkt,
    val
  );
  // selectPolyline({
  //   nodes: val,
  //   wkt: store.state.plottingInquireData.entitiesData.wkt,
  // });
};

//图层选择
const layerChange = (val, name) => {
  layeroptions.value.forEach((e) => {
    if (e.layerName == val) {
      layerData.value = e;
    }
  });

  // layerArr.value.forEach((e) => {
  //   if (e.layerName == name) {
  //     e = layerData.value;
  //   }
  //   console.log(222222222222222, layerArr.value);
  // });

  // layerArr.value.push(layerData.value);
};
//节点选择
//下载csv
const download = () => {
  saveFSDZJsonToExcel(resultList.value, "123", "");
};
const downloadChart = (val) => {
  let arr = [];
  val.points.forEach((e) => {
    arr.push({
      layerName: val.layerName,
      values: e.vals.toString(),
      lon: e.x,
      lat: e.y,
    });
  });
  saveFSDZJsonToExcelLine(arr);
};
//点查询接口
const selectPoint = async (res) => {
  resultList.value = [];
  const dt = await selectByPoint(res);

  if (dt.code !== 200) {
@@ -195,13 +385,20 @@
      e.max = "-";
      e.min = "-";
    }
    e.avg = e.avgList.toString();
    e.max = e.maxList.toString();
    e.min = e.minList.toString();
    e.lng = store.state.plottingInquireData.entitiesData.lng;
    e.lat = store.state.plottingInquireData.entitiesData.lat;

    resultList.value.push(e);
  });

  console.log(resultList.value);
};
//面查询接口
const selectPolygon = async (res) => {
  resultList.value = [];
  const dt = await selectByPolygon(res);

  dt.result.forEach((e) => {
@@ -210,16 +407,49 @@
      e.max = "-";
      e.min = "-";
    }

    e.avg = e.avgList.toString();
    e.max = e.maxList.toString();
    e.min = e.minList.toString();
    e.lng = store.state.plottingInquireData.entitiesData.lng;
    e.lat = store.state.plottingInquireData.entitiesData.lat;
    resultList.value.push(e);
  });
};
//保留三位小数
const keepThreeNum = (value) => {
  let resValue = 0;
  //小数点的位置
  let index = value && value.toString().indexOf(".") + 1;
  //小数的位数
  let num = value && Math.abs(Number(value)).toString().length - index;
  if (index && num > 3) {
    resValue = value && Number(value).toFixed(3);
  } else {
    resValue = value;
  }
  return resValue;
};

//线查询接口
const selectPolyline = async (res) => {
  layerArr.value = [];
  const dt = await selectByPolyline(res);
  console.log(dt);

  dt.result.forEach((e) => {
    e.points.forEach((element) => {
      element.vals.forEach((v) => {
        v = keepThreeNum(v);
      });
    });
  });
  console.log(dt.result);
  layeroptions.value = dt.result;

  layerValue.value = layeroptions.value[0].layerName;
  layerArr.value.push(dt.result[0]);

  layerData.value = dt.result[0];

  // dt.result.forEach((e) => {
  //   if (e.code != 200) {
  //     e.avg = "-";
@@ -254,42 +484,170 @@
      };
      //   store.commit("SET_plotting", obj);
      store.state.plottingInquireData = obj;

      setCloseWebSocket();
      inquireData.value = {
        name: "path #9",
        icon: "q.png",
      };
      isShow.value = false;
      break;
    }
  }
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const handleClick = (tab: TabsPaneContext, event: Event) => { };
//   const setCloseplotting = () => {
//     emits("setCloseplotting", false);
//   };
let chartIsshow = ref(false);
const setMenuClose = () => {
  isShow.value = false;
  setCloseWebSocket();
  store.state.plottingInquireData = null;
  inquireData.value = {
    name: "path #9",
    icon: "q.png",
  };
};
const setCloseWebSocket = () => {
  if (Window.ws) {
    Window.ws.close();
    Window.ws.onclose = () => {
      console.log("服务器关闭");
    };
    Window.ws = null;
  }
};
const setWebScoKet = async (type, wkt, node) => {
  const data = await rasterAnalysis_selectByWktForPost({
    wkt: wkt,
    size: node,
  });

  if (data) {
    return;
  }
};
const setOptionStart = () => {

  resultList.value = [];
  layerArr.value = [];
  layeroptions.value = [];
  layerValue.value = '';
};
const setWebSocketStart = () => {
  // if (Window.ws) {
  //   setCloseWebSocket();
  // }
  setOptionStart();
  var token = getToken();
  var url = socketUrl + "?token=" + token;
  Window.ws = new WebSocket(url);
  Window.ws.option = () => { };
  Window.ws.onmessage = (msg) => {
    // console.log('来自服务器端的数据：' + msg.data); //监听接受来自服务端的信息
    if (msg.data != "连接成功") {
      var val = JSON.parse(msg.data);

      if (val.analysisForPost && val.analysisForPost.token == token) {
        var data = val.analysisForPost;
        console.log(data)
        switch (wktType.value) {
          case "Point":
            setWebSocketPoint(data);
            break;
          case "Polygon":
            setWebSocketPoint(data);
            break;
          case "LineString":
            setWebSocketPLine(data);
            break;
        }
      }
    }
  };
};
const setWebSocketPoint = (res) => {
  var obj = {
    avg: res.avgList.length <= 0 ? "--" : res.avgList.toString(),
    layerName: res.layerName,
    max: res.maxList.length <= 0 ? "--" : res.maxList.toString(),
    min: res.minList.length <= 0 ? "--" : res.minList.toString(),
    lng: store.state.plottingInquireData.entitiesData.lng,
    lat: store.state.plottingInquireData.entitiesData.lat,
    unit: res.unit
  };
  resultList.value.push(obj);
};
const setWebSocketPLine = (res) => {
  res.points.forEach((element) => {
    element.vals.forEach((v) => {
      v = keepThreeNum(v);
    });
  });
  layeroptions.value.push(res);
  var data = layeroptions.value[0];
  layerValue.value = data.layerName;
  layerArr.value.push(data);
  layerData.value = data;
};
watch(
  () => store.state.plottingInquireData,
  (nVal, oVal) => {
    isShow.value = nVal.isshow;
    inquireData.value = nVal.entitiesData;
    if (nVal.entitiesData.icon == "x.png") {
      chartIsshow.value = true;
      selectPolyline({
        pixel: ScopeBox.value.pixel,
        wkt: nVal.entitiesData.wkt,
      });
    }
    if (nVal.entitiesData.icon == "m.png") {
      if (nVal.entitiesData.name == oVal.entitiesData.name) {
        return;
    setOptionStart();
    setCloseWebSocket();
    if (!nVal) return;
    if (nVal.entitiesData.name != inquireData.value.name) {
      isShow.value = nVal.isshow;
      inquireData.value = nVal.entitiesData;
      geoWktFlag.value = false;
      if (inquireData.value.wkt) {
        var wkt = WKT.parse(inquireData.value.wkt);
        wktType.value = wkt.type;
        if (wkt.type == "Point") {
          geoWkt.value =
            wkt.coordinates[0].toFixed(6) + " " + wkt.coordinates[1].toFixed(6);
          geoWktFlag.value = true;
        }
        if (wkt.type == "Polygon") {
          var Polygon = turf.multiPolygon([wkt.coordinates]);
          var center = turf.center(Polygon);
          geoWkt.value =
            center.geometry.coordinates[0].toFixed(6) +
            " " +
            center.geometry.coordinates[1].toFixed(6);
          geoWktFlag.value = true;
        }
      }
      pixelIsShow.value = false;
      selectPolygon({ wkt: nVal.entitiesData.wkt });
    }
    if (nVal && nVal.entitiesData.icon == "d.png") {
      selectPoint({
        pixel: ScopeBox.value.pixel,
        wkt: nVal.entitiesData.wkt,
      });
      setWebSocketStart();

      if (nVal.entitiesData.icon == "x.png") {
        pixelIsShow.value = true;
        chartIsshow.value = true;
        setWebScoKet("pline", nVal.entitiesData.wkt, ScopeBox.value.nodes);
        // selectPolyline({
        //   nodes: ScopeBox.value.nodes,
        //   wkt: nVal.entitiesData.wkt,
        // });
      }
      if (nVal.entitiesData.icon == "m.png") {
        chartIsshow.value = false;
        // if (nVal.entitiesData.name == oVal.entitiesData.name) {
        //   return;
        // }
        pixelIsShow.value = false;
        // selectPolygon({ wkt: nVal.entitiesData.wkt });
        setWebScoKet("polygon", nVal.entitiesData.wkt, 0);
      }
      if (nVal && nVal.entitiesData.icon == "d.png") {
        chartIsshow.value = false;
        pixelIsShow.value = true;
        // selectPoint({
        //   pixel: ScopeBox.value.pixel,
        //   wkt: nVal.entitiesData.wkt,
        // });
        setWebScoKet("polygon", nVal.entitiesData.wkt, ScopeBox.value.pixel);
      }
    }
  },
  { deep: true }
@@ -301,9 +659,10 @@
  position: absolute;
  right: 26px;
  top: 80px;
  width: 320px;
  width: 400px;
  background: rgba(7, 8, 14, 0.8);
  z-index: 100;

  .InquireHeader {
    width: 100%;
    height: 35px;
@@ -315,7 +674,10 @@
    color: #d6e4ff;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }

  .inquireContent {
    .inquireContent_title {
      font-size: 14px;
@@ -325,20 +687,24 @@
      margin-top: 10px;
      padding-left: 10px;
    }

    .inquireContent_name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      padding-bottom: 16px;

      .plotting_list_tr_name {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .ico {
          width: 18px;
          height: 18px;
        }

        span {
          font-size: 16px;
          font-weight: 300;
@@ -346,34 +712,49 @@
          margin-left: 10px;
        }
      }

      .plotting_list_tr_wkt {
        font-size: 12px;
        font-weight: 300;
        color: #ffffff;
        margin-left: 10px;
        flex: 1;
      }

      .plotting_list_tr_btn {
        display: flex;
        align-items: center;

        .tr_btn {
          width: 16px;
          height: 15px;
          cursor: pointer;
        }

        .dw {
          background: url("../../assets/img/dw.png") no-repeat center;
          background-size: 100% 100%;
          margin-right: 18px;
        }

        .sc {
          background: url("../../assets/img/sc.png") no-repeat center;
          background-size: 100% 100%;
        }
      }
    }

    /deep/ .el-tabs__nav {
      justify-content: center;
      float: none;
    }

    /deep/ .el-tabs__item,
    /deep/ .el-tabs__item.is-active {
      color: #d6e4ff;
      font-size: 16px;
    }

    .inquireContent_input {
      display: flex;
      justify-content: space-between;
@@ -382,12 +763,15 @@
      margin-right: 10px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(214, 228, 255, 0.4);

      .inquireContent_input_left {
        width: 45%;
      }

      .inquireContent_input_right {
        width: 45%;
      }

      .label {
        font-size: 14px;
        font-weight: 400;
@@ -395,12 +779,15 @@
        padding-bottom: 10px;
      }
    }

    .inquireContent_msg {
      padding: 12px 18px;

      .inquireContent_msg_k {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 12px;
          font-weight: 400;
@@ -408,14 +795,17 @@
        }
      }
    }

    .inquireContent_table {
      padding-right: 15px;
      padding-left: 15px;
      padding-bottom: 10px;

      .table {
        background: rgba(0, 0, 0, 0, 4);
        border: 1px solid rgba(214, 228, 255, 0.4);
        border-radius: 4px;

        .table_head {
          height: 27px;
          background: #0e151f;
@@ -423,6 +813,7 @@
          //     0px 14px 16px 0px rgba(38, 47, 71, 0.68);
          //   border-radius: 4px 4px 0px 0px;
          display: flex;

          .table_head_td {
            width: 50px;
            font-size: 14px;
@@ -434,8 +825,9 @@
            border-right: 1px solid rgba(214, 228, 255, 0.4);
            box-sizing: border-box;
          }

          .table_head_td:nth-child(2) {
            width: 237px;
            width: 16.34375vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
@@ -443,13 +835,16 @@
            border-right: 0;
          }
        }

        .table_content {
          height: 440px;
          overflow: auto;

          .table_tr {
            // height: 27px;
            display: flex;
            background: #000000;

            // padding: 5px 0;
            .table_td {
              width: 50px;
@@ -462,60 +857,182 @@
              align-items: center;
              border-right: 1px solid rgba(214, 228, 255, 0.4);
              box-sizing: border-box;

              div {
                width: 100%;
                background: skyblue;
                height: 100%;
              }

              // padding: 5px;
              // white-space: nowrap;
              span {

                display: block;
                width: 50%;
                width: 17%;
                word-wrap: break-word;
                // white-space: pre;
                text-align: left;
              }

              span:nth-child(2) {
                display: flex;
                justify-content: flex-end;
                // display: flex;
                // justify-content: flex-end;
                // margin-left: 5%;
                //  float: right;
                // width:16.34375vw;
                text-align: center;
                // background: skyblue;
              }
            }

            .table_td:nth-child(2) {
              width: 237px;
              width: 16.34375vw;
              display: flex;
              justify-content: space-between;
              align-items: center;
              // padding: 0 10px;
              padding-left: 10px;
              padding-right: 10px;
              padding-top: 5px;
              padding-bottom: 5px;
              padding: 0 10px;
              border-right: 0;
            }
          }

          .table_tr:nth-child(2n) {
            background: #0e151f;
          }
        }

        .table_content::-webkit-scrollbar {
          width: 8px;
        }

        .table_content::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: rgba(0, 0, 0, 0.2);
        }

        .table_content::-webkit-scrollbar-track {
          border-radius: 0;
          background: rgba(0, 0, 0, 0);
        }
      }
    }

    .download {
      padding-right: 15px;
      padding-left: 15px;
      padding-bottom: 14px;
      display: flex;
      justify-content: flex-end;

      .el-button {
        font-size: 12px;
        color: #d6e4ff;
      }
    }

    .chart {
      width: 100%;
      height: 540px;
      overflow: auto;
    }

    .chart::-webkit-scrollbar {
      width: 8px;
    }

    .chart::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
    }

    .chart::-webkit-scrollbar-track {
      border-radius: 0;
      background: rgba(0, 0, 0, 0);
    }

    .chart_box {
      width: 100%;

      .chart_btn {
        display: flex;
        justify-content: flex-end;
        margin: 0 10px;
        padding-top: 5px;
        padding-bottom: 5px;

        // border-bottom: 1px solid rgba(214, 228, 255, 0.4);
        .linkBtn {
          color: #d6e4ff;
        }

        .del {
          color: red;
        }
      }
    }

    .select_box {
      padding-bottom: 20px;

      .add_btn {
        display: flex;
        justify-content: center;
      }
    }

    .select {
      display: flex;
      justify-content: center;
      padding-bottom: 10px;
    }
  }
}

.dialog {
  position: absolute;
  top: 0;
  height: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 110;

  .chart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(33, 37, 44);
    padding: 20px;

    i {
      position: absolute;
      right: 2px;
      top: 2px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
  }
}

.btnstyle {
  .el-button {
    background: rgba(104, 156, 255, 0.2);
    border: 1px solid #234066;
    border-radius: 2px;

    font-weight: 400;
    color: #ffffff;
  }

  .el-button:hover {
    border: 1px solid #689cff;
  }

  .delbtn {
    background: rgba(245, 108, 108, 0.2);
    border: 1px solid #5a0914;
  }
}
</style>