ZongYue / lpg

Download as
Browse Code »

Commit 71f388df3c44b4c8b71de5264f8a4998316dba5b

Authored by 郭娟
1 parent af58cd8f
Exists in dev

fix:优化区域管理的功能

Showing 9 changed files with 1143 additions and 335 deletions   Show diff stats
frontend/front/src/api/regionalManage.js 0 → 100644
  Diff comments   View file @71f388d
... ... @@ -0,0 +1,42 @@
  1 +import request from '@/utils/request'
  2 +
  3 +const portal = context.portal
  4 +const form = context.form
  5 +const uc = context.uc
  6 +
  7 +//区域管理中新增，编辑接口
  8 +export function regionalAddEditPort(data) {
  9 + return request({
  10 + url: `${context.bpmModel}/manage/mStationRegionalDivision/v1/save`,
  11 + method: 'post',
  12 + data,
  13 + })
  14 +}
  15 +//获取区域管理中-区域详情接口
  16 +export function regionalDetailInfo(params) {
  17 + return request({
  18 + url: `${context.portal}/manage/mStationRegionalDivision/v1/getDetail`,
  19 + method: 'get',
  20 + params
  21 + })
  22 +}
  23 +//区域管理中table列表接口
  24 +export function regionalTablePort(data) {
  25 + return request({
  26 + url: `${context.bpmModel}/form/customDialog/v1/getListData?alias=qyhf&mapParam=`,
  27 + method: 'post',
  28 + data,
  29 + })
  30 +}
  31 +
  32 +//区域类型的字典接口
  33 +export function regionTypePort(data) {
  34 + return request({
  35 + url: `${context.bpmModel}/form/customQuery/v1/doQuery?alias=sjzd&page=1&pageSize=100`,
  36 + method: 'post',
  37 + data,
  38 + })
  39 +}
  40 +
  41 +
  42 +
... ...
frontend/front/src/views/pages/regionalManage/components/carManage.vue 0 → 100644
  Diff comments   View file @71f388d
... ... @@ -0,0 +1,29 @@
  1 +<template>
  2 + <div class="container">
  3 + 车辆组件
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "carManage",
  10 + props:{
  11 + type:Object,
  12 + default:{}
  13 + },
  14 + mounted() {
  15 + },
  16 + data(){
  17 + return {
  18 +
  19 + }
  20 + },
  21 + methods:{
  22 +
  23 + }
  24 +}
  25 +</script>
  26 +
  27 +<style lang="scss" scoped>
  28 +
  29 +</style>
... ...
frontend/front/src/views/pages/regionalManage/components/checkManage.vue 0 → 100644
  Diff comments   View file @71f388d
... ... @@ -0,0 +1,29 @@
  1 +<template>
  2 + <div class="container">
  3 + 安检项组件
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "checkManage",
  10 + props:{
  11 + type:Object,
  12 + default:{}
  13 + },
  14 + mounted() {
  15 + },
  16 + data(){
  17 + return {
  18 +
  19 + }
  20 + },
  21 + methods:{
  22 +
  23 + }
  24 +}
  25 +</script>
  26 +
  27 +<style lang="scss" scoped>
  28 +
  29 +</style>
... ...
frontend/front/src/views/pages/regionalManage/components/otherManage.vue 0 → 100644
  Diff comments   View file @71f388d
... ... @@ -0,0 +1,29 @@
  1 +<template>
  2 + <div class="container">
  3 + 其他组件
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "otherManage",
  10 + props:{
  11 + type:Object,
  12 + default:{}
  13 + },
  14 + mounted() {
  15 + },
  16 + data(){
  17 + return {
  18 +
  19 + }
  20 + },
  21 + methods:{
  22 +
  23 + }
  24 +}
  25 +</script>
  26 +
  27 +<style lang="scss" scoped>
  28 +
  29 +</style>
... ...
frontend/front/src/views/pages/regionalManage/components/paymentManage.vue 0 → 100644
  Diff comments   View file @71f388d
... ... @@ -0,0 +1,29 @@
  1 +<template>
  2 + <div class="container">
  3 + 支付组件
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "paymentManage",
  10 + props:{
  11 + type:Object,
  12 + default:{}
  13 + },
  14 + mounted() {
  15 + },
  16 + data(){
  17 + return {
  18 +
  19 + }
  20 + },
  21 + methods:{
  22 +
  23 + }
  24 +}
  25 +</script>
  26 +
  27 +<style lang="scss" scoped>
  28 +
  29 +</style>
... ...
frontend/front/src/views/pages/regionalManage/components/personManage.vue 0 → 100644
  Diff comments   View file @71f388d
... ... @@ -0,0 +1,29 @@
  1 +<template>
  2 + <div class="container">
  3 + 人员组件
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "personManage",
  10 + props:{
  11 + type:Object,
  12 + default:{}
  13 + },
  14 + mounted() {
  15 + },
  16 + data(){
  17 + return {
  18 +
  19 + }
  20 + },
  21 + methods:{
  22 +
  23 + }
  24 +}
  25 +</script>
  26 +
  27 +<style lang="scss" scoped>
  28 +
  29 +</style>
... ...
frontend/front/src/views/pages/regionalManage/components/regionManage.vue 0 → 100644
  Diff comments   View file @71f388d
... ... @@ -0,0 +1,718 @@
  1 +<template>
  2 + <div class="container">
  3 + <el-row>
  4 + <el-col :span="24">
  5 + <el-form :model="queryForm" ref="queryForm" :inline="true" style="display: flex; justify-content: space-between">
  6 + <div>
  7 + <el-form-item label="区域名称:">
  8 + <el-input v-model="queryForm.regionalName" placeholder="请输入姓名" clearable></el-input>
  9 + </el-form-item>
  10 + <el-form-item label="区域类型:">
  11 + <el-select v-model="queryForm.regionalType" placeholder="请选择状态" clearable>
  12 + <el-option v-for="item in regionalTypeOptions" :key="item.KEY_" :label="item.NAME_" :value="item.KEY_">
  13 + </el-option>
  14 + </el-select>
  15 + </el-form-item>
  16 + </div>
  17 + <el-form-item>
  18 + <el-button type="primary" icon="el-icon-refresh"
  19 + style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
  20 + @click="handleReset" plain>重置
  21 + </el-button>
  22 + <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
  23 + icon="el-icon-search" @click="handleSearch"> 查询
  24 + </el-button>
  25 + </el-form-item>
  26 + </el-form>
  27 + </el-col>
  28 + <el-col :span="24" style="margin-bottom: 10px;">
  29 + <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
  30 + icon="el-icon-plus" @click=" hanleOpt('add')"> 新增
  31 + </el-button>
  32 + </el-col>
  33 + <el-col :span="24">
  34 + <el-table
  35 + style="width: 100%"
  36 + :data="tableData">
  37 + <el-table-column
  38 + type="index"
  39 + label="序号">
  40 + </el-table-column>
  41 + <el-table-column
  42 + prop="f_ssqymc"
  43 + label="企业名称">
  44 + </el-table-column>
  45 + <el-table-column
  46 + prop="f_name"
  47 + label="区域名称">
  48 + </el-table-column>
  49 + <el-table-column
  50 + prop="f_regional_type"
  51 + label="类型">
  52 + </el-table-column>
  53 + <el-table-column
  54 + prop="f_shape"
  55 + label="区域形状">
  56 + </el-table-column>
  57 + <el-table-column
  58 + prop="f_remark"
  59 + label="备注">
  60 + </el-table-column>
  61 + <el-table-column
  62 + prop="opt"
  63 + width="100"
  64 + label="操作">
  65 + <template slot-scope="scope">
  66 + <el-button type="text" @click="hanleOpt('edit',scope.row)">编辑</el-button>
  67 + </template>
  68 + </el-table-column>
  69 + </el-table>
  70 + </el-col>
  71 + <el-col :span="24">
  72 + <el-pagination
  73 + style="float: right; margin-top: 10px;"
  74 + @size-change="handleSizeChange"
  75 + @current-change="handleCurrentChange"
  76 + :current-page="pageParam.page"
  77 + :page-sizes="[10, 20, 30, 50]"
  78 + :page-size="pageParam.size"
  79 + layout="total, sizes, prev, pager, next, jumper"
  80 + :total="pageParam.total">
  81 + </el-pagination>
  82 + </el-col>
  83 + </el-row>
  84 + <el-dialog
  85 + :title="dialogParams.title"
  86 + :visible.sync="dialogParams.dialogVisible"
  87 + width="80%"
  88 + @close="handleDialogClose">
  89 + <el-form :model="dialogParams" :inline="true" :rules="dialogRules" ref="dialogParams">
  90 + <el-form-item label="区域名称:" prop="regionalName">
  91 + <el-input v-model="dialogParams.regionalName" placeholder="请输入区域名称" clearable></el-input>
  92 + </el-form-item>
  93 + <el-form-item label="区域类型:" prop="regionalType">
  94 + <el-select v-model="dialogParams.regionalType" clearable placeholder="请选择">
  95 + <el-option
  96 + v-for="item in regionalTypeOptions"
  97 + :key="item.KEY_"
  98 + :label="item.NAME_"
  99 + :value="item.KEY_">
  100 + </el-option>
  101 + </el-select>
  102 + </el-form-item>
  103 + <el-form-item label="备注:">
  104 + <el-input
  105 + clearable
  106 + style="width: 100%;"
  107 + type="textarea"
  108 + placeholder="请输入内容"
  109 + v-model="dialogParams.fRemark">
  110 + </el-input>
  111 + </el-form-item>
  112 + <el-form-item>
  113 + <el-button :class="[dialogParams.fShape == '三角形'?'clickBtn':'','btn']" @click="draw('polygon','三角形')" style="margin-bottom: 5px">绘制多边形</el-button>
  114 + <el-button :class="[dialogParams.fShape == '矩形'?'clickBtn':'','btn']" @click="draw('rectangle','矩形')" style="margin-bottom: 5px">绘制矩形</el-button>
  115 + <el-button :class="[dialogParams.fShape == '圆形'?'clickBtn':'','btn']" @click="draw('circle','圆形')" style="margin-bottom: 5px">绘制圆形</el-button>
  116 + <el-button @click="closeDraw" v-if="dialogParams.dialogType == 'edit'" style="margin-bottom: 5px">结束编辑</el-button>
  117 + </el-form-item>
  118 + </el-form>
  119 + <el-row>
  120 + <el-col :span="24">
  121 + <div id="mapContainer" style="width: 100%; height: 500px;"></div>
  122 + </el-col>
  123 + </el-row>
  124 + <span slot="footer" class="dialog-footer">
  125 + <el-button @click="dialogParams.dialogVisible = false">取 消</el-button>
  126 + <el-button type="primary" @click="handleSubmit('dialogParams')">确 定</el-button>
  127 + </span>
  128 + </el-dialog>
  129 + </div>
  130 +</template>
  131 +
  132 +<script>
  133 +import AMapLoader from '@amap/amap-jsapi-loader';
  134 +import {regionalTablePort,regionalAddEditPort,regionTypePort,regionalDetailInfo} from '@/api/regionalManage'
  135 +export default {
  136 + name: "regionManage",
  137 + props:{
  138 + rowData:{
  139 + type:Object,
  140 + default:()=>{}
  141 + }
  142 + },
  143 + async mounted() {
  144 + await this.getDataList();
  145 + await this.getRegionTypeList();
  146 + },
  147 + data(){
  148 + return {
  149 + tableData:[],
  150 + regionalTypeOptions:[
  151 + {
  152 + label:'经营区域',
  153 + value:'经营区域'
  154 + },
  155 + {
  156 + label:'流动区域',
  157 + value:'流动区域'
  158 + }
  159 + ],
  160 + dialogRules:{
  161 + regionalName:[
  162 + {required:true,message:'请输入区域名称',trigger:'blur'}
  163 + ],
  164 + regionalType:[
  165 + {required:true,message:'请选择区域类型',trigger:'change'}
  166 + ]
  167 + },
  168 + queryForm:{
  169 + regionalType:'',
  170 + regionalName:'',
  171 + orgId:'',
  172 + tabType:'region'
  173 + },
  174 + dialogParams:{
  175 + title:'新增区域',
  176 + radius:'',//圆形半径
  177 + dialogVisible:false,
  178 + fSsczid:'',
  179 + fShape:'',
  180 + fRemark:'',
  181 + id:'',
  182 + dialogType:'',
  183 + regionalType:'',
  184 + regionalName:'',
  185 + centerOfCircle:[],//圆形中心点坐标
  186 + },
  187 + polygon: null,
  188 + map:null,
  189 + mapEditor:null,
  190 + mouseTool:null,
  191 + overlays:[],
  192 + circleOverlays:[],//圆形中心点的坐标
  193 + centerPoint:[116.403322, 39.920255],
  194 + pageParam:{
  195 + page:1,
  196 + size:10,
  197 + total:0
  198 + },
  199 +
  200 + }
  201 + },
  202 + methods:{
  203 + //初始化区域类型的接口数据
  204 + async getRegionTypeList(){
  205 + let params =[
  206 + {
  207 + "key": "PARENT_ID_",
  208 + "value": "1828635308418162688"
  209 + }
  210 + ]
  211 + await regionTypePort(params).then((res)=>{
  212 + const { rows } = res;
  213 + this.regionalTypeOptions = rows;
  214 + })
  215 + },
  216 + async getRegionDetailInfoData(id){
  217 + await regionalDetailInfo({id:id}).then((res)=>{
  218 + console.log('打印详情res======>',res);
  219 + const { value } = res;
  220 + const { fShape,fName,fRemark,radius,fBoundary,centerOfCircle,fRegionalType} = value;
  221 + this.dialogParams.fRemark = fRemark;
  222 + this.dialogParams.regionalName = fName;
  223 + this.dialogParams.regionalType = fRegionalType;
  224 + this.dialogParams.radius = radius;
  225 + this.dialogParams.fShape = fShape;
  226 + console.log('打印fBoundary',JSON.parse(fBoundary));
  227 + this.dialogParams.centerOfCircle = centerOfCircle?centerOfCircle.split(','):[];
  228 + if(this.dialogParams.fShape == '圆形'){
  229 +
  230 + }
  231 +
  232 + })
  233 + },
  234 + //初始化数据接口
  235 + async getDataList(){
  236 + let params= {
  237 + pageBean: {
  238 + page: this.pageParam.page,
  239 + pageSize: this.pageParam.size,
  240 + showTotal: true
  241 + },
  242 + querys: []
  243 + }
  244 + if(this.queryForm.regionalName){
  245 + params.querys.push({
  246 + property: "f_name",
  247 + value: this.queryForm.regionalName,
  248 + group: "advance",
  249 + relation: "AND",
  250 + operation: "LIKE"
  251 + })
  252 + }
  253 + if(this.queryForm.regionalType){
  254 + params.querys.push({
  255 + property: "f_regional_type",
  256 + value: this.queryForm.regionalType,
  257 + group: "advance",
  258 + relation: "AND",
  259 + operation: "LIKE"
  260 + })
  261 + }
  262 + if(this.rowData.orgId){
  263 + params.querys.push({
  264 + property: "orgId",
  265 + value: this.rowData.orgId,
  266 + group: "advance",
  267 + relation: "AND",
  268 + operation: "LIKE"
  269 + })
  270 + }
  271 + await regionalTablePort(params).then((res)=>{
  272 + console.log('打印区域管理中res====>',res);
  273 + const { rows,total } = res;
  274 + this.tableData = rows;
  275 + this.pageParam.total = total;
  276 + })
  277 + },
  278 + //强调说明：自定义的dom是基于地图对象生成的，并不能像vue一样绑定事件，这里采用jQuery的方式出发的事件。如下
  279 + //定义右键内容
  280 + rightclickObj() {
  281 + let that = this;
  282 + //���义内容
  283 + let content = [];
  284 + content.push("<div class='context_menu'>");
  285 + content.push(
  286 + "<p class='menu-list menu-list-edit-start' >启用编辑</p>"
  287 + );
  288 + content.push(
  289 + "<p class='menu-list menu-list-edit-end' >结束编辑</p>"
  290 + );
  291 + content.push(
  292 + "<p class='menu-list menu-list-get-area' >计算面积</p>"
  293 + );
  294 + content.push(
  295 + "<p class='menu-list menu-list-remove' >移除图形</p>"
  296 + );
  297 + if (that.circleEditor) {
  298 + content.push(
  299 + "<p class='menu-list menu-list-radius'>半径</p>"
  300 + );
  301 + }
  302 + content.push('</div>');
  303 + //创建右键实例并添加自定义的内容
  304 +
  305 + that.contextMenu = new AMap.ContextMenu({
  306 + isCustom: true,
  307 + content: content.join('')
  308 + });
  309 + },
  310 + //初始化地图
  311 + initializeMap() {
  312 + AMapLoader.reset();
  313 + AMapLoader.load({
  314 + "key": "65f6591039d0e723f91a2bfab50712f7",// 申请好的Web端开发者Key，首次调用 load 时必填
  315 + "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  316 + "plugins": ['AMap.ToolBar', 'AMap.Driving','AMap.InfoWindow',
  317 + 'AMap.ContextMenu',
  318 + 'AMap.Heatmap',
  319 + 'AMap.MouseTool',
  320 + 'AMap.RangingTool',
  321 + 'AMap.CircleEditor',
  322 + 'AMap.RectangleEditor',
  323 + 'AMap.PolyEditor',
  324 + 'AMap.VectorMap',
  325 + 'AMap.ToolBar',
  326 + 'AMap.Scale',
  327 + 'AMap.OverView',
  328 + 'AMap.MapType',
  329 + 'AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  330 + "AMapUI": {
  331 + "version": "1.1",
  332 + "plugins": []
  333 + },
  334 + Loca: {
  335 + version: '2.0' //数据可视化
  336 + }
  337 + }).then((AMap)=>{
  338 + console.log('打印AMap====>',AMap);
  339 + this.map = new AMap.Map('mapContainer', {//设置地图容器id
  340 + viewMode: '2D', //是否为3D地图模式
  341 + zoom: 16, //初始化地图层级
  342 + center: this.centerPoint,//初始化地图中心点
  343 + });
  344 + // this.map.on('rightclick', (e)=> {
  345 + // this.rightclickObj(); //定义右键内容
  346 + // this.contextMenu.open(this.map, e.lnglat);
  347 + // this.contextMenuPositon = e.lnglat; //右键菜单位置
  348 + // });
  349 + let that = this;
  350 + this.mouseTool =new AMap.MouseTool(this.map);
  351 + this.mouseTool.on('draw',function (e){
  352 + if(that.overlays.length>0){
  353 + console.log('打印this.overlays=====>',that.overlays);
  354 + that.map.remove(that.overlays);
  355 + //关闭绘画
  356 + // that.mouseTool.close(true);
  357 + that.overlays = [];
  358 + }
  359 + if(that.dialogParams.fShape == '圆形'){
  360 + let circleCenterPoint = e.obj.getCenter(); //获取圆形坐标点
  361 + let circleRadius = e.obj.getRadius();//获取半径
  362 + that.dialogParams.radius = circleRadius;
  363 + let circlePointList = [
  364 + {
  365 + jd:circleCenterPoint.lng,
  366 + wd:circleCenterPoint.lat
  367 + }
  368 + ];
  369 + that.circleOverlays = circlePointList;
  370 + console.log('打印position',circleCenterPoint,circleRadius);
  371 + }
  372 + that.overlays.push(e.obj);
  373 + console.log('打印that.overlays',that.overlays);
  374 + })
  375 + if(this.dialogParams.dialogType == 'edit'){
  376 + var editShap = null;
  377 + if(this.dialogParams.fShape == '圆形'){
  378 + editShap = new AMap.Circle({
  379 + center: this.dialogParams.centerOfCircle,
  380 + radius: this.dialogParams.radius, //半径
  381 + borderWeight: 3,
  382 + strokeColor: "#FF33FF",
  383 + // strokeOpacity: 1,
  384 + strokeWeight: 6,
  385 + strokeOpacity: 0.2,
  386 + fillOpacity: 0.4,
  387 + strokeStyle: 'dashed',
  388 + strokeDasharray: [10, 10],
  389 + // 线样式还支持 'dashed'
  390 + fillColor: '#1791fc',
  391 + zIndex: 50,
  392 + });
  393 + this.mapEditor = new AMap.CircleEditor(this.map, editShap);
  394 + }else if(this.dialogParams.fShape == '矩形'){
  395 + var southWest = new AMap.LngLat(116.356449, 39.859008)
  396 + var northEast = new AMap.LngLat(116.417901, 39.893797)
  397 + var bounds = new AMap.Bounds(southWest, northEast)
  398 + editShap = new AMap.Rectangle({
  399 + bounds: bounds,
  400 + strokeColor:'#FF33FF',
  401 + strokeWeight: 6,
  402 + strokeOpacity:0.2,
  403 + strokeDasharray: [30,10],
  404 + // strokeStyle还支持 solid
  405 + // 线样式还支持 'dashed'
  406 + fillColor: '#1791fc',
  407 + strokeStyle: 'dashed',
  408 + fillOpacity:0.5,
  409 + cursor:'pointer',
  410 + zIndex:50,
  411 + });
  412 + this.mapEditor = new AMap.RectangleEditor(this.map, editShap);
  413 + }
  414 + editShap.setMap(this.map);
  415 + // 缩放地图到合适的视野级别
  416 + this.map.setFitView([ editShap ]);
  417 + this.mapEditor.open();
  418 + this.mapEditor.on('end', function(event) {
  419 + if(that.dialogParams.fShape == '圆形'){
  420 + let editCircleCenterPoint = event.target.getCenter(); //获取圆形坐标点
  421 + let editCircleRadius = event.target.getRadius();//获取半径
  422 + that.dialogParams.radius = editCircleRadius;
  423 + let editCirclePointList = [
  424 + {
  425 + jd:editCircleCenterPoint.lng,
  426 + wd:editCircleCenterPoint.lat
  427 + }
  428 + ];
  429 + that.circleOverlays = editCirclePointList;
  430 + }else if(that.dialogParams.fShape == '矩形'){
  431 + console.log('触发事件： end=====>',event);
  432 + }
  433 + that.overlays.push(event.target);
  434 + // event.target 即为编辑后的圆形对象
  435 + })
  436 + }
  437 + })
  438 + },
  439 + //结束编辑
  440 + closeDraw(){
  441 + this.mapEditor.close();
  442 + },
  443 + //draw 绘制圆形，矩形，多边形
  444 + draw(type,shapType){
  445 + if(this.dialogParams.dialogType == 'edit'){
  446 + this.mapEditor.close();
  447 + }
  448 + this.dialogParams.fShape = shapType;
  449 + switch (type){
  450 + case 'polygon':{
  451 + this.mouseTool.polygon({
  452 + fillColor:'#00b0ff',
  453 + strokeColor:'#80d8ff'
  454 + });
  455 + break;
  456 + }
  457 + case 'rectangle':{
  458 + this.mouseTool.rectangle({
  459 + fillColor:'#00b0ff',
  460 + strokeColor:'#80d8ff'
  461 + });
  462 + break;
  463 + }
  464 + case 'circle':{
  465 + this.mouseTool.circle({
  466 + fillColor:'#00b0ff',
  467 + strokeColor:'#80d8ff'
  468 + });
  469 + break;
  470 + }
  471 + }
  472 + },
  473 + //绘制多边形
  474 + drawPolygon () {
  475 + if(this.overlays.length>0){
  476 + this.map.remove(this.overlays);
  477 + this.map.clearMap();
  478 + //关闭绘画
  479 + this.mouseTool.close(true);
  480 + this.overlays = [];
  481 + return
  482 + }
  483 + this.mouseTool.polygon({
  484 + fillColor:'#00b0ff',
  485 + strokeColor:'#80d8ff',
  486 + // strokeOpacity: 1,
  487 + strokeWeight: 6,
  488 + strokeOpacity: 0.2,
  489 + fillOpacity: 0.4,
  490 + // 线样式还支持 'dashed'
  491 + strokeStyle: "solid",
  492 + // strokeStyle是dashed时有效
  493 + // strokeDasharray: [30,10],
  494 + });
  495 + let that = this;
  496 + this.mouseTool.on('draw', function(event) {
  497 + if(that.overlays.length>1){
  498 + console.log('打印this.overlays',that.overlays,that.mouseTool);
  499 + that.map.remove(that.overlays);
  500 + //关闭绘画
  501 + // that.mouseTool.close(true);
  502 + that.overlays = [];
  503 + }
  504 + let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组
  505 + that.overlays.push(event.obj);
  506 + console.log('打印geoJson',geoJSON,that.overlays);
  507 + // // 为矢量图形设置唯一标识和zIndex
  508 + // console.log('覆盖物对象绘制完成',event.obj);
  509 + // event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() });
  510 + // event.obj.setOptions({ zIndex: 100 });
  511 +
  512 + // 其他矢量图形处理逻辑...
  513 + // event.obj 为绘制出来的覆盖物对象
  514 + });
  515 + },
  516 + //绘制圆形
  517 + drawCircle () {
  518 + if(this.overlays.length>0){
  519 + this.map.remove(this.overlays);
  520 + //清除原来的电子围栏
  521 + this.map.clearMap();
  522 + //关闭绘画
  523 + this.mouseTool.close(true);
  524 + this.overlays = [];
  525 + return
  526 + }
  527 + console.log('打印this.overlays====>圆形',this.overlays)
  528 + this.mouseTool.circle({
  529 + // strokeOpacity: 1,
  530 + strokeWeight: 6,
  531 + strokeOpacity: 0.2,
  532 + fillColor:'#00b0ff',
  533 + strokeColor:'#80d8ff',
  534 + fillOpacity: 0.4,
  535 + strokeStyle: 'solid',
  536 + // 线样式还支持 'dashed'
  537 + // strokeDasharray: [30,10],
  538 + })
  539 + let that = this;
  540 + this.mouseTool.on('draw', function(event) {
  541 + if(that.overlays.length>0){
  542 + // console.log('打印this.overlays',that.overlays,that.mouseTool);
  543 + that.map.remove(that.overlays);
  544 + //关闭绘画
  545 + that.mouseTool.close(true);
  546 + that.overlays = [];
  547 + return
  548 + }
  549 + let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组
  550 + that.overlays.push(event.obj);
  551 + // // 为矢量图形设置唯一标识和zIndex
  552 + // event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() });
  553 + // event.obj.setOptions({ zIndex: 100 });
  554 +
  555 + // 其他矢量图形处理逻辑...
  556 + // event.obj 为绘制出来的覆盖物对象
  557 + console.log('覆盖物对象开始绘制====》圆形',event.obj,that.overlays);
  558 + });
  559 + },
  560 + //绘制矩形
  561 + drawRectangle () {
  562 + if(this.overlays.length>0){
  563 + this.map.remove(this.overlays);
  564 + //关闭绘画
  565 + this.mouseTool.close(true);
  566 + //清除原来的电子围栏
  567 + this.map.clearMap();
  568 + this.overlays = [];
  569 + return
  570 + }
  571 + console.log('打印矩形=====》',this.overlays,this.mouseTool);
  572 + this.mouseTool.rectangle({
  573 + strokeOpacity:0.5,
  574 + strokeWeight: 6,
  575 + fillColor:'#00b0ff',
  576 + strokeColor:'#80d8ff',
  577 + fillOpacity:0.5,
  578 + // strokeStyle还支持 solid
  579 + strokeStyle: 'solid',
  580 + // strokeDasharray: [30,10],
  581 + })
  582 + let that = this;
  583 + this.mouseTool.on('draw', function(event) {
  584 + if(that.overlays.length>0){
  585 + console.log('打印this.overlays',that.overlays,that.mouseTool);
  586 + that.map.remove(that.overlays);
  587 + //关闭绘画
  588 + that.mouseTool.close(true);
  589 + that.overlays = [];
  590 + return
  591 + }
  592 + let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组
  593 + that.overlays.push(event.obj);
  594 + // 为矢量图形设置唯一标识和zIndex
  595 + // event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() });
  596 + // event.obj.setOptions({ zIndex: 100 });
  597 + // 其他矢量图形处理逻辑...
  598 + // event.obj 为绘制出来的覆盖物对象
  599 + console.log('覆盖物对象绘制完成=====>矩形',event,that.overlays)
  600 + });
  601 + },
  602 + //提交事件
  603 + async handleSubmit(formName){
  604 + this.$refs[formName].validate(async (valid) => {
  605 + if (valid) {
  606 + console.log('打印this.overlays.',this.overlays)
  607 + if(this.overlays.length<=0){
  608 + this.$message.warning('请规划区域!');
  609 + return;
  610 + }
  611 + console.log('打印this.overLays',);
  612 + let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{
  613 + return {
  614 + jd:item.lng,
  615 + wd:item.lat
  616 + }
  617 + });
  618 + jwdDTOListArray.push(jwdDTOListArray[0]);
  619 + console.log('打印jwdDTOListArray',jwdDTOListArray);
  620 + let params= {
  621 + id:this.dialogParams.id,
  622 + fName: this.dialogParams.regionalName,
  623 + fSsczid: this.rowData.fSsczid,
  624 + fRegionalType: this.dialogParams.regionalType,
  625 + fShape: this.dialogParams.fShape,
  626 + fRemark:this.dialogParams.fRemark,
  627 + jwdDTOList:this.dialogParams.fShape == '圆形'?this.circleOverlays:jwdDTOListArray
  628 + }
  629 + if(this.dialogParams.fShape == '圆形'){
  630 + params ={
  631 + ...params,
  632 + radius:this.dialogParams.radius
  633 + }
  634 + }
  635 + await regionalAddEditPort(params).then((res)=>{
  636 + this.dialogParams.dialogVisible = false;
  637 + this.mouseTool.close(true);
  638 + this.overlays = [];
  639 + this.handleSearch();
  640 + this.pageParam.page = 1;
  641 + })
  642 + } else {
  643 + return false;
  644 + }
  645 + });
  646 + },
  647 + //弹窗关闭
  648 + handleDialogClose(){
  649 + this.$refs.dialogParams.resetFields();
  650 + this.dialogParams.dialogVisible = false;
  651 + this.mouseTool.close(true);
  652 + this.overlays = [];
  653 +
  654 + },
  655 + //分页功能的size改变事件
  656 + handleSizeChange(val){
  657 + this.pageParam.size = val;
  658 + this.handleSearch();
  659 + },
  660 + //分页功能page改变事件
  661 + handleCurrentChange(val){
  662 + this.pageParam.page = val;
  663 + this.handleSearch();
  664 + },
  665 + //操作栏按钮
  666 + hanleOpt(type,row){
  667 + console.log('打印row=====>',row);
  668 + this.dialogParams.dialogType= type;
  669 + switch (type){
  670 + case 'add':
  671 + this.dialogParams.id ='';
  672 + this.dialogParams.title='新增区域';
  673 + break;
  674 + case 'edit':
  675 + this.dialogParams.id = row.id_;
  676 + this.dialogParams.title='编辑区域';
  677 + this.getRegionDetailInfoData(row.id_);
  678 + break;
  679 + }
  680 + if(!this.rowData.fSsczid && type == 'add'){
  681 + this.$message.warning('请选择气站!')
  682 + return
  683 + }
  684 + this.dialogParams.dialogVisible = true;
  685 + this.$nextTick(()=>{
  686 + this.initializeMap();
  687 + })
  688 + console.log('打印是否触发新增功能');
  689 + },
  690 + //重置按钮事件
  691 + handleReset(){
  692 + this.queryForm.regionalType ='';
  693 + this.queryForm.regionalName ='';
  694 + this.pageParam.page = 1;
  695 + this.handleSearch();
  696 + },
  697 + //查询按钮事件
  698 + handleSearch(){
  699 + this.getDataList();
  700 + },
  701 + //新增用户事件
  702 + handleAdd(){
  703 + this.showDialog = true;
  704 + this.$nextTick(()=>{
  705 + this.$refs.showDialog.open('add');
  706 + })
  707 + }
  708 + }
  709 +}
  710 +</script>
  711 +
  712 +<style lang="scss" scoped>
  713 +.clickBtn{
  714 + background-color:#5875eb;
  715 + color: #ffffff;
  716 +}
  717 +
  718 +</style>
... ...
frontend/front/src/views/pages/regionalManage/components/videoManage.vue 0 → 100644
  Diff comments   View file @71f388d
... ... @@ -0,0 +1,29 @@
  1 +<template>
  2 + <div class="container">
  3 + 摄像组件
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "videoManage",
  10 + props:{
  11 + type:Object,
  12 + default:{}
  13 + },
  14 + mounted() {
  15 + },
  16 + data(){
  17 + return {
  18 +
  19 + }
  20 + },
  21 + methods:{
  22 +
  23 + }
  24 +}
  25 +</script>
  26 +
  27 +<style lang="scss" scoped>
  28 +
  29 +</style>
... ...
frontend/front/src/views/pages/regionalManage/index.vue
  Diff comments   View file @71f388d
1 1 <template>
2   - <div class="regionalSty">
3   - <div class="searchSty">
4   - <el-form :model="queryParams" :inline="true">
5   - <el-form-item label="区域名称:">
6   - <el-input v-model="queryParams.regionalName" placeholder="请输入区域名称" clearable></el-input>
7   - </el-form-item>
8   - <el-form-item label="区域类型:">
9   - <el-select v-model="queryParams.regionalType" clearable placeholder="请选择">
10   - <el-option
11   - v-for="item in regionalTypeOptions"
12   - :key="item.value"
13   - :label="item.label"
14   - :value="item.value">
15   - </el-option>
16   - </el-select>
17   - </el-form-item>
18   - <el-form-item>
19   - <el-button type="primary" @click="handleQuery" icon="el-icon-search" size="small">搜索</el-button>
20   - <el-button @click="handleReset" icon="el-icon-refresh-left" size="small">重置</el-button>
21   - </el-form-item>
22   - </el-form>
  2 + <div class="container">
  3 + <div class="container-left">
  4 + <div class="title-label">组织列表</div>
  5 + <div class="title-content">可以选择对应的组织下的成员信息</div>
  6 + <div><el-input v-model="filterText" placeholder="请输入组织关键词搜索" suffix-icon="el-icon-search" cleaable></el-input></div>
  7 + <div>
  8 + <el-tree
  9 + class="filter-tree"
  10 + :data="treeData"
  11 + @node-click="handleNodeClick"
  12 + :props="defaultProps"
  13 + highlight-current
  14 + default-expand-all
  15 + :filter-node-method="filterNode"
  16 + ref="tree">
  17 + <template v-slot="{node}">
  18 + <span :title="node.label" class="node-label">{{node.label}}</span>
  19 + </template>
  20 + </el-tree>
  21 + </div>
23 22 </div>
24   - <div class="tableSty">
25   - <el-row>
26   - <el-col :span="24" style="margin-bottom: 10px;">
27   - <el-button type="primary" @click="hanleOpt('add')" icon="el-icon-plus" size="small">新增</el-button>
28   - </el-col>
29   - <el-col :span="24">
30   - <el-table
31   - :data="tableData"
32   - style="width: 100%">
33   - <el-table-column
34   - type="index"
35   - label="序号"
36   - width="80">
37   - </el-table-column>
38   - <el-table-column
39   - prop="regionalName"
40   - label="区域名称"
41   - width="150">
42   - </el-table-column>
43   - <el-table-column
44   - prop="regionalType"
45   - label="类型">
46   - </el-table-column>
47   - <el-table-column
48   - prop="bz"
49   - label="备注">
50   - </el-table-column>
51   - <el-table-column
52   - prop="opt"
53   - label="操作"
54   - width="150">
55   - <template slot-scope="scope">
56   - <span @click="hanleOpt('edit',scope.row)">编辑</span>
57   - </template>
58   - </el-table-column>
59   - </el-table>
60   - </el-col>
61   - </el-row>
  23 + <div class="container-right">
  24 + <div class="container-right-head">
  25 + <el-radio-group v-model="queryForm.tabType">
  26 + <el-radio-button v-for="(item,index) in tabTypeList" :label="item.key" :key="item.key">{{item.title}}</el-radio-button>
  27 + </el-radio-group>
  28 + </div>
  29 + <div class="container-right-main">
  30 + <component v-for="(item,index) in infoComponentsList" :rowData="rowData" :form="queryForm" v-if="queryForm.tabType === item.key" v-show="queryForm.tabType === item.key" :key="item.key" :is='item.component' :ref='item.component'></component>
  31 + </div>
62 32 </div>
63   - <el-dialog
64   - :title="dialogParams.title"
65   - :visible.sync="dialogParams.dialogVisible"
66   - width="80%"
67   - @close="handleDialogClose">
68   - <el-form :model="dialogParams" :inline="true">
69   - <el-form-item label="区域名称:">
70   - <el-input v-model="dialogParams.regionalName" placeholder="请输入区域名称" clearable></el-input>
71   - </el-form-item>
72   - <el-form-item label="区域类型:">
73   - <el-select v-model="dialogParams.regionalType" clearable placeholder="请选择">
74   - <el-option
75   - v-for="item in regionalTypeOptions"
76   - :key="item.value"
77   - :label="item.label"
78   - :value="item.value">
79   - </el-option>
80   - </el-select>
81   - </el-form-item>
82   - <el-form-item label="地理位置:">
83   - <el-input v-model="dialogParams.region" disabled suffix-icon="el-icon-map-location" placeholder="请输入内容"></el-input>
84   - </el-form-item>
85   - </el-form>
86   - <el-row>
87   - <el-col :span="24">
88   - <div id="mapContainer" style="width: 100%; height: 500px;"></div>
89   - <div class="input-card" style="width: 200px">
90   - <h4 style="margin-bottom: 10px; font-weight: 600">利用mouseTool绘制覆盖物</h4>
91   - <el-button class="btn" @click="drawPolyline()" style="margin-bottom: 5px">绘制线段</el-button>
92   - <el-button class="btn" @click="drawPolygon()" style="margin-bottom: 5px">绘制多边形</el-button>
93   - <el-button class="btn" @click="drawRectangle()" style="margin-bottom: 5px">绘制矩形</el-button>
94   - <el-button class="btn" @click="drawCircle()" style="margin-bottom: 5px">绘制圆形</el-button>
95   - </div>
96   - </el-col>
97   - </el-row>
98   - <span slot="footer" class="dialog-footer">
99   - <el-button @click="dialogParams.dialogVisible = false">取 消</el-button>
100   - <el-button type="primary" @click="dialogParams.dialogVisible = false">确 定</el-button>
101   - </span>
102   - </el-dialog>
103   -
104 33 </div>
105 34 </template>
106   -<script src="https://webapi.amap.com/maps?v=1.4.15&key=65f6591039d0e723f91a2bfab50712f7&plugin=AMap.MouseTool"></script>
107   -<script>
108   -import AMapLoader from '@amap/amap-jsapi-loader';
109 35  
  36 +<script>
  37 +import {getTreeNode,getTableData,deleteUser,resetPassword} from '@/api/userManage'
  38 +import carManage from "@/views/pages/regionalManage/components/carManage";
  39 +import checkManage from "@/views/pages/regionalManage/components/checkManage";
  40 +import personManage from "@/views/pages/regionalManage/components/personManage";
  41 +import otherManage from "@/views/pages/regionalManage/components/otherManage";
  42 +import regionManage from "@/views/pages/regionalManage/components/regionManage";
  43 +import videoManage from "@/views/pages/regionalManage/components/videoManage";
  44 +import paymentManage from "@/views/pages/regionalManage/components/paymentManage";
110 45 export default {
111 46 name: "index",
  47 + components: {carManage,checkManage,personManage,otherManage,regionManage,videoManage,paymentManage},
112 48 data(){
113   - return{
114   - map: null,
115   - userLocation: { latitude: null, longitude: null },
116   - dialogParams:{
117   - title:'新增测试',
  49 + return {
  50 + filterText:'',
  51 + showQrCodeVisible:false,
  52 + showDialog:false,
  53 + infoComponentsList:[
  54 + {name: '人员', key:'person', component: 'peosonManage'},
  55 + {name: '区域', key:'region', component: 'regionManage'},
  56 + {name: '车辆', key:'car', component: 'carManage'},
  57 + {name: '摄像', key:'video', component: 'videoManage'},
  58 + {name: '安检项', key:'check', component: 'checkManage'},
  59 + {name: '支付', key:'payment',component: 'paymentManage'},
  60 + {name: '其他', key:'other',component: 'otherManage'},
  61 + ],
  62 + rowData:{
  63 + fSsczid:'',
  64 + orgId:''
  65 + },
  66 + tabTypeList:[{
  67 + key:'person',
  68 + title:'人员'
  69 + },{
  70 + key:'region',
  71 + title:'区域'
  72 + },{
  73 + key:'car',
  74 + title:'车辆'
  75 + },{
  76 + key:'video',
  77 + title: '摄像'
  78 + },{
  79 + key:'check',
  80 + title: '安检项'
  81 + },{
  82 + key:'payment',
  83 + title: '支付'
  84 + },{
  85 + key:'other',
  86 + title: '其他'
  87 + }],
  88 + resetPswForm:{
118 89 dialogVisible:false,
119   - regionalType:'',
120   - regionalName:''
  90 + password:'',
  91 + fUserId:'',
  92 + label:'请输入"张三-18000000081"的新密码'
  93 + },
  94 + resetPwdRules:{
  95 + password: [
  96 + { required: true, message: '请输入新的密码', trigger: 'change' }
  97 + ]
121 98 },
122   - queryParams:{
123   - regionalName:'',
124   - regionalType:''
  99 + defaultProps: {
  100 + children: 'children',
  101 + label: 'name'
125 102 },
126   - regionalTypeOptions:[
  103 + treeData:[
127 104 {
128   - label:'经营区域',
129   - value:'经营区域'
  105 + id: 1,
  106 + label: '一级 1',
  107 + children: [{
  108 + id: 4,
  109 + label: '二级 1-1',
  110 + children: [{
  111 + id: 9,
  112 + label: '三级 1-1-1等哈数据的卡上等哈圣诞节撒谎的的hash科技大厦的回答赛季开打黄金大神发动机四分零四'
  113 + }, {
  114 + id: 10,
  115 + label: '三级 1-1-2'
  116 + }]
  117 + }]
130 118 },
131   - {
132   - label:'流动区域',
133   - value:'流动区域'
134   - }
135   - ],
136   - mouseTool:null,
137   - tableData:[
138   - {
139   - regionalName:'测试名称',
140   - regionalType:'经营区域',
141   - bz:'sdsaddssds'
142   - }
143 119 ],
144   - path:[
145   - [116.403322, 39.920255],
146   - [116.410703, 39.897555],
147   - [116.402292, 39.892353],
148   - [116.389846, 39.891365]
149   - ]
  120 + queryForm:{
  121 + orgId:'',
  122 + tabType:'region'
  123 + },
  124 + loading:false,
  125 + dataList:[],
150 126 }
151 127 },
152   - beforeDestroy() {
153   - //清理资源
154   - // this.map&& this.map.destroy();
  128 + mounted(){
  129 + this.initData();
155 130 },
156   - mounted() {
157   - // this.getUserLocation();
  131 + watch: {
  132 + filterText(val) {
  133 + this.$refs.tree.filter(val);
  134 + }
158 135 },
159 136 methods:{
160   - initializeMap() {
161   - AMapLoader.reset();
162   - AMapLoader.load({
163   - "key": "65f6591039d0e723f91a2bfab50712f7",// 申请好的Web端开发者Key，首次调用 load 时必填
164   - "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
165   - "plugins": ['AMap.ToolBar', 'AMap.Driving','AMap.InfoWindow',
166   - 'AMap.ContextMenu',
167   - 'AMap.Heatmap',
168   - 'AMap.MouseTool',
169   - 'AMap.RangingTool',
170   - 'AMap.CircleEditor',
171   - 'AMap.PolyEditor',
172   - 'AMap.VectorMap',
173   - 'AMap.ToolBar',
174   - 'AMap.Scale',
175   - 'AMap.OverView',
176   - 'AMap.MapType',
177   - 'AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
178   - "AMapUI": {
179   - "version": "1.1",
180   - "plugins": []
181   - },
182   - Loca: {
183   - version: '2.0' //数据可视化
184   - }
185   - }).then((AMap)=>{
186   - console.log('打印AMap====>',AMap);
187   - this.map = new AMap.Map('mapContainer', {//设置地图容器id
188   - viewMode: '2D', //是否为3D地图模式
189   - zoom: 16, //初始化地图层级
190   - center: this.centerPoint,//初始化地图中心点
191   - });
192   - var toolBar = new AMap.ToolBar({
193   - position:{
194   - top:'110px',
195   - right:'30px'
196   - }
197   -
198   - })
199   - // this.map.on('rightclick', (e)=> {
200   - // this.rightclickObj(); //定义右键内容
201   - // this.contextMenu.open(this.map, e.lnglat);
202   - // this.contextMenuPositon = e.lnglat; //右键菜单位置
203   - // });
204   - var mouseTool = new AMap.MouseTool(this.map);
205   - this.mouseTool = mouseTool;
206   - })
207   - },
208   - //强调说明：自定义的dom是基于地图对象生成的，并不能像vue一样绑定事件，这里采用jQuery的方式出发的事件。如下
209   - //定义右键内容
210   - rightclickObj() {
211   - let that = this;
212   - //���义内容
213   - let content = [];
214   - content.push("<div class='context_menu'>");
215   - content.push(
216   - "<p class='menu-list menu-list-edit-start' >启用编辑</p>"
217   - );
218   - content.push(
219   - "<p class='menu-list menu-list-edit-end' >结束编辑</p>"
220   - );
221   - content.push(
222   - "<p class='menu-list menu-list-get-area' >计算面积</p>"
223   - );
224   - content.push(
225   - "<p class='menu-list menu-list-remove' >移除图形</p>"
226   - );
227   - if (that.circleEditor) {
228   - content.push(
229   - "<p class='menu-list menu-list-radius'>半径</p>"
230   - );
231   - }
232   - content.push('</div>');
233   - //创建右键实例并添加自定义的内容
234   -
235   - that.contextMenu = new AMap.ContextMenu({
236   - isCustom: true,
237   - content: content.join('')
238   - });
239   - },
240   - drawPolyline () {
241   - this.mouseTool.polyline({
242   - strokeColor: "#3366FF",
243   - strokeOpacity: 1,
244   - strokeWeight: 6,
245   - // 线样式还支持 'dashed'
246   - strokeStyle: "solid",
247   - // strokeStyle是dashed时有效
248   - // strokeDasharray: [10, 5],
249   - });
250   - console.log('打印this.mouseTool',this.mouseTool)
251   - this.mouseTool.on('draw', function(event) {
252   - // event.obj 为绘制出来的覆盖物对象
253   - console.log('覆盖物对象绘制完成',event)
254   - })
  137 + initData(){
  138 + this.getTreeNodeList();
255 139 },
256   - drawPolygon () {
257   - this.mouseTool.polygon({
258   - strokeColor: "#FF33FF",
259   - // strokeOpacity: 1,
260   - strokeWeight: 6,
261   - strokeOpacity: 0.2,
262   - fillColor: '#1791fc',
263   - fillOpacity: 0.4,
264   - // 线样式还支持 'dashed'
265   - strokeStyle: "solid",
266   - // strokeStyle是dashed时有效
267   - // strokeDasharray: [30,10],
268   - })
269   - this.mouseTool.on('draw', function(event) {
270   - let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组
271   - // 为矢量图形设置唯一标识和zIndex
272   - event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() });
273   - event.obj.setOptions({ zIndex: 100 });
274   -
275   - // 其他矢量图形处理逻辑...
276   - // event.obj 为绘制出来的覆盖物对象
277   - console.log('覆盖物对象绘制完成',event)
  140 + async getTreeNodeList(){
  141 + await getTreeNode().then((res)=>{
  142 + console.log('打印res',res);
  143 + this.treeData=[{
  144 + ...res.value
  145 + }];
  146 + console.log('打印this.treeDAta',this.treeData);
278 147 })
279 148 },
280   - drawCircle () {
281   - this.mouseTool.circle({
282   - strokeColor: "#FF33FF",
283   - // strokeOpacity: 1,
284   - strokeWeight: 6,
285   - strokeOpacity: 0.2,
286   - fillColor: '#1791fc',
287   - fillOpacity: 0.4,
288   - strokeStyle: 'solid',
289   - // 线样式还支持 'dashed'
290   - // strokeDasharray: [30,10],
291   - })
292   - this.mouseTool.on('draw', function(event) {
293   - let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组
294   - // 为矢量图形设置唯一标识和zIndex
295   - event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() });
296   - event.obj.setOptions({ zIndex: 100 });
297   -
298   - // 其他矢量图形处理逻辑...
299   - // event.obj 为绘制出来的覆盖物对象
300   - console.log('覆盖物对象绘制完成',event)
301   - })
  149 + filterNode(value, data) {
  150 + if (!value) return true;
  151 + return data.name.indexOf(value) !== -1;
302 152 },
303   - drawRectangle () {
304   - this.mouseTool.rectangle({
305   - strokeColor:'red',
306   - strokeOpacity:0.5,
307   - strokeWeight: 6,
308   - fillColor:'blue',
309   - fillOpacity:0.5,
310   - // strokeStyle还支持 solid
311   - strokeStyle: 'solid',
312   - // strokeDasharray: [30,10],
313   - })
314   - this.mouseTool.on('draw', function(event) {
315   - let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组
316   - // 为矢量图形设置唯一标识和zIndex
317   - event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() });
318   - event.obj.setOptions({ zIndex: 100 });
319   -
320   - // 其他矢量图形处理逻辑...
321   - // event.obj 为绘制出来的覆盖物对象
322   - console.log('覆盖物对象绘制完成',event)
323   - })
324   - },
325   - getUserLocation() {
326   - },
327   - queryStores() {
328   - },
329   - handleQuery(){
330   - console.log('打印是否出发查询功能');
331   - },
332   - handleReset(){
333   - console.log('打印是否触发重置功能');
334   - this.queryParams= {
335   - regionalName: '',
336   - regionalType: ''
337   - }
338   - },
339   - hanleOpt(type,row){
340   - switch (type){
341   - case 'add':
342   - this.dialogParams.dialogVisible = true;
343   - this.$nextTick(()=>{
344   - this.initializeMap();
345   - })
346   - break;
347   - case 'edit':
348   - break;
  153 + //el-tree节点的点击事件
  154 + handleNodeClick(data,node){
  155 + console.log('打印')
  156 + if(data.lx == '厂站'){
  157 + this.rowData.fSsczid = data.id;
  158 + }else{
  159 + this.rowData.fSsczid = '';
349 160 }
350   - console.log('打印是否触发新增功能');
  161 + this.queryForm.orgId = data.id;
  162 + this.rowData.orgId = data.id;
  163 + let refName = this.infoComponentsList.filter((item)=>item.key == this.queryForm.tabType)[0].component;
  164 + this.$nextTick(()=>{
  165 + console.log('打印this.$refs',this.$refs[refName][0]);
  166 + this.$refs[refName][0].handleSearch();
  167 + })
  168 + console.log('打印data',data);
  169 + console.log('打印node',node)
351 170 },
352   - handleDialogClose(){
353   - this.dialogParams.dialogVisible = false;
354 171  
355   - },
356 172 }
357 173 }
358 174 </script>
359 175  
360 176 <style lang="scss" scoped>
361   -.regionalSty{
  177 +.container{
  178 + display: flex;
  179 + width: 100%;
362 180 height: 100%;
363   - //width: 100%;
364   - background: #ffffff;
365   - border-radius: 5px;
366   - padding: 20px;
367   - .searchSty{
368   -
  181 + .container-left{
  182 + height: 96%;
  183 + overflow: auto;
  184 + min-width: 220px;
  185 + max-width: 220px;
  186 + padding: 10px;
  187 + background-color: #FFFFFF;
  188 + border-radius: 3px;
  189 + .title-label{
  190 + font-family: '苹方 中等', '苹方', sans-serif;
  191 + font-weight: 400;
  192 + font-style: normal;
  193 + font-size: 16px;
  194 + text-align: left;
  195 + margin-bottom: 5px;
  196 + }
  197 + .title-content{
  198 + font-family: '苹方 中等', '苹方', sans-serif;
  199 + font-weight: 400;
  200 + font-style: normal;
  201 + font-size: 12px;
  202 + color: #999999;
  203 + margin-bottom: 10px;
  204 + }
  205 + .filter-tree{
  206 + ::v-deep.el-tree-node__expand-icon.expanded {
  207 + /* 修改为你想要的图标 */
  208 + color:#5875eb;
  209 + }
  210 + ::v-deep.el-tree-node__expand-icon.collapsed {
  211 + /* 修改为你想要的图标 */
  212 + color:blue;
  213 + }
  214 + .node-label{
  215 + overflow: hidden;
  216 + text-overflow: ellipsis;
  217 + white-space: nowrap;
  218 + }
  219 + }
  220 + }
  221 + .container-right{
  222 + //flex: 1;
  223 + height:96%;
  224 + margin-left: 10px;
  225 + //padding: 10px;
  226 + border-radius: 3px;
  227 + width: calc(100% - 235px);
  228 + background-color: #ffffff;
  229 + padding: 10px;
  230 + .container-right-head{
  231 + //padding: 10px;
  232 + }
  233 + .container-right-main{
  234 + overflow: auto;
  235 + margin-top: 10px;
  236 + height: calc(100% - 42px);
  237 + width: 100%;
  238 + //overflow: auto;
  239 + //background-color: #FFFFFF;
  240 + }
369 241 }
370 242 }
371 243  
372 244 </style>
  245 +
  246 +
... ...