Skip to content

X
xoadoPlatform
Commit 35808b6e by 吕海涛
Options

围栏相关

parent 1dc7c8b2
Showing with 1310 additions and 257 deletions
package-lock.json
......@@ -3081,6 +3081,11 @@
"integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
"dev": true
},
"china-area-data": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/china-area-data/-/china-area-data-5.0.1.tgz",
"integrity": "sha512-BQDPpiv5Nn+018ekcJK2oSD9PAD+E1bvXB0wgabc//dFVS/KvRqCgg0QOEUt3vBkx9XzB5a9BmkJCEZDBxVjVw=="
},
"chokidar": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
......@@ -4659,6 +4664,15 @@
"integrity": "sha512-8mFfiAesXdEdE0DhkMKO7W9U6VU/9T3VTWwZ+4g84/YMP4kgwgFtQgUxuu7FUMcvSeKSNhFQNU+WZ68BQTLT5A==",
"dev": true
},
"element-china-area-data": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/element-china-area-data/-/element-china-area-data-5.0.2.tgz",
"integrity": "sha512-vLQuvOKJy/uiX7MRHEk3x/j09hipuIl6DJ/C4XFUG7D7Pj3O47sy+Y6aAArM6k9v8cD9UX6e+yz2S4J+IPnZ8g==",
"requires": {
"china-area-data": "^5.0.1",
"lodash-es": "^4.17.15"
}
},
"element-ui": {
"version": "2.15.1",
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.1.tgz",
......@@ -7543,6 +7557,11 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
......
package.json
......@@ -12,6 +12,7 @@
"axios": "^0.21.1",
"core-js": "^3.6.5",
"echarts": "^4.8.0",
"element-china-area-data": "^5.0.2",
"element-ui": "^2.15.1",
"js-md5": "^0.7.3",
"screenfull": "^5.0.0",
......
src/styles/layout.scss
#app {
// .driver-fix-stacking {
// position: relative;
// overflow: hidden;
// }
.mainColor{
color: #409EFF;
}
.wrapper {
@extend %width-height;
position: relative;
background-color: $bg-gary;
.wrapper_con {
height: calc(100% - 50px);
width: 100%;
// margin-top: 50px;
padding-top: 50px;
// .driver-fix-stacking {
// position: relative;
// overflow: hidden;
// }
.mainColor {
color: #409EFF;
}
.wrapper {
@extend %width-height;
position: relative;
background-color: $bg-gary;
.wrapper_con {
height: calc(100% - 50px);
width: 100%;
// margin-top: 50px;
padding-top: 50px;
}
}
.pageMain {
margin-left: 200px;
transition: all 0.3s;
height: auto;
background: #f0f3f4;
}
.noPadding {
padding: 0 !important;
}
}
.pageMain {
margin-left: 200px;
transition: all 0.3s;
height: auto;
background: #f0f3f4;
}
.noPadding {
padding: 0 !important;
}
}
.EnterpriseInformation {
margin: 20px 20px;
background: #fff;
padding: 0;
border-radius: 0.8rem;
box-shadow: 1px 1px 20px #c7c5c58f;
margin: 20px 20px;
background: #fff;
padding: 0;
border-radius: 0.8rem;
box-shadow: 1px 1px 20px #c7c5c58f;
}
// sideBar
#app {
.sideBar {
width: $sideBarWidth;
height: calc(100% - 50px);
background-color: $dark-blue;
position: fixed;
bottom: 0;
left: 0;
overflow: hidden;
transition: width 0.3s;
z-index: 999;
.el-scrollbar {
height: 100%;
.el-scrollbar__wrap {
overflow-x: hidden !important;
}
}
.el-menu {
@extend %width-height;
border: none;
.sideBar {
width: $sideBarWidth;
height: calc(100% - 50px);
background-color: $dark-blue;
position: fixed;
bottom: 0;
left: 0;
overflow: hidden;
transition: width 0.3s;
z-index: 999;
.el-scrollbar {
height: 100%;
.el-scrollbar__wrap {
overflow-x: hidden !important;
}
}
.el-menu {
@extend %width-height;
border: none;
}
}
}
}
// header
.header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
left: 0;
z-index: 999;
height: 50px;
position: fixed;
top: 0;
width: 100%;
left: 0;
z-index: 999;
}
.header_l {
width: 200px;
height: 100%;
float: left;
background-color: #3a3f51;
box-sizing: border-box;
border-bottom: 1px solid #454b61;
transition: width 0.3s;
overflow: hidden;
width: 200px;
height: 100%;
float: left;
background-color: #3a3f51;
box-sizing: border-box;
border-bottom: 1px solid #454b61;
transition: width 0.3s;
overflow: hidden;
}
.header_r {
height: 100%;
margin-left: 200px;
background-color: $white;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
transition: all 0.3s;
height: 100%;
margin-left: 200px;
background-color: $white;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
transition: all 0.3s;
}
.logoLink {
color: $white !important;
font-size: 15px;
margin-left: 18px;
display: inline-block;
font-weight: bold;
height: 100%;
line-height: 50px;
img {
height: 28px;
vertical-align: middle;
margin-right: 8px;
position: relative;
top: -3px;
}
color: $white !important;
font-size: 15px;
margin-left: 18px;
display: inline-block;
font-weight: bold;
height: 100%;
line-height: 50px;
img {
height: 28px;
vertical-align: middle;
margin-right: 8px;
position: relative;
top: -3px;
}
}
.headr_d1 {
float: left;
height: 100%;
margin-left: 20px;
.sidecoll {
float: left;
margin-top: 16px;
}
.bread {
float: left;
margin: 18px 0 0 20px;
}
}
.headr_d2 {
float: right;
height: 100%;
.userDrop {
height: 50px;
.userDrop_text {
margin-right: 8px;
i {
margin-left: 2px;
}
}
img {
width: 40px;
height: 40px;
border-radius: 50%;
vertical-align: middle;
height: 100%;
margin-left: 20px;
.sidecoll {
float: left;
margin-top: 16px;
}
}
.userDd {
.el-dropdown-menu__item {
padding: 0 12px;
.bread {
float: left;
margin: 18px 0 0 20px;
}
}
.headrUl {
}
.headr_d2 {
float: right;
height: 100%;
li {
float: left;
height: 100%;
line-height: 50px;
padding: 0 10px;
cursor: pointer;
.iconFont {
font-size: 18px;
.userDrop {
height: 50px;
vertical-align: initial;
line-height: 50px;
}
.el-badge__content.is-fixed.is-dot {
right: 9px;
top: 16px;
}
&:hover {
background-color: #f6f8f8;
}
&:last-child {
padding: 0 20px 0 10px;
}
.userDrop_text {
margin-right: 8px;
i {
margin-left: 2px;
}
}
img {
width: 40px;
height: 40px;
border-radius: 50%;
vertical-align: middle;
}
}
.userDd {
.el-dropdown-menu__item {
padding: 0 12px;
}
}
.headrUl {
height: 100%;
li {
float: left;
height: 100%;
line-height: 50px;
padding: 0 10px;
cursor: pointer;
.iconFont {
font-size: 18px;
height: 50px;
vertical-align: initial;
line-height: 50px;
}
.el-badge__content.is-fixed.is-dot {
right: 9px;
top: 16px;
}
&:hover {
background-color: #f6f8f8;
}
&:last-child {
padding: 0 20px 0 10px;
}
}
}
}
}
.el-dropdown-menu__item {
i {
font-size: 16px;
}
a {
display: block;
width: 100%;
height: 100%;
}
i {
font-size: 16px;
}
a {
display: block;
width: 100%;
height: 100%;
}
}
.notificatBar {
position: fixed;
height: calc(100% - 50px);
bottom: 0;
right: 0;
width: 360px;
box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.2);
background-color: $white;
z-index: 99;
position: fixed;
height: calc(100% - 50px);
bottom: 0;
right: 0;
width: 360px;
box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.2);
background-color: $white;
z-index: 99;
}
// collapse
#app {
.closeBar {
.sideBar {
width: 64px !important;
.el-menu--collapse > .sideItem .el-menu-item [class^='el-icon-'],
.el-menu--collapse
> .sideItem
.el-submenu
> .el-submenu__title
[class^='el-icon-'] {
margin: 0;
vertical-align: middle;
width: 24px;
text-align: center;
}
.el-menu--collapse > .sideItem .el-menu-item span,
.el-menu--collapse > .sideItem .el-submenu > .el-submenu__title span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
.el-menu--collapse > .sideItem .el-menu-item .el-submenu__icon-arrow,
.el-menu--collapse
> .sideItem
.el-submenu
> .el-submenu__title
.el-submenu__icon-arrow {
display: none;
}
.closeBar {
.sideBar {
width: 64px !important;
.el-menu--collapse>.sideItem .el-menu-item [class^='el-icon-'],
.el-menu--collapse>.sideItem .el-submenu>.el-submenu__title [class^='el-icon-'] {
margin: 0;
vertical-align: middle;
width: 24px;
text-align: center;
}
.el-menu--collapse>.sideItem .el-menu-item span,
.el-menu--collapse>.sideItem .el-submenu>.el-submenu__title span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
.el-menu--collapse>.sideItem .el-menu-item .el-submenu__icon-arrow,
.el-menu--collapse>.sideItem .el-submenu>.el-submenu__title .el-submenu__icon-arrow {
display: none;
}
}
.header_l {
width: 64px !important;
overflow: hidden;
}
.header_r,
.pageMain {
margin-left: 64px;
}
}
.header_l {
width: 64px !important;
overflow: hidden;
.el-table td,
.el-table th {
padding: 7.5px 0;
}
.header_r,
.pageMain {
margin-left: 64px;
.el-date-editor .el-range__icon {
line-height: 24px;
}
}
.el-table td, .el-table th{
padding: 7.5px 0;
}
.el-date-editor .el-range__icon{
line-height: 24px;
}
.el-date-editor .el-range-separator{
line-height: 24px;
}
.el-table td, .el-table th{
//padding: 10px 0;
}
.el-card__header {
padding: 10px 20px;
}
.text-title {
font-size: 15px;
font-weight: bold;
span::before {
content:'';
display: inline-block;
width: 2px;
height: 18px;
background: #409EFF;
margin-right: 5px;
vertical-align: text-bottom;
.el-date-editor .el-range-separator {
line-height: 24px;
}
}
.el-card__body {
padding: 10px 20px;
}
.bottom-part {
display: flex;
align-items: center;
margin-top: 20px;
padding-bottom: 20px;
.count-part {
font-size: 14px;
& > span:nth-child(2) {
color: #409eff;
}
.el-table td,
.el-table th {
//padding: 10px 0;
}
& > div:nth-child(2) {
flex: 1;
text-align: center;
.el-card__header {
padding: 10px 20px;
}
}
}
.text-title {
font-size: 15px;
font-weight: bold;
span::before {
content: '';
display: inline-block;
width: 2px;
height: 18px;
background: #409EFF;
margin-right: 5px;
vertical-align: text-bottom;
}
}
.el-card__body {
padding: 10px 20px;
}
.bottom-part {
display: flex;
align-items: center;
margin-top: 20px;
padding-bottom: 20px;
.count-part {
font-size: 14px;
&>span:nth-child(2) {
color: #409eff;
}
}
&>div:nth-child(2) {
flex: 1;
text-align: center;
}
}
}
\ No newline at end of file
src/views/DepartmentInformation/index.vue
......@@ -38,6 +38,7 @@
<div>
<span> 自定义分组 </span>
<div>
<div
class="text itemlist"
v-for="(items, indexs) in departmentdatas[0].children"
......@@ -126,6 +127,9 @@
header-align="center"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.deptName || '/' }}</span>
</template>
</el-table-column>
<el-table-column
prop="phoneNumber"
......@@ -849,6 +853,7 @@ export default {
this.departmentdata = table;
this.departmentdatas = [];
organizationsInfo({}, this.parentid).then((res) => {
if (res.status == 200) {
if (res.data.orgForShort != null) {
......@@ -864,7 +869,7 @@ export default {
children: this.departmentdata,
});
}
console.log(JSON.stringify(this.departmentdatas));
}
});
});
......@@ -887,12 +892,9 @@ export default {
getData(billState, page, month, rowss, sort) {
organizationsauditType({}, this.parentid, page, rowss).then((res) => {
if (res.status == 200) {
this.total = res.data.counts;
this.alllength = res.data.counts;
this.tableData = res.data.result;
console.log(res.data.result)
console.log("________")
}
});
},
......
src/views/components/newReal.vue
......@@ -823,9 +823,7 @@ export default {
margin-right: 10px;
}
}
.el-card__body {
padding: 0;
}
.footer {
margin-left: 40px;
border-left: 1px solid #ccc;
......
src/views/configure/enclosure.vue
<template xmlns="http://www.w3.org/1999/html">
<el-card style="text-align: left;" type="flex" justify="end" align="end">
围栏
</el-card>
<el-card class="enclosureItemBox">
<div class="mapBox">
<div
:style="{
width: itemlistStatus ? '0px' : '270px',
'min-width': itemlistStatus ? '0' : '270px',
'margin-right': itemlistStatus ? '0px' : '20px',
}"
>
<div style="display: flex">
<div style="flex: 1">
<el-input
placeholder="输入围栏名称搜索"
v-model="searchStr"
clearable
>
</el-input>
</div>
<el-button type="text" style="padding: 0 5px" @click="Datalistinit()"
>重置</el-button
>
</div>
<el-cascader
style="width: 100%"
placeholder="请选择城市"
:props="leftprops"
v-model="leftpenCity"
ref="myCascaders"
:show-all-levels="false"
></el-cascader>
<div class="enclosurelist">
<ul>
<li v-for="item in FareData" @click="openpenset(item)">
<div class="piblic-header">
<span
class="el-tag el-tag--success el-tag--light"
v-if="item.polygonAttribute * 1 == 2"
>私有</span
>
<span class="el-tag el-button--danger el-tag--light" v-else
>公有</span
>
<div
style="
margin-left: 10px;
width: calc(100% - 92px);
font-size: 16px;
"
>
{{ item.polygonName }}
</div>
<div class="left-icon" v-if="item.polygonAttribute * 1 == 1">
<span
class="el-icon-edit-outline"
@click="editPolygonFun(item)"
></span>
<span
class="el-icon-delete-solid"
@click="deletePolygon(item)"
></span>
</div>
</div>
<div v-if="item.areaName != null">
所属城市：{{ item.cityName + "/" + item.areaName }}
</div>
<div v-else>所属城市：{{ item.cityName }}</div>
<div>
<span>围栏类型：</span>
<span v-text="fenceTypeText(item.polygonType)"></span>
</div>
</li>
</ul>
<div style="text-align: center">
<el-pagination
small
layout="prev, pager, next"
@current-change="current_change"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
<div style="width: 100%">
<div class="amap-box">
<el-amap
vid="amap"
:zoom="zoom"
:center="center"
:amap-manager="amapManager"
:events="events"
:plugin="plugin"
ref="map"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:dragEnable="dragEnable"
:zoomEnable="zoomEnable"
:doubleClickZoom="zoomEnable"
:keyboardEnable="keyboardEnable"
>
<div v-for="(item, index) in polygon">
<el-amap-polygon
ref="polygon"
vid="polygon"
:path="item.path"
:draggable="item.draggable"
:events="item.events"
:editable="item.editable"
:extData="item.custom"
:zIndex="item.zIndex"
:fillColor="item.fillColor"
:strokeColor="item.strokeColor"
></el-amap-polygon>
</div>
<el-amap-info-window
class="prompt"
:model="window"
:position="window.position"
:visible="window.type"
>
<el-row>
<el-col :span="8">
<div style="font-size: 14px; width: 200px">
<span
><span v-text="window.name"></span>(<span
v-text="window.level"
></span
>)</span
>
</div>
</el-col>
</el-row>
</el-amap-info-window>
<el-row class="btn-list">
<el-button @click="btns">
<i
v-bind:class="[
itemlistStatus ? 'el-icon-d-arrow-left' : '',
'el-icon--right',
]"
></i>
查看围栏
<i
v-bind:class="[
itemlistStatus ? '' : 'el-icon-d-arrow-right',
'el-icon--right',
]"
></i>
</el-button>
<el-button @click="AddEnclosure">新建围栏</el-button>
<el-button @click="SubmBtn">保存</el-button>
<el-amap-search-box
class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult"
></el-amap-search-box>
</el-row>
<el-amap-circle
vid="circle"
:center="center"
:radius="radius"
fill-opacity="0.2"
strokeColor="#38f"
strokeOpacity="0.8"
strokeWeight="1"
fillColor="#38f"
></el-amap-circle>
</el-amap>
<el-dialog
center
:title="editPolygonFlag ? '修改围栏' : '添加围栏'"
:visible.sync="EnclosureVisible"
:before-close="EnclosureVisibleclick"
width="30%"
>
<el-form
ref="EnclosureForm"
:model="EnclosureForm"
label-width="160px"
>
<el-form-item label="围栏所在城市：" v-if="!editPolygonFlag">
<el-cascader
:props="props"
v-model="penCity"
ref="myCascader"
:show-all-levels="false"
@change="ceshidata"
></el-cascader>
</el-form-item>
<el-form-item label="围栏所在城市：" v-if="editPolygonFlag">
<el-input
:value="
EnclosureForm.fenceCityName + '/' + EnclosureForm.childName
"
disabled
></el-input>
</el-form-item>
<el-form-item label="围栏名称：">
<el-input v-model="EnclosureForm.name"></el-input>
</el-form-item>
<el-form-item label="围栏类型：">
<el-select
v-model="EnclosureForm.type"
placeholder="请选择"
@change="chooseFenceType"
@visible-change="setUpEnclosureoptions"
>
<el-option
v-for="item in Enclosureoptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="EnclosureVisibleclick">取 消</el-button>
<el-button type="primary" @click="EnclosureClick"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</div>
</div>
</el-card>
</template>
<script>
import VueAMap from "vue-amap";
import { CodeToText } from "element-china-area-data";
import {
getAllFenceList,
getAllprovinceAndCity,
addfence,
updatefence,
deletefence,
} from "@/port/set-request";
let amapManager = new VueAMap.AMapManager();
export default {
name: "enclosure",
data() {
return {
info: 'baaaaaaaaaaa'
name: "enclosure",
data() {
let vm = this;
return {
itemlistStatus: true,
leftpenCity: [],
CodeToText,
editPolygonFlag: false,
page: 1,
size: 10,
total: 100,
fenceTypeName: "",
searchStr: "",
searchOption: {
city: "西安",
citylimit: false,
},
FareData: "",
radius: 10,
type: false,
EnclosureForm: {
name: "",
type: "",
fenceCode: "",
fenceCityName: "",
childCode: "",
childName: "",
edit: false,
traceId: "",
},
window: {
position: [108.947171, 34.350114],
name: "",
level: "",
type: false,
},
polygonId: "",
loading: true,
Enclosureoptions: [
{
value: "0",
label: "发单围栏",
},
{
value: "1",
label: "不可接单区域围栏",
},
{
value: "2",
label: "车辆GPS围栏",
},
{
value: "3",
label: "活动商圈围栏",
},
],
count: 1,
polygons: [],
slotStyle: {
padding: "2px 8px",
background: "#eee",
color: "#333",
border: "1px solid #aaa",
},
markers: {
events: {},
visible: true,
draggable: false,
template: "<span>1</span>",
},
dragEnable: true,
zoomEnable: true,
doubleClickZoom: true,
keyboardEnable: true,
position: [108.947171, 34.350114],
zoom: 15,
// center: [108.947171, 34.350114],
polygon: [],
path: [],
Selectenclosure: "",
EnclosureVisible: false,
tableData: [],
plugin: [
{
pName: "ToolBar", //工具条插件
position: "LT",
noIpLocate: true,
events: {
init(instance) {},
},
},
{
pName: "Geolocation",
showCircle: false,
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
vm.lng = result.position.lng;
vm.lat = result.position.lat;
vm.searchOption.city = result.addressComponent.city;
vm.center = [vm.lng, vm.lat];
vm.position = [vm.lng, vm.lat];
vm.$nextTick();
vm.loading = false;
}
});
},
},
},
{
pName: "MapType", //卫星与地图切换
defaultType: 0,
showTraffic: true, //实时交通图层
},
{
pName: "OverView",
//isOpen:true//鹰眼是否打开
},
{
pName: "Scale",
},
],
currentCityList: {},
events: {
init: (o) => {
o.getCity((result) => {});
this.loading = false;
},
moveend: (e) => {
vm.lng = this.$refs.map.$$getInstance().getCenter().lng;
vm.lat = this.$refs.map.$$getInstance().getCenter().lat;
},
zoomchange: (o) => {
this.zoom = this.$refs.map.$$getInstance().getZoom();
},
click: (e) => {
let { lng, lat } = e.lnglat;
vm.lng = lng;
vm.lat = lat;
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 10,
extensions: "all",
});
geocoder.getAddress([lng, lat], function (status, result) {
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
vm.address = result.regeocode.formattedAddress;
vm.$nextTick();
}
}
});
},
},
penCity: [], // 围栏所在省市
props: {
checkStrictly: true,
lazy: true,
lazyLoad(node, resolve) {
const { level } = node;
console.log(node);
//
let parent;
if (level == 0) {
parent = 100000;
} else {
parent = node.value;
}
getAllprovinceAndCity(parent).then((res) => {
if (res.status == 200) {
let list = res.data;
const nodes = list.map((item) => {
return {
value: item.id,
label: item.fullname,
leaf: level >= 2,
disabled: parent == 100000 ? true : false,
};
});
resolve(nodes);
}
});
},
},
leftprops: {
lazy: true,
checkStrictly: true,
lazyLoad(node, resolve) {
const { level } = node;
let parent;
if (level == 0) {
parent = 100000;
} else {
parent = node.value;
}
getAllprovinceAndCity(parent).then((res) => {
if (res.status == 200) {
let list = res.data;
const nodes = list.map((item) => {
return {
value: item.id,
label: item.fullname,
leaf: level >= 1,
disabled: parent == 100000 ? true : false,
};
});
resolve(nodes);
}
});
},
},
center: [121.5273285, 31.21515044],
amapManager: amapManager,
allAmapData: [],
};
},
created() {
this.listinit();
},
watch: {
penCity(val) {
console.log(val);
},
leftpenCity(val) {
if (val.length > 0) {
this.FareData = "";
this.page = 1;
this.listinit(val[val.length - 1]);
}
},
searchStr(val) {
this.FareData = "";
this.page = 1;
// 都是老客户公司的开发换个端口
this.listinit(this.leftpenCity[val.length - 1]);
},
},
methods: {
Datalistinit() {
this.searchStr = "";
this.leftpenCity = "";
this.page = 1;
this.listinit();
},
ceshidata(val) {
this.polygon = [];
let district = !!CodeToText[val[2]]
? CodeToText[val[2]]
: !!CodeToText[val[1]] && CodeToText[val[1]] != "市辖区"
? CodeToText[val[1]]
: CodeToText[val[0]];
let cityCode = !!val[2] ? val[2] : !!val[1] ? val[1] : val[0];
AMap.plugin("AMap.Autocomplete", () => {
// 实例化Autocomplete
let autoOptions = {
city: district,
};
let autoComplete = new AMap.Autocomplete(autoOptions); // 初始化autocomplete
// 开始搜索
autoComplete.search(district, (status, result) => {
// 搜索成功时，result即是对应的匹配数据
if (result.info === "OK" && result.tips.length > 0) {
let info = result.tips;
let sm = info.find(function (_ref) {
return !!_ref.location;
});
var arr = [sm.location.lng, sm.location.lat];
this.center = arr;
this.currentCity(cityCode);
}
});
});
},
fenceTypeText(type) {
type = Number(type);
switch (type) {
case 0:
return "发单围栏";
break;
case 1:
return "不可接单区域围栏";
break;
case 2:
return "车辆GPS围栏";
break;
case 3:
return "活动商圈围栏";
break;
default:
}
},
listinit(cityCode) {
let json = {
pageVo: {
page: this.page,
rows: this.size,
},
polygonName: this.searchStr,
// platformId: this.$store.getters.platformId "61fdff1d455c4ab8a2efc564c245b90d",
//TODO 临时使用
platformId: "61fdff1d455c4ab8a2efc564c245b90d",
};
if (!!cityCode) {
json.cityCode = cityCode;
}
getAllFenceList(json).then((res) => {
if (res.status == 200) {
this.FareData = res.data.content;
this.total = res.data.total;
}
}
}
});
},
currentCity(cityCode, id) {
//获取当前城市围栏
let json = {
pageVo: {
page: 1,
rows: 999,
},
polygonName: this.searchStr,
// platformId: this.$store.getters.platformId,
//TODO 临时使用
platformId: "61fdff1d455c4ab8a2efc564c245b90d",
cityCode: cityCode,
};
getAllFenceList(json).then((res) => {
if (res.status == 200) {
this.currentCityList = res.data.content;
this.openpensetList(res.data.content, id);
}
});
},
openpensetList(item, id) {
this.polygon = [];
item.forEach((element) => {
let strs = JSON.parse(element.polygonCoordinateInfo);
let strsArr = [];
strsArr = strs;
this.polygonId = id;
if (element.id == id) {
var json = {
fenceCode: element.areaCode,
fenceCityName: element.areaName,
childName: element.cityName,
childCode: element.cityCode,
polygonCoordinateInfo: element.polygonCoordinateInfo,
name: element.polygonName,
type: element.polygonType,
platformId: element.platformId,
polygonAttribute: "1",
traceId: element.traceId,
fenceTypeName: element.polygonTypeValue,
gid: element.id,
edit: true,
};
this.EnclosureForm = json;
this.window.position = strsArr[0];
this.window.name = element.polygonName;
this.window.level = element.polygonTypeValue;
this.window.type = true;
this.center = strsArr[0];
this.zoom = 12;
}
var arr = {
draggable: id == element.id ? true : false,
path: strsArr,
target: true,
editable: id == element.id ? true : false,
zIndex: id == element.id ? 999 : 10,
strokeColor: id == element.id ? "#ffeeff" : "#006600",
fillColor: id == element.id ? "#4e6ef2" : "#FFAA00",
custom: element,
events: {
click: (e) => {
this.window.type = false;
console.info(e.target.getExtData());
this.currentCity(
e.target.getExtData().cityCode,
e.target.getExtData().id
);
},
mouseup: (e) => {
let strs;
this.window.type = true;
for (let index = 0; index < this.polygon.length; index++) {
if (!!this.polygon[index].custom) {
if (
this.polygon[index].custom.id == e.target.getExtData().id
) {
this.polygon[index].path =
this.$refs.polygon[index].$$getPath();
strs = this.$refs.polygon[index].$$getPath();
}
}
}
let strsArr = [];
strsArr = strs;
this.window.position = strsArr[0];
},
mousedown: () => {
this.window.type = false;
},
adjust: (e) => {
console.info(e);
},
},
};
this.polygon.push(arr);
});
},
openpenset(item) {
this.currentCity(item.cityCode, item.id);
this.window.type = false;
},
onSearchResult(pois) {
let latSum = 0;
let lngSum = 0;
if (pois.length > 0) {
pois.forEach((poi) => {
let { lng, lat } = poi;
lngSum += lng;
latSum += lat;
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length,
};
console.info(center);
this.center = [center.lng, center.lat];
this.zoom = 15;
}
},
EnclosureVisibleclick() {
this.EnclosureForm = {
name: "",
type: "",
fenceCode: "",
fenceCityName: "",
childCode: "",
childName: "",
edit: false,
traceId: "",
};
this.editPolygonFlag = false;
this.EnclosureVisible = false;
this.dragEnable = true;
this.zoomEnable = true;
this.doubleClickZoom = true;
this.keyboardEnable = true;
},
AddEnclosure() {
this.penCity = [];
this.dragEnable = false;
this.zoomEnable = false;
this.doubleClickZoom = false;
this.keyboardEnable = false;
this.EnclosureForm.name = "";
this.EnclosureForm.type = "";
this.EnclosureForm.edit = false;
this.polygons = [];
this.EnclosureVisible = true;
},
EnclosureClick() {
if (!!this.EnclosureForm.edit) {
this.SubmBtn();
return;
}
let vm = this;
vm.dragEnable = true;
vm.zoomEnable = true;
vm.doubleClickZoom = true;
vm.keyboardEnable = true;
if (
!this.$refs.myCascader.getCheckedNodes()[0].pathLabels[
this.penCity.length - 1
]
) {
this.$message.error("请选择围栏所在城市");
return;
}
if (!this.EnclosureForm.name) {
this.$message.error("请输入围栏名称");
return;
}
if (!this.EnclosureForm.type) {
this.$message.error("请选择围栏类型");
return;
}
this.EnclosureForm.fenceCode = this.penCity[this.penCity.length - 1];
this.EnclosureForm.childCode =
this.penCity.length >= 3
? this.penCity[this.penCity.length - 2]
: this.penCity[this.penCity.length - 1];
this.EnclosureForm.fenceCityName =
this.$refs.myCascader.getCheckedNodes()[0].pathLabels[
this.penCity.length - 1
];
this.EnclosureForm.childName =
this.$refs.myCascader.getCheckedNodes()[0].pathLabels[
this.penCity.length >= 3
? this.penCity.length - 2
: this.penCity.length - 1
];
this.EnclosureVisible = false;
// this.polygons = [];
let letLng = this.keepTwoDecimalFull(vm.lng + 0.01004);
let rigLat = this.keepTwoDecimalFull(vm.lat - 0.00114);
let path = [
this.center,
[letLng, this.center[1]],
[letLng, rigLat],
[this.center[0], rigLat],
];
console.info(path);
this.window.type = false;
vm.addPolygon(path);
},
keepTwoDecimalFull(num) {
var result = parseFloat(num);
var s_x = result.toString();
var pos_decimal = s_x.indexOf(".");
if (pos_decimal < 0) {
pos_decimal = s_x.length;
s_x += ".";
}
while (s_x.length <= pos_decimal + 5) {
s_x += "1";
}
return parseFloat(s_x);
},
addPolygon(path) {
var arr = {
draggable: true,
path: path,
editable: true,
strokeColor: "#ffeeff",
fillColor: "#4e6ef2",
edit: false,
events: {
click: () => {
console.log(this.$refs.map.$$getCenter());
console.log(this.$refs.polygon[0].$$getPath());
},
mouseup: () => {
this.allAmapData = this.$refs.polygon[0].$$getPath();
console.info(this.allAmapData);
},
adjust: () => {
this.allAmapData = this.$refs.polygon[0].$$getPath();
console.info(this.allAmapData);
},
end: (e) => {
this.allAmapData = this.$refs.polygon[0].$$getPath();
},
},
};
this.polygon.unshift(arr);
},
btns() {
this.itemlistStatus = !this.itemlistStatus;
},
SubmBtn() {
let path;
let arr = [];
this.polygon.forEach((element) => {
if (!!element.custom) {
if (element.custom.id == this.polygonId) {
path = JSON.stringify(element.path);
path = JSON.parse(path);
path.forEach((item, index) => {
arr.push([item.lng, item.lat]);
});
}
} else {
arr = this.allAmapData;
}
});
let json = {
areaCode: this.EnclosureForm.fenceCode,
areaName: this.EnclosureForm.fenceCityName,
cityName: this.EnclosureForm.childName,
cityCode: this.EnclosureForm.childCode,
polygonCoordinateInfo: arr,
polygonName: this.EnclosureForm.name,
polygonType: this.EnclosureForm.type,
// platformId: this.$store.getters.platformId,
//TODO 临时使用
platformId: "61fdff1d455c4ab8a2efc564c245b90d",
polygonAttribute: "1",
traceId: this.EnclosureForm.traceId,
polygonTypeValue: this.EnclosureForm.fenceTypeName,
};
if (!this.EnclosureForm.edit) {
addfence(json).then((res) => {
if (res.status == 200) {
this.$message.success("保存成功");
this.polygon = [];
this.page = 1;
this.currentCity(this.EnclosureForm.childCode);
this.listinit(this.EnclosureForm.childCode);
} else {
var msg = !!res.data.msg ? res.data.msg : res.msg;
this.$message.error(msg);
this.polygon = [];
this.page = 1;
this.currentCity(this.EnclosureForm.childCode);
this.listinit(this.EnclosureForm.childCode);
}
});
} else {
json.id = this.EnclosureForm.gid;
this.$confirm("确定要更改围栏信息吗?", "修改提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
updatefence(json).then((res) => {
if (res.status == 200) {
this.$message.success("修改成功");
this.polygon = [];
if (this.EnclosureVisible) {
this.EnclosureVisible = false;
this.EnclosureVisible = false;
}
this.page = 1;
this.listinit(json.cityCode);
this.currentCity(json.cityCode, json.id);
} else {
this.$message.error(res.data.msg);
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消修改",
});
});
}
},
deletePolygon(item) {
console.info(item);
let id_ = item.id;
this.$confirm("确定要删除此围栏吗?", "操作提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deletefence(id_).then((res) => {
if (res.status == 200) {
this.$message.success("删除成功");
this.polygon = [];
this.window.type = false;
this.page = 1;
this.listinit(item.cityCode);
this.currentCity(item.cityCode);
} else {
this.$message.error(res.data.msg);
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// todo 选择围栏类型
chooseFenceType(val) {
this.fenceTypeName = this.Enclosureoptions = val
? this.Enclosureoptions.find((ele) => ele.value === val).label
: "";
console.log(this.fenceTypeName);
this.EnclosureForm.fenceTypeName = this.fenceTypeName;
},
setUpEnclosureoptions(val) {
console.log(val);
// this.EnclosureForm.fenceTypeName = val;
console.log(this.Enclosureoptions);
this.Enclosureoptions = [
{
value: "0",
label: "发单围栏",
},
{
value: "1",
label: "不可接单区域围栏",
},
{
value: "2",
label: "车辆GPS围栏",
},
{
value: "3",
label: "活动商圈围栏",
},
];
},
current_change(val) {
this.page = val;
this.listinit(this.leftpenCity[1]);
},
/**
* 围栏编辑按钮
*/
editPolygonFun(item) {
console.info(item);
this.EnclosureVisible = true;
this.editPolygonFlag = true;
},
},
};
</script>
<style scoped lang="scss">
div {
}
.enclosureItemBox {
width: 100%;
height: calc(100vh - 70px);
}
.mapBox {
display: flex;
padding: 10px 0;
}
.enclosurelist {
margin-top: 8px;
}
.enclosurelist > ul {
height: calc(100vh - 225px);
overflow: auto;
}
.enclosurelist > ul > li {
padding: 0.8rem;
border: 1px solid #ccc;
border-radius: 0.3rem;
position: relative;
margin-bottom: 0.3rem;
}
.mapBox > div:nth-child(1) {
margin-right: 20px;
transition: width 0.1s linear;
overflow: hidden;
}
.enclosurelist > ul > li > div {
font-size: 14px;
display: flex;
align-items: center;
.el-tag {
height: 24px;
padding: 0 5px;
line-height: 24px;
}
}
.mapBox .el-input {
position: static;
}
.piblic-header .left-icon {
width: 50px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 20px;
display: flex;
}
.piblic-header .left-icon span:first-child {
color: #e6a23c;
}
.piblic-header .left-icon span:nth-child(2) {
color: #f56c6c;
}
.amap-box {
width: 100%;
height: 100%;
}
.btn-list {
width: 100%;
position: absolute;
top: 10px;
left: 10px;
display: flex;
z-index: 999;
}
.el-button + .el-button {
margin-right: 10px;
}
.amap-box {
position: relative;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment