DOAS/src/views/daka/config/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          v-hasPermi="['demo:leave:edit']"
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['demo:leave:remove']"
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['demo:leave:export']"
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
        >导出</el-button>
      </el-col> -->
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table
      v-loading="loading"
      :data="areaList"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column v-if="false" label="主键ID" align="center" prop="id" />
      <el-table-column
        label="地点名称"
        align="center"
        prop="name"
        width="180"
      >
      </el-table-column>
      <el-table-column  label="经纬度" align="center" prop="lnglat">
        <template slot-scope="scope">
          <span
            style="
              display: inline-flex;
              align-items: center;
              justify-content: center;
              text-align: center;
            "
          >
            {{ scope.row.lng }}, {{ scope.row.lat }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        label="打卡半径(米)"
        align="center"
        prop="radius"
      >
      </el-table-column>
      <el-table-column  label="状态" align="center" prop="enabled">
        <template slot-scope="scope">
          <span
            v-if="scope.row.enabled"
            :class="scope.row.enabled ? 'status-enabled' : 'status-disabled'"
            style="
              display: inline-flex;
              align-items: center;
              justify-content: center;
              text-align: center;
            "
          >
            已启用
          </span>
          <span
            v-else
            style="
              display: inline-flex;
              align-items: center;
              justify-content: center;
              text-align: center;
            "
          >
            启用
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="220"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="editArea(scope.row)"
          >编辑</el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-camera"
            @click="deleteArea(scope.row)"
          >删除</el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-setting"
            @click="toggleAreaStatus(scope.row)"
            :disabled="scope.row.enabled"
          >{{ scope.row.enabled ? '已启用' : '启用' }}</el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-setting"
            @click="forbiddenAreaStatus(scope.row)"
            :disabled="!scope.row.enabled"
          >{{ !scope.row.enabled ? '已禁用' : '禁用' }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="地点名称" prop="name" label-width="120px">
          <el-input v-model="formData.name" placeholder="请输入地点名称" />
        </el-form-item>
        <el-form-item label="经度" prop="lng" label-width="120px">
          <el-input v-model="formData.lng" placeholder="请输入经度" />
        </el-form-item>
        <el-form-item label="纬度" prop="lat" label-width="120px">
          <el-input v-model="formData.lat" placeholder="请输入纬度" />
        </el-form-item>
        <el-form-item label="打卡半径(米)" prop="radius" label-width="120px">
          <el-input v-model="formData.radius" placeholder="请输入用打卡半径(米)" />
        </el-form-item>
        <!-- <el-form-item label="用途描述" prop="descripetion">
          <el-input v-model="formData.descripetion" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="排序权重" prop="sort">
          <el-input v-model="formData.sort" placeholder="请输入排序权重" />
        </el-form-item> -->
      </el-form>
      <!-- <div class="map-section">
        <h2>地图选点</h2>
        <div class="map-controls">
          <div class="control-group">
            <label>地点名称:</label>
            <input v-model="formData.name" type="text" placeholder="请输入地点名称" />
          </div>
          <div class="control-group">
            <label>经度:</label>
            <input v-model="formData.lng" type="text" placeholder="请输入经度" />
          </div>
          <div class="control-group">
            <label>纬度:</label>
            <input v-model="formData.lat" type="text" placeholder="请输入纬度" />
          </div>
          <div class="control-group">
            <label>打卡半径(米):</label>
            <input v-model.number="formData.radius" type="number" min="10" max="5000" step="10" />
          </div>
          <div class="radius-slider">
            <label>调整半径:</label>
            <input 
              type="range" 
              min="10" 
              max="5000" 
              step="10" 
              v-model.number="formData.radius"
            />
            <span>{{ formData.radius }}米</span>
          </div>
        </div>
        <div class="map-actions">
          <button @click="clearMapSelection" class="btn-clear">
            <i class="fa fa-eraser"></i> 清除选择
          </button>
          <button 
            @click="saveArea" 
            class="btn-save"
            :disabled="!isFormValid"
          >
            <i class="fa fa-save"></i> 保存区域
          </button>
        </div>
      </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="saveArea">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="删除对话框" :visible.sync="showDeleteModal" width="960px" append-to-body>
      删除所选有可能影响打卡，是否确认删除？
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="confirmDeleteArea">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryList,
  addConfig,
  deleteConfig,
  updateConfig
} from '@/api/daka/daka-config'

import map from '@/views/components/daka/map';

export default {
  name: 'AttendanceAreaConfig',
  dicts: [
    'zs_operation_warn_types',
    'zs_operation_status',
    'zs_operation_compare_status',
    'zs_operation_platform',
    'daka_check_in_status'
  ],
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      resultList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 图片快照时间范围
      daterangeWarnTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sysUserName: undefined,
        checkInStatus: undefined,
        exportRange: undefined,
      },
      // 表单参数
      form: {},
      // 结果
      warnResult: '',
      // 表单校验
      rules: {
        snapshotUrl: [
          { required: true, message: '图片快照不能为空', trigger: 'blur' }
        ]
      },
      daka_check_in_status: [{label: '正常', value: '0'},{label: '迟到', value: '1'},{label: '缺卡', value: '2'}],
      // 地图相关
      map: null,
      marker: null,
      circle: null,
      mapHeight: '400px',
      baiduMapKey: '你的百度地图API Key', // 替换为你的API Key
      
      // 表单数据
      formData: {
        id: null,
        name: '',
        lng: '116.404', // 默认经度（北京天安门）
        lat: '39.915',  // 默认纬度（北京天安门）
        radius: 500,    // 默认半径500米
        enabled: false
      },
      
      // 区域列表
      areaList: [],
      
      // 模态框状态
      showDeleteModal: false,
      currentDeletingArea: null
    };
  },
  computed: {
    // 表单验证
    isFormValid() {
      return (
        this.formData.name.trim() !== '' &&
        !isNaN(parseFloat(this.formData.lng)) &&
        !isNaN(parseFloat(this.formData.lat)) &&
        this.formData.radius >= 10 &&
        this.formData.radius <= 5000
      );
    }
  },
  mounted() {
    // 加载模拟数据
    this.getList();
    
    // 加载地图
    this.loadMapScript();
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updatePurpose(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addPurpose(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false 
      this.showDeleteModal = false
      // this.reset();
    },
    /** 新增按钮操作 */
    handleAdd() {
      // this.reset()
      this.open = true
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 加载模拟数据
    getList() {
      // 这里应该从API获取数据，现在使用模拟数据
      // this.areaList = [
      //   {
      //     id: 1,
      //     name: '总部办公楼',
      //     lng: 116.404,
      //     lat: 39.915,
      //     radius: 300,
      //     enabled: true
      //   },
      //   {
      //     id: 2,
      //     name: '研发中心',
      //     lng: 116.414,
      //     lat: 39.905,
      //     radius: 200,
      //     enabled: false
      //   },
      //   {
      //     id: 3,
      //     name: '南区仓库',
      //     lng: 116.394,
      //     lat: 39.925,
      //     radius: 500,
      //     enabled: false
      //   }
      // ];
      queryList().then((response) => {
        console.log(response)
        this.areaList = response
        this.loading = false
      })

    },
    
    // 加载百度地图脚本
    loadMapScript() {
      if (window.BMapGL) {
        this.initMap();
        return;
      }
      
      const script = document.createElement('script');
      script.src = `https://api.map.baidu.com/api?type=webgl&v=1.0&ak=${this.baiduMapKey}`;
      // script.onload = () => {
      //   this.initMap();
      // };
      document.body.appendChild(script);
    },
    
    // 初始化地图
    initMap() {
      // 创建地图实例
      this.map = new window.BMapGL.Map(this.$refs.mapContainer);
      
      // 设置中心点和缩放级别
      const point = new window.BMapGL.Point(this.formData.lng, this.formData.lat);
      this.map.centerAndZoom(point, 15);
      
      // 启用滚轮缩放
      this.map.enableScrollWheelZoom(true);
      
      // 添加常用控件
      this.map.addControl(new window.BMapGL.NavigationControl());
      this.map.addControl(new window.BMapGL.ScaleControl());
      
      // 添加地图点击事件
      this.map.addEventListener('click', (e) => {
        this.formData.lng = e.latlng.lng;
        this.formData.lat = e.latlng.lat;
        this.updateMapOverlay();
      });
      
      // 初始化地图覆盖物
      this.updateMapOverlay();
    },
    
    // 更新地图覆盖物（标记点和圆形区域）
    updateMapOverlay() {
      if (!this.map) return;
      
      // 清除旧的覆盖物
      if (this.marker) {
        this.map.removeOverlay(this.marker);
      }
      if (this.circle) {
        this.map.removeOverlay(this.circle);
      }
      
      // 创建新的标记点
      const point = new window.BMapGL.Point(this.formData.lng, this.formData.lat);
      this.marker = new window.BMapGL.Marker(point, {
        icon: new window.BMapGL.Icon(
          'https://api.map.baidu.com/library/MassMarkers/1.2/src/images/m0.png',
          new window.BMapGL.Size(23, 25)
        )
      });
      
      // 创建圆形区域
      this.circle = new window.BMapGL.Circle(point, this.formData.radius, {
        strokeColor: '#409eff',
        strokeWeight: 2,
        strokeOpacity: 0.8,
        fillColor: '#409eff',
        fillOpacity: 0.2
      });
      
      // 添加覆盖物到地图
      this.map.addOverlay(this.marker);
      this.map.addOverlay(this.circle);
      
      // 地图居中到标记位置
      this.map.panTo(point);
    },
    
    // 清除地图选择
    clearMapSelection() {
      this.formData = {
        id: null,
        name: '',
        lng: '116.404',
        lat: '39.915',
        radius: 500,
        enabled: false
      };
      
      if (this.map) {
        this.updateMapOverlay();
      }
    },
    
    // 保存区域
    saveArea() {
      if (!this.isFormValid) return;
      
      const newArea = {
        id: this.formData.id || Date.now(), // 如果是新建，使用时间戳作为ID
        name: this.formData.name.trim(),
        lng: parseFloat(this.formData.lng),
        lat: parseFloat(this.formData.lat),
        radius: this.formData.radius,
        enabled: this.formData.enabled
      };
      
      if (this.formData.id) {
        // 更新现有区域
        const index = this.areaList.findIndex(area => area.id === this.formData.id);
        if (index !== -1) {
          this.areaList.splice(index, 1, newArea);
        }
      } else {
        // 添加新区域
        this.areaList.push(newArea);
      }
      addConfig(this.formData).then((res)=>{
        console.log(this.formData)
        console.log(res)
        if(res.code == 200){
          this.$message.success("添加成功")
        }
        this.getList()
        this.open = false;
      })
      // 重置表单
      this.clearMapSelection();
      
    },
    
    // 编辑区域
    editArea(area) {
      this.open = true
      // 复制对象，避免直接修改原始数据
      this.formData = { ...area };
      
      // 更新地图显示
      if (this.map) {
        this.updateMapOverlay();
      }
    },
    
    // 切换区域状态
    toggleAreaStatus(area) {
      if (area.enabled) {
        // 已启用的区域不允许禁用
        alert('已启用的区域不允许禁用');
        return;
      }
      
      // 启用区域
      const index = this.areaList.findIndex(a => a.id === area.id);
      if (index !== -1) {
        this.areaList[index].enabled = true;
      }
      area.enabled = true
      updateConfig(area).then((res) => {
        console.log(res)
      })
    },

    forbiddenAreaStatus(area) {
      
      // 启用区域
      const index = this.areaList.findIndex(a => a.id === area.id);
      if (index !== -1) {
        this.areaList[index].enabled = false;
      }
      area.enabled = false
      updateConfig(area).then((res) => {
        console.log(res)
      })
    },
    
    // 删除区域
    deleteArea(area) {
      if (area.enabled) {
        // 已启用的区域不允许删除
        alert('已启用的区域不允许删除');
        return;
      }
      
      
      this.currentDeletingArea = area;
      this.showDeleteModal = true;
    },
    
    // 确认删除区域
    confirmDeleteArea() {
      if (!this.currentDeletingArea) return;
      
      this.areaList = this.areaList.filter(
        area => area.id !== this.currentDeletingArea.id
      );
      
      console.log(this.currentDeletingArea)
      deleteConfig(this.currentDeletingArea.id).then((res)=> {
        console.log(res)
        if(res.code == 200){
          if(res.data == -1){
            this.$message.error("此配置已经被绑定，请先接解除绑定后在删除");
          }else{
            this.$message.success("删除成功")
          }
        }
        this.getList()
      })
      
      this.currentDeletingArea = null;
      this.showDeleteModal = false;
    }
  },
  beforeDestroy() {
    // 销毁地图实例
    if (this.map) {
      this.map.clearOverlays();
      this.map.removeEventListener('click');
      this.map = null;
    }
  }
}
</script>
<style lang="scss">
.warn-result table {
  width: 100% !important;
}
.warn-result table td a {
  display: none;
}
.warn-result table img {
  width: 100% !important;
}
.warn-result-message {
  .warn-result-text {
    font-size: 14px;
    color: #303133;
    a {
      color: #409eff;
      text-decoration: underline;
    }
  }
  .warn-result-tips {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }
}
</style>
<style lang="scss" scoped>
.goods--info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  .el-link {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  em {
    font-size: 12px;
    color: #999;
    font-style: normal;
  }
}

.attendance-area-config {
  padding: 20px;
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
}

.content-wrapper {
  display: flex;
  gap: 20px;
}

.area-list {
  flex: 1;
  min-width: 400px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.list-header h2 {
  margin: 0;
  color: #333;
}

.btn-add {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-add:hover {
  background-color: #3a8ee6;
}

.area-table {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.area-table table {
  width: 100%;
  border-collapse: collapse;
}

.area-table th,
.area-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.area-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

.area-table tr:last-child td {
  border-bottom: none;
}

.area-table tr:hover {
  background-color: #fafafa;
}

.status-enabled {
  display: inline-block;
  padding: 2px 6px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 3px;
  font-size: 12px;
}

.status-disabled {
  display: inline-block;
  padding: 2px 6px;
  background-color: #f5f5f5;
  color: #999;
  border-radius: 3px;
  font-size: 12px;
}

.btn-edit,
.btn-status,
.btn-delete {
  padding: 5px 10px;
  margin-right: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 12px;
}

.btn-edit {
  background-color: #e6f7ff;
  color: #1890ff;
}

.btn-edit:hover {
  background-color: #d6efff;
}

.btn-status {
  background-color: #f6ffed;
  color: #52c41a;
}

.btn-status:hover {
  background-color: #e8ffd9;
}

.btn-status:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.btn-delete {
  background-color: #fff2f0;
  color: #ff4d4f;
}

.btn-delete:hover {
  background-color: #ffe5e3;
}

.btn-delete:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: #999;
}

.empty-state i {
  font-size: 40px;
  margin-bottom: 10px;
  display: block;
}

.map-section {
  flex: 1;
}

.map-section h2 {
  margin-top: 0;
  color: #333;
}

.map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 220px;
}

.control-group label {
  font-weight: bold;
  min-width: 80px;
}

.control-group input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.radius-slider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.radius-slider input[type="range"] {
  flex: 1;
}

.map {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
}

.map-actions {
  display: flex;
  gap: 10px;
}

.btn-clear,
.btn-save {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-clear {
  background-color: #f5f5f5;
  color: #666;
}

.btn-clear:hover {
  background-color: #eee;
}

.btn-save {
  background-color: #409eff;
  color: white;
}

.btn-save:hover {
  background-color: #3a8ee6;
}

.btn-save:disabled {
  background-color: #e6e6e6;
  color: #999;
  cursor: not-allowed;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.modal-content h3 {
  margin-top: 0;
  color: #333;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-cancel,
.btn-confirm {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #666;
}

.btn-cancel:hover {
  background-color: #eee;
}

.btn-confirm {
  background-color: #409eff;
  color: white;
}

.btn-confirm:hover {
  background-color: #3a8ee6;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .area-list,
  .map-section {
    min-width: auto;
  }
}

@media (max-width: 500px) {
  .control-group {
    min-width: 100%;
  }
  
  .area-table th,
  .area-table td {
    padding: 8px 5px;
    font-size: 14px;
  }
  
  .btn-edit,
  .btn-status,
  .btn-delete {
    padding: 4px 6px;
    margin-right: 2px;
  }
}
</style>