youxiw2000 / trash · Commits

Commit 6ed890bf39fdd57ca65c931519f0c3eedb683d1b

Authored by youxiw2000
2 parents 15260e60 63bffa40
build: skipped

Merge branch 'dev' of http://61.169.120.202:8888/youxiw20000/trash into dev

Inline Side-by-side
Showing 1 changed file with 573 additions and 0 deletions
trash-ui/src/views/unit/dropPointInfo/info.vue 0 → 100644
  View file @6ed890b
  1 +<template>
  2 + <div class="app-container">
  3 +
  4 + <!-- 添加或修改处理场所管理对话框 -->
  5 + <h3>
  6 + 基础信息
  7 + </h3>
  8 + <!-- 添加或修改投放点信息管理对话框 -->
  9 + <el-form ref="form" :model="form" :rules="rules" label-width="128px">
  10 +
  11 + <el-form-item label="投放点编号" prop="dropPointNo">
  12 + <el-input v-model="form.dropPointNo" placeholder="请输入投放点编号" :disabled="true"/>
  13 + </el-form-item>
  14 +
  15 + <el-form-item label="投放点名称" prop="dropPointName">
  16 + <el-input v-model="form.dropPointName" placeholder="请输入投放点名称"/>
  17 + </el-form-item>
  18 +
  19 +
  20 + <el-form-item label="所属区域" prop="street">
  21 + <el-select v-model="form.district" placeholder="请输入所属区域" style="width: 100%" clearable @change="getStreets">
  22 + <el-option v-for="(area,index) in areas" :label="area.name" :value="area.code" :key="index"/>
  23 + </el-select>
  24 + </el-form-item>
  25 +
  26 + <el-form-item label="所属街道" prop="street">
  27 + <el-select v-model="form.street" placeholder="请输入所属街道" style="width: 100%" clearable>
  28 + <el-option v-for="(area,index) in streets" :label="area.name" :value="area.code" :key="area.code" @click.native="createDropPointNo(area)"/>
  29 + </el-select>
  30 + </el-form-item>
  31 +
  32 + <el-form-item label="社区" prop="community">
  33 + <el-input v-model="form.community" placeholder="请输入社区"/>
  34 + </el-form-item>
  35 +
  36 +
  37 + <el-form-item label="详细地址" prop="address">
  38 + <el-input v-model="form.address" placeholder="请输入详细地址"/>
  39 + </el-form-item>
  40 +
  41 + <el-form-item label="投放点形式" prop="type">
  42 + <el-select v-model="form.type" placeholder="请选择投放点形式" style="width: 100%">
  43 + <el-option label="固定" value="固定"/>
  44 + <el-option label="临时" value="临时"/>
  45 + </el-select>
  46 + </el-form-item>
  47 +
  48 +
  49 + <el-form-item label="投放点面积(m²)" prop="area">
  50 + <el-input v-model="form.area" placeholder="请输入投放点面积"/>
  51 + </el-form-item>
  52 +
  53 + <el-form-item label="投放点容量(m³)" prop="capacity">
  54 + <el-input v-model="form.capacity" placeholder="请输入投放点容量"/>
  55 + </el-form-item>
  56 +
  57 +
  58 + <el-form-item label="管理单位" prop="managementUnit">
  59 + <el-input v-model="form.managementUnit" placeholder="请输入管理单位"/>
  60 + </el-form-item>
  61 +
  62 + <el-form-item label="管理人" prop="custodian">
  63 + <el-input v-model="form.custodian" placeholder="请输入管理人"/>
  64 + </el-form-item>
  65 +
  66 +
  67 + <el-form-item label="管理员电话" prop="custodianPhone">
  68 + <el-input v-model="form.custodianPhone" placeholder="请输入管理员联系电话" :maxlength="11" show-word-limit/>
  69 + </el-form-item>
  70 +
  71 + <el-form-item label="投放时间" prop="dropTime">
  72 + <el-time-select
  73 + v-model="form.dropTime"
  74 + style="width: 100%"
  75 + :picker-options="{
  76 + start: '00:00',
  77 + step: '00:30',
  78 + end: '23:30'
  79 + }"
  80 + placeholder="选择时间">
  81 + </el-time-select>
  82 + </el-form-item>
  83 +
  84 + <el-form-item label="运营单位" prop="operatingUnit">
  85 + <el-input v-model="form.operatingUnit" placeholder="请输入运营单位"/>
  86 + </el-form-item>
  87 +
  88 + <el-form-item label="运输单位" prop="transportUnit">
  89 + <el-input v-model="form.transportUnit" placeholder="请输入运输单位"/>
  90 + </el-form-item>
  91 +
  92 + <el-form-item label="坐标点" prop="coordinatePoint">
  93 + <el-input v-model="form.coordinatePoint" placeholder="请输入坐标点经纬度" readonly @click.native="handleOpenMap"/>
  94 + </el-form-item>
  95 +
  96 + </el-form>
  97 + <div slot="footer" class="dialog-footer">
  98 + <el-button type="primary" @click="submitForm">确 定</el-button>
  99 + <el-button @click="cancel">取 消</el-button>
  100 + </div>
  101 + <el-dialog title="高德地图" :visible.sync="openMap" width="1600px" height="750px" append-to-body>
  102 + <div class="serach_map">
  103 + 搜索：
  104 + <el-select
  105 + v-model="keywords"
  106 + filterable
  107 + remote
  108 + placeholder="请输入关键词"
  109 + :remote-method="remoteMethod"
  110 + :loading="loading"
  111 + :clearable="true"
  112 + size="mini"
  113 + @change="currentSelect"
  114 + style="width: 250px"
  115 + >
  116 + <el-option
  117 + v-for="item in mapOptions"
  118 + :key="item.id"
  119 + :label="item.name"
  120 + :value="item"
  121 + class="one-text"
  122 + >
  123 + <span style="float: left">{{ item.name }}</span>
  124 + <span style="float: right; color: #8492a6; font-size: 13px">{{
  125 + item.district
  126 + }}</span>
  127 + </el-option>
  128 + </el-select>
  129 + </div>
  130 + <div v-loading="loading" id="dropPointInfoContainer" class="am-map" style="width:100%;height: 700px;"></div>
  131 + <div slot="footer" class="dialog-footer">
  132 + <!-- <el-button type="primary" @click="clearCoordinatePoint">清除坐标点</el-button>-->
  133 + <el-button type="primary" @click="openMap = false">确 定</el-button>
  134 + </div>
  135 + </el-dialog>
  136 + </div>
  137 +</template>
  138 +
  139 +<script>
  140 +import {
  141 + listDropPointInfo,
  142 + getDropPointInfo,
  143 + delDropPointInfo,
  144 + addDropPointInfo,
  145 + updateDropPointInfo,
  146 + exportDropPointInfo
  147 +} from "@/api/unit/dropPointInfo";
  148 +import {getAreaList} from "@/api/dict"
  149 +import AMapLoader from "@amap/amap-jsapi-loader";
  150 +import Treeselect from "@riophae/vue-treeselect";
  151 +
  152 +// 设置安全密钥
  153 +window._AMapSecurityConfig = {
  154 + securityJsCode: 'aa1db7d8f534f3da3f6d8a6a71382802',
  155 +}
  156 +
  157 +export default {
  158 + name: "DropPointInfo",
  159 + components: {AMapLoader},
  160 + data() {
  161 + return {
  162 + // 遮罩层
  163 + loading: true,
  164 + // 选中数组
  165 + ids: [],
  166 + // 非单个禁用
  167 + single: true,
  168 + // 非多个禁用
  169 + multiple: true,
  170 + // 显示搜索条件
  171 + showSearch: true,
  172 + // 总条数
  173 + total: 0,
  174 + // 投放点信息管理表格数据
  175 + dropPointInfoList: [],
  176 + // 弹出层标题
  177 + title: "",
  178 + // 是否显示弹出层
  179 + open: false,
  180 + // 查询参数
  181 + queryParams: {
  182 + pageNum: 1,
  183 + pageSize: 10,
  184 + dropPointName: null,
  185 + address: null,
  186 + type: null,
  187 + },
  188 + // 表单参数
  189 + form: {},
  190 + // 表单校验
  191 + rules: {
  192 + dropPointName: [
  193 + {required: true, message: "请输入投放点名称", trigger: "blur"}
  194 + ],
  195 + district: [
  196 + {required: true, message: "请输入所属区域", trigger: "blur"}
  197 + ],
  198 + street: [
  199 + {required: true, message: "请输入所属街道", trigger: "blur"}
  200 + ],
  201 + community: [
  202 + {required: true, message: "请输入社区", trigger: "blur"}
  203 + ],
  204 + address: [
  205 + {required: true, message: "请输入详细地址", trigger: "blur"}
  206 + ],
  207 + type: [
  208 + {required: true, message: "请选择投放点形式", trigger: "change"}
  209 + ],
  210 + area: [
  211 + {required: true, message: "请输入投放点面积", trigger: "blur"},
  212 + //只能填写数字、小数
  213 + {pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: "只能填写数字、小数,限制两位小数", trigger: "blur"}
  214 + ],
  215 + capacity: [
  216 + {required: true, message: "请输入投放点容量", trigger: "blur"},
  217 + //只能填写数字
  218 + {pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: "只能填写数字、小数,限制两位小数", trigger: "blur"}
  219 + ],
  220 + managementUnit: [
  221 + {required: true, message: "请输入管理单位", trigger: "blur"}
  222 + ],
  223 + custodian: [
  224 + {required: true, message: "请输入管理人", trigger: "blur"}
  225 + ],
  226 + custodianPhone: [
  227 + {required: true, message: "请输入管理员电话", trigger: "blur"},
  228 + {
  229 + pattern: /^1(3|4|5|7|8|9)\d{9}$/,
  230 + message: '手机号格式错误',
  231 + trigger: 'change'
  232 + }
  233 + ],
  234 + dropTime: [
  235 + {required: true, message: "请选择投放时间", trigger: "change"}
  236 + ],
  237 + operatingUnit: [
  238 + {required: true, message: "请输入运营单位", trigger: "blur"}
  239 + ],
  240 + transportUnit: [
  241 + {required: true, message: "请输入运输单位", trigger: "blur"}
  242 + ],
  243 + coordinatePoint: [
  244 + {required: true, message: "请点击坐标点按钮选择坐标点", trigger: "blur"}
  245 + ]
  246 + },
  247 + areas: [],
  248 + streets:[],
  249 + // 地图
  250 + map: null,
  251 + keywords: "",
  252 + mapOptions: [],
  253 + openMap:false,
  254 + center: null,
  255 + circleMarker: null,
  256 + };
  257 + },
  258 + created() {
  259 + getAreaList().then(response => {
  260 + if(response==null || response.length===0){
  261 + this.$message.error("获取区域列表失败");
  262 + return;
  263 + }
  264 + const data = response;
  265 + for (let dataKey in data) {
  266 + if(data[dataKey].level === '3'){
  267 + this.areas.push({name:data[dataKey].name,code:data[dataKey].id, streets:[]})
  268 + }
  269 + }
  270 + for(let dataKey in data){
  271 + for(let areas1Key in this.areas){
  272 + if(data[dataKey].pid === this.areas[areas1Key].code){
  273 + this.areas[areas1Key].streets.push({code:data[dataKey].id, name:data[dataKey].name})
  274 + }
  275 + }
  276 + }
  277 + });
  278 +
  279 + this.getList();
  280 + // this.initAMap();
  281 + },
  282 + methods: {
  283 + dict(code){
  284 + for(let key in this.areas){
  285 + if(this.areas[key].code === code){
  286 + return this.areas[key].name;
  287 + }
  288 + }
  289 + },
  290 + dictInfo(code){
  291 + for(let key in this.areas){
  292 + for(let keyInfo in this.areas[key].streets){
  293 + if(this.areas[key].streets[keyInfo].code === code){
  294 + return this.areas[key].streets[keyInfo].name;
  295 + }
  296 + }
  297 + }
  298 + },
  299 + clearCoordinatePoint(){
  300 + this.center = null;
  301 + this.form.coordinatePoint = null;
  302 + this.map = null;
  303 + this.circleMarker = null;
  304 + this.initAMap();
  305 + },
  306 + handleOpenMap(){
  307 + this.openMap = true;
  308 + this.initAMap();
  309 + },
  310 + initAMap() {
  311 + const _this = this
  312 + // 加载高德地图
  313 + AMapLoader.load({
  314 + key: _this.$aMapKey, //设置高德地图申请的key
  315 + version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  316 + plugins: ['AMap.ToolBar','AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Marker','AMap.CircleMarker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  317 + AMapUI: {
  318 + version: "1.1",
  319 + plugins: []
  320 + },
  321 + Loca: {
  322 + version: "2.0"
  323 + },
  324 + }).then(async (AMap) => {
  325 + _this.map = await new AMap.Map("dropPointInfoContainer", { //设置地图容器id
  326 + viewMode: "2D", // 默认使用 2D 模式
  327 + center: [113.01814545605467, 28.201039299894283], // 初始化地图中心点位置
  328 + zoom: 11, //初始化地图层级
  329 + resizeEnable: true,
  330 + willreadoften: true
  331 + });
  332 + _this.AutoComplete = await new AMap.AutoComplete({city:'长沙'});
  333 + // 数据回显
  334 + if(_this.form.coordinatePoint!=null&&_this.form.coordinatePoint!==""){
  335 + //设置圆形位置
  336 + _this.center = new AMap.LngLat(_this.form.coordinatePoint.split(",")[0], _this.form.coordinatePoint.split(",")[1]);
  337 + //设置圆的半径大小
  338 + var radius = 10 //单位:px
  339 +
  340 + //创建圆形点标记 CircleMarker 实例
  341 + _this.circleMarker = new AMap.CircleMarker({
  342 + center: _this.center, //圆心
  343 + radius: radius, //半径
  344 + strokeColor: "white", //轮廓线颜色
  345 + strokeWeight: 2, //轮廓线宽度
  346 + strokeOpacity: 0.5, //轮廓线透明度
  347 + fillColor: "rgba(0,0,255,1)", //圆点填充颜色
  348 + fillOpacity: 0.5, //圆点填充透明度
  349 + zIndex: 10, //圆点覆盖物的叠加顺序
  350 + cursor: "pointer", //鼠标悬停时的鼠标样式
  351 + });
  352 + //圆形 circleMarker 对象添加到 Map
  353 + _this.map.add(_this.circleMarker);
  354 + //将覆盖物调整到合适视野
  355 + _this.map.setFitView([_this.circleMarker]);
  356 + }
  357 + // 监听地图点击事件
  358 + _this.map.on("click", (e) => {
  359 + console.log(e)
  360 + if(_this.center!=null){
  361 + _this.map.remove(_this.circleMarker);
  362 + _this.center = null;
  363 + _this.form.coordinatePoint = null;
  364 + }
  365 +
  366 + //判断是否已有圆点标记
  367 + if(_this.center==null){
  368 + //设置圆形位置
  369 + _this.center = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
  370 + //设置圆的半径大小
  371 + var radius = 10 //单位:px
  372 +
  373 + //创建圆形点标记 CircleMarker 实例
  374 + _this.circleMarker = new AMap.CircleMarker({
  375 + center: _this.center, //圆心
  376 + radius: radius, //半径
  377 + strokeColor: "white", //轮廓线颜色
  378 + strokeWeight: 2, //轮廓线宽度
  379 + strokeOpacity: 0.5, //轮廓线透明度
  380 + fillColor: "rgba(0,0,255,1)", //圆点填充颜色
  381 + fillOpacity: 0.5, //圆点填充透明度
  382 + zIndex: 10, //圆点覆盖物的叠加顺序
  383 + cursor: "pointer", //鼠标悬停时的鼠标样式
  384 + });
  385 + //圆形 circleMarker 对象添加到 Map
  386 + _this.map.add(_this.circleMarker);
  387 + //将覆盖物调整到合适视野
  388 + _this.map.setFitView([_this.circleMarker]);
  389 + _this.$set(_this.form, "coordinatePoint", e.lnglat.lng+","+e.lnglat.lat);
  390 + }
  391 + });
  392 + }).catch(e => {
  393 + console.log(e);
  394 + });
  395 + this.loading = false;
  396 + // this.openMap = false;
  397 + },
  398 + // 选中提示
  399 + currentSelect(val) {
  400 + console.log(val);
  401 + // 清空时不执行后面代码
  402 + if (!val) {
  403 + return ;
  404 + }
  405 +
  406 + //清除marker
  407 + if (this.searchMarker){
  408 + this.map.remove(this.searchMarker)
  409 + }
  410 + //设置marker
  411 + // this.searchMarker = new AMap.Marker({
  412 + // map: this.map,
  413 + // position: [val.location.lng, val.location.lat],
  414 + // });
  415 + // 自动适应显示想显示的范围区域
  416 + //定位
  417 + this.map.setCenter([val.location.lng, val.location.lat])
  418 + this.map.setZoom(18);
  419 + this.keywords = val.name
  420 +
  421 + },
  422 + // 搜索地址
  423 + remoteMethod(query) {
  424 + if (query !== "") {
  425 + this.loading = true;
  426 + setTimeout(() => {
  427 + this.loading = false;
  428 + this.AutoComplete.search(query, (status, result) => {
  429 + this.mapOptions = result.tips;
  430 + });
  431 + }, 200);
  432 + } else {
  433 + this.mapOptions = [];
  434 + }
  435 + },
  436 + createDropPointNo(area){
  437 + listDropPointInfo({dropPointNo: area.code}).then(response => {
  438 + const total = response.total+1;
  439 + this.form.dropPointNo = area.code+total.toString().padStart(3, '0');
  440 + });
  441 + },
  442 + getStreets(regionName) {
  443 + this.streets = [];
  444 + this.form.dropPointNo = null;
  445 + this.form.street = null;
  446 + const region = this.areas.find(region => region.code === regionName);
  447 + this.streets = region.streets;
  448 + },
  449 + /** 下载文件 */
  450 + /** 查询投放点信息管理列表 */
  451 + getList() {
  452 + this.loading = true;
  453 + listDropPointInfo(this.queryParams).then(response => {
  454 + this.dropPointInfoList = response.rows;
  455 + this.total = response.total;
  456 + this.loading = false;
  457 + });
  458 + },
  459 + // 取消按钮
  460 + cancel() {
  461 + this.open = false;
  462 + this.reset();
  463 + },
  464 + // 表单重置
  465 + reset() {
  466 + this.form = {
  467 + id: null,
  468 + dropPointName: null,
  469 + district: null,
  470 + street: null,
  471 + community: null,
  472 + address: null,
  473 + type: null,
  474 + area: null,
  475 + capacity: null,
  476 + managementUnit: null,
  477 + custodian: null,
  478 + custodianPhone: null,
  479 + dropTime: null,
  480 + dropPointNo: null,
  481 + operatingUnit: null,
  482 + transportUnit: null,
  483 + createTime: null,
  484 + createBy: null,
  485 + updateTime: null,
  486 + updateBy: null
  487 + };
  488 + this.map = null;
  489 + this.center = null;
  490 + this.resetForm("form");
  491 + },
  492 + /** 搜索按钮操作 */
  493 + handleQuery() {
  494 + this.queryParams.pageNum = 1;
  495 + this.getList();
  496 + },
  497 + /** 重置按钮操作 */
  498 + resetQuery() {
  499 + this.resetForm("queryForm");
  500 + this.handleQuery();
  501 + },
  502 + // 多选框选中数据
  503 + handleSelectionChange(selection) {
  504 + this.ids = selection.map(item => item.id)
  505 + this.single = selection.length !== 1
  506 + this.multiple = !selection.length
  507 + },
  508 + /** 新增按钮操作 */
  509 + handleAdd() {
  510 + this.reset();
  511 + this.open = true;
  512 + this.title = "添加投放点信息管理";
  513 + },
  514 + /** 修改按钮操作 */
  515 + handleUpdate(row) {
  516 + this.reset();
  517 + const id = row.id || this.ids
  518 + getDropPointInfo(id).then(response => {
  519 + this.form = response.data;
  520 + this.open = true;
  521 + this.title = "修改投放点信息管理";
  522 + });
  523 + },
  524 + /** 提交按钮 */
  525 + submitForm() {
  526 + this.$refs["form"].validate(valid => {
  527 + if (valid) {
  528 + if (this.form.id != null) {
  529 + updateDropPointInfo(this.form).then(response => {
  530 + this.msgSuccess("修改成功");
  531 + this.open = false;
  532 + this.getList();
  533 + });
  534 + } else {
  535 + addDropPointInfo(this.form).then(response => {
  536 + this.msgSuccess("新增成功");
  537 + this.open = false;
  538 + this.getList();
  539 + });
  540 + }
  541 + }
  542 + });
  543 + },
  544 + /** 删除按钮操作 */
  545 + handleDelete(row) {
  546 + const ids = row.id || this.ids;
  547 + this.$confirm('是否确认删除投放点信息管理编号为"' + ids + '"的数据项?', "警告", {
  548 + confirmButtonText: "确定",
  549 + cancelButtonText: "取消",
  550 + type: "warning"
  551 + }).then(function () {
  552 + return delDropPointInfo(ids);
  553 + }).then(() => {
  554 + this.getList();
  555 + this.msgSuccess("删除成功");
  556 + })
  557 + },
  558 + /** 导出按钮操作 */
  559 + handleExport() {
  560 + const queryParams = this.queryParams;
  561 + this.$confirm('是否确认导出所有投放点信息管理数据项?', "警告", {
  562 + confirmButtonText: "确定",
  563 + cancelButtonText: "取消",
  564 + type: "warning"
  565 + }).then(function () {
  566 + return exportDropPointInfo(queryParams);
  567 + }).then(response => {
  568 + this.download(response.message);
  569 + })
  570 + }
  571 + }
  572 +};
  573 +</script>