feat:样式调整

张含笑

2025-08-27 5b04b2c5497a0adea171e47f06b0956ac829bf1e

feat:样式调整

 src/views/resource/components/DrawPolygon.vue

@@ -27,7 +27,6 @@
  () => selectionIds.value,
  (newValue, oldValue) => {
    if (newValue && oldValue && newValue !== oldValue) {
    console.log('selectionIds',newValue);
      cancel();
    }
  }

 src/views/resource/components/spotDetails.vue

@@ -3,7 +3,7 @@
    :title="props.title"
    append-to-body
    v-model="uploadPatchDialog"
    width="80%"
    width="75%"
    align-center
  >
    <div class="container">
@@ -16,9 +16,9 @@
              <div class="itemContent">
                <template v-if="props.title === '图斑编辑' && item.editable">
                  <template v-if="item.name === '图斑类型'">
                    <el-select 
                      v-model="item.value" 
                      size="small" 
                    <el-select
                      v-model="item.value"
                      size="small"
                      placeholder="请选择图斑类型"
                      style="width: 100%"
                    >
@@ -33,7 +33,6 @@
                  <template v-else-if="item.name === '文件名称'">
                    <el-input v-model="item.value" size="small" />
                  </template>
                 
                </template>
                <template v-else>
                  <div class="itemValue">{{ item.value }}</div>
@@ -51,26 +50,30 @@
          <div class="table-content">
            <div class="tabname">图斑列表</div>
            <el-table
              class="ztzf-table"
              ref="polygonTableEle"
              highlight-current-row
              :row-class-name="tableRowClassName"
              :data="tableData"
              border
              style="width: 100%"
              @row-click="handleLocationPolygon"
            >
              <el-table-column type="index" label="序号" width="80">
              <el-table-column type="index" align="center" width="30" label="序号">
                <template #default="{ $index }">
                  {{ ($index + 1).toString().padStart(2, '0') }}
                </template>
              </el-table-column>
              <el-table-column prop="dkbh" label="图斑名称" />
              <el-table-column prop="investigate" label="图斑状态" />
              <el-table-column label="操作" width="100" align="center" v-if="props.title === '图斑编辑'">
              <el-table-column prop="dkbh" align="center" label="图斑名称" />
              <el-table-column prop="investigate" align="center" label="图斑状态" />
              <el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
                <template #default="scope">
                  <el-button type="text">删除</el-button>
                  <span class="operationspan">删除</span>
                  <span class="operationspan"  @click.stop="handleSelectionChange(scope.row)"
                    >编辑</span
                  >
                  <!-- <el-button type="text">删除</el-button>
                  <el-button type="text" @click.stop="handleSelectionChange(scope.row)"
                    >编辑</el-button
                  >
                  > -->
                </template>
              </el-table-column>
            </el-table>
@@ -78,6 +81,8 @@
              <el-pagination
                background
                layout="prev, pager, next"
                prev-text="上一页"
                next-text="下一页"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
@@ -91,6 +96,11 @@
          v-model:isBoxSelect="isBoxSelect"
          v-model:isDrawPolygon="isDrawPolygon"
        ></FunButton>
        <!-- 完成/取消 -->
        <div class="btnGroups" v-if="props.title === '图斑编辑'">
          <el-button type="primary">完成</el-button>
          <el-button>取消</el-button>
        </div>
        <!-- 地图 -->
        <div id="spotMap" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
      </div>
@@ -131,9 +141,13 @@
const isDrawPolygon = ref(false);
// 选中了哪些图斑
const selectionIds = ref(null);
const selectionList = ref([])
const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;
// 表格隔行变色
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
};
const spotTypeOptions = ref([
  { value: '1', label: '综合类' },
  { value: '2', label: '矿山类' },
@@ -194,10 +208,10 @@
  }
  publicCesiumInstance = new PublicCesium({
    dom: 'spotMap',
   flatMode: false,
        terrain: true,
        layerMode: 4,
        contour: false,
    flatMode: false,
    terrain: true,
    layerMode: 4,
    contour: false,
  });
  homeViewer.value = publicCesiumInstance.getViewer();
  viewer = publicCesiumInstance.getViewer();
@@ -217,7 +231,10 @@
      ...item,
      grouped: grouped,
    });

    // 根据 is_exception 设置颜色
    const color =
      item.is_exception == 2 ? Cesium.Color.RED.withAlpha(0.5) : Cesium.Color.YELLOW.withAlpha(0.5);
    const outlineColor = item.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
    viewInstance.value.removeById('polygon_dk' + item.id);
    homeViewer.value.entities?.add({
      id: 'polygon_dk' + item.id,
@@ -227,14 +244,22 @@
      },
      polygon: {
        hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(grouped)),
        material: Cesium.Color.YELLOW.withAlpha(0.5),
        material: color,
        outline: true,
        outlineColor: Cesium.Color.YELLOW,
        outlineColor: outlineColor,
        outlineWidth: 2,
        clampToGround: true,
        outlineDepthFailColor: outlineColor,
      },
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray(grouped),
        width: 2,
        material: color,
        clampToGround: true,
      },
      zIndex: 99,
    });

    if (tbJwdList.length > 0) {
      const positions = tbJwdList.flatMap(item => Cesium.Cartesian3.fromDegreesArray(item.grouped));
      homeViewer.value.camera.flyToBoundingSphere(new Cesium.BoundingSphere.fromPoints(positions));
@@ -263,63 +288,67 @@
    clearSelect();
    return;
  }
  // 保存当前选中图斑
  // 取出当中经纬度

  const numbersWithCommas = data.dkfw.match(/\d+(\.\d+)?/g);
  // 转换为二维数组
  const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
    if (index % 2 === 0) acc.push(src.slice(index, index + 2));
    return acc;
  }, []);
  // 求出中心点

  const polygonCenter = getCenterPoint(groupedArr);
  if (viewInstance.value.getEntityById('polygon_center')) {
    viewInstance.value.removeById('polygon_center');
  }
  // 高亮当前图斑，将上一个高亮图斑恢复

  // 恢复上一个高亮图斑的原始颜色
  if (lastHighlightRow) {
    let lastentity = homeViewer.value.entities?.getById('polygon_dk' + lastHighlightRow.id);

    if (lastentity && lastentity.polygon) {
      lastentity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5);
      lastentity.polygon.outlineColor = Cesium.Color.YELLOW;
      // 根据is_exception恢复原始颜色
      const originalColor =
        lastHighlightRow.is_exception == 2
          ? Cesium.Color.RED.withAlpha(0.5)
          : Cesium.Color.YELLOW.withAlpha(0.5);
      const originalOutline =
        lastHighlightRow.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;

      lastentity.polygon.material = originalColor;
      lastentity.polygon.outlineColor = originalOutline;
      lastentity.polygon.outlineWidth = 2; // 恢复默认边框宽度
    }
  }

  let Nowentity = homeViewer.value.entities?.getById('polygon_dk' + data.id);
  if (Nowentity && Nowentity.polygon) {
    Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0.3);
    Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0);
    Nowentity.polygon.outlineColor = Cesium.Color.RED;
  }

  homeViewer.value.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      Number(polygonCenter.lng),
      Number(polygonCenter.lat),
      2500.0
      2000
    ),
    zIndex: 100,
  });
  lastHighlightRow = data;
};
// 清空选中的数据
const clearSelect = () => {
  lastHighlightRow = null;
  // selectionIds.value = null;
  selectionList.value = []
  selectionList.value = [];
};
// 编辑
const handleSelectionChange = row => {
  console.log('编辑', row.id);
  // console.log('编辑', row.id);
  let curRowIsSelect = row;
  selectionIds.value = row.id;
  selectionList.value = row
  selectionList.value = row;
  curRowIsSelect && handleLocationPolygon(row);
  if (row.is_exception == 2 && curRowIsSelect) {
    isDrawPolygon.value = true;
    funButtonEle.value.upDateDrawState(true);
    handleLocationPolygon(row);
    // clearSelect()
    // curCustomPolygon = row
    // ElMessage.warning('该图斑数据异常，请在地图区域重新绘制！！')
  } else {
    isDrawPolygon.value = false;
  }
@@ -328,7 +357,7 @@
provide('homeViewer', homeViewer);
provide('viewInstance', viewInstance);
provide('clearSelect', clearSelect);
provide('getTableList', getTableList)
provide('getTableList', getTableList);
// 销毁
const destroyMap = () => {
  if (viewer) {
@@ -345,9 +374,9 @@
      getTableList();
    }, 0);
  } else {
   if (funButtonEle.value) {
    if (funButtonEle.value) {
      isBoxSelect.value = false;
      isDrawPolygon.value = false; 
      isDrawPolygon.value = false;
    }
    destroyMap();
  }
@@ -437,38 +466,134 @@
  position: absolute;
  top: 0;
  left: 0;
  width: 23%;
  height: 95%;
  height: 99%;
  z-index: 999;
  // background: rgba(31, 62, 122, 0.85);
  padding: 10px;
  width: 277px;
  overflow: hidden;
 background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
  border-radius: 8px 8px 8px 8px;
  padding: 7px 10px 0 10px;
  display: flex;
  flex-direction: column;
}

.table-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 95%;
  height: 99%;
  .tabname {
    color: #102441;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
  }
}
// 表格样式
  :deep(.el-table) {
    --el-table-bg-color: transparent !important;
    --el-table-tr-bg-color: transparent !important;
    // --el-table-header-bg-color: transparent !important;
    --el-table-row-hover-bg-color: rgba(30, 58, 138, 0.5) !important;
    --el-table-current-row-bg-color: rgba(30, 58, 138, 0.7) !important;
    color: #fff !important;
    .cell {
      padding: 0px !important;
    }
    // 隔行变色
    .even-row {
      background-color: rgba(255,255,255,0.17) !important;
    }
    .oddNumberRow {
      background-color: rgba(255,255,255,0.08) !important;
    }

    // 表头样式
    .el-table__header {
      th {
        background: rgba(51, 51, 51, 0.32) !important;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        .cell {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    // 表格主体
    .el-table__body {
      tr:hover > td {
        background-color: var(--el-table-row-hover-bg-color) !important;
      }

      td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
      }
    }

    // 选中行
    .current-row td {
      background-color: var(--el-table-current-row-bg-color) !important;
    }
  }
.operationspan {
cursor: pointer;}
.operationspan:first-child{
margin-right: 10px;}
  // 分页
    :deep(.pagination-container) {
    background: transparent !important;
  }
  :deep(.el-pagination) {
  .btn-prev, .btn-next {
    padding: 5px 13px;

  }
  
 
}
:deep(.el-pager li) {
  margin: 0 0.4rem;
  background: rgba(34, 34, 34, 0.9) !important;
  box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25) !important;
  border-radius: 8px 8px 8px 8px !important;
 
  font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #EDEDED !important;
}
:deep(.el-pager li.is-active) {
  border: 1px solid rgba(255, 255, 255, 0.99) !important;
}
:deep(.el-pagination button) {
  background: rgba(34, 34, 34, 0.9) !important;
color: #EDEDED !important;
  border-radius: 8px 8px 8px 8px !important;
}
.pagination-container {
  margin-top: auto; /* 将分页推到容器底部 */
  margin-top: auto;
  padding: 10px 0;
  background: white;
  display: flex;
  justify-content: center;
  height: 20px;
}
}

.el-table {
  flex: 1; /* 让表格占据剩余空间 */
  overflow: auto;
}

.btnGroups {
  position: absolute;
  bottom: 8%;
  left: 50%;
}
#spotMap {
  height: 100%;
  width: 100%;