Commit 71f388df3c44b4c8b71de5264f8a4998316dba5b
1 parent
af58cd8f
Exists in
dev
fix:优化区域管理的功能
Showing
9 changed files
with
1143 additions
and
335 deletions
Show diff stats
| @@ -0,0 +1,42 @@ | @@ -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
| @@ -0,0 +1,29 @@ | @@ -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
| @@ -0,0 +1,29 @@ | @@ -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
| @@ -0,0 +1,29 @@ | @@ -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
| @@ -0,0 +1,29 @@ | @@ -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
| @@ -0,0 +1,29 @@ | @@ -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
| @@ -0,0 +1,718 @@ | @@ -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
| @@ -0,0 +1,29 @@ | @@ -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
| 1 | <template> | 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 | </div> | 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 | </div> | 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 | </div> | 33 | </div> |
| 105 | </template> | 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 | export default { | 45 | export default { |
| 111 | name: "index", | 46 | name: "index", |
| 47 | + components: {carManage,checkManage,personManage,otherManage,regionManage,videoManage,paymentManage}, | ||
| 112 | data(){ | 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 | dialogVisible:false, | 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 | methods:{ | 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 | </script> | 174 | </script> |
| 359 | 175 | ||
| 360 | <style lang="scss" scoped> | 176 | <style lang="scss" scoped> |
| 361 | -.regionalSty{ | 177 | +.container{ |
| 178 | + display: flex; | ||
| 179 | + width: 100%; | ||
| 362 | height: 100%; | 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 | </style> | 244 | </style> |
| 245 | + | ||
| 246 | + |