|
@@ -30,6 +30,7 @@
|
|
|
<div class="flex">
|
|
|
<el-form-item label="" style="margin-bottom: 8px;">
|
|
|
<el-input
|
|
|
+ class="radiusInp"
|
|
|
placeholder="请输入名称"
|
|
|
v-model="refuelForm.oilName">
|
|
|
<template #suffix><elIcon><Search/></elIcon></template>
|
|
@@ -37,20 +38,32 @@
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <div class="flex justify-end text-xs">
|
|
|
- <div>
|
|
|
- <el-button circle><elIcon><RefreshRight/></elIcon></el-button>
|
|
|
- <span class="margin-left-xs text-black">刷新</span>
|
|
|
+ <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24" class="text-xs">
|
|
|
+ <div class="flex justify-end" v-if="detailVis">
|
|
|
+ <div @click="detailVis = false">
|
|
|
+ <el-button type="success" circle>
|
|
|
+ <elIcon><DocumentChecked/></elIcon>
|
|
|
+ </el-button>
|
|
|
+ <span class="margin-left-xs text-black">保存</span>
|
|
|
</div>
|
|
|
- <div class="margin-left" v-if="detailVis" @click="detailVis = false">
|
|
|
+ <div class="margin-left" @click="handleBack">
|
|
|
<el-button circle>
|
|
|
<svg-icon icon-class="back"/>
|
|
|
</el-button>
|
|
|
<span class="margin-left-xs text-black">返回</span>
|
|
|
</div>
|
|
|
- <div class="margin-left">
|
|
|
- <el-button round @click="handleAddRegional">
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-end" v-else>
|
|
|
+ <div>
|
|
|
+ <el-button circle><elIcon><RefreshRight/></elIcon></el-button>
|
|
|
+ <span class="margin-left-xs text-black">刷新</span>
|
|
|
+ </div>
|
|
|
+ <div @click="handleDel" class="margin-lr">
|
|
|
+ <el-button circle type="danger" :disabled="!detailData.refuelId"><elIcon><Delete/></elIcon></el-button>
|
|
|
+ <span class="margin-left-xs text-black">删除</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button round @click="handleAddRegional" v-if="!detailVis">
|
|
|
<elIcon><Plus/></elIcon>
|
|
|
<span class="text-xs">添加ECA区域数据</span>
|
|
|
</el-button>
|
|
@@ -59,150 +72,202 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
- <el-table :data="upLogData" stripe style="width: 100%"
|
|
|
+ <el-table :data="refuelRecoData" stripe style="width: 100%"
|
|
|
height="calc(70vh - 140px)"
|
|
|
- v-if="!detailVis"
|
|
|
+ @row-click="handleRowClick"
|
|
|
+ :row-class-name="rowClassName"
|
|
|
+ v-if="!detailVis"
|
|
|
:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
|
|
|
:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
|
|
|
<el-table-column label="id" width="80" align="center">
|
|
|
<template #default="scope">
|
|
|
- <span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
|
|
|
+ <span style="color: #0672fc;" :style="{ opacity: scope.row.oilName?1:0 }" class="text-bold text-sm">{{scope.$index+1}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column align="center" prop="oilName" label="名称"></el-table-column>
|
|
|
- <el-table-column align="center" prop="count" label="ECA区域点数"></el-table-column>
|
|
|
+ <el-table-column align="center" prop="count" label="ECA区域点数">
|
|
|
+ <template #default="scope">
|
|
|
+ <span v-if="scope.row.mapRows">{{ scope.row.mapRows?scope.row.mapRows.length:0 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column align="center" label="ECA区域查看">
|
|
|
<template #default="scope">
|
|
|
- <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
|
|
|
- <elIcon v-if="scope.row.row" style="font-size: 1rem;" @click="handleDetail(scope)"><View class="pointer text-blue"/></elIcon>
|
|
|
+ <el-tooltip class="item" effect="dark" content="查看详情" placement="top" v-if="scope.row.mapRows">
|
|
|
+ <elIcon style="font-size: 1rem;" @click="handleDetail(scope.row)"><View class="pointer text-blue"/></elIcon>
|
|
|
</el-tooltip>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
</el-table>
|
|
|
- <el-table :data="detailData.row" stripe style="width: 100%"
|
|
|
+ <el-table :data="detailData.mapRows" stripe style="width: 100%"
|
|
|
height="calc(70vh - 140px)"
|
|
|
+ :highlight-current-row="true"
|
|
|
v-if="detailVis"
|
|
|
:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
|
|
|
:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
|
|
|
<el-table-column label="id" width="80" align="center">
|
|
|
<template #default="scope">
|
|
|
- <span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
|
|
|
+ <span :style="{ opacity: scope.row.oilName?1:0 }" style="color: #0672fc;" class="text-bold text-sm">{{scope.$index+1}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column align="center" prop="oilName" label="名称"></el-table-column>
|
|
|
- <el-table-column align="center" prop="longitude" label="经度"></el-table-column>
|
|
|
- <el-table-column align="center" prop="latitude" label="纬度"></el-table-column>
|
|
|
+ <el-table-column align="center" prop="longitude" label="经度">
|
|
|
+ <template #default="scope">
|
|
|
+ {{duToGpsDMS(scope.row.longitude, 'E')}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="latitude" label="纬度">
|
|
|
+ <template #default="scope">
|
|
|
+ {{duToGpsDMS(scope.row.latitude, 'N')}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="操作" width="60">
|
|
|
+ <template #default="scope">
|
|
|
+ <elIcon style="font-size: 1rem;" @click="delMapRow(scope.row)"><Delete class="pointer text-red"/></elIcon>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :xl="16" :lg="16" :md="16" :sm="24" :xs="24">
|
|
|
<div style="height: calc(100vh - 133px);" class="bg-black radius">
|
|
|
- <eca-map :data="regionForm"/>
|
|
|
+ <eca-map :data="regionForm" :finishSta="finishSta" @gpsPoints="handleFinish"/>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <eca-regional-drawer ref="EcaRegionalDrawerRef"/>
|
|
|
+ <el-dialog
|
|
|
+ title="添加ECA区域数据"
|
|
|
+ v-model="dialogVisible"
|
|
|
+ width="30%">
|
|
|
+ <el-form :model="detailData" :rules="rules">
|
|
|
+ <el-form-item label="区域名称" prop="oilName">
|
|
|
+ <el-input v-model="detailData.oilName" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer text-right">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleConfim">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- <eca-regional-drawer ref="EcaRegionalDrawerRef"/> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { reactive } from "vue";
|
|
|
+ import { listRegionals, getRegionals, addRegional, updateRegional, delRegional } from "@/api/regionalMana";
|
|
|
+ import { duToGpsDMS } from "@/utils/gpsToDu";
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
- import EcaRegionalDrawer from "@/components/EcaRegional";
|
|
|
- import ecaMap from "@/components/Map/ECAMap/map";
|
|
|
+ // import EcaRegionalDrawer from "@/components/EcaRegional";
|
|
|
+ import ecaMap from "@/components/Map/ECAMap/mapdui";
|
|
|
import shipImg from "@/assets/images/shipImg.jpg";
|
|
|
const detailVis = ref(false);
|
|
|
const detailData = ref({});
|
|
|
+ const finishSta = ref(false);
|
|
|
+ const dialogVisible = ref(false);
|
|
|
const regionForm = ref({});
|
|
|
+ const refuelRecoData = ref([]);
|
|
|
+ const clickedRowIndex = ref(null);
|
|
|
+ const operateType = ref("edit");
|
|
|
const data = reactive({
|
|
|
- refuelForm: {},
|
|
|
- upLogData: [{
|
|
|
- oilName: "加油记录-1",
|
|
|
- count: 2,
|
|
|
- row: [{
|
|
|
- oilName: "加油记录-1",
|
|
|
- longitude: "113.23656",
|
|
|
- latitude: "23.64589",
|
|
|
- },{
|
|
|
- oilName: "加油记录-2",
|
|
|
- longitude: "113.23656",
|
|
|
- latitude: "23.64589",
|
|
|
- },{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
|
|
|
- },{
|
|
|
- oilName: "加油记录-2",
|
|
|
- count: 1,
|
|
|
- row: [{
|
|
|
- oilName: "加油记录-2",
|
|
|
- longitude: "113.23656",
|
|
|
- latitude: "23.64589",
|
|
|
- },{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
|
|
|
- },{
|
|
|
- oilName: "加油记录-3",
|
|
|
- count: 1,
|
|
|
- row: [{
|
|
|
- oilName: "加油记录-2",
|
|
|
- longitude: "113.23656",
|
|
|
- latitude: "23.64589",
|
|
|
- },{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
|
|
|
- },{
|
|
|
- oilName: "加油记录-4",
|
|
|
- count: 1,
|
|
|
- row: [{
|
|
|
- oilName: "加油记录-2",
|
|
|
- longitude: "113.23656",
|
|
|
- latitude: "23.64589",
|
|
|
- },{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
|
|
|
- },{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
|
|
|
+ rules: {
|
|
|
+ oilName: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入区域名称",
|
|
|
+ trigger: "blur"
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ refuelForm: {}
|
|
|
|
|
|
});
|
|
|
- const { refuelForm, upLogData } = toRefs(data);
|
|
|
+ const { refuelForm, rules } = toRefs(data);
|
|
|
+ // 查看区域数据
|
|
|
const handleDetail = function(_row){
|
|
|
- detailData.value = _row.row;
|
|
|
+ hasReset();
|
|
|
+ detailData.value = JSON.parse(JSON.stringify(_row));
|
|
|
+ regionForm.value = {
|
|
|
+ operateType: (detailData.value.mapRows.length?"edit":"add"),
|
|
|
+ mapRows: detailData.value.mapRows
|
|
|
+ };
|
|
|
+ clickedRowIndex.value = refuelRecoData.value.indexOf(_row);
|
|
|
detailVis.value = true;
|
|
|
- let _obj = {};
|
|
|
- if(_row["$index"] == 0){
|
|
|
- _obj = {
|
|
|
- "gpsInfo": {
|
|
|
- "lon":[117.670323, 117.695141, 117.659597, 117.620267, 117.670323],
|
|
|
- "lat":[38.831509, 38.800045, 38.785127, 38.808076, 38.831509],
|
|
|
- "radius": 0,
|
|
|
- },
|
|
|
- "fence_type": 1
|
|
|
- };
|
|
|
- }else if(_row["$index"] == 1){
|
|
|
- _obj = {
|
|
|
- "gpsInfo": {
|
|
|
- "lon":[117.628775],
|
|
|
- "lat":[38.604317],
|
|
|
- "radius": 1783.6604,
|
|
|
- },
|
|
|
- "fence_type": 0
|
|
|
- };
|
|
|
- }else if(_row["$index"] == 2){
|
|
|
- _obj = {
|
|
|
- "gpsInfo": {
|
|
|
- "lon":[122.27364514766231, 122.38097317161841, 122.43951573013992, 122.34584763650551, 122.27104325617246, 122.27364514766231],
|
|
|
- "lat":[30.482269795850222, 30.504385873513904, 30.419173927221483, 30.400310213920108, 30.417872981476563, 30.482269795850222],
|
|
|
- "radius": 0,
|
|
|
- },
|
|
|
- "fence_type": 1
|
|
|
- };
|
|
|
- }else{
|
|
|
- _obj = {
|
|
|
- "gpsInfo": {
|
|
|
- "lon":[121.75587804760742],
|
|
|
- "lat":[30.200393084594726],
|
|
|
- "radius": 2750.8393248556604,
|
|
|
- },
|
|
|
- "fence_type": 0
|
|
|
+ }
|
|
|
+ // 初始化数据
|
|
|
+ const hasReset = function(){
|
|
|
+ detailData.value = {
|
|
|
+ refuelId: undefined,
|
|
|
+ oilName: "",
|
|
|
+ mapRows: []
|
|
|
+ };
|
|
|
+ regionForm.value = {};
|
|
|
+ }
|
|
|
+ // 新增区域
|
|
|
+ const handleAddRegional = function(){
|
|
|
+ hasReset();
|
|
|
+ dialogVisible.value = true;
|
|
|
+ // proxy.$refs["EcaRegionalDrawerRef"].show()
|
|
|
+ }
|
|
|
+ function handleFinish(ev){
|
|
|
+ console.log(ev)
|
|
|
+ detailData.value.mapRows = ev;
|
|
|
+ }
|
|
|
+ // 新增、编辑区域确定按钮
|
|
|
+ function handleConfim(){
|
|
|
+ let _obj = refuelRecoData.value;
|
|
|
+ _obj.push({
|
|
|
+ refuelId: parseInt(Math.random()*1000),
|
|
|
+ oilName: detailData.value.oilName,
|
|
|
+ mapRows: []
|
|
|
+ });
|
|
|
+ refuelRecoData.value = _obj;
|
|
|
+ dialogVisible.value = false;
|
|
|
+ // handleRowClick()
|
|
|
+ }
|
|
|
+ // 单击表格
|
|
|
+ const handleRowClick = function(row, event, column) {
|
|
|
+ if(event){
|
|
|
+ detailData.value = JSON.parse(JSON.stringify(row));
|
|
|
+ regionForm.value = {
|
|
|
+ operateType: "see",
|
|
|
+ mapRows: detailData.value.mapRows
|
|
|
};
|
|
|
+ clickedRowIndex.value = refuelRecoData.value.indexOf(row);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 单击表格选择样式添加
|
|
|
+ const rowClassName = function({rowIndex}) {
|
|
|
+ if (clickedRowIndex.value === rowIndex) {
|
|
|
+ return 'highlight-row';
|
|
|
}
|
|
|
- regionForm.value = _obj;
|
|
|
}
|
|
|
- const handleAddRegional = function(){
|
|
|
- proxy.$refs["EcaRegionalDrawerRef"].show()
|
|
|
+ // 删除整个区域数据
|
|
|
+ const handleDel = function(){
|
|
|
+ if(detailData.value.refuelId){
|
|
|
+ proxy.$modal.confirm('是否确认"' + detailData.value.oilName + '"的ECA区域信息?').then(function () {
|
|
|
+ detailData.value = {};
|
|
|
+ return true;
|
|
|
+ // return delCertificate(certificateIds);
|
|
|
+ }).then(() => {
|
|
|
+ // getList();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => { });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 删除单个经纬度
|
|
|
+ const delMapRow = function(row){
|
|
|
+
|
|
|
+ }
|
|
|
+ // 返回
|
|
|
+ const handleBack = function(row){
|
|
|
+ detailVis.value = false;
|
|
|
+ regionForm.value.operateType = "see";
|
|
|
+ }
|
|
|
+ const getRecodList = function(){
|
|
|
+ listRegionals().then(resopnes =>{
|
|
|
+ refuelRecoData.value = resopnes;
|
|
|
+ proxy.setBlankData(refuelRecoData.value, 21);
|
|
|
+ })
|
|
|
}
|
|
|
+ getRecodList();
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|