月球大数据地理空间分析展示平台-【前端】-月球2期前端
Surpriseplus
2023-09-04 d80d032784216bc4a61692476947ab36f53788d7
src/views/layer/layerSet.vue
@@ -3,7 +3,10 @@
    <div class="layerBox">
      <div class="layerTitle">
        <div class="tileLeft">
          <div class="titleImg" @click="editState">
          <div
            class="titleImg"
            @click="editState"
          >
            <ArrowLeft />
          </div>
          <div class="titleLable">图层编辑</div>
@@ -19,57 +22,78 @@
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          ref="treeRef"
          style="font-size: 16px;"
        />
      </div>
    </div>
    <div class="edit_box">
      <div class="edit_box_btn btnstyle">
        <el-button type="primary" :icon="Plus" @click="insertLayerData(1)"
          >新增同级</el-button
        >
        <el-button type="primary" :icon="Plus" @click="insertLayerData(2)"
          >新增子级</el-button
        >
        <el-button
          type="primary"
          :icon="Plus"
          @click="insertLayerData(1)"
        >新增同级</el-button>
        <el-button
          type="primary"
          :icon="Plus"
          @click="insertLayerData(2)"
        >新增子级</el-button>
        <el-button
          type="primary"
          :icon="Delete"
          class="delbtn"
          @click="delLayer"
          >删除</el-button
        >
        <el-button type="primary" :icon="Top" @click="move(1)"
          >向上移动</el-button
        >
        <el-button type="primary" :icon="Bottom" @click="move(2)"
          >向下移动</el-button
        >
        >删除</el-button>
        <el-button
          type="primary"
          :icon="Top"
          @click="move(1)"
        >向上移动</el-button>
        <el-button
          type="primary"
          :icon="Bottom"
          @click="move(2)"
        >向下移动</el-button>
      </div>
      <div class="edit_box_form">
        <el-form :model="formInline" label-width="120px">
        <el-form
          :model="formInline"
          label-width="120px"
        >
          <el-form-item label="图层类型">
            <el-select style="width: 100%" v-model="formInline.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            <el-select
              style="width: 100%"
              v-model="formInline.isLayer"
            >
              <el-option
                label="图层组"
                value="0"
              ></el-option>
              <el-option
                label="图层"
                value="1"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 服务资源-->
          <el-form-item v-show="formInline.isLayer == 1" label="服务资源">
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="服务资源"
          >
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('0')"
              key="0"
              :class="{ serviceActive: !serviceActive }"
              >否</el-button
            >
            >否</el-button>
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('1')"
              key="1"
              :class="{ serviceActive: serviceActive }"
              >是</el-button
            >
            >是</el-button>
          </el-form-item>
          <el-form-item label="图层名称">
@@ -79,7 +103,10 @@
            />
          </el-form-item>
          <!-- 服务类别 -->
          <el-form-item v-show="formInline.isLayer == 1" label="服务类别">
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="服务类别"
          >
            <el-select
              style="width: 100%"
              v-model="formInline.category"
@@ -94,7 +121,10 @@
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表名称" v-show="formInline.category == 2">
          <el-form-item
            label="表名称"
            v-show="formInline.category == 2"
          >
            <el-input
              v-model="formInline.tab"
              placeholder="请输入表名称"
@@ -102,7 +132,10 @@
            />
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item v-show="formInline.isLayer == 1" label="数据类型">
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="数据类型"
          >
            <el-select
              style="width: 100%"
              v-model="formInline.data"
@@ -119,7 +152,10 @@
            </el-select>
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item v-show="formInline.isLayer == 1" label="服务类型">
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="服务类型"
          >
            <el-select
              style="width: 100%"
              v-model="formInline.type"
@@ -135,7 +171,10 @@
            </el-select>
          </el-form-item>
          <el-form-item label="服务地址" v-show="formInline.isLayer == 1">
          <el-form-item
            label="服务地址"
            v-show="formInline.isLayer == 1"
          >
            <el-input
              v-model="formInline.serviceUrl"
              placeholder="请输入服务地址"
@@ -144,40 +183,63 @@
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button class="delbtn" @click="updateRest">取消</el-button>
              <el-button
                type="primary"
                @click="onSubmit"
              >确定</el-button>
              <el-button
                class="delbtn"
                @click="updateRest"
              >取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog title="新增" v-model="dialogVisible" width="50%">
    <el-dialog
      title="新增"
      v-model="dialogVisible"
      width="50%"
    >
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <el-form :model="insertData" label-width="120px">
        <el-form
          :model="insertData"
          label-width="120px"
        >
          <el-form-item label="图层类型">
            <el-select style="width: 100%" v-model="insertData.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            <el-select
              style="width: 100%"
              v-model="insertData.isLayer"
            >
              <el-option
                label="图层组"
                value="0"
              ></el-option>
              <el-option
                label="图层"
                value="1"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 服务资源-->
          <el-form-item v-show="insertData.isLayer == 1" label="服务资源">
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="服务资源"
          >
            <el-button
              size="small"
              class="serviceButton"
              @click="setInsertServiceChange('0')"
              key="0"
              :class="{ serviceActive: !insertServiceActive }"
              >否</el-button
            >
            >否</el-button>
            <el-button
              size="small"
              class="serviceButton"
              @click="setInsertServiceChange('1')"
              key="1"
              :class="{ serviceActive: insertServiceActive }"
              >是</el-button
            >
            >是</el-button>
          </el-form-item>
          <el-form-item label="图层名称">
@@ -187,7 +249,10 @@
            />
          </el-form-item>
          <!-- 服务类别 -->
          <el-form-item v-show="insertData.isLayer == 1" label="服务类别">
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="服务类别"
          >
            <el-select
              style="width: 100%"
              v-model="insertData.category"
@@ -202,7 +267,10 @@
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表名称" v-show="insertData.category == 2">
          <el-form-item
            label="表名称"
            v-show="insertData.category == 2"
          >
            <el-input
              v-model="insertData.tab"
              placeholder="请输入表名称"
@@ -210,7 +278,10 @@
            />
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item v-show="insertData.isLayer == 1" label="数据类型">
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="数据类型"
          >
            <el-select
              style="width: 100%"
              v-model="insertData.data"
@@ -227,7 +298,10 @@
            </el-select>
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item v-show="insertData.isLayer == 1" label="服务类型">
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="服务类型"
          >
            <el-select
              style="width: 100%"
              v-model="insertData.type"
@@ -243,7 +317,10 @@
            </el-select>
          </el-form-item>
          <el-form-item label="服务地址" v-show="insertData.isLayer == 1">
          <el-form-item
            label="服务地址"
            v-show="insertData.isLayer == 1"
          >
            <el-input
              v-model="insertData.serviceUrl"
              placeholder="请输入服务地址"
@@ -252,44 +329,61 @@
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
              <el-button type="primary" size="small" @click="added()"
                >确定</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click="added()"
              >确定</el-button>
              <el-button
                class="delbtn"
                type="info"
                size="small"
                @click="submitCancel()"
                >取消</el-button
              >
              >取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogService" width="50%" :show-close="false">
    <el-dialog
      v-model="dialogService"
      width="50%"
      :show-close="false"
    >
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <div
          style="display: flex; justify-content: space-between"
          class="tableForm"
        >
          <div>
            <el-input size="small" v-model="listData.name">
            <el-input
              size="small"
              v-model="listData.name"
            >
              <template #suffix>
                <el-icon
                  class="el-input__icon el-icon-search"
                  @click="setServiceQuery"
                  ><search
                /></el-icon>
                >
                  <search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <div class="btnstyle">
            <el-button type="info" size="small" @click="setServiceRest">
            <el-button
              type="info"
              size="small"
              @click="setServiceRest"
            >
              重置
            </el-button>
            <el-button type="primary" size="small" @click="setServiceConfirm">
            <el-button
              type="primary"
              size="small"
              @click="setServiceConfirm"
            >
              确认
            </el-button>
            <el-button
@@ -302,15 +396,26 @@
            </el-button>
          </div>
        </div>
        <el-table ref="multipleTable" :data="tableData" @select="selectChange">
          <el-table-column type="selection" width="55"> </el-table-column>
        <el-table
          ref="multipleTable"
          :data="tableData"
          @select="selectChange"
        >
          <el-table-column
            type="selection"
            width="55"
          > </el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="70px"
          />
          <el-table-column align="center" prop="cnName" label="资源名称" />
          <el-table-column
            align="center"
            prop="cnName"
            label="资源名称"
          />
          <el-table-column
            align="center"
@@ -325,7 +430,10 @@
            :formatter="setResType"
          />
        </el-table>
        <div class="pagination_box" style="margin-top: 15px">
        <div
          class="pagination_box"
          style="margin-top: 15px"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
@@ -937,7 +1045,7 @@
      align-items: center;
      .titleLable {
        font-size: 24px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
@@ -957,6 +1065,11 @@
    height: 92%;
    overflow: auto;
  }
  /deep/.el-tree-node__content {
    font-size: 16px;
  }
  .layerContent::-webkit-scrollbar {
    width: 8px;
  }