|
|
@@ -1,106 +1,102 @@
|
|
|
<template>
|
|
|
- <div class="base-container">
|
|
|
- <fnHeader></fnHeader>
|
|
|
- <div class="top-bg"></div>
|
|
|
- <div class="top">
|
|
|
- <!-- <div class="back btn" @click="goBack">
|
|
|
+ <div class="base-container">
|
|
|
+ <fnHeader></fnHeader>
|
|
|
+ <div class="top-bg"></div>
|
|
|
+ <el-upload
|
|
|
+ ref="uploadRef"
|
|
|
+ class="upload-demo"
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :on-success="onSuccess"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ action="https://feiniaotech-dev.sysuimars.cn/site/plugin_ownership/uploadFile"
|
|
|
+ :headers="headerUpload"
|
|
|
+ >
|
|
|
+ <template #trigger>
|
|
|
+ <div class="btn blue" :class="{ 'disabled-button': !disabledForm && isEdit }">
|
|
|
+ <el-icon><Upload /></el-icon>
|
|
|
+ <span>RTK点位数据导入</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <div class="top">
|
|
|
+ <!-- <div class="back btn" @click="goBack">
|
|
|
<img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
|
|
|
<span>返回</span>
|
|
|
</div> -->
|
|
|
- <el-select
|
|
|
- v-model="locationVal"
|
|
|
- filterable
|
|
|
- remote
|
|
|
- :disabled="!disabledForm&&isEdit"
|
|
|
- effect="dark"
|
|
|
- reserve-keyword
|
|
|
- placeholder="搜索地区"
|
|
|
- :remote-method="remoteMethod"
|
|
|
- :loading="loading"
|
|
|
- @change="handleSearchRes"
|
|
|
- class="v-select"
|
|
|
- >
|
|
|
- <template #prefix>
|
|
|
- <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
- </template>
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in locationOptions.list"
|
|
|
- :key="index"
|
|
|
- :label="item.title"
|
|
|
- :value="item.point"
|
|
|
- >
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- <span class="sub-title"
|
|
|
- >{{ item.province }}{{ item.city }}{{ item.district }}</span
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <div class="search">
|
|
|
- <div class="add btn" :class="{'disabled-button':!disabledForm&&isEdit}" @click="handleAdd">
|
|
|
- <el-icon><Plus /></el-icon>
|
|
|
- <span>创建</span>
|
|
|
- </div>
|
|
|
- <div class="upload btn" :class="{'disabled-button':!disabledForm&&isEdit}" @click="handleExport">
|
|
|
- <img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
|
|
|
- <span>导出</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <el-form
|
|
|
- :inline="true"
|
|
|
- :model="formInlineSearch"
|
|
|
- class="search-form"
|
|
|
- ref="formInlineRef"
|
|
|
- >
|
|
|
- <el-form-item label="农场地址">
|
|
|
- <el-input
|
|
|
- v-model="formInlineSearch.address"
|
|
|
- placeholder="请输入农场地址"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="农场名称">
|
|
|
- <el-input
|
|
|
- v-model="formInlineSearch.farmName"
|
|
|
- placeholder="请输入农场名称"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="作物物种">
|
|
|
- <el-input
|
|
|
- v-model="formInlineSearch.speciesTypeName"
|
|
|
- placeholder="请输入作物物种"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="客户姓名">
|
|
|
- <el-input
|
|
|
- v-model="formInlineSearch.masterName"
|
|
|
- placeholder="请输入客户姓名"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系电话">
|
|
|
- <el-input
|
|
|
- v-model="formInlineSearch.masterTel"
|
|
|
- placeholder="请输入联系电话"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <div class="button">
|
|
|
- <el-button class="btn" :class="{'disabled-button':!disabledForm&&isEdit}" type="primary" @click="onSearch"
|
|
|
- >查询</el-button
|
|
|
- >
|
|
|
- <el-button class="btn reset" :class="{'disabled-button':!disabledForm&&isEdit}" @click="onRest">重置</el-button>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- <div class="box">
|
|
|
- <div class="map-box" :class="{ 'cursor-pointer': mouseStyle }">
|
|
|
- <div ref="mapRef" class="map"></div>
|
|
|
+ <el-select
|
|
|
+ v-model="locationVal"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ :disabled="!disabledForm && isEdit"
|
|
|
+ effect="dark"
|
|
|
+ reserve-keyword
|
|
|
+ placeholder="搜索地区"
|
|
|
+ :remote-method="remoteMethod"
|
|
|
+ :loading="loading"
|
|
|
+ @change="handleSearchRes"
|
|
|
+ class="v-select"
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
+ </template>
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in locationOptions.list"
|
|
|
+ :key="index"
|
|
|
+ :label="item.title"
|
|
|
+ :value="item.point"
|
|
|
+ >
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <span class="sub-title">{{ item.province }}{{ item.city }}{{ item.district }}</span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="search">
|
|
|
+ <div class="add btn" :class="{ 'disabled-button': !disabledForm && isEdit }" @click="handleAdd">
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
+ <span>创建</span>
|
|
|
+ </div>
|
|
|
+ <div class="upload btn" :class="{ 'disabled-button': !disabledForm && isEdit }" @click="handleExport">
|
|
|
+ <img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
|
|
|
+ <span>导出</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="tool-group">
|
|
|
- <!-- <div class="btn" @click="handleCancel" v-show="isEdit&&mapData.point">
|
|
|
+ <div class="content">
|
|
|
+ <el-form :inline="true" :model="formInlineSearch" class="search-form" ref="formInlineRef">
|
|
|
+ <el-form-item label="农场地址">
|
|
|
+ <el-input v-model="formInlineSearch.address" placeholder="请输入农场地址" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农场名称">
|
|
|
+ <el-input v-model="formInlineSearch.farmName" placeholder="请输入农场名称" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="作物物种">
|
|
|
+ <el-input v-model="formInlineSearch.speciesTypeName" placeholder="请输入作物物种" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户姓名">
|
|
|
+ <el-input v-model="formInlineSearch.masterName" placeholder="请输入客户姓名" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话">
|
|
|
+ <el-input v-model="formInlineSearch.masterTel" placeholder="请输入联系电话" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <div class="button">
|
|
|
+ <el-button
|
|
|
+ class="btn"
|
|
|
+ :class="{ 'disabled-button': !disabledForm && isEdit }"
|
|
|
+ type="primary"
|
|
|
+ @click="onSearch"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button class="btn reset" :class="{ 'disabled-button': !disabledForm && isEdit }" @click="onRest"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="box">
|
|
|
+ <div class="map-box" :class="{ 'cursor-pointer': mouseStyle }">
|
|
|
+ <div ref="mapRef" class="map"></div>
|
|
|
+ </div>
|
|
|
+ <div class="tool-group">
|
|
|
+ <!-- <div class="btn" @click="handleCancel" v-show="isEdit&&mapData.point">
|
|
|
<img
|
|
|
class="icon"
|
|
|
src="@/assets/images/common/back-black-icon.png"
|
|
|
@@ -108,168 +104,116 @@
|
|
|
/>
|
|
|
<span>撤销</span>
|
|
|
</div> -->
|
|
|
- <!-- <div class="btn" @click="handleDeletePoint">
|
|
|
+ <!-- <div class="btn" @click="handleDeletePoint">
|
|
|
<el-icon size="15"><CloseBold /></el-icon>
|
|
|
<span>删除点</span>
|
|
|
</div> -->
|
|
|
- <div
|
|
|
- class="btn delete"
|
|
|
- @click="handleDelete"
|
|
|
- v-show="mapData.selectPointArr.length > 0"
|
|
|
- >
|
|
|
- <el-icon size="15" color="#fff"><CloseBold /></el-icon>
|
|
|
- <span>删除地块</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="edit-popup" v-show="isEdit">
|
|
|
- <div class="edit-title">
|
|
|
- <div class="name">
|
|
|
- <img src="@/assets/images/common/chart-icon.png" alt="" />
|
|
|
- <span>地块属性</span>
|
|
|
- </div>
|
|
|
- <div class="btn-group">
|
|
|
- <div v-show="disabledForm" class="edit" @click="handleEdit">
|
|
|
- 编辑
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-show="mapData.selectPointArr.length > 0"
|
|
|
- class="edit ml"
|
|
|
- :class="{'disabled-button':!disabledForm}"
|
|
|
- @click="handlePrint"
|
|
|
- >
|
|
|
- 打印
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="edit-cont">
|
|
|
- <el-form
|
|
|
- :inline="true"
|
|
|
- ref="ruleFormRef"
|
|
|
- :disabled="disabledForm"
|
|
|
- :model="formInline"
|
|
|
- :rules="rules"
|
|
|
- label-position="top"
|
|
|
- class="form-inline"
|
|
|
- >
|
|
|
- <el-form-item label="农场地址" prop="address">
|
|
|
- <el-input
|
|
|
- v-model="formInline.address"
|
|
|
- placeholder="请输入农场地址"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="农场名称" prop="farmName">
|
|
|
- <el-input
|
|
|
- v-model="formInline.farmName"
|
|
|
- placeholder="请输入农场名称"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="创建时间">
|
|
|
- <el-input v-model="formInline.createDate" clearable disabled />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="农场面积">
|
|
|
- <el-input v-model="formInline.mu" disabled clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="作物物种" prop="speciesTypeName">
|
|
|
- <el-input
|
|
|
- v-model="formInline.speciesTypeName"
|
|
|
- placeholder="请输入作物物种"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="客户姓名" prop="masterName">
|
|
|
- <el-input
|
|
|
- v-model="formInline.masterName"
|
|
|
- placeholder="请输入姓名"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系电话" prop="masterTel">
|
|
|
- <el-input
|
|
|
- v-model="formInline.masterTel"
|
|
|
- placeholder="请输入联系电话"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="list-box" v-show="pointList.length > 0">
|
|
|
- <span>边界点经纬度</span>
|
|
|
- <div class="list-cont">
|
|
|
- <div
|
|
|
- class="list-item"
|
|
|
- v-for="(item, index) in pointList"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <span>A{{ index + 1 }}</span>
|
|
|
- <div class="item-box">北纬{{ item[1] }}</div>
|
|
|
- <div class="item-box">东经{{ item[0] }}</div>
|
|
|
+ <div class="btn delete" @click="handleDelete" v-show="mapData.selectPointArr.length > 0">
|
|
|
+ <el-icon size="15" color="#fff"><CloseBold /></el-icon>
|
|
|
+ <span>删除地块</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="edit-popup" v-show="isEdit">
|
|
|
+ <div class="edit-title">
|
|
|
+ <div class="name">
|
|
|
+ <img src="@/assets/images/common/chart-icon.png" alt="" />
|
|
|
+ <span>地块属性</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn-group">
|
|
|
+ <div v-show="disabledForm" class="edit" @click="handleEdit">编辑</div>
|
|
|
+ <div
|
|
|
+ v-show="mapData.selectPointArr.length > 0"
|
|
|
+ class="edit ml"
|
|
|
+ :class="{ 'disabled-button': !disabledForm }"
|
|
|
+ @click="handlePrint"
|
|
|
+ >
|
|
|
+ 打印
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="edit-cont">
|
|
|
+ <el-form
|
|
|
+ :inline="true"
|
|
|
+ ref="ruleFormRef"
|
|
|
+ :disabled="disabledForm"
|
|
|
+ :model="formInline"
|
|
|
+ :rules="rules"
|
|
|
+ label-position="top"
|
|
|
+ class="form-inline"
|
|
|
+ >
|
|
|
+ <el-form-item label="农场地址" prop="address">
|
|
|
+ <el-input v-model="formInline.address" placeholder="请输入农场地址" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农场名称" prop="farmName">
|
|
|
+ <el-input v-model="formInline.farmName" placeholder="请输入农场名称" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-input v-model="formInline.createDate" clearable disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农场面积">
|
|
|
+ <el-input v-model="formInline.mu" disabled clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="作物物种" prop="speciesTypeName">
|
|
|
+ <el-input v-model="formInline.speciesTypeName" placeholder="请输入作物物种" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户姓名" prop="masterName">
|
|
|
+ <el-input v-model="formInline.masterName" placeholder="请输入姓名" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话" prop="masterTel">
|
|
|
+ <el-input v-model="formInline.masterTel" placeholder="请输入联系电话" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="list-box" v-show="pointList.length > 0">
|
|
|
+ <span>边界点经纬度</span>
|
|
|
+ <div class="list-cont">
|
|
|
+ <div class="list-item" v-for="(item, index) in pointList" :key="index">
|
|
|
+ <span>A{{ index + 1 }}</span>
|
|
|
+ <div class="item-box">北纬{{ item[1] }}</div>
|
|
|
+ <div class="item-box">东经{{ item[0] }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="edit-footer">
|
|
|
+ <div @click="onCancel" class="btn cancel">取消</div>
|
|
|
+ <div @click="onSubmit" class="btn save">保存</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="edit-footer">
|
|
|
- <div @click="onCancel" class="btn cancel">取消</div>
|
|
|
- <div @click="onSubmit" class="btn save">保存</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 导出弹窗 -->
|
|
|
- <el-dialog
|
|
|
- v-model="dialogVisible"
|
|
|
- width="82%"
|
|
|
- center
|
|
|
- :show-close="false"
|
|
|
- modal-class="dialog-dark"
|
|
|
- >
|
|
|
- <div>
|
|
|
- <el-table :data="gridData" border max-height="600" class="table-dark">
|
|
|
- <el-table-column
|
|
|
- property="farmName"
|
|
|
- label="农场名称"
|
|
|
- show-overflow-tooltip
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- property="address"
|
|
|
- label="农场地址"
|
|
|
- width="230"
|
|
|
- show-overflow-tooltip
|
|
|
- />
|
|
|
- <el-table-column property="createDate" label="创建时间" width="170" />
|
|
|
- <el-table-column property="mu" label="农场面积">
|
|
|
- <template #default="scope">
|
|
|
- <span>{{ scope.row.mu }}亩</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="speciesTypeName" label="作物物种" />
|
|
|
- <el-table-column property="masterName" label="客户姓名" />
|
|
|
- <el-table-column property="masterTel" width="120" label="联系电话" />
|
|
|
- <el-table-column
|
|
|
- property="points"
|
|
|
- label="边界点经纬度"
|
|
|
- width="480"
|
|
|
- show-overflow-tooltip
|
|
|
- />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button class="btn" @click="dialogVisible = false">取消</el-button>
|
|
|
- <el-button class="btn" type="primary" @click="handleDowload">
|
|
|
- 下载
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- <Pdf
|
|
|
- :title="formInline.id + ''"
|
|
|
- :showDialog="pdfShow"
|
|
|
- @closeDialog="pdfShow = false"
|
|
|
- v-if="formInline.id && pdfShow"
|
|
|
- :rowId="formInline.id"
|
|
|
- ></Pdf>
|
|
|
+ <!-- 导出弹窗 -->
|
|
|
+ <el-dialog v-model="dialogVisible" width="82%" center :show-close="false" modal-class="dialog-dark">
|
|
|
+ <div>
|
|
|
+ <el-table :data="gridData" border max-height="600" class="table-dark">
|
|
|
+ <el-table-column property="farmName" label="农场名称" show-overflow-tooltip />
|
|
|
+ <el-table-column property="address" label="农场地址" width="230" show-overflow-tooltip />
|
|
|
+ <el-table-column property="createDate" label="创建时间" width="170" />
|
|
|
+ <el-table-column property="mu" label="农场面积">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ scope.row.mu }}亩</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="speciesTypeName" label="作物物种" />
|
|
|
+ <el-table-column property="masterName" label="客户姓名" />
|
|
|
+ <el-table-column property="masterTel" width="120" label="联系电话" />
|
|
|
+ <el-table-column property="points" label="边界点经纬度" width="480" show-overflow-tooltip />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button class="btn" @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button class="btn" type="primary" @click="handleDowload"> 下载 </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <Pdf
|
|
|
+ :title="formInline.id + ''"
|
|
|
+ :showDialog="pdfShow"
|
|
|
+ @closeDialog="pdfShow = false"
|
|
|
+ v-if="formInline.id && pdfShow"
|
|
|
+ :rowId="formInline.id"
|
|
|
+ ></Pdf>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -281,10 +225,12 @@ import { useRouter } from "vue-router";
|
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
import { dateFormat } from "@/utils/date_util";
|
|
|
import { exportExcel, parseMultiPolygon } from "@/utils/index";
|
|
|
+import { useStore } from "vuex";
|
|
|
import Pdf from "./Pdf";
|
|
|
const pdfShow = ref(false);
|
|
|
const mouseStyle = ref(1);
|
|
|
const router = useRouter();
|
|
|
+const store = useStore();
|
|
|
|
|
|
let authenticMap = new AuthenticMap();
|
|
|
const mapRef = ref();
|
|
|
@@ -292,24 +238,24 @@ const userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
|
|
|
const location = ref(userInfo.location);
|
|
|
|
|
|
onMounted(() => {
|
|
|
- authenticMap.initMap(location.value, mapRef.value);
|
|
|
- getList();
|
|
|
+ authenticMap.initMap(location.value, mapRef.value);
|
|
|
+ getList();
|
|
|
});
|
|
|
|
|
|
// 获取地块列表
|
|
|
const plotList = ref([]);
|
|
|
const getList = (callback) => {
|
|
|
- authenticMap.clearLayer();
|
|
|
- return VE_API.authentic.getList(formInlineSearch).then(({ code, data }) => {
|
|
|
- plotList.value = data || [];
|
|
|
- const geom = [];
|
|
|
- data.forEach((item) => {
|
|
|
- geom.push({ featureWkt: item.geom, ...item });
|
|
|
+ authenticMap.clearLayer();
|
|
|
+ return VE_API.authentic.getList(formInlineSearch).then(({ code, data }) => {
|
|
|
+ plotList.value = data || [];
|
|
|
+ const geom = [];
|
|
|
+ data.forEach((item) => {
|
|
|
+ geom.push({ featureWkt: item.geom, ...item });
|
|
|
+ });
|
|
|
+ authenticMap.setAreaGeometry(geom);
|
|
|
+ authenticMap.addPoint(data);
|
|
|
+ callback && callback(geom);
|
|
|
});
|
|
|
- authenticMap.setAreaGeometry(geom);
|
|
|
- authenticMap.addPoint(data);
|
|
|
- callback && callback(geom);
|
|
|
- });
|
|
|
};
|
|
|
|
|
|
// 搜索
|
|
|
@@ -318,622 +264,664 @@ const loading = ref(false);
|
|
|
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
|
|
|
|
|
|
const handleSearchRes = (v) => {
|
|
|
- authenticMap.setMapCenter(v);
|
|
|
- onRest();
|
|
|
+ authenticMap.setMapCenter(v);
|
|
|
+ onRest();
|
|
|
};
|
|
|
|
|
|
const locationOptions = reactive({
|
|
|
- list: [],
|
|
|
+ list: [],
|
|
|
});
|
|
|
const remoteMethod = async (keyword) => {
|
|
|
- if (keyword) {
|
|
|
- locationOptions.list = [];
|
|
|
- loading.value = true;
|
|
|
- const params = {
|
|
|
- key: MAP_KEY,
|
|
|
- keyword,
|
|
|
- // location: location.value,
|
|
|
- location: "22.574540836684672,113.1093017627431",
|
|
|
- };
|
|
|
- await VE_API.old_mini_map
|
|
|
- .getCtiyList({ word: keyword })
|
|
|
- .then(({ data }) => {
|
|
|
- if (data && data.length) {
|
|
|
- data.forEach((item) => {
|
|
|
- item.point = item.location.lat + "," + item.location.lng;
|
|
|
- locationOptions.list.push(item);
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- VE_API.old_mini_map.search(params).then(({ data }) => {
|
|
|
- loading.value = false;
|
|
|
- data.forEach((item) => {
|
|
|
- item.point = item.location.lat + "," + item.location.lng;
|
|
|
- locationOptions.list.push(item);
|
|
|
- });
|
|
|
- });
|
|
|
- } else {
|
|
|
- locationOptions.list = [];
|
|
|
- }
|
|
|
+ if (keyword) {
|
|
|
+ locationOptions.list = [];
|
|
|
+ loading.value = true;
|
|
|
+ const params = {
|
|
|
+ key: MAP_KEY,
|
|
|
+ keyword,
|
|
|
+ // location: location.value,
|
|
|
+ location: "22.574540836684672,113.1093017627431",
|
|
|
+ };
|
|
|
+ await VE_API.old_mini_map.getCtiyList({ word: keyword }).then(({ data }) => {
|
|
|
+ if (data && data.length) {
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.point = item.location.lat + "," + item.location.lng;
|
|
|
+ locationOptions.list.push(item);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ VE_API.old_mini_map.search(params).then(({ data }) => {
|
|
|
+ loading.value = false;
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.point = item.location.lat + "," + item.location.lng;
|
|
|
+ locationOptions.list.push(item);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ locationOptions.list = [];
|
|
|
+ }
|
|
|
};
|
|
|
const validatePhoneNumber = (rule, value, callback) => {
|
|
|
- const phoneRegex = /^[1][3-9]\d{9}$/;
|
|
|
- if (!value) {
|
|
|
- callback(new Error("请输入联系电话"));
|
|
|
- } else if (!phoneRegex.test(value)) {
|
|
|
- callback(new Error("手机号码格式不正确"));
|
|
|
- } else {
|
|
|
- callback();
|
|
|
- }
|
|
|
+ const phoneRegex = /^[1][3-9]\d{9}$/;
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error("请输入联系电话"));
|
|
|
+ } else if (!phoneRegex.test(value)) {
|
|
|
+ callback(new Error("手机号码格式不正确"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
};
|
|
|
const rules = {
|
|
|
- address: [{ required: true, message: "请输入农场地址", trigger: "change" }],
|
|
|
- farmName: [{ required: true, message: "请输入农场名称", trigger: "change" }],
|
|
|
- speciesTypeName: [
|
|
|
- { required: true, message: "请输入作物物种", trigger: "change" },
|
|
|
- ],
|
|
|
- masterName: [{ required: true, message: "请输入姓名", trigger: "change" }],
|
|
|
- masterTel: [
|
|
|
- { required: true, validator: validatePhoneNumber, trigger: "change" },
|
|
|
- ],
|
|
|
+ address: [{ required: true, message: "请输入农场地址", trigger: "change" }],
|
|
|
+ farmName: [{ required: true, message: "请输入农场名称", trigger: "change" }],
|
|
|
+ speciesTypeName: [{ required: true, message: "请输入作物物种", trigger: "change" }],
|
|
|
+ masterName: [{ required: true, message: "请输入姓名", trigger: "change" }],
|
|
|
+ masterTel: [{ required: true, validator: validatePhoneNumber, trigger: "change" }],
|
|
|
};
|
|
|
const ruleFormRef = ref(null);
|
|
|
const initForm = {
|
|
|
- id: "",
|
|
|
- address: "",
|
|
|
- farmName: "",
|
|
|
- createDate: "",
|
|
|
- mu: "",
|
|
|
- speciesTypeName: "",
|
|
|
- masterName: "",
|
|
|
- masterTel: "",
|
|
|
- geom: "",
|
|
|
+ id: "",
|
|
|
+ address: "",
|
|
|
+ farmName: "",
|
|
|
+ createDate: "",
|
|
|
+ mu: "",
|
|
|
+ speciesTypeName: "",
|
|
|
+ masterName: "",
|
|
|
+ masterTel: "",
|
|
|
+ geom: "",
|
|
|
};
|
|
|
const formInline = reactive({
|
|
|
- ...initForm,
|
|
|
+ ...initForm,
|
|
|
});
|
|
|
const disabledForm = ref(false);
|
|
|
|
|
|
// 筛选
|
|
|
const formInlineRef = ref(null);
|
|
|
const formInlineSearch = reactive({
|
|
|
- ...initForm,
|
|
|
+ ...initForm,
|
|
|
});
|
|
|
|
|
|
const onSearch = () => {
|
|
|
- authenticMap.search(formInlineSearch);
|
|
|
+ authenticMap.search(formInlineSearch);
|
|
|
};
|
|
|
|
|
|
const onRest = () => {
|
|
|
- Object.assign(formInlineSearch, initForm);
|
|
|
- isUpdata.value = false;
|
|
|
- onCancel();
|
|
|
+ Object.assign(formInlineSearch, initForm);
|
|
|
+ isUpdata.value = false;
|
|
|
+ onCancel();
|
|
|
};
|
|
|
|
|
|
const isEdit = ref(false);
|
|
|
|
|
|
// 编辑
|
|
|
const handleEdit = () => {
|
|
|
- disabledForm.value = false;
|
|
|
- mapData.disabledForm = false
|
|
|
- authenticMap.startModify();
|
|
|
+ disabledForm.value = false;
|
|
|
+ mapData.disabledForm = false;
|
|
|
+ authenticMap.startModify();
|
|
|
};
|
|
|
|
|
|
// 取消
|
|
|
const isUpdata = ref(true);
|
|
|
const onCancel = () => {
|
|
|
- isEdit.value = false;
|
|
|
- if (isUpdata.value) {
|
|
|
- authenticMap.cancelDraw();
|
|
|
- } else {
|
|
|
- Object.assign(formInlineSearch, initForm);
|
|
|
- getList((geoms) => {
|
|
|
- authenticMap.allUnSelect();
|
|
|
- });
|
|
|
- }
|
|
|
- authenticMap.setPoint("point");
|
|
|
- authenticMap.clearMapData("isEdit", false, formInline.id);
|
|
|
- authenticMap.endDraw();
|
|
|
+ isEdit.value = false;
|
|
|
+ store.commit("authentic/SET_ISEDIT_STATUS", false);
|
|
|
+ if (isUpdata.value) {
|
|
|
+ authenticMap.cancelDraw();
|
|
|
+ } else {
|
|
|
+ Object.assign(formInlineSearch, initForm);
|
|
|
+ getList((geoms) => {
|
|
|
+ authenticMap.allUnSelect();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ authenticMap.setPoint("point");
|
|
|
+ authenticMap.clearMapData("isEdit", false, formInline.id);
|
|
|
+ authenticMap.endDraw();
|
|
|
};
|
|
|
|
|
|
// 保存
|
|
|
const onSubmit = () => {
|
|
|
- if (!ruleFormRef.value) return;
|
|
|
- ruleFormRef.value.validate((valid, fields) => {
|
|
|
- if (valid) {
|
|
|
- formInline.mu = formInline.mu.split('亩')[0]
|
|
|
- VE_API.authentic.saveData(formInline).then((res) => {
|
|
|
- isUpdata.value = false;
|
|
|
- disabledForm.value = true;
|
|
|
- mapData.disabledForm = true;
|
|
|
- Object.assign(formInlineSearch, initForm);
|
|
|
- authenticMap.endDraw();
|
|
|
- getList().then(() => {
|
|
|
- isRefresh.value = false;
|
|
|
- isEdit.value = false;
|
|
|
- authenticMap.allUnSelect()
|
|
|
- authenticMap.clearMapData()
|
|
|
- // authenticMap.getSelectPointArr(
|
|
|
- // point.id || plotList.value[plotList.value.length - 1].id
|
|
|
- // );
|
|
|
- });
|
|
|
- });
|
|
|
+ if (!ruleFormRef.value) return;
|
|
|
+ ruleFormRef.value.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ formInline.mu = formInline.mu.split("亩")[0];
|
|
|
+ VE_API.authentic.saveData(formInline).then((res) => {
|
|
|
+ store.commit("authentic/SET_ISEDIT_STATUS", false);
|
|
|
+ isUpdata.value = false;
|
|
|
+ disabledForm.value = true;
|
|
|
+ mapData.disabledForm = true;
|
|
|
+ Object.assign(formInlineSearch, initForm);
|
|
|
+ authenticMap.endDraw();
|
|
|
+ getList().then(() => {
|
|
|
+ isRefresh.value = false;
|
|
|
+ isEdit.value = false;
|
|
|
+ authenticMap.allUnSelect();
|
|
|
+ authenticMap.clearMapData();
|
|
|
+ // authenticMap.getSelectPointArr(
|
|
|
+ // point.id || plotList.value[plotList.value.length - 1].id
|
|
|
+ // );
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+//上传
|
|
|
+const uploadRef = ref(null);
|
|
|
+const headerUpload = { token: store.getters.token };
|
|
|
+// 校验文件格式和大小
|
|
|
+const beforeUpload = (file) => {
|
|
|
+ const isCsv = file.type === "application/vnd.ms-excel" || file.type === "text/csv" || file.name.endsWith(".csv");
|
|
|
+
|
|
|
+ if (!isCsv) {
|
|
|
+ ElMessage.error("上传文件只能是 CSV 格式!");
|
|
|
+ }
|
|
|
+
|
|
|
+ return isCsv;
|
|
|
+};
|
|
|
+
|
|
|
+const handleExceed = (files) => {
|
|
|
+ uploadRef.value.clearFiles();
|
|
|
+ const file = files[0];
|
|
|
+ uploadRef.value.handleStart(file);
|
|
|
+};
|
|
|
+
|
|
|
+const onSuccess = (res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage.success("上传成功");
|
|
|
+ store.commit("authentic/SET_ISEDIT_STATUS", true);
|
|
|
+ isEdit.value = true;
|
|
|
+ disabledForm.value = false;
|
|
|
+ formInline.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
|
|
|
+ const geom = [{ featureWkt: res.data.geom, ...res.data }];
|
|
|
+ authenticMap.setAreaGeometry(geom);
|
|
|
+ authenticMap.fit([res.data.geom]);
|
|
|
+ updatePointList("upload");
|
|
|
+ authenticMap.startModify("upload");
|
|
|
+ uploadRef.value.clearFiles();
|
|
|
+ } else {
|
|
|
+ ElMessage.error("上传失败");
|
|
|
}
|
|
|
- });
|
|
|
};
|
|
|
|
|
|
// 打印
|
|
|
const handlePrint = () => {
|
|
|
- pdfShow.value = true;
|
|
|
+ pdfShow.value = true;
|
|
|
};
|
|
|
|
|
|
// 返回
|
|
|
const goBack = () => {
|
|
|
- router.go(-1);
|
|
|
+ router.go(-1);
|
|
|
};
|
|
|
|
|
|
function updateFormInline(newData, name) {
|
|
|
- Object.assign(formInline, newData);
|
|
|
+ Object.assign(formInline, newData);
|
|
|
}
|
|
|
|
|
|
// 删除地块
|
|
|
const handleDelete = () => {
|
|
|
- const id = mapData.selectPointArr.map((item) => item.values_.id);
|
|
|
- if (id.length<0) return ElMessage("请选择地块");
|
|
|
- ElMessageBox.confirm("您确定删除该地块吗?", "提示", {
|
|
|
- confirmButtonText: "确认",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- VE_API.authentic.deleteData(id).then((res) => {
|
|
|
- isUpdata.value = false;
|
|
|
- onCancel();
|
|
|
- });
|
|
|
+ const id = mapData.selectPointArr.map((item) => item.values_.id);
|
|
|
+ if (id.length < 0) return ElMessage("请选择地块");
|
|
|
+ ElMessageBox.confirm("您确定删除该地块吗?", "提示", {
|
|
|
+ confirmButtonText: "确认",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
})
|
|
|
- .catch(() => {});
|
|
|
+ .then(() => {
|
|
|
+ VE_API.authentic.deleteData(id).then((res) => {
|
|
|
+ isUpdata.value = false;
|
|
|
+ onCancel();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
};
|
|
|
|
|
|
// 创建
|
|
|
const isRefresh = ref(true);
|
|
|
const handleAdd = () => {
|
|
|
- isRefresh.value = false;
|
|
|
- isEdit.value = false;
|
|
|
- if (isUpdata.value) {
|
|
|
- authenticMap.cancelDraw();
|
|
|
- authenticMap.allUnSelect();
|
|
|
- } else {
|
|
|
- getList();
|
|
|
- isUpdata.value = true;
|
|
|
- }
|
|
|
- updateFormInline({ ...initForm });
|
|
|
- ruleFormRef.value.resetFields();
|
|
|
- pointList.value = [];
|
|
|
- authenticMap.clearMapData("curPointData", {});
|
|
|
- authenticMap.clearMapData("isEdit", false);
|
|
|
- authenticMap.setPoint("point");
|
|
|
- authenticMap.startDraw();
|
|
|
+ isRefresh.value = false;
|
|
|
+ isEdit.value = false;
|
|
|
+ if (isUpdata.value) {
|
|
|
+ authenticMap.cancelDraw();
|
|
|
+ authenticMap.allUnSelect();
|
|
|
+ } else {
|
|
|
+ getList();
|
|
|
+ isUpdata.value = true;
|
|
|
+ }
|
|
|
+ updateFormInline({ ...initForm });
|
|
|
+ ruleFormRef.value.resetFields();
|
|
|
+ pointList.value = [];
|
|
|
+ authenticMap.clearMapData("curPointData", {});
|
|
|
+ authenticMap.clearMapData("isEdit", false);
|
|
|
+ authenticMap.setPoint("point");
|
|
|
+ authenticMap.startDraw();
|
|
|
};
|
|
|
|
|
|
// 删除点
|
|
|
const handleDeletePoint = () => {
|
|
|
- authenticMap.removePoint();
|
|
|
+ authenticMap.removePoint();
|
|
|
};
|
|
|
|
|
|
// 撤销
|
|
|
const handleCancel = () => {
|
|
|
- authenticMap.undoLastDraw();
|
|
|
- // authenticMap.cancelDraw()
|
|
|
+ authenticMap.undoLastDraw();
|
|
|
+ // authenticMap.cancelDraw()
|
|
|
};
|
|
|
|
|
|
// 导出
|
|
|
const gridData = ref([]);
|
|
|
const dialogVisible = ref(false);
|
|
|
const handleExport = () => {
|
|
|
- if (mapData.selectPointArr.length < 1) return ElMessage("请选择地块");
|
|
|
- const ids = mapData.selectPointArr.map((item) => item.values_.id);
|
|
|
- VE_API.authentic.exportData(ids).then(({ data }) => {
|
|
|
- gridData.value = data.map((item) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- createDate: dateFormat(
|
|
|
- new Date(item.createDate),
|
|
|
- "YYYY-mm-dd HH:MM:SS"
|
|
|
- ),
|
|
|
- };
|
|
|
+ if (mapData.selectPointArr.length < 1) return ElMessage("请选择地块");
|
|
|
+ const ids = mapData.selectPointArr.map((item) => item.values_.id);
|
|
|
+ VE_API.authentic.exportData(ids).then(({ data }) => {
|
|
|
+ gridData.value = data.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ createDate: dateFormat(new Date(item.createDate), "YYYY-mm-dd HH:MM:SS"),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ dialogVisible.value = true;
|
|
|
});
|
|
|
- dialogVisible.value = true;
|
|
|
- });
|
|
|
};
|
|
|
|
|
|
// 下载
|
|
|
const handleDowload = () => {
|
|
|
- const fieldLabels = [
|
|
|
- "农场名称",
|
|
|
- "农场地址",
|
|
|
- "创建时间",
|
|
|
- "农场面积",
|
|
|
- "作物物种",
|
|
|
- "客户姓名",
|
|
|
- "联系电话",
|
|
|
- "边界点经纬度",
|
|
|
- ];
|
|
|
- const fieldKeys = [
|
|
|
- "farmName",
|
|
|
- "address",
|
|
|
- "createDate",
|
|
|
- "mu",
|
|
|
- "speciesTypeName",
|
|
|
- "masterName",
|
|
|
- "masterTel",
|
|
|
- "points",
|
|
|
- ];
|
|
|
- const fileName = "农场数据" + dateFormat(new Date(), "YYYY-mm-dd HH:MM");
|
|
|
- exportExcel(gridData.value, fieldLabels, fieldKeys, fileName);
|
|
|
+ const fieldLabels = [
|
|
|
+ "农场名称",
|
|
|
+ "农场地址",
|
|
|
+ "创建时间",
|
|
|
+ "农场面积",
|
|
|
+ "作物物种",
|
|
|
+ "客户姓名",
|
|
|
+ "联系电话",
|
|
|
+ "边界点经纬度",
|
|
|
+ ];
|
|
|
+ const fieldKeys = [
|
|
|
+ "farmName",
|
|
|
+ "address",
|
|
|
+ "createDate",
|
|
|
+ "mu",
|
|
|
+ "speciesTypeName",
|
|
|
+ "masterName",
|
|
|
+ "masterTel",
|
|
|
+ "points",
|
|
|
+ ];
|
|
|
+ const fileName = "农场数据" + dateFormat(new Date(), "YYYY-mm-dd HH:MM");
|
|
|
+ exportExcel(gridData.value, fieldLabels, fieldKeys, fileName);
|
|
|
};
|
|
|
|
|
|
const pointList = ref([]);
|
|
|
|
|
|
// 获取编辑回显数据
|
|
|
const getDetailsData = (id) => {
|
|
|
- VE_API.authentic.getDetails({ id }).then(({ data }) => {
|
|
|
- isEdit.value = true;
|
|
|
- disabledForm.value = true;
|
|
|
- mapData.disabledForm = true
|
|
|
-
|
|
|
- data.createDate = dateFormat(
|
|
|
- new Date(data.createDate),
|
|
|
- "YYYY-mm-dd HH:MM:SS"
|
|
|
- );
|
|
|
- updateFormInline({ ...data });
|
|
|
- formInline.mu = data.mu + "亩";
|
|
|
-
|
|
|
- // 经纬度列表
|
|
|
- let arr = JSON.parse(data.points);
|
|
|
- // 删除最后数组最后一项闭合数据
|
|
|
- arr.pop();
|
|
|
- pointList.value = arr;
|
|
|
- });
|
|
|
+ VE_API.authentic.getDetails({ id }).then(({ data }) => {
|
|
|
+ isEdit.value = true;
|
|
|
+ disabledForm.value = true;
|
|
|
+ mapData.disabledForm = true;
|
|
|
+
|
|
|
+ data.createDate = dateFormat(new Date(data.createDate), "YYYY-mm-dd HH:MM:SS");
|
|
|
+ updateFormInline({ ...data });
|
|
|
+ formInline.mu = data.mu + "亩";
|
|
|
+
|
|
|
+ // 经纬度列表
|
|
|
+ let arr = JSON.parse(data.points);
|
|
|
+ // 删除最后数组最后一项闭合数据
|
|
|
+ arr.pop();
|
|
|
+ pointList.value = arr;
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
// 添加经纬度列表
|
|
|
const updatePointList = (type) => {
|
|
|
- const { geometryArr, area } = authenticMap.getAreaGeometry(type);
|
|
|
- const lastItem = geometryArr[geometryArr.length - 1];
|
|
|
- formInline.geom = lastItem.featureWkt;
|
|
|
- formInline.mu = area + "亩";
|
|
|
- let result = parseMultiPolygon(lastItem.featureWkt);
|
|
|
- result.pop();
|
|
|
- pointList.value = result;
|
|
|
+ const { geometryArr, area } = authenticMap.getAreaGeometry(type);
|
|
|
+ const lastItem = geometryArr[geometryArr.length - 1];
|
|
|
+ formInline.geom = lastItem.featureWkt;
|
|
|
+ formInline.mu = area + "亩";
|
|
|
+ let result = parseMultiPolygon(lastItem.featureWkt);
|
|
|
+ result.pop();
|
|
|
+ pointList.value = result;
|
|
|
};
|
|
|
|
|
|
watchEffect(() => {
|
|
|
- if (mapData.isEditArea) {
|
|
|
- isUpdata.value = false;
|
|
|
- updatePointList('edit');
|
|
|
- }
|
|
|
+ if (mapData.isEditArea) {
|
|
|
+ isUpdata.value = false;
|
|
|
+ updatePointList("edit");
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
watch(
|
|
|
- () => mapData.isEdit,
|
|
|
- (newVale, oldValue) => {
|
|
|
- if (newVale && mapData.selectPointArr.length < 2 && !isRefresh.value) {
|
|
|
- isEdit.value = true;
|
|
|
- disabledForm.value = false;
|
|
|
- mapData.disabledForm = false
|
|
|
- isUpdata.value = true;
|
|
|
- // isRefresh.value = false;
|
|
|
- formInline.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
|
|
|
- updatePointList('add');
|
|
|
- authenticMap.startModify();
|
|
|
+ () => mapData.isEdit,
|
|
|
+ (newVale, oldValue) => {
|
|
|
+ if (newVale && mapData.selectPointArr.length < 2 && !isRefresh.value) {
|
|
|
+ isEdit.value = true;
|
|
|
+ disabledForm.value = false;
|
|
|
+ mapData.disabledForm = false;
|
|
|
+ isUpdata.value = true;
|
|
|
+ formInline.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
|
|
|
+ updatePointList("add");
|
|
|
+ authenticMap.startModify();
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
);
|
|
|
|
|
|
watch(
|
|
|
- () => mapData.selectPointArr,
|
|
|
- (newVale, oldValue) => {
|
|
|
- if (mapData.selectPointArr.length === 1) {
|
|
|
- const obj = mapData.selectPointArr[0];
|
|
|
- const id = obj.values_.id
|
|
|
- getDetailsData(id);
|
|
|
- mapData.curPointData = obj.values_
|
|
|
- } else {
|
|
|
- if (isRefresh.value) {
|
|
|
- isEdit.value = false;
|
|
|
- authenticMap.endDraw();
|
|
|
- isRefresh.value = true;
|
|
|
- }
|
|
|
- if(mapData.selectPointArr.length === 0 || mapData.selectPointArr.length > 1){
|
|
|
- isEdit.value = false;
|
|
|
- }
|
|
|
+ () => mapData.selectPointArr,
|
|
|
+ (newVale, oldValue) => {
|
|
|
+ if (mapData.selectPointArr.length === 1) {
|
|
|
+ const obj = mapData.selectPointArr[0];
|
|
|
+ const id = obj.values_.id;
|
|
|
+ getDetailsData(id);
|
|
|
+ mapData.curPointData = obj.values_;
|
|
|
+ } else {
|
|
|
+ if (isRefresh.value) {
|
|
|
+ isEdit.value = false;
|
|
|
+ authenticMap.endDraw();
|
|
|
+ isRefresh.value = true;
|
|
|
+ }
|
|
|
+ if (mapData.selectPointArr.length === 0 || mapData.selectPointArr.length > 1) {
|
|
|
+ isEdit.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
);
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.base-container {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- z-index: 1;
|
|
|
- position: relative;
|
|
|
- .top-bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 74px;
|
|
|
- background: #101010;
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 6px 16px;
|
|
|
- border-radius: 4px;
|
|
|
- cursor: pointer;
|
|
|
- .icon {
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
- }
|
|
|
- span {
|
|
|
- margin-left: 10px;
|
|
|
+::v-deep {
|
|
|
+ .el-upload-list {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .disabled-button{
|
|
|
- pointer-events: none;
|
|
|
- opacity: 0.5;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
-
|
|
|
- .top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- // justify-content: flex-end;
|
|
|
+}
|
|
|
+.base-container {
|
|
|
width: 100%;
|
|
|
- height: 40px;
|
|
|
- background: #101010;
|
|
|
- padding: 17px 20px 0 20px;
|
|
|
+ height: 100vh;
|
|
|
+ color: #fff;
|
|
|
box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .back {
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
- }
|
|
|
- .v-select {
|
|
|
- width: 300px;
|
|
|
- ::v-deep {
|
|
|
- .el-select__wrapper {
|
|
|
- background: #101010;
|
|
|
- box-shadow: none;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.7);
|
|
|
- .el-select__input {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ z-index: 1;
|
|
|
+ position: relative;
|
|
|
+ .top-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ background: #101010;
|
|
|
+ z-index: -1;
|
|
|
}
|
|
|
- .search {
|
|
|
+ .upload-demo{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
- width: 60%;
|
|
|
- .input-with-select {
|
|
|
- margin-left: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload {
|
|
|
- background: #2199f8;
|
|
|
- margin-left: 25px;
|
|
|
- }
|
|
|
- .add {
|
|
|
- background: #fff;
|
|
|
- color: #000;
|
|
|
- margin-left: 25px;
|
|
|
- }
|
|
|
+ padding-right: 20px;
|
|
|
+ background: #101010;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 74px - 40px);
|
|
|
- box-sizing: border-box;
|
|
|
- background: #101010;
|
|
|
- padding: 13px 20px 20px 20px;
|
|
|
- .search-form {
|
|
|
- height: 40px;
|
|
|
- margin: 5px 0;
|
|
|
- display: flex;
|
|
|
- // justify-content: flex-end;
|
|
|
- justify-content: space-between;
|
|
|
- ::v-deep {
|
|
|
- .el-form-item__label {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .el-form-item__content {
|
|
|
- width: 190px;
|
|
|
- }
|
|
|
- .el-input__wrapper {
|
|
|
- background: #101010;
|
|
|
- box-shadow: none;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.7);
|
|
|
- .el-input__inner {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .button {
|
|
|
- display: flex;
|
|
|
- .btn {
|
|
|
- width: 84px;
|
|
|
- &.reset {
|
|
|
- margin-left: 25px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .blue{
|
|
|
+ background: #2199f8;
|
|
|
}
|
|
|
- .box {
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
- border-radius: 8px;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #232323;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 50px);
|
|
|
- position: relative;
|
|
|
- .map-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 16px;
|
|
|
border-radius: 4px;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
- .map {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .tool-group {
|
|
|
- position: absolute;
|
|
|
+ .disabled-button {
|
|
|
+ pointer-events: none;
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
display: flex;
|
|
|
- right: calc(500px + 36px);
|
|
|
- top: 42px;
|
|
|
- .btn {
|
|
|
- background: #fff;
|
|
|
- color: #000;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- .delete {
|
|
|
- background: #e45c5c;
|
|
|
- color: #fff;
|
|
|
+ justify-content: space-between;
|
|
|
+ // justify-content: flex-end;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ background: #101010;
|
|
|
+ padding: 17px 20px 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .back {
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
}
|
|
|
- }
|
|
|
- .edit-popup {
|
|
|
- width: 500px;
|
|
|
- height: calc(100% - 53px - 20px);
|
|
|
- position: absolute;
|
|
|
- top: 36px;
|
|
|
- right: 36px;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
- border-radius: 8px;
|
|
|
- background: #232323;
|
|
|
- .edit-title {
|
|
|
- padding: 0 10px;
|
|
|
- background: rgba(68, 68, 68, 0.4);
|
|
|
- border-bottom: 1px solid rgba(68, 68, 68, 0.4);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .btn-group {
|
|
|
- display: flex;
|
|
|
- .ml {
|
|
|
- margin-left: 20px;
|
|
|
+ .v-select {
|
|
|
+ width: 300px;
|
|
|
+ ::v-deep {
|
|
|
+ .el-select__wrapper {
|
|
|
+ background: #101010;
|
|
|
+ box-shadow: none;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.7);
|
|
|
+ .el-select__input {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .name {
|
|
|
+ }
|
|
|
+ .search {
|
|
|
display: flex;
|
|
|
- padding: 12px 0px;
|
|
|
align-items: center;
|
|
|
- }
|
|
|
- span {
|
|
|
- margin-left: 8px;
|
|
|
- font-size: 18px;
|
|
|
- font-family: "SOURCEHANTIFINE";
|
|
|
- }
|
|
|
- .edit {
|
|
|
- color: #2199f8;
|
|
|
- padding: 6px 20px;
|
|
|
- border: 1px solid #2199f8;
|
|
|
- border-radius: 4px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: 60%;
|
|
|
+ .input-with-select {
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload {
|
|
|
+ background: #2199f8;
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ background: #fff;
|
|
|
+ color: #000;
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
}
|
|
|
- .edit-cont {
|
|
|
- padding: 16px;
|
|
|
- width: calc(100% - 32px);
|
|
|
- height: calc(100% - 64px - 84px);
|
|
|
- .form-inline {
|
|
|
- height: 320px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 74px - 40px - 32px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #101010;
|
|
|
+ padding: 13px 20px 20px 20px;
|
|
|
+ .search-form {
|
|
|
+ height: 40px;
|
|
|
+ margin: 5px 0;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
::v-deep {
|
|
|
- .el-input {
|
|
|
- width: 200px;
|
|
|
- --el-input-placeholder-color: #666666;
|
|
|
- }
|
|
|
- .el-form-item__label {
|
|
|
- color: #bbbbbb;
|
|
|
- }
|
|
|
- .el-input__wrapper {
|
|
|
- background: #232323;
|
|
|
- border: 1px solid #444444;
|
|
|
- box-shadow: none;
|
|
|
- .el-input__inner {
|
|
|
- color: #fff;
|
|
|
+ .el-form-item__label {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .el-form-item__content {
|
|
|
+ width: 190px;
|
|
|
+ }
|
|
|
+ .el-input__wrapper {
|
|
|
+ background: #101010;
|
|
|
+ box-shadow: none;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.7);
|
|
|
+ .el-input__inner {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list-box {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 320px);
|
|
|
- span {
|
|
|
- color: #bbbbbb;
|
|
|
}
|
|
|
- .list-cont {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 20px);
|
|
|
- border-radius: 4px;
|
|
|
- margin-top: 5px;
|
|
|
- background: rgba(68, 68, 68, 0.4);
|
|
|
- padding: 12px 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .list-item {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 8px;
|
|
|
+ .button {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- .item-box {
|
|
|
- padding: 8px;
|
|
|
- border: 1px solid #444444;
|
|
|
- border-radius: 4px;
|
|
|
- margin-left: 10px;
|
|
|
+ .btn {
|
|
|
+ width: 84px;
|
|
|
+ &.reset {
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- .edit-footer {
|
|
|
- width: 100%;
|
|
|
- height: 64px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 12px 16px;
|
|
|
- border-top: 1px solid rgba(68, 68, 68, 0.4);
|
|
|
- background: rgba(68, 68, 68, 0.4);
|
|
|
- .btn {
|
|
|
- padding: 10px 35px;
|
|
|
- }
|
|
|
- .cancel {
|
|
|
+ .box {
|
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- .save {
|
|
|
- background: #2199f8;
|
|
|
- }
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #232323;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ position: relative;
|
|
|
+ .map-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
+ .map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tool-group {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ right: calc(500px + 36px);
|
|
|
+ top: 42px;
|
|
|
+ .btn {
|
|
|
+ background: #fff;
|
|
|
+ color: #000;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .delete {
|
|
|
+ background: #e45c5c;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .edit-popup {
|
|
|
+ width: 500px;
|
|
|
+ height: calc(100% - 53px - 20px);
|
|
|
+ position: absolute;
|
|
|
+ top: 36px;
|
|
|
+ right: 36px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #232323;
|
|
|
+ .edit-title {
|
|
|
+ padding: 0 10px;
|
|
|
+ background: rgba(68, 68, 68, 0.4);
|
|
|
+ border-bottom: 1px solid rgba(68, 68, 68, 0.4);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .btn-group {
|
|
|
+ display: flex;
|
|
|
+ .ml {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ padding: 12px 0px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-left: 8px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: "SOURCEHANTIFINE";
|
|
|
+ }
|
|
|
+ .edit {
|
|
|
+ color: #2199f8;
|
|
|
+ padding: 6px 20px;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .edit-cont {
|
|
|
+ padding: 16px;
|
|
|
+ width: calc(100% - 32px);
|
|
|
+ height: calc(100% - 64px - 84px);
|
|
|
+ .form-inline {
|
|
|
+ height: 320px;
|
|
|
+ ::v-deep {
|
|
|
+ .el-input {
|
|
|
+ width: 200px;
|
|
|
+ --el-input-placeholder-color: #666666;
|
|
|
+ }
|
|
|
+ .el-form-item__label {
|
|
|
+ color: #bbbbbb;
|
|
|
+ }
|
|
|
+ .el-input__wrapper {
|
|
|
+ background: #232323;
|
|
|
+ border: 1px solid #444444;
|
|
|
+ box-shadow: none;
|
|
|
+ .el-input__inner {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 320px);
|
|
|
+ span {
|
|
|
+ color: #bbbbbb;
|
|
|
+ }
|
|
|
+ .list-cont {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 20px);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 5px;
|
|
|
+ background: rgba(68, 68, 68, 0.4);
|
|
|
+ padding: 12px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .list-item {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .item-box {
|
|
|
+ padding: 8px;
|
|
|
+ border: 1px solid #444444;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .edit-footer {
|
|
|
+ width: 100%;
|
|
|
+ height: 64px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-top: 1px solid rgba(68, 68, 68, 0.4);
|
|
|
+ background: rgba(68, 68, 68, 0.4);
|
|
|
+ .btn {
|
|
|
+ padding: 10px 35px;
|
|
|
+ }
|
|
|
+ .cancel {
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ .save {
|
|
|
+ background: #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
.dialog-footer {
|
|
|
- .btn {
|
|
|
- width: 200px;
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
+ .btn {
|
|
|
+ width: 200px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
wangsisi