数据新增调整

shuishen

2022-07-21 03df59a72de4354fcc731675c53dd2805c2ec8b1

数据新增调整

 .gitignore

@@ -1,10 +1,11 @@
.DS_Store
node_modules
/dist

/public/wp
/tests/e2e/videos/
/tests/e2e/screenshots/


# local env files
.env.local
.env.*.local

 src/App.vue

@@ -1,27 +1,92 @@
<template>
  <div id="app">
    <router-view />
  </div>
    <div id="app">
        <router-view />
        <el-dialog title="提示" :visible.sync="mapShow" width="1020px" :before-close="handleClose">
            <el-input v-model="xyValue" placeholder="请点击地图选择2.5维坐标"></el-input>
            <xymap class="select-map-xy" @setXyValue="setXyValue"></xymap>
            <div style="text-align: right;">
                <el-button @click="setMapXy" type="primary">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {};
  },
  watch: {},
  created() {
import { mapGetters } from "vuex"

  },
  methods: {},
  computed: {}
export default {
    name: "app",
    data () {
        return {
            xyValue: '',
            mapShow: false
        }
    },
    computed: {
        ...mapGetters(["selectMamShow"]),
    },
    watch: {
        mapShow: {
            immediate: true,
            handler (newVal) {

                if (newVal == true) {
                    this.xyValue = ''
                }

                this.$store.commit('SET_SELECT_MAP', newVal)
            }
        },
        selectMamShow: {
            immediate: true,
            handler (newVal) {
                this.mapShow = newVal
            }
        }
    },
    created () {

    },
    methods: {
        setXyValue (e) {
            let str = ''
            str = str + e[0] + ',' + e[1]
            this.xyValue = str
        },
        setMapXy () {
            if (this.xyValue == '') {
                this.$message({
                    message: '请点击地图选择XY',
                    type: 'warning'
                })
            }

            this.$store.commit('SET_MAP_X_Y', this.xyValue)

            this.mapShow = false
        }
    }
};
</script>
<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.select-map {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background: green;
}

.select-map-xy {
    margin: 10px 0;
    cursor: pointer;
}
</style>

 src/components/map/mainInThere.vue

@@ -7,788 +7,781 @@
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
  <div id="map">
    <div class="controlMap">
      <el-button-group v-if="false">
        <el-button
          type="primary"
          icon="el-icon-finished"
          @click="openDrawLineMethod"
          :class="[
    <div id="map">
        <div class="controlMap">
            <el-button-group v-if="false">
                <el-button
                    type="primary"
                    icon="el-icon-finished"
                    @click="openDrawLineMethod"
                    :class="[
            'openDrawsb',
            openDrawChiose == 'openDrawLine' ? 'activeDraw' : '',
          ]"
          >规划路线</el-button
        >
        <el-button
          type="primary"
          @click="openDrawPointMethod"
          icon="el-icon-coordinate"
          :class="[
                >规划路线</el-button>
                <el-button
                    type="primary"
                    @click="openDrawPointMethod"
                    icon="el-icon-coordinate"
                    :class="[
            'openDrawsb',
            openDrawChiose == 'openDrawPoint' ? 'activeDraw' : '',
          ]"
          >规划标点</el-button
        >
      </el-button-group>
      <div id="openTitle" style="display: none">当前选择：{{ openTitle }}</div>
      <el-button-group id="openDrawLine" style="display: none">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="getTypeSelected"
          :disabled="beginDraw"
          >{{ butTitle }}</el-button
        >
        <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
          >取消</el-button
        >
      </el-button-group>
      <el-button-group id="openDrawPoint" style="display: none">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="getTypeSelectedPoint"
          :disabled="beginDraw"
          >{{ butTitlePoint }}</el-button
        >
        <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
          >取消</el-button
        >
      </el-button-group>
                >规划标点</el-button>
            </el-button-group>
            <div id="openTitle" style="display: none">当前选择：{{ openTitle }}</div>
            <el-button-group id="openDrawLine" style="display: none">
                <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="getTypeSelected"
                    :disabled="beginDraw"
                >{{ butTitle }}</el-button>
                <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete">取消</el-button>
            </el-button-group>
            <el-button-group id="openDrawPoint" style="display: none">
                <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="getTypeSelectedPoint"
                    :disabled="beginDraw"
                >{{ butTitlePoint }}</el-button>
                <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete">取消</el-button>
            </el-button-group>
        </div>
        <el-button-group id="dataConfirm" style="display: none">
            <el-button type="success" icon="el-icon-check" @click="useMapData">确定选择</el-button>
            <!-- v-show="notNow" -->
            <el-button type="danger" @click="clearUseMapData" icon="el-icon-refresh-right">清空</el-button>
        </el-button-group>
        <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
    </div>
    <el-button-group id="dataConfirm" style="display: none">
      <el-button type="success" icon="el-icon-check" @click="useMapData"
        >确定选择</el-button
      >
      <!-- v-show="notNow" -->
      <el-button
        type="danger"
        @click="clearUseMapData"
        icon="el-icon-refresh-right"
        >清空</el-button
      >
    </el-button-group>
    <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
  </div>
</template>
<script>
import OLCesium from "olcs/OLCesium.js";
import "ol/ol.css";
import OlView from "ol/View.js";
import XYZ from "ol/source/XYZ";
import OlLayerTile from "ol/layer/Tile.js";
import OlMap from "ol/Map.js";
import tip from "./tip.vue";
import OLCesium from "olcs/OLCesium.js"
import "ol/ol.css"
import OlView from "ol/View.js"
import XYZ from "ol/source/XYZ"
import OlLayerTile from "ol/layer/Tile.js"
import OlMap from "ol/Map.js"
import tip from "./tip.vue"
import {
  // eslint-disable-next-line no-unused-vars
  defaults as OlControlDefaults,
  defaults,
  // 全屏控件
  FullScreen,
  // 比例尺控件
  ScaleLine,
  // 缩放滚动条控件
  // eslint-disable-next-line no-unused-vars
  ZoomSlider,
  // 鼠标位置控件
  // eslint-disable-next-line no-unused-vars
  MousePosition,
  // -地图属性控件
  Attribution,
  // 鹰眼控件
  // eslint-disable-next-line no-unused-vars
  OverviewMap,
  // 缩放到范围控件
  // eslint-disable-next-line no-unused-vars
  ZoomToExtent,
  Rotate,
} from "ol/control.js";
    // eslint-disable-next-line no-unused-vars
    defaults as OlControlDefaults,
    defaults,
    // 全屏控件
    FullScreen,
    // 比例尺控件
    ScaleLine,
    // 缩放滚动条控件
    // eslint-disable-next-line no-unused-vars
    ZoomSlider,
    // 鼠标位置控件
    // eslint-disable-next-line no-unused-vars
    MousePosition,
    // -地图属性控件
    Attribution,
    // 鹰眼控件
    // eslint-disable-next-line no-unused-vars
    OverviewMap,
    // 缩放到范围控件
    // eslint-disable-next-line no-unused-vars
    ZoomToExtent,
    Rotate,
} from "ol/control.js"

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector"
import VectorSource from "ol/source/Vector"

import { OSM, TileWMS, Vector } from "ol/source";
import { OSM, TileWMS, Vector } from "ol/source"
// import Draw from "ol/interaction/Draw";
import Draw from "./Draw";
import Draw from "./Draw"

import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import LineString from "ol/geom/LineString.js";
import { Icon, Style, Fill, Stroke } from "ol/style.js";
import Feature from "ol/Feature.js"
import Point from "ol/geom/Point.js"
import LineString from "ol/geom/LineString.js"
import { Icon, Style, Fill, Stroke } from "ol/style.js"

// import drawFence from "./drawFence";

import OlFeature from "ol/Feature";
import OlGeomPoint from "ol/geom/Point";
import OlFeature from "ol/Feature"
import OlGeomPoint from "ol/geom/Point"
// import OlLayerVector from "ol/layer/Vector";
// import OlSourceVector from "ol/source/Vector";
import OlStyleStyle from "ol/style/Style";
import OlStyleIcon from "ol/style/Icon";
import OlStyleStyle from "ol/style/Style"
import OlStyleIcon from "ol/style/Icon"
// // 用来添加相关文字描述的
import OlStyleText from "ol/style/Text";
import OlStyleFill from "ol/style/Fill";
import OlStyleText from "ol/style/Text"
import OlStyleFill from "ol/style/Fill"
// import Cesium from "libs/Cesium/Cesium.js";

export default {
  name: "MapInThere",
  components: {
    tip,
  },
  data() {
    return {
      gunAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      peopleAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      carAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      // peopleLineAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      beginsPoint: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      DrawLayer: new VectorLayer({
        // 图标图层
        // zIndex: 1000,
        source: new VectorSource(),
      }),
      peopleLineAddlayer: null,

      // 存储新增点，线，面，数据的地方
      // polygonData: [],
      // polygonFlag: false,
      // editToolbar: null,
      // addPolygonEntitys: null,

      typeSelected: "LineString",
      // drawLayer: null,
      draw: null,
      coordinates: [],
      coordinatesStr: "",
      beginDraw: false,
      butTitle: "开始绘画",
      view: "",
      // map: null,

      showTip: false,
      tipTitle: "",
      position: {
        w: 200,
        h: 10,
      },
      // openDrawChiose: "", //openDrawPoint openDrawLine
      openDrawLine: false,
      openDrawPoint: false,

      butTitlePoint: "选择标点",
      olLayer: null, //点图层

      nowIndex: "", //返回第几个

      fromView: false, //若是查看  不显示更改按钮

      openTitle: "", //当前选择

      ourDatas: [], //所有数据
      ourLayer: {}, //图层合集

      notNow: true, //如果修改，不显示确认按钮
    };
  },
  computed: {
    openDrawChiose() {
      // console.log(
      //   "this.openDrawLine:",
      //   this.openDrawLine,
      //   "this.openDrawPoint:",
      //   this.openDrawPoint
      // );
      if (this.openDrawLine) {
        return "openDrawLine";
      } else if (this.openDrawPoint) {
        return "openDrawPoint";
      } else {
        return "notBut---";
      }
    name: "MapInThere",
    components: {
        tip,
    },
  },
  // watch: {
  //   openDrawChiose() {
  //     console.log(this.openDrawChiose, "openDrawChiose");
  //   },
  // },
  mounted() {
    const ol2d = new OlMap({
      layers: [
        // new OlLayerTile({
        //   zIndex: 4,
        //   title: "影像",
        //   source: new XYZ({
        //     url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
        //   }),
        // }),
        // new OlLayerTile({
        //   zIndex: 5,
        //   title: "道路+中文注记",
        //   source: new XYZ({
        //     url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
        //   }),
        // }),
        new OlLayerTile({
          zIndex: 4,
          title: "矢量",
          source: new XYZ({
            url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
            // url: "/localData/sl/{z}/{x}/{y}.png",
            tileUrlFunction: function (tileCoord) {
              var z = tileCoord[0];
              var x = tileCoord[1];
              var y = Math.pow(2, z) + tileCoord[2];
              return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
    data () {
        return {
            gunAddlayer: new VectorLayer({
                // 图标图层
                zIndex: 22,
                source: new VectorSource(),
            }),
            peopleAddlayer: new VectorLayer({
                // 图标图层
                zIndex: 22,
                source: new VectorSource(),
            }),
            carAddlayer: new VectorLayer({
                // 图标图层
                zIndex: 22,
                source: new VectorSource(),
            }),
            // peopleLineAddlayer: new VectorLayer({
            //   // 图标图层
            //   zIndex: 22,
            //   source: new VectorSource(),
            // }),
            beginsPoint: new VectorLayer({
                // 图标图层
                zIndex: 22,
                source: new VectorSource(),
            }),
            DrawLayer: new VectorLayer({
                // 图标图层
                // zIndex: 1000,
                source: new VectorSource(),
            }),
            peopleLineAddlayer: null,

            // 存储新增点，线，面，数据的地方
            // polygonData: [],
            // polygonFlag: false,
            // editToolbar: null,
            // addPolygonEntitys: null,

            typeSelected: "LineString",
            // drawLayer: null,
            draw: null,
            coordinates: [],
            coordinatesStr: "",
            beginDraw: false,
            butTitle: "开始绘画",
            view: "",
            // map: null,

            showTip: false,
            tipTitle: "",
            position: {
                w: 200,
                h: 10,
            },
          }),
        }),
        new OlLayerTile({
          zIndex: 5,
          title: "中文注记",
          source: new XYZ({
            url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
          }),
        }),
      ],
            // openDrawChiose: "", //openDrawPoint openDrawLine
            openDrawLine: false,
            openDrawPoint: false,

      // 注意地图控件的写法
      controls: defaults().extend([
        // new FullScreen(),
        // new ScaleLine(),
        // new MousePosition(),
        // new Rotate(),
        // new Attribution()
      ]),
      target: "map",
      view: new OlView({
        center: [0, 0],
        zoom: 2,
        projection: "EPSG:4326",
      }),
    });
    window.ol2d = ol2d;
            butTitlePoint: "选择标点",
            olLayer: null, //点图层

    var view = ol2d.getView();
            nowIndex: "", //返回第几个

    // let provider = new Cesium.UrlTemplateImageryProvider({
    //   url: "/wp/{z}/{x}/{y}.png",
    //   fileExtension: "png",
    // });
    // view.imageryLayers.addImageryProvider(provider);
            fromView: false, //若是查看  不显示更改按钮

    // view.setCenter([115.85883507433789, 28.708432053474827])
    view.setCenter([114.03858862, 27.63088262]);
            openTitle: "", //当前选择

    //
    view.setZoom(18);
    this.view = view;
    const ol3d = new OLCesium({ map: window.ol2d });
    window.ol3d = ol3d;
            ourDatas: [], //所有数据
            ourLayer: {}, //图层合集

    // ol2d.addLayer(this.gunAddlayer);
    // ol2d.addLayer(this.peopleAddlayer);
    // ol2d.addLayer(this.carAddlayer);
    // ol2d.addLayer(this.peopleLineAddlayer);
    // ol2d.addLayer(this.beginsPoint);
  },
  methods: {
    clearUseMapData() {
      if (this.openDrawPoint) {
        this.$store.commit("setPointData", ""); //用vuex清空最终数据
      } else if (this.openDrawLine) {
        this.$store.commit("setRotesData", ""); //用vuex清空最终数据
      }
      this.useMapData();
    },
    onceOnlodad(ourDatas) {
      this.ourDatas = ourDatas;
      this.Renders(ourDatas);
    },
    //加载底层路线和图标
    Renders(ourDatas) {
      // for (let i in ourDatas) {
      //   console.log(ourDatas[i].value, "------", i);
      // }
      this.deleteElement();
      for (let k in ourDatas) {
        if (ourDatas[k].isLine) {
          if (!ourDatas[k].value) {
            // this.deleteElement("line", ourDatas[k].id);
          } else {
            this.addLines(ourDatas[k], "line");
          }
        } else {
          if (!ourDatas[k].value) {
            // this.deleteElement("point", ourDatas[k].id);
          } else {
            this.addPoint(ourDatas[k], "point");
          }
            notNow: true, //如果修改，不显示确认按钮
        }
      }
      this.drawLayerRoom(); //重置绘画层
    },
    // 若没有value数据，删除地图上的元素
    deleteElement(name, id) {
      // console.log(name, id);
      // this.ourLayer[name + id].getSource().clear();
      for (let k in this.ourLayer) {
        this.ourLayer[k].getSource().clear();
      }
    },
    //加载点
    addPoint(data, name) {
      //创建图层
      let layer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        }),
        iconFeature = new OlFeature({
          geometry: new OlGeomPoint(data.value), //绘制图形（点）
        }),
        iconFeatureTitle = new OlFeature({
          geometry: new OlGeomPoint(data.value), //绘制图形（点）
        }),
        that = this;
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            offset: [0, 5],
            offsetOrigin: "bottom",
            src: "img/dingwei/dingwei5.png",
          }),
        })
      );
      iconFeatureTitle.setStyle(
        new OlStyleStyle({
          text: new OlStyleText({
            text: data.name,
            font: "14px sans-serif", // CSS 字体设置
            scale: 1, //比例
            offsetY: -40,
            fill: new OlStyleFill({
              color: "#1296DB",
            }),
          }),
        })
      );
      layer.getSource().addFeature(iconFeature);
      layer.getSource().addFeature(iconFeatureTitle);
      //保存图层
      this.ourLayer[name + data.id] = layer;
      ol2d.addLayer(that.ourLayer[name + data.id]);
      // console.log(this.ourLayer, 77777);
    },
    addLines(data, name) {
      //创建图层
      let layer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        }),
        that = this;
      //绘画线路
      var entityData = "";
      var entityArr = [];
      entityData = data.value.match(/\(([^)]*)\)/);
      if (entityData && entityData != "") {
        entityData = entityData[1].split(",");
        for (var j = 0; j < entityData.length; j++) {
          entityArr.push([
            Number(entityData[j].split(" ")[0]),
            Number(entityData[j].split(" ")[1]),
          ]);
        }
      }
      var lineCoords = entityArr; // 线里点的集合
      // console.log(lineCoords);
      var feature_LineString = new Feature({
        //线面板
        geometry: new LineString(lineCoords),
      });
      feature_LineString.setStyle(
        //线样式
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          //边线颜色
          stroke: new Stroke({
            color: "rgb(18,150,219)",
            width: 5,
          }),
        })
      );
      //线名称
      let lineFeatureTitle = new OlFeature({
        geometry: new OlGeomPoint(lineCoords[0]), //绘制图形（点）
      });
      lineFeatureTitle.setStyle(
        new OlStyleStyle({
          text: new OlStyleText({
            text: data.name,
            font: "14px sans-serif", // CSS 字体设置
            scale: 1, //比例
            offsetY: -10,
            fill: new OlStyleFill({
              color: "#1296DB",
            }),
          }),
        })
      );
      layer.getSource().addFeature(lineFeatureTitle);
      layer.getSource().addFeature(feature_LineString);
      //保存图层
      this.ourLayer[name + data.id] = layer;
      ol2d.addLayer(that.ourLayer[name + data.id]);
      // console.log(this.ourLayer, 88888);
    },

    //上面是初始化·················

    //下面是选择点或线路开始按钮
    init(val, num, value) {
      this.openTitle = val;
      if (value) {
        this.notNow = false;
      } else {
        this.notNow = true;
      }
      //notNow来确定是修改值还是增加值 是否显示$("#dataConfirm").show(100);
      this.nowIndex = num;
      if (val.indexOf("路径") != -1) {
        // console.log("加载路径按钮");
        this.controlBut("openDrawLine", this.notNow);
      } else {
        // console.log("加载标点按钮");
        this.controlBut("openDrawPoint", this.notNow);
      }
    },
    controlBut(openName, notNow) {
      //判断哪个dom打开
      this.closeOurBut();
      this[openName] = true;
      $("#" + openName).show();
      $("#openTitle").show();
      if (!notNow) {
        $("#dataConfirm").show(100);
      }
    },
    closeOurBut(open) {
      //整体关闭dom
      $("#dataConfirm").hide();
      $("#openDrawPoint").hide();
      $("#openDrawLine").hide();
      $("#openTitle").hide();
      this.openDrawLine = false;
      this.openDrawPoint = false;
      if (open) {
        this.openTitle = "";
        this.$parent.closeOpenedMap(); //开放按钮
        this.drawLayerRoom();
      }
    },
    //取消按钮
    stopDrawOur() {
      this.closeOurBut(true);
    },
    //确认数据
    useMapData() {
      //返回用数据
      // console.log(this.openDrawChiose, this.nowIndex);
      this.$parent.MapDataShow = false;
      let val =
        this.openDrawChiose == "openDrawLine"
          ? "line"
          : this.openDrawChiose == "openDrawPoint"
          ? "point"
          : "notData";
      // console.log(val);
      this.$parent.backMapDataOurData(val, this.nowIndex);
      // 返回后关闭操作按钮
      this.closeOurBut();
      //清除绘画图层
      this.drawLayerRoom();
    },
    //提示位置
    setTipPosition(x, y, n, m) {
      this.position.w = x + n;
      this.position.h = y + m;
    },
    //实时添加最上图层，为了编辑或新建路径能在最上
    drawLayerRoom() {
      let that = this;
      //添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
      if (that.peopleLineAddlayer) {
        that.peopleLineAddlayer.getSource().clear();
        that.peopleLineAddlayer = null;
        that.peopleLineAddlayer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        });
      } else {
        that.peopleLineAddlayer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        });
      }
      ol2d.addLayer(this.peopleLineAddlayer);
    },

    //选择绘画路线------↓
    getTypeSelected() {
      let that = this;
      this.beginDraw = true;
      this.draw && ol2d.removeInteraction(this.draw);
      //再根据typeSelect的值绘制新的Interaction
      this.drawLayerRoom(); //重置绘画层
      this.addInteraction();
    },
    addInteraction() {
      let value = this.typeSelected,
        that = this;
      this.tipTitle = "单击左键或右键开始绘画";
      $("#map") //提示器
        .off("mousemove")
        .mousemove(function (e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
        });
      this.coordinates = [];
      if (value !== "None") {
        this.draw = new Draw({
          source: this.DrawLayer.getSource(),
          type: this.typeSelected,
          style: new Style({
            stroke: new Stroke({
              color: "red",
              width: 3,
            }),
          }),
          coordinate: function (res) {
            //画线中的点
            that.coordinates.push(res.coordinate_);
            that.tipTitle = "可继续，或选择最终位置双击结束";
          },
          coordinateOver: function (res) {
            // 结束绘画 处理数据
            let d = that.doData(that.coordinates);
            that.addLinesDraw(d);
            that.$store.commit("setRotesData", d); //用vuex传最终数据
          },
        });
        ol2d.addInteraction(this.draw);
      }
    },
    //处理数据
    doData(val) {
      let str = "LINESTRING(";
      for (let k = 0; k < val.length; k++) {
        str += `${val[k][0]} ${val[k][1]}`;
        if (k != val.length - 1) {
          str += ",";
        }
      }
      str += ")";
      return str;
    },
    addLinesDraw(val) {
      var that = this;
      var entityData = "";
      var entityArr = [];
      entityData = val.match(/\(([^)]*)\)/);

      // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
      if (entityData && entityData != "") {
        entityData = entityData[1].split(",");

        for (var j = 0; j < entityData.length; j++) {
          entityArr.push([
            Number(entityData[j].split(" ")[0]),
            Number(entityData[j].split(" ")[1]),
          ]);
        }
      }

      var lineCoords = entityArr; // 线里点的集合
      //移动位置---暂不需要
      // var view = ol2d.getView();
      // view.setCenter([
      //   lineCoords[Math.ceil(entityArr.length / 2)][0],
      //   lineCoords[Math.ceil(entityArr.length / 2)][1],
      // ]);
      // view.setZoom(14.5);

      // 要素
      var feature_LineString = new Feature({
        geometry: new LineString(lineCoords),
      });

      feature_LineString.setStyle(
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          //边线颜色
          stroke: new Stroke({
            color: "red",
            width: 5,
          }),
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
      that.butTitle = "重新绘画";
      // if (!this.fromView) {
      $("#dataConfirm").show(100);
      // }
      if (that.draw != null) {
        that.beginDraw = false;
        that.draw.controlDrawing(true);
        that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画";
        $("#map").unbind("mousemove");
        // setTimeout(() => {
        this.tipTitle = "";
        this.showTip = false;
      }
    },
    //绘画路线------↑
    //绘画点-------↓
    getTypeSelectedPoint() {
      this.tipTitle = "单击左键选择位置";
      let that = this;
      let isHaveOne = false;
      this.drawLayerRoom(); //重置绘画层
      $("#map")
        .off("mousemove")
        .mousemove(function (e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
        });

      if (this.typeSelected !== "None") {
        this.draw = new Draw({
          source: this.DrawLayer.getSource(),
          type: this.typeSelected,
          style: new Style({
            stroke: new Stroke({
              color: "red",
              width: 3,
            }),
          }),
          isPoint: true,
          coordinate: function (res) {},
          coordinateOverPoint: function (res) {
            if (isHaveOne) {
              return;
    computed: {
        openDrawChiose () {
            // console.log(
            //   "this.openDrawLine:",
            //   this.openDrawLine,
            //   "this.openDrawPoint:",
            //   this.openDrawPoint
            // );
            if (this.openDrawLine) {
                return "openDrawLine"
            } else if (this.openDrawPoint) {
                return "openDrawPoint"
            } else {
                return "notBut---"
            }
            that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
            that.addIconMarker(res.coordinate);
            isHaveOne = true;
          },
        });
        ol2d.addInteraction(this.draw);
      }
        },
    },
    addIconMarker(intlat) {
      let that = this;
      let iconFeature = new OlFeature({
        geometry: new OlGeomPoint(intlat), //绘制图形（点）
      });
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            offset: [0, 5],
            offsetOrigin: "bottom",
            //透明度
            opacity: 1,
            //图片路径
            src: "img/dingwei/dingwei6.png",
          }),
    // watch: {
    //   openDrawChiose() {
    //     console.log(this.openDrawChiose, "openDrawChiose");
    //   },
    // },
    mounted () {
        const ol2d = new OlMap({
            layers: [
                // new OlLayerTile({
                //   zIndex: 4,
                //   title: "影像",
                //   source: new XYZ({
                //     url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
                //   }),
                // }),
                // new OlLayerTile({
                //   zIndex: 5,
                //   title: "道路+中文注记",
                //   source: new XYZ({
                //     url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
                //   }),
                // }),

                // new OlLayerTile({
                //     zIndex: 4,
                //     title: "矢量",
                //     source: new XYZ({
                //         url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
                //         // url: "/localData/sl/{z}/{x}/{y}.png",
                //         tileUrlFunction: function (tileCoord) {
                //             var z = tileCoord[0]
                //             var x = tileCoord[1]
                //             var y = Math.pow(2, z) + tileCoord[2]
                //             return "../assets/sl/" + z + "/" + x + "/" + y + ".png"
                //         },
                //     }),
                // }),

                // new OlLayerTile({
                //     zIndex: 5,
                //     title: "中文注记",
                //     source: new XYZ({
                //         url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
                //     }),
                // }),

                new OlLayerTile({
                    zIndex: 5,
                    title: "cesium切图",
                    source: new XYZ({
                        url: "/wp/{z}/{x}/{y}.png", // 注记
                    }),
                }),
            ],

            // 注意地图控件的写法
            controls: defaults().extend([
                // new FullScreen(),
                // new ScaleLine(),
                // new MousePosition(),
                // new Rotate(),
                // new Attribution()
            ]),
            target: "map",
            view: new OlView({
                center: [116.026801, 28.683427],
                zoom: 16,
                projection: "EPSG:4326",
            }),
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(iconFeature);
      this.butTitlePoint = "重新标点";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (this.draw != null) {
        this.draw.controlDrawing(true);
        $("#map").unbind("mousemove");
        this.tipTitle = "";
        this.showTip = false;
      }
        window.ol2d = ol2d

        var view = ol2d.getView()

        // let provider = new Cesium.UrlTemplateImageryProvider({
        //   url: "/wp/{z}/{x}/{y}.png",
        //   fileExtension: "png",
        // });
        // view.imageryLayers.addImageryProvider(provider);

        // view.setCenter([115.85883507433789, 28.708432053474827])

        //
        this.view = view
        const ol3d = new OLCesium({ map: window.ol2d })
        window.ol3d = ol3d

        // ol2d.addLayer(this.gunAddlayer);
        // ol2d.addLayer(this.peopleAddlayer);
        // ol2d.addLayer(this.carAddlayer);
        // ol2d.addLayer(this.peopleLineAddlayer);
        // ol2d.addLayer(this.beginsPoint);
    },
    //绘制点------↑
  },
    methods: {
        clearUseMapData () {
            if (this.openDrawPoint) {
                this.$store.commit("setPointData", "") //用vuex清空最终数据
            } else if (this.openDrawLine) {
                this.$store.commit("setRotesData", "") //用vuex清空最终数据
            }
            this.useMapData()
        },
        onceOnlodad (ourDatas) {
            this.ourDatas = ourDatas
            this.Renders(ourDatas)
        },
        //加载底层路线和图标
        Renders (ourDatas) {
            // for (let i in ourDatas) {
            //   console.log(ourDatas[i].value, "------", i);
            // }
            this.deleteElement()
            for (let k in ourDatas) {
                if (ourDatas[k].isLine) {
                    if (!ourDatas[k].value) {
                        // this.deleteElement("line", ourDatas[k].id);
                    } else {
                        this.addLines(ourDatas[k], "line")
                    }
                } else {
                    if (!ourDatas[k].value) {
                        // this.deleteElement("point", ourDatas[k].id);
                    } else {
                        this.addPoint(ourDatas[k], "point")
                    }
                }
            }
            this.drawLayerRoom() //重置绘画层
        },
        // 若没有value数据，删除地图上的元素
        deleteElement (name, id) {
            // console.log(name, id);
            // this.ourLayer[name + id].getSource().clear();
            for (let k in this.ourLayer) {
                this.ourLayer[k].getSource().clear()
            }
        },
        //加载点
        addPoint (data, name) {
            //创建图层
            let layer = new VectorLayer({
                zIndex: 22,
                source: new VectorSource(),
            }),
                iconFeature = new OlFeature({
                    geometry: new OlGeomPoint(data.value), //绘制图形（点）
                }),
                iconFeatureTitle = new OlFeature({
                    geometry: new OlGeomPoint(data.value), //绘制图形（点）
                }),
                that = this
            iconFeature.setStyle(
                new OlStyleStyle({
                    image: new OlStyleIcon({
                        scale: 0.5,
                        offset: [0, 5],
                        offsetOrigin: "bottom",
                        src: "img/dingwei/dingwei5.png",
                    }),
                })
            )
            iconFeatureTitle.setStyle(
                new OlStyleStyle({
                    text: new OlStyleText({
                        text: data.name,
                        font: "14px sans-serif", // CSS 字体设置
                        scale: 1, //比例
                        offsetY: -40,
                        fill: new OlStyleFill({
                            color: "#1296DB",
                        }),
                    }),
                })
            )
            layer.getSource().addFeature(iconFeature)
            layer.getSource().addFeature(iconFeatureTitle)
            //保存图层
            this.ourLayer[name + data.id] = layer
            ol2d.addLayer(that.ourLayer[name + data.id])
            // console.log(this.ourLayer, 77777);
        },
        addLines (data, name) {
            //创建图层
            let layer = new VectorLayer({
                zIndex: 22,
                source: new VectorSource(),
            }),
                that = this
            //绘画线路
            var entityData = ""
            var entityArr = []
            entityData = data.value.match(/\(([^)]*)\)/)
            if (entityData && entityData != "") {
                entityData = entityData[1].split(",")
                for (var j = 0; j < entityData.length; j++) {
                    entityArr.push([
                        Number(entityData[j].split(" ")[0]),
                        Number(entityData[j].split(" ")[1]),
                    ])
                }
            }
            var lineCoords = entityArr // 线里点的集合
            // console.log(lineCoords);
            var feature_LineString = new Feature({
                //线面板
                geometry: new LineString(lineCoords),
            })
            feature_LineString.setStyle(
                //线样式
                new Style({
                    //填充色
                    fill: new Fill({
                        color: "rgba(255, 255, 255, 0.2)",
                    }),
                    //边线颜色
                    stroke: new Stroke({
                        color: "rgb(18,150,219)",
                        width: 5,
                    }),
                })
            )
            //线名称
            let lineFeatureTitle = new OlFeature({
                geometry: new OlGeomPoint(lineCoords[0]), //绘制图形（点）
            })
            lineFeatureTitle.setStyle(
                new OlStyleStyle({
                    text: new OlStyleText({
                        text: data.name,
                        font: "14px sans-serif", // CSS 字体设置
                        scale: 1, //比例
                        offsetY: -10,
                        fill: new OlStyleFill({
                            color: "#1296DB",
                        }),
                    }),
                })
            )
            layer.getSource().addFeature(lineFeatureTitle)
            layer.getSource().addFeature(feature_LineString)
            //保存图层
            this.ourLayer[name + data.id] = layer
            ol2d.addLayer(that.ourLayer[name + data.id])
            // console.log(this.ourLayer, 88888);
        },

        //上面是初始化·················

        //下面是选择点或线路开始按钮
        init (val, num, value) {
            this.openTitle = val
            if (value) {
                this.notNow = false
            } else {
                this.notNow = true
            }
            //notNow来确定是修改值还是增加值 是否显示$("#dataConfirm").show(100);
            this.nowIndex = num
            if (val.indexOf("路径") != -1) {
                // console.log("加载路径按钮");
                this.controlBut("openDrawLine", this.notNow)
            } else {
                // console.log("加载标点按钮");
                this.controlBut("openDrawPoint", this.notNow)
            }
        },
        controlBut (openName, notNow) {
            //判断哪个dom打开
            this.closeOurBut()
            this[openName] = true
            $("#" + openName).show()
            $("#openTitle").show()
            if (!notNow) {
                $("#dataConfirm").show(100)
            }
        },
        closeOurBut (open) {
            //整体关闭dom
            $("#dataConfirm").hide()
            $("#openDrawPoint").hide()
            $("#openDrawLine").hide()
            $("#openTitle").hide()
            this.openDrawLine = false
            this.openDrawPoint = false
            if (open) {
                this.openTitle = ""
                this.$parent.closeOpenedMap() //开放按钮
                this.drawLayerRoom()
            }
        },
        //取消按钮
        stopDrawOur () {
            this.closeOurBut(true)
        },
        //确认数据
        useMapData () {
            //返回用数据
            // console.log(this.openDrawChiose, this.nowIndex);
            this.$parent.MapDataShow = false
            let val =
                this.openDrawChiose == "openDrawLine"
                    ? "line"
                    : this.openDrawChiose == "openDrawPoint"
                        ? "point"
                        : "notData"
            // console.log(val);
            this.$parent.backMapDataOurData(val, this.nowIndex)
            // 返回后关闭操作按钮
            this.closeOurBut()
            //清除绘画图层
            this.drawLayerRoom()
        },
        //提示位置
        setTipPosition (x, y, n, m) {
            this.position.w = x + n
            this.position.h = y + m
        },
        //实时添加最上图层，为了编辑或新建路径能在最上
        drawLayerRoom () {
            let that = this
            //添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
            if (that.peopleLineAddlayer) {
                that.peopleLineAddlayer.getSource().clear()
                that.peopleLineAddlayer = null
                that.peopleLineAddlayer = new VectorLayer({
                    zIndex: 22,
                    source: new VectorSource(),
                })
            } else {
                that.peopleLineAddlayer = new VectorLayer({
                    zIndex: 22,
                    source: new VectorSource(),
                })
            }
            ol2d.addLayer(this.peopleLineAddlayer)
        },

        //选择绘画路线------↓
        getTypeSelected () {
            let that = this
            this.beginDraw = true
            this.draw && ol2d.removeInteraction(this.draw)
            //再根据typeSelect的值绘制新的Interaction
            this.drawLayerRoom() //重置绘画层
            this.addInteraction()
        },
        addInteraction () {
            let value = this.typeSelected,
                that = this
            this.tipTitle = "单击左键或右键开始绘画"
            $("#map") //提示器
                .off("mousemove")
                .mousemove(function (e) {
                    if (!that.showTip) {
                        that.showTip = true
                    }
                    that.setTipPosition(e.offsetX, e.offsetY, 10, 10)
                })
            this.coordinates = []
            if (value !== "None") {
                this.draw = new Draw({
                    source: this.DrawLayer.getSource(),
                    type: this.typeSelected,
                    style: new Style({
                        stroke: new Stroke({
                            color: "red",
                            width: 3,
                        }),
                    }),
                    coordinate: function (res) {
                        //画线中的点
                        that.coordinates.push(res.coordinate_)
                        that.tipTitle = "可继续，或选择最终位置双击结束"
                    },
                    coordinateOver: function (res) {
                        // 结束绘画 处理数据
                        let d = that.doData(that.coordinates)
                        that.addLinesDraw(d)
                        that.$store.commit("setRotesData", d) //用vuex传最终数据
                    },
                })
                ol2d.addInteraction(this.draw)
            }
        },
        //处理数据
        doData (val) {
            let str = "LINESTRING("
            for (let k = 0; k < val.length; k++) {
                str += `${val[k][0]} ${val[k][1]}`
                if (k != val.length - 1) {
                    str += ","
                }
            }
            str += ")"
            return str
        },
        addLinesDraw (val) {
            var that = this
            var entityData = ""
            var entityArr = []
            entityData = val.match(/\(([^)]*)\)/)

            // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
            if (entityData && entityData != "") {
                entityData = entityData[1].split(",")

                for (var j = 0; j < entityData.length; j++) {
                    entityArr.push([
                        Number(entityData[j].split(" ")[0]),
                        Number(entityData[j].split(" ")[1]),
                    ])
                }
            }

            var lineCoords = entityArr // 线里点的集合
            //移动位置---暂不需要
            // var view = ol2d.getView();
            // view.setCenter([
            //   lineCoords[Math.ceil(entityArr.length / 2)][0],
            //   lineCoords[Math.ceil(entityArr.length / 2)][1],
            // ]);
            // view.setZoom(14.5);

            // 要素
            var feature_LineString = new Feature({
                geometry: new LineString(lineCoords),
            })

            feature_LineString.setStyle(
                new Style({
                    //填充色
                    fill: new Fill({
                        color: "rgba(255, 255, 255, 0.2)",
                    }),
                    //边线颜色
                    stroke: new Stroke({
                        color: "red",
                        width: 5,
                    }),
                })
            )
            that.peopleLineAddlayer.getSource().addFeature(feature_LineString)
            that.butTitle = "重新绘画"
            // if (!this.fromView) {
            $("#dataConfirm").show(100)
            // }
            if (that.draw != null) {
                that.beginDraw = false
                that.draw.controlDrawing(true)
                that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画"
                $("#map").unbind("mousemove")
                // setTimeout(() => {
                this.tipTitle = ""
                this.showTip = false
            }
        },
        //绘画路线------↑
        //绘画点-------↓
        getTypeSelectedPoint () {
            this.tipTitle = "单击左键选择位置"
            let that = this
            let isHaveOne = false
            this.drawLayerRoom() //重置绘画层
            $("#map")
                .off("mousemove")
                .mousemove(function (e) {
                    if (!that.showTip) {
                        that.showTip = true
                    }
                    that.setTipPosition(e.offsetX, e.offsetY, 10, 10)
                })

            if (this.typeSelected !== "None") {
                this.draw = new Draw({
                    source: this.DrawLayer.getSource(),
                    type: this.typeSelected,
                    style: new Style({
                        stroke: new Stroke({
                            color: "red",
                            width: 3,
                        }),
                    }),
                    isPoint: true,
                    coordinate: function (res) { },
                    coordinateOverPoint: function (res) {
                        if (isHaveOne) {
                            return
                        }
                        that.$store.commit("setPointData", res.coordinate) //用vuex传最终数据
                        that.addIconMarker(res.coordinate)
                        isHaveOne = true
                    },
                })
                ol2d.addInteraction(this.draw)
            }
        },
        addIconMarker (intlat) {
            let that = this
            let iconFeature = new OlFeature({
                geometry: new OlGeomPoint(intlat), //绘制图形（点）
            })
            iconFeature.setStyle(
                new OlStyleStyle({
                    image: new OlStyleIcon({
                        scale: 0.5,
                        offset: [0, 5],
                        offsetOrigin: "bottom",
                        //透明度
                        opacity: 1,
                        //图片路径
                        src: "img/dingwei/dingwei6.png",
                    }),
                })
            )
            that.peopleLineAddlayer.getSource().addFeature(iconFeature)
            this.butTitlePoint = "重新标点"
            if (!this.fromView) {
                $("#dataConfirm").show(100)
            }
            if (this.draw != null) {
                this.draw.controlDrawing(true)
                $("#map").unbind("mousemove")
                this.tipTitle = ""
                this.showTip = false
            }
        },
        //绘制点------↑
    },
};
</script>

<style scoped lang="scss">
#map {
  position: relative;
  width: 100%;
  height: 100%;
  .controlMap {
    position: absolute;
    top: 10px;
    // left: calc(50% - 97px);
    left: 390px;
    z-index: 2 !important;
    #openTitle {
      background-color: #fff;
      border-radius: 5px;
    position: relative;
    width: 100%;
    height: 100%;
    .controlMap {
        position: absolute;
        top: 10px;
        // left: calc(50% - 97px);
        left: 390px;
        z-index: 2 !important;
        #openTitle {
            background-color: #fff;
            border-radius: 5px;
        }
        #openDrawLine,
        #openDrawPoiton {
            width: 174px;
            // position: relative;
            // top: 43px;
            // top: 10px;
            // left: calc(50% - 96px);
            // left: 20px;
        }
        .openDrawsb {
            background-color: #fff;
            color: black;
        }
        .activeDraw {
            background-color: #409eff;
            color: #fff;
        }
    }
    #openDrawLine,
    #openDrawPoiton {
      width: 174px;
      // position: relative;
      // top: 43px;
      // top: 10px;
      // left: calc(50% - 96px);
      // left: 20px;
    #dataConfirm {
        position: absolute;
        top: 43px;
        // left: calc(50% + 82px);
        left: 564px;
        z-index: 3 !important;
    }
    .openDrawsb {
      background-color: #fff;
      color: black;
    }
    .activeDraw {
      background-color: #409eff;
      color: #fff;
    }
  }
  #dataConfirm {
    position: absolute;
    top: 43px;
    // left: calc(50% + 82px);
    left: 564px;
    z-index: 3 !important;
  }
}
</style>

 src/components/xymap/map.vue

New file
@@ -0,0 +1,103 @@
<!--
 * @Descripttion:
 * @version:
 * @Author: song
 * @Date: 2021-04-08 15:14:57
 * @LastEditors: song
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
    <div id="xymap"></div>
</template>

<script>
import OLCesium from "olcs/OLCesium.js"
import "ol/ol.css"
import OlView from "ol/View.js"
import XYZ from "ol/source/XYZ"
import OlLayerTile from "ol/layer/Tile.js"
import OlMap from "ol/Map.js"
import {
    // eslint-disable-next-line no-unused-vars
    defaults as OlControlDefaults,
    defaults,
    // 全屏控件
    // FullScreen,
    // 比例尺控件
    // ScaleLine,
    // 缩放滚动条控件
    // eslint-disable-next-line no-unused-vars
    ZoomSlider,
    // 鼠标位置控件
    // eslint-disable-next-line no-unused-vars
    MousePosition,
    // -地图属性控件
    // Attribution,
    // 鹰眼控件
    // eslint-disable-next-line no-unused-vars
    OverviewMap,
    // 缩放到范围控件
    // eslint-disable-next-line no-unused-vars
    ZoomToExtent,
    // Rotate,
} from "ol/control.js"


export default {
    name: "Map",
    data () {
        return {
            view: "",
        }
    },

    mounted () {
        const that = this
        const ol2d = new OlMap({
            layers: [
                new OlLayerTile({
                    zIndex: 5,
                    title: "cesium切图",
                    source: new XYZ({
                        url: "/wp/{z}/{x}/{y}.png", // 注记
                    }),
                }),
            ],

            // 注意地图控件的写法
            controls: defaults().extend([
                // new FullScreen(),
                // new ScaleLine(),
                // new MousePosition(),
                // new Rotate(),
                // new Attribution()
            ]),
            target: "xymap",
            view: new OlView({
                center: [116.026801, 28.683427],
                zoom: 16,
                projection: "EPSG:4326",
            }),
        })

        var view = ol2d.getView()

        this.view = view

        ol2d.on("singleclick", (e) => {
            that.$emit('setXyValue', e.coordinate)
        })
    },
    methods: {

    },
};
</script>

<style scoped lang="scss">
#xymap {
    position: relative;
    width: 100%;
    height: 480px;
}
</style>

 src/components/xymap/setxy.vue

New file
@@ -0,0 +1,35 @@
<template>
    <div @click="selectMapClick">
        <el-input readonly class="select-input-map" v-model="mapXyValue" placeholder="请选择2.5维坐标"></el-input>
    </div>
</template>

<script>

import { mapGetters } from "vuex"

export default {
    computed: {
        ...mapGetters(['mapXyValue'])
    },
    methods: {
        selectMapClick () {
            this.$store.commit('SET_SELECT_MAP', true)
        },
    },
    created () {
        this.$store.commit('SET_MAP_X_Y', '')
    },
    watch: {
        mapXyValue: {
            immediate: true,
            handler (newVal) {
                this.$emit("setData", newVal)
            }
        }
    },
}
</script>

<style>
</style>

 src/main.js

@@ -8,13 +8,13 @@
import './cache' //页面缓存
import store from './store'
import {
  loadStyle
    loadStyle
} from './util/util'
import * as urls from '@/config/env'
import Element from 'element-ui'
import {
  iconfontUrl,
  iconfontVersion
    iconfontUrl,
    iconfontVersion
} from '@/config/env'
import i18n from './lang' // Internationalization
import './styles/common.scss'
@@ -30,13 +30,13 @@
Vue.use(router)
Vue.use(VueAxios, axios)
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
    i18n: (key, value) => i18n.t(key, value)
})
Vue.use(window.AVUE, {
  size: 'small',
  tableSize: 'small',
  calcHeight: 65,
  i18n: (key, value) => i18n.t(key, value)
    size: 'small',
    tableSize: 'small',
    calcHeight: 65,
    i18n: (key, value) => i18n.t(key, value)
})
// 注册全局容器
Vue.component('basicContainer', basicContainer)
@@ -45,24 +45,30 @@
Vue.component('avueUeditor', avueUeditor)
// 加载相关url地址
Object.keys(urls).forEach(key => {
  Vue.prototype[key] = urls[key]
    Vue.prototype[key] = urls[key]
})
// 加载website
Vue.prototype.website = website
// 动态加载阿里云字体库
iconfontVersion.forEach(ele => {
  loadStyle(iconfontUrl.replace('$key', ele))
    loadStyle(iconfontUrl.replace('$key', ele))
})

Vue.config.productionTip = false

//加载全局组件选地图定位点，每个页面都要使用
import chousePoint from './components/mapOncePoint/chousePoint'
Vue.component("chousePoint", chousePoint);
Vue.component("chousePoint", chousePoint)

import xymap from './components/xymap/map'
Vue.component("xymap", xymap)

import setxy from './components/xymap/setxy'
Vue.component("setxy", setxy)

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
    router,
    store,
    i18n,
    render: h => h(App)
}).$mount('#app')

 src/page/index/layout.vue

@@ -1,8 +1,8 @@
<template>
  <div>
    <keep-alive>
      <router-view class="avue-view" v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
  </div>
    <div>
        <keep-alive>
            <router-view class="avue-view" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
    </div>
</template>

 src/store/getters.js

@@ -1,34 +1,37 @@
const getters = {
  tag: (state) => state.tags.tag,
  language: (state) => state.common.language,
  website: (state) => state.common.website,
  userInfo: (state) => state.user.userInfo,
  colorName: (state) => state.common.colorName,
  themeName: (state) => state.common.themeName,
  isShade: (state) => state.common.isShade,
  isCollapse: (state) => state.common.isCollapse,
  keyCollapse: (state, getters) =>
    getters.screen > 1 ? getters.isCollapse : false,
  screen: (state) => state.common.screen,
  isLock: (state) => state.common.isLock,
  isFullScren: (state) => state.common.isFullScren,
  isMenu: (state) => state.common.isMenu,
  lockPasswd: (state) => state.common.lockPasswd,
  tagList: (state) => state.tags.tagList,
  tagWel: (state) => state.tags.tagWel,
  token: (state) => state.user.token,
  roles: (state) => state.user.roles,
  permission: (state) => state.user.permission,
  menu: (state) => state.user.menu,
  menuId: (state) => state.user.menuId,
  menuAll: (state) => state.user.menuAll,
  logsList: (state) => state.logs.logsList,
  logsLen: (state) => state.logs.logsList.length || 0,
  logsFlag: (state, getters) => getters.logsLen === 0,
  flowRoutes: (state) => state.dict.flowRoutes,
  rotesData: (state) => state.map.rotesData, //获取线
  pointData: (state) => state.map.pointData, //获取点
  mapServiceValue: (state) => state.map.mapServiceValue,
  notSet: (state) => state.map.notSet,
};
export default getters;
    tag: (state) => state.tags.tag,
    language: (state) => state.common.language,
    website: (state) => state.common.website,
    userInfo: (state) => state.user.userInfo,
    colorName: (state) => state.common.colorName,
    themeName: (state) => state.common.themeName,
    isShade: (state) => state.common.isShade,
    isCollapse: (state) => state.common.isCollapse,
    keyCollapse: (state, getters) =>
        getters.screen > 1 ? getters.isCollapse : false,
    screen: (state) => state.common.screen,
    isLock: (state) => state.common.isLock,
    isFullScren: (state) => state.common.isFullScren,
    isMenu: (state) => state.common.isMenu,
    lockPasswd: (state) => state.common.lockPasswd,
    tagList: (state) => state.tags.tagList,
    tagWel: (state) => state.tags.tagWel,
    token: (state) => state.user.token,
    roles: (state) => state.user.roles,
    permission: (state) => state.user.permission,
    menu: (state) => state.user.menu,
    menuId: (state) => state.user.menuId,
    menuAll: (state) => state.user.menuAll,
    logsList: (state) => state.logs.logsList,
    logsLen: (state) => state.logs.logsList.length || 0,
    logsFlag: (state, getters) => getters.logsLen === 0,
    flowRoutes: (state) => state.dict.flowRoutes,
    rotesData: (state) => state.map.rotesData, //获取线
    pointData: (state) => state.map.pointData, //获取点
    mapServiceValue: (state) => state.map.mapServiceValue,
    notSet: (state) => state.map.notSet,
    selectMamShow: (state) => state.user.selectMamShow,
    mapXyValue: (state) => state.user.mapXyValue,

}
export default getters

 src/store/modules/user.js

@@ -1,274 +1,282 @@
import {setToken, setRefreshToken, removeToken, removeRefreshToken} from '@/util/auth'
import {Message} from 'element-ui'
import {setStore, getStore} from '@/util/store'
import {isURL, validatenull} from '@/util/validate'
import {deepClone} from '@/util/util'
import { setToken, setRefreshToken, removeToken, removeRefreshToken } from '@/util/auth'
import { Message } from 'element-ui'
import { setStore, getStore } from '@/util/store'
import { isURL, validatenull } from '@/util/validate'
import { deepClone } from '@/util/util'
import website from '@/config/website'
import {loginByUsername, loginBySocial, getUserInfo, logout, refreshToken, getButtons} from '@/api/user'
import {getTopMenu, getRoutes} from '@/api/system/menu'
import { loginByUsername, loginBySocial, getUserInfo, logout, refreshToken, getButtons } from '@/api/user'
import { getTopMenu, getRoutes } from '@/api/system/menu'
import md5 from 'js-md5'


function addPath(ele, first) {
  const menu = website.menu;
  const propsConfig = menu.props;
  const propsDefault = {
    label: propsConfig.label || 'name',
    path: propsConfig.path || 'path',
    icon: propsConfig.icon || 'icon',
    children: propsConfig.children || 'children'
  }
  const icon = ele[propsDefault.icon];
  ele[propsDefault.icon] = validatenull(icon) ? menu.iconDefault : icon;
  const isChild = ele[propsDefault.children] && ele[propsDefault.children].length !== 0;
  if (!isChild) ele[propsDefault.children] = [];
  if (!isChild && first && !isURL(ele[propsDefault.path])) {
    ele[propsDefault.path] = ele[propsDefault.path] + '/index'
  } else {
    ele[propsDefault.children].forEach(child => {
      addPath(child);
    })
  }
function addPath (ele, first) {
    const menu = website.menu
    const propsConfig = menu.props
    const propsDefault = {
        label: propsConfig.label || 'name',
        path: propsConfig.path || 'path',
        icon: propsConfig.icon || 'icon',
        children: propsConfig.children || 'children'
    }
    const icon = ele[propsDefault.icon]
    ele[propsDefault.icon] = validatenull(icon) ? menu.iconDefault : icon
    const isChild = ele[propsDefault.children] && ele[propsDefault.children].length !== 0
    if (!isChild) ele[propsDefault.children] = []
    if (!isChild && first && !isURL(ele[propsDefault.path])) {
        ele[propsDefault.path] = ele[propsDefault.path] + '/index'
    } else {
        ele[propsDefault.children].forEach(child => {
            addPath(child)
        })
    }

}

const user = {
  state: {
    tenantId: getStore({name: 'tenantId'}) || '',
    userInfo: getStore({name: 'userInfo'}) || [],
    permission: getStore({name: 'permission'}) || {},
    roles: [],
    menuId: {},
    menu: getStore({name: 'menu'}) || [],
    menuAll: getStore({name: 'menuAll'}) || [],
    token: getStore({name: 'token'}) || '',
    refreshToken: getStore({name: 'refreshToken'}) || '',
  },
  actions: {
    //根据用户名登录
    LoginByUsername({commit}, userInfo) {
      return new Promise((resolve, reject) => {
        loginByUsername(userInfo.tenantId, userInfo.deptId, userInfo.roleId, userInfo.username, md5(userInfo.password), userInfo.type, userInfo.key, userInfo.code).then(res => {
          const data = res.data;
          if (data.error_description) {
            Message({
              message: data.error_description,
              type: 'error'
    state: {
        tenantId: getStore({ name: 'tenantId' }) || '',
        userInfo: getStore({ name: 'userInfo' }) || [],
        permission: getStore({ name: 'permission' }) || {},
        roles: [],
        menuId: {},
        menu: getStore({ name: 'menu' }) || [],
        menuAll: getStore({ name: 'menuAll' }) || [],
        token: getStore({ name: 'token' }) || '',
        refreshToken: getStore({ name: 'refreshToken' }) || '',
        selectMamShow: false,
        mapXyValue: '',
    },
    actions: {
        //根据用户名登录
        LoginByUsername ({ commit }, userInfo) {
            return new Promise((resolve, reject) => {
                loginByUsername(userInfo.tenantId, userInfo.deptId, userInfo.roleId, userInfo.username, md5(userInfo.password), userInfo.type, userInfo.key, userInfo.code).then(res => {
                    const data = res.data
                    if (data.error_description) {
                        Message({
                            message: data.error_description,
                            type: 'error'
                        })
                    } else {
                        commit('SET_TOKEN', data.access_token)
                        commit('SET_REFRESH_TOKEN', data.refresh_token)
                        commit('SET_TENANT_ID', data.tenant_id)
                        commit('SET_USER_INFO', data)
                        commit('DEL_ALL_TAG')
                        commit('CLEAR_LOCK')
                    }
                    resolve()
                }).catch(error => {
                    reject(error)
                })
            })
          } else {
            commit('SET_TOKEN', data.access_token);
            commit('SET_REFRESH_TOKEN', data.refresh_token);
            commit('SET_TENANT_ID', data.tenant_id);
            commit('SET_USER_INFO', data);
            commit('DEL_ALL_TAG');
            commit('CLEAR_LOCK');
          }
          resolve();
        }).catch(error => {
          reject(error);
        })
      })
    },
    //根据手机号登录
    LoginByPhone({commit}, userInfo) {
      return new Promise((resolve) => {
        loginByUsername(userInfo.phone, userInfo.code).then(res => {
          const data = res.data.data;
          commit('SET_TOKEN', data);
          commit('DEL_ALL_TAG');
          commit('CLEAR_LOCK');
          resolve();
        })
      })
    },
    //根据第三方信息登录
    LoginBySocial({commit}, userInfo) {
      return new Promise((resolve) => {
        loginBySocial(userInfo.tenantId, userInfo.source, userInfo.code, userInfo.state).then(res => {
          const data = res.data;
          if (data.error_description) {
            Message({
              message: data.error_description,
              type: 'error'
        },
        //根据手机号登录
        LoginByPhone ({ commit }, userInfo) {
            return new Promise((resolve) => {
                loginByUsername(userInfo.phone, userInfo.code).then(res => {
                    const data = res.data.data
                    commit('SET_TOKEN', data)
                    commit('DEL_ALL_TAG')
                    commit('CLEAR_LOCK')
                    resolve()
                })
            })
          } else {
            commit('SET_TOKEN', data.access_token);
            commit('SET_REFRESH_TOKEN', data.refresh_token);
            commit('SET_USER_INFO', data);
            commit('DEL_ALL_TAG');
            commit('CLEAR_LOCK');
          }
          resolve();
        })
      })
        },
        //根据第三方信息登录
        LoginBySocial ({ commit }, userInfo) {
            return new Promise((resolve) => {
                loginBySocial(userInfo.tenantId, userInfo.source, userInfo.code, userInfo.state).then(res => {
                    const data = res.data
                    if (data.error_description) {
                        Message({
                            message: data.error_description,
                            type: 'error'
                        })
                    } else {
                        commit('SET_TOKEN', data.access_token)
                        commit('SET_REFRESH_TOKEN', data.refresh_token)
                        commit('SET_USER_INFO', data)
                        commit('DEL_ALL_TAG')
                        commit('CLEAR_LOCK')
                    }
                    resolve()
                })
            })
        },
        //获取用户信息
        GetUserInfo ({ commit }) {
            return new Promise((resolve, reject) => {
                getUserInfo().then((res) => {
                    const data = res.data.data
                    commit('SET_ROLES', data.roles)
                    resolve(data)
                }).catch(err => {
                    reject(err)
                })
            })
        },
        //刷新token
        refreshToken ({ state, commit }) {
            window.console.log('handle refresh token')
            return new Promise((resolve, reject) => {
                refreshToken(state.refreshToken, state.tenantId).then(res => {
                    const data = res.data
                    commit('SET_TOKEN', data.access_token)
                    commit('SET_REFRESH_TOKEN', data.refresh_token)
                    resolve()
                }).catch(error => {
                    reject(error)
                })
            })
        },
        // 登出
        LogOut ({ commit }) {
            return new Promise((resolve, reject) => {
                logout().then(() => {
                    commit('SET_TOKEN', '')
                    commit('SET_MENU', [])
                    commit('SET_MENU_ALL_NULL', [])
                    commit('SET_ROLES', [])
                    commit('SET_TAG_LIST', [])
                    commit('DEL_ALL_TAG')
                    commit('CLEAR_LOCK')
                    removeToken()
                    removeRefreshToken()
                    resolve()
                }).catch(error => {
                    reject(error)
                })
            })
        },
        //注销session
        FedLogOut ({ commit }) {
            return new Promise(resolve => {
                commit('SET_TOKEN', '')
                commit('SET_MENU_ALL_NULL', [])
                commit('SET_MENU', [])
                commit('SET_ROLES', [])
                commit('SET_TAG_LIST', [])
                commit('DEL_ALL_TAG')
                commit('CLEAR_LOCK')
                removeToken()
                removeRefreshToken()
                resolve()
            })
        },
        //获取顶部菜单
        GetTopMenu () {
            return new Promise(resolve => {
                getTopMenu().then((res) => {
                    const data = res.data.data || []
                    resolve(data)
                })
            })
        },
        //获取系统菜单
        GetMenu ({ commit, dispatch }, topMenuId) {
            return new Promise(resolve => {
                getRoutes(topMenuId).then((res) => {
                    const data = res.data.data
                    let menu = deepClone(data)
                    menu.forEach(ele => {
                        addPath(ele, true)
                    })
                    commit('SET_MENU_ALL', menu)
                    commit('SET_MENU', menu)
                    dispatch('GetButtons')
                    resolve(menu)
                })
            })
        },
        //获取系统按钮
        GetButtons ({ commit }) {
            return new Promise((resolve) => {
                getButtons().then(res => {
                    const data = res.data.data
                    commit('SET_PERMISSION', data)
                    resolve()
                })
            })
        },
    },
    //获取用户信息
    GetUserInfo({commit}) {
      return new Promise((resolve, reject) => {
        getUserInfo().then((res) => {
          const data = res.data.data;
          commit('SET_ROLES', data.roles);
          resolve(data);
        }).catch(err => {
          reject(err);
        })
      })
    },
    //刷新token
    refreshToken({state, commit}) {
      window.console.log('handle refresh token')
      return new Promise((resolve, reject) => {
        refreshToken(state.refreshToken, state.tenantId).then(res => {
          const data = res.data;
          commit('SET_TOKEN', data.access_token);
          commit('SET_REFRESH_TOKEN', data.refresh_token);
          resolve();
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 登出
    LogOut({commit}) {
      return new Promise((resolve, reject) => {
        logout().then(() => {
          commit('SET_TOKEN', '');
          commit('SET_MENU', []);
          commit('SET_MENU_ALL_NULL', []);
          commit('SET_ROLES', []);
          commit('SET_TAG_LIST', []);
          commit('DEL_ALL_TAG');
          commit('CLEAR_LOCK');
          removeToken();
          removeRefreshToken();
          resolve();
        }).catch(error => {
          reject(error)
        })
      })
    },
    //注销session
    FedLogOut({commit}) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '');
        commit('SET_MENU_ALL_NULL', []);
        commit('SET_MENU', []);
        commit('SET_ROLES', []);
        commit('SET_TAG_LIST', []);
        commit('DEL_ALL_TAG');
        commit('CLEAR_LOCK');
        removeToken();
        removeRefreshToken();
        resolve();
      })
    },
    //获取顶部菜单
    GetTopMenu() {
      return new Promise(resolve => {
        getTopMenu().then((res) => {
          const data = res.data.data || [];
          resolve(data)
        })
      })
    },
    //获取系统菜单
    GetMenu({commit, dispatch}, topMenuId) {
      return new Promise(resolve => {
        getRoutes(topMenuId).then((res) => {
          const data = res.data.data
          let menu = deepClone(data);
          menu.forEach(ele => {
            addPath(ele, true);
          });
          commit('SET_MENU_ALL', menu)
          commit('SET_MENU', menu)
          dispatch('GetButtons');
          resolve(menu)
        })
      })
    },
    //获取系统按钮
    GetButtons({commit}) {
      return new Promise((resolve) => {
        getButtons().then(res => {
          const data = res.data.data;
          commit('SET_PERMISSION', data);
          resolve();
        })
      })
    },
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      setToken(token);
      state.token = token;
      setStore({name: 'token', content: state.token})
    },
    SET_MENU_ID(state, menuId) {
      state.menuId = menuId;
    },
    SET_MENU_ALL: (state, menuAll) => {
      let menu = state.menuAll;
      menuAll.forEach(ele => {
        if (!menu.find(item => item.label === ele.label && item.path === ele.path)) {
          menu.push(ele);
        }
      })
      state.menuAll = menu
      setStore({ name: 'menuAll', content: state.menuAll })
    },
    SET_MENU_ALL_NULL: (state) => {
      state.menuAll = []
      setStore({ name: 'menuAll', content: state.menuAll })
    },
    SET_MENU: (state, menu) => {
      state.menu = menu
      setStore({ name: 'menu', content: state.menu })
    },
    SET_REFRESH_TOKEN: (state, refreshToken) => {
      setRefreshToken(refreshToken)
      state.refreshToken = refreshToken;
      setStore({name: 'refreshToken', content: state.refreshToken})
    },
    SET_TENANT_ID: (state, tenantId) => {
      state.tenantId = tenantId;
      setStore({name: 'tenantId', content: state.tenantId})
    },
    SET_USER_INFO: (state, userInfo) => {
      if (validatenull(userInfo.avatar)) {
        userInfo.avatar = "/img/bg/img-logo.png";
      }
      state.userInfo = userInfo;
      setStore({name: 'userInfo', content: state.userInfo})
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles;
    },
    SET_PERMISSION: (state, permission) => {
      let result = [];

      function getCode(list) {
        list.forEach(ele => {
          if (typeof (ele) === 'object') {
            const chiildren = ele.children;
            const code = ele.code;
            if (chiildren) {
              getCode(chiildren)
            } else {
              result.push(code);
    mutations: {
        SET_SELECT_MAP (state, selectMamShow) {
            state.selectMamShow = selectMamShow
        },
        SET_MAP_X_Y (state, mapXyValue) {
            state.mapXyValue = mapXyValue
        },
        SET_TOKEN: (state, token) => {
            setToken(token)
            state.token = token
            setStore({ name: 'token', content: state.token })
        },
        SET_MENU_ID (state, menuId) {
            state.menuId = menuId
        },
        SET_MENU_ALL: (state, menuAll) => {
            let menu = state.menuAll
            menuAll.forEach(ele => {
                if (!menu.find(item => item.label === ele.label && item.path === ele.path)) {
                    menu.push(ele)
                }
            })
            state.menuAll = menu
            setStore({ name: 'menuAll', content: state.menuAll })
        },
        SET_MENU_ALL_NULL: (state) => {
            state.menuAll = []
            setStore({ name: 'menuAll', content: state.menuAll })
        },
        SET_MENU: (state, menu) => {
            state.menu = menu
            setStore({ name: 'menu', content: state.menu })
        },
        SET_REFRESH_TOKEN: (state, refreshToken) => {
            setRefreshToken(refreshToken)
            state.refreshToken = refreshToken
            setStore({ name: 'refreshToken', content: state.refreshToken })
        },
        SET_TENANT_ID: (state, tenantId) => {
            state.tenantId = tenantId
            setStore({ name: 'tenantId', content: state.tenantId })
        },
        SET_USER_INFO: (state, userInfo) => {
            if (validatenull(userInfo.avatar)) {
                userInfo.avatar = "/img/bg/img-logo.png"
            }
          }
        })
      }
            state.userInfo = userInfo
            setStore({ name: 'userInfo', content: state.userInfo })
        },
        SET_ROLES: (state, roles) => {
            state.roles = roles
        },
        SET_PERMISSION: (state, permission) => {
            let result = []

      getCode(permission);
      state.permission = {};
      result.forEach(ele => {
        state.permission[ele] = true;
      });
      setStore({name: 'permission', content: state.permission})
            function getCode (list) {
                list.forEach(ele => {
                    if (typeof (ele) === 'object') {
                        const chiildren = ele.children
                        const code = ele.code
                        if (chiildren) {
                            getCode(chiildren)
                        } else {
                            result.push(code)
                        }
                    }
                })
            }

            getCode(permission)
            state.permission = {}
            result.forEach(ele => {
                state.permission[ele] = true
            })
            setStore({ name: 'permission', content: state.permission })
        }
    }
  }

}
export default user

 src/styles/element-ui.scss

@@ -1,6 +1,6 @@
.el-dropdown-menu__item {
  font-size: 12px !important;
  line-height: 28px !important;
    font-size: 12px !important;
    line-height: 28px !important;
}

//.el-card.is-always-shadow {
@@ -9,76 +9,86 @@
//}

.el-scrollbar__view {
  height: 100%;
    height: 100%;
}

.el-menu--horizontal {
  border-bottom: none !important;
    border-bottom: none !important;
}

.el-menu {
  border-right: none !important;
    border-right: none !important;
}

.el-menu--display,
.el-menu--display + .el-submenu__icon-arrow {
  display: none;
.el-menu--display+.el-submenu__icon-arrow {
    display: none;
}

.el-message__icon,
.el-message__content {
  display: inline-block;
    display: inline-block;
}

.el-date-editor .el-range-input,
.el-date-editor .el-range-separator {
  height: auto;
  overflow: hidden;
    height: auto;
    overflow: hidden;
}

.el-dialog__wrapper {
  z-index: 2048;
    z-index: 2048;
}

.el-col {
  margin-bottom: 8px;
    margin-bottom: 8px;
}

.el-main {
  padding: 0 !important;
    padding: 0 !important;
}

.el-dropdown-menu__item--divided:before,
.el-menu,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: transparent;
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
    background-color: transparent;
}

.el-dropdown-menu__item--divided:before,
.el-menu,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: transparent !important;
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
    background-color: transparent !important;
}

.el-card__header {
  padding: 6px 18px !important;
    padding: 6px 18px !important;
}

.el-card__body {
  //padding: 16px !important;
    //padding: 16px !important;
}

.el-divider--horizontal {
  margin: 12px 0 !important;
    margin: 12px 0 !important;
}

.myInput {
  cursor: pointer !important;
  .el-input.is-disabled .el-input__inner {
    cursor: pointer !important;
  }

    .el-input.is-disabled .el-input__inner {
        cursor: pointer !important;
    }
}


.select-input-map {
    cursor: pointer;

    input {
        cursor: pointer !important;
    }
}

 src/views/architecture/architecture.vue

@@ -1,448 +1,472 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.architecture_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
        <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
      </template>
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            :permission="permissionList"
            :before-open="beforeOpen"
            v-model="form"
            ref="crud"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @row-del="rowDel"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        >
            <template slot="menuLeft">
                <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    plain
                    v-if="permission.architecture_delete"
                    @click="handleDelete"
                >删 除</el-button>
            </template>

            <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
                <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
            </template>

            <template slot-scope="{ type, disabled }" slot="xForm">
                <setxy @setData="setXyMapDatas"></setxy>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
} from "@/api/architecture/architecture";
import { mapGetters } from "vuex";
    getList,
    getDetail,
    add,
    update,
    remove,
} from "@/api/architecture/architecture"
import { mapGetters } from "vuex"

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        align: "center",
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        indexLabel: "序号",
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "名称",
            prop: "mechanismname",
            search: true,
          },
          {
            label: "电话",
            prop: "telephone",
            hide: true,
          },
          {
            label: "所属建筑",
            prop: "type",
            type: "tree",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=building",
            props: {
              label: "dictValue",
              value: "dictKey",
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            dataType: "number",
            slot: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入所属建筑",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属校区",
            searchLabelWidth: "110",
            prop: "campus",
            type: "tree",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=campus",
            props: {
              label: "dictValue",
              value: "dictKey",
            selectionList: [],
            option: {
                height: "auto",
                calcHeight: 30,
                tip: false,
                searchShow: true,
                align: "center",
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                indexLabel: "序号",
                selection: true,
                dialogClickModal: false,
                column: [
                    {
                        label: "名称",
                        prop: "mechanismname",
                        search: true,
                    },
                    {
                        label: "电话",
                        prop: "telephone",
                        hide: true,
                    },
                    {
                        label: "所属建筑",
                        prop: "type",
                        type: "tree",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=building",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        dataType: "number",
                        slot: true,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入所属建筑",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属校区",
                        searchLabelWidth: "110",
                        prop: "campus",
                        type: "tree",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=campus",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        rules: [
                            {
                                required: true,
                                message: "请输入所属校区",
                                trigger: "blur",
                            },
                        ],
                        slot: true,
                        searchSpan: 5,
                        search: true,
                    },

                    {
                        label: "2.5维坐标",
                        prop: "x",
                        hide: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请选择2.5维坐标",
                            },
                        ],
                    },

                    {
                        label: "选择地点",
                        prop: "chouseJdWd",
                        hide: true,
                        viewDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },

                    {
                        label: "详细地点",
                        prop: "addressName",
                        hide: true,
                        // overHidden: true,
                        editDisplay: false,
                        addDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "经度",
                        prop: "jd",
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入经度",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "纬度",
                        prop: "wd",
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入纬度",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "偏航角",
                        addDisplay: false,
                        hide: true,
                        prop: "heading",
                    },
                    {
                        label: "俯仰角",
                        addDisplay: false,
                        hide: true,
                        prop: "pitch",
                    },
                    {
                        label: "翻转角",
                        addDisplay: false,
                        hide: true,
                        prop: "roll",
                    },
                    {
                        label: "地址",
                        hide: true,
                        prop: "address",
                    },
                    {
                        label: "高度",
                        hide: true,
                        addDisplay: false,
                        prop: "gd",
                    },
                    {
                        label: "网站地址",
                        prop: "websiteurl",
                    },
                    {
                        label: "监控地址",
                        hide: true,
                        prop: "videourl",
                    },
                    // {
                    //   label: "二维码",
                    //   prop: "codeurl",
                    //   type: 'upload',
                    //   listType: 'picture-card',
                    //   //dataType: 'string',
                    //   action: '/api/blade-resource/oss/endpoint/put-file',
                    //   propsHttp: {
                    //     res: 'data',
                    //     url: 'link',
                    //   },
                    //   span: 10,
                    // },
                    {
                        label: "全景地址",
                        prop: "panoramaurl",
                    },
                    {
                        label: "图片",
                        prop: "tpurl",
                        // dataType: 'string',
                        type: "upload",
                        propsHttp: {
                            res: "data",
                            url: "link",
                        },
                        span: 10,
                        listType: "picture-card",
                        tip: "只能上传jpg/png文件，且不超过500kb",
                        action: "/api/blade-resource/oss/endpoint/put-file",
                    },
                    {
                        label: "介绍",
                        prop: "introduce",
                        component: "AvueUeditor",
                        options: {
                            action: "/api/blade-resource/oss/endpoint/put-file",
                            props: {
                                res: "data",
                                url: "link",
                            },
                        },
                        hide: true,
                        minRows: 5,
                        span: 24,
                    },
                ],
            },
            rules: [
              {
                required: true,
                message: "请输入所属校区",
                trigger: "blur",
              },
            ],
            slot: true,
            searchSpan: 5,
            search: true,
          },
          {
            label: "选择地点",
            prop: "chouseJdWd",
            hide: true,
            viewDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "详细地点",
            prop: "addressName",
            hide: true,
            // overHidden: true,
            editDisplay: false,
            addDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "经度",
            prop: "jd",
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入经度",
                trigger: "blur",
              },
            ],
          },
          {
            label: "纬度",
            prop: "wd",
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入纬度",
                trigger: "blur",
              },
            ],
          },
          {
            label: "偏航角",
            addDisplay: false,
            hide: true,
            prop: "heading",
          },
          {
            label: "俯仰角",
            addDisplay: false,
            hide: true,
            prop: "pitch",
          },
          {
            label: "翻转角",
            addDisplay: false,
            hide: true,
            prop: "roll",
          },
          {
            label: "地址",
            hide: true,
            prop: "address",
          },
          {
            label: "高度",
            hide: true,
            addDisplay: false,
            prop: "gd",
          },
          {
            label: "网站地址",
            prop: "websiteurl",
          },
          {
            label: "监控地址",
            hide: true,
            prop: "videourl",
          },
          // {
          //   label: "二维码",
          //   prop: "codeurl",
          //   type: 'upload',
          //   listType: 'picture-card',
          //   //dataType: 'string',
          //   action: '/api/blade-resource/oss/endpoint/put-file',
          //   propsHttp: {
          //     res: 'data',
          //     url: 'link',
          //   },
          //   span: 10,
          // },
          {
            label: "全景地址",
            prop: "panoramaurl",
          },
          {
            label: "图片",
            prop: "tpurl",
            // dataType: 'string',
            type: "upload",
            propsHttp: {
              res: "data",
              url: "link",
            },
            span: 10,
            listType: "picture-card",
            tip: "只能上传jpg/png文件，且不超过500kb",
            action: "/api/blade-resource/oss/endpoint/put-file",
          },
          {
            label: "介绍",
            prop: "introduce",
            component: "AvueUeditor",
            options: {
              action: "/api/blade-resource/oss/endpoint/put-file",
              props: {
                res: "data",
                url: "link",
              },
            },
            hide: true,
            minRows: 5,
            span: 24,
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.architecture_add, false),
        viewBtn: this.vaildData(this.permission.architecture_view, false),
        delBtn: this.vaildData(this.permission.architecture_delete, false),
        editBtn: this.vaildData(this.permission.architecture_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    getMapDatas(res) {
      this.form["jd"] = res[0];
      this.form["wd"] = res[1];
      this.form["addressName"] = res[2];
    },
    initData() {
      getDeptTree().then((res) => {
        const column = this.findObject(this.option.column, "type");
        column.dicData = res.data.data;
      });
    },
    rowSave(row, done, loading) {
      var d = [];
      //var dk = [];
      for (var k in row.tpurl) {
        d.push(row.tpurl[k].value);
      }
      // for (var ks in row.codeurl) {
      //   dk.push(row.codeurl[ks].value);
      // }
      row.tpurl = d.join(",");
      //row.codeurl = dk.join(",");
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
            data: [],
            selectXYShow: false
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.architecture_add, false),
                viewBtn: this.vaildData(this.permission.architecture_view, false),
                delBtn: this.vaildData(this.permission.architecture_delete, false),
                editBtn: this.vaildData(this.permission.architecture_edit, false),
            }
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });

    methods: {

        setXyMapDatas (res) {
            this.form["x"] = res
        },

        getMapDatas (res) {
            this.form["jd"] = res[0]
            this.form["wd"] = res[1]
            this.form["addressName"] = res[2]
        },

        rowSave (row, done, loading) {
            var d = []
            //var dk = [];
            for (var k in row.tpurl) {
                d.push(row.tpurl[k].value)
            }
            // for (var ks in row.codeurl) {
            //   dk.push(row.codeurl[ks].value);
            // }
            row.tpurl = d.join(",")
            //row.codeurl = dk.join(",");
            add(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    window.console.log(error)
                }
            )
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    console.log(error)
                }
            )
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then((res) => {
                    this.form = res.data.data

                    this.$store.commit('SET_MAP_X_Y', this.form.x)
                    if (type == "edit") {
                        let that = this
                        this.$store.commit("readDom", {
                            this: that,
                            refName: "chousePointRef",
                            fn: (dom) => {
                                dom.openMaps({
                                    jd: this.form.jd,
                                    wd: this.form.wd,
                                    name: this.form.addressName,
                                })
                            },
                        })
                    }
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getList(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        },
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
          if (type == "edit") {
            let that = this;
            this.$store.commit("readDom", {
              this: that,
              refName: "chousePointRef",
              fn: (dom) => {
                dom.openMaps({
                  jd: this.form.jd,
                  wd: this.form.wd,
                  name: this.form.addressName,
                });
              },
            });
          }
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style></style>
<style lang="scss" scoped>
</style>

 src/views/hd/hd.vue

@@ -1,26 +1,26 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <!-- <template slot="menuLeft">
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            :permission="permissionList"
            :before-open="beforeOpen"
            v-model="form"
            ref="crud"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @row-del="rowDel"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        >
            <!-- <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
@@ -30,406 +30,402 @@
          @click="handleDelete"
          >删 除
        </el-button>
      </template> -->
      <template slot-scope="{ type, disabled }" slot="lineForm">
        <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
      </template>
    </avue-crud>
  </basic-container>
            </template>-->
            <template slot-scope="{ type, disabled }" slot="lineForm">
                <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove } from "@/api/hd/hd";
import { mapGetters } from "vuex";
import { getList, getDetail, add, update, remove } from "@/api/hd/hd"
import { mapGetters } from "vuex"
// import Map from "@/components/map/main.vue";
import getMapData from "./getMapData.vue";
import getMapDataInThere from "./getMapDataInThere.vue";
import getMapData from "./getMapData.vue"
import getMapDataInThere from "./getMapDataInThere.vue"

export default {
  components: {
    // Map,
    getMapData,
    getMapDataInThere,
  },
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        align: "center",
        selection: true,
        indexLabel: "序号",
        dialogClickModal: false,
        column: [
          {
            label: "活动名称",
            prop: "hdname",
            editDisabled: true,
            rules: [
              {
                required: true,
                message: "请输入活动名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "主办方",
            prop: "sponsor",
            editDisabled: true,
            rules: [
              {
                required: true,
                message: "请输入主办方",
                trigger: "blur",
              },
            ],
          },
          {
            label: "承办方",
            prop: "undertake",
            editDisabled: true,
            rules: [
              {
                required: true,
                message: "请输入承办方",
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: "活动地点",
          //   viewDisply:false,
          //   addDisplay: false,
          //   hide: true,
          //   editDisply: false,
          //   prop: "address",
          // },
          {
            label: "时间",
            prop: "time",
            type: "datetime",
            span: 8,
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            mock: {
              type: "datetime",
              format: "yyyy-MM-dd hh:mm:ss",
              now: true,
            },
          },
          {
            label: "图片",
            prop: "tpurl",
            // dataType: 'string',
            type: "upload",
            propsHttp: {
              res: "data",
              url: "link",
            },
            span: 24,
            listType: "picture-card",
            tip: "只能上传jpg/png文件，且不超过500kb",
            action: "/api/blade-resource/oss/endpoint/put-file",
          },
          {
            label: "介绍",
            prop: "context",
            component: "AvueUeditor",
            options: {
              action: "/api/blade-resource/oss/endpoint/put-file",
              props: {
                res: "data",
                url: "link",
              },
            },
            minRows: 5,
            span: 24,
          },
          {
            label: "选择路径和标点",
            labelWidth: "0",
            prop: "line",
            className: "mapClass",
            hide: true,
            display: true,
            span: 24,
            formslot: true,
            addDisplay: true,
          },
          // {
          //   label: "路线",活动
          //   hide: true,
          //   prop: "lx",
          //   editDisply: false,
          //   addDisplay: false,
          // },
        ],
      },
      data: [],
      LineData: [],
      PointData: [],
    };
  },
  // watch: {
  // rotesData() {
  //   console.log(this.rotesData);
  // },
  // pointData() {
  //   console.log(this.pointData);
  // },
  // },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.hd_add, false),
        viewBtn: this.vaildData(this.permission.hd_view, false),
        delBtn: this.vaildData(this.permission.hd_delete, false),
        editBtn: this.vaildData(this.permission.hd_edit, false),
      };
    components: {
        // Map,
        getMapData,
        getMapDataInThere,
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList: [],
            option: {
                height: "auto",
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                align: "center",
                selection: true,
                indexLabel: "序号",
                dialogClickModal: false,
                column: [
                    {
                        label: "活动名称",
                        prop: "hdname",
                        editDisabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入活动名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "主办方",
                        prop: "sponsor",
                        editDisabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入主办方",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "承办方",
                        prop: "undertake",
                        editDisabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入承办方",
                                trigger: "blur",
                            },
                        ],
                    },
                    // {
                    //   label: "活动地点",
                    //   viewDisply:false,
                    //   addDisplay: false,
                    //   hide: true,
                    //   editDisply: false,
                    //   prop: "address",
                    // },
                    {
                        label: "时间",
                        prop: "time",
                        type: "datetime",
                        span: 8,
                        format: "yyyy-MM-dd hh:mm:ss",
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                        mock: {
                            type: "datetime",
                            format: "yyyy-MM-dd hh:mm:ss",
                            now: true,
                        },
                    },
                    {
                        label: "图片",
                        prop: "tpurl",
                        // dataType: 'string',
                        type: "upload",
                        propsHttp: {
                            res: "data",
                            url: "link",
                        },
                        span: 24,
                        listType: "picture-card",
                        tip: "只能上传jpg/png文件，且不超过500kb",
                        action: "/api/blade-resource/oss/endpoint/put-file",
                    },
                    {
                        label: "介绍",
                        prop: "context",
                        component: "AvueUeditor",
                        options: {
                            action: "/api/blade-resource/oss/endpoint/put-file",
                            props: {
                                res: "data",
                                url: "link",
                            },
                        },
                        minRows: 5,
                        span: 24,
                    },
                    {
                        label: "选择路径和标点",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        hide: true,
                        display: true,
                        span: 24,
                        formslot: true,
                        addDisplay: true,
                    },
                    // {
                    //   label: "路线",活动
                    //   hide: true,
                    //   prop: "lx",
                    //   editDisply: false,
                    //   addDisplay: false,
                    // },
                ],
            },
            data: [],
            LineData: [],
            PointData: [],
        }
    },
  },
  methods: {
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
    rowSave(row, done, loading) {
      var d = [];
      for (var k in row.tpurl) {
        d.push(row.tpurl[k].value);
      }
      row.tpurl = d.join(",");
      let outMapData = this.$refs.getMapData.myRulesUse();
      if (!outMapData) {
        loading();
        return;
      }
      row["lxname"] = outMapData[0][0];
      row["lx"] = outMapData[0][1];
      row["addressname"] = outMapData[1][0];
      row["address"] = outMapData[1][1];
      // console.log(row);
      // loading();
      // return;
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    // watch: {
    // rotesData() {
    //   console.log(this.rotesData);
    // },
    // pointData() {
    //   console.log(this.pointData);
    // },
    // },
    computed: {
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.hd_add, false),
                viewBtn: this.vaildData(this.permission.hd_view, false),
                delBtn: this.vaildData(this.permission.hd_delete, false),
                editBtn: this.vaildData(this.permission.hd_edit, false),
            }
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      let outMapData = this.$refs.getMapData.myRulesUse();
      if (!outMapData) {
        loading();
        return;
      }
      row["lxname"] = outMapData[0][0];
      row["lx"] = outMapData[0][1];
      row["addressname"] = outMapData[1][0];
      row["address"] = outMapData[1][1];
      // console.log(row);
      // loading();
      // return;
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;
    methods: {
        setMapData (val) {
            this.LineData = val[0]
            this.PointData = val[1]
        },
        rowSave (row, done, loading) {
            var d = []
            for (var k in row.tpurl) {
                d.push(row.tpurl[k].value)
            }
            row.tpurl = d.join(",")
            let outMapData = this.$refs.getMapData.myRulesUse()
            if (!outMapData) {
                loading()
                return
            }
            row["lxname"] = outMapData[0][0]
            row["lx"] = outMapData[0][1]
            row["addressname"] = outMapData[1][0]
            row["address"] = outMapData[1][1]
            // console.log(row);
            // loading();
            // return;
            add(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    window.console.log(error)
                }
            )
        },
        rowUpdate (row, index, done, loading) {
            let outMapData = this.$refs.getMapData.myRulesUse()
            if (!outMapData) {
                loading()
                return
            }
            row["lxname"] = outMapData[0][0]
            row["lx"] = outMapData[0][1]
            row["addressname"] = outMapData[1][0]
            row["address"] = outMapData[1][1]
            // console.log(row);
            // loading();
            // return;
            update(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    console.log(error)
                }
            )
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        checkDom (name, fn) {
            //  声明定时器
            let that = this
            var timer = null

      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }
            //  检查dom是否执行完成
            function checkDom () {
                let dom = that.$refs[name]
                if (dom) {
                    //  执行dom加载完成后的操作
                    //  清除定时器
                    if (!timer) {
                        clearTimeout(timer)
                    }
                    if (fn) {
                        //回调函数
                        fn(dom)
                        return
                    } else {
                        return dom
                    }
                } else {
                    //  自我调用
                    timer = setTimeout(checkDom, 100)
                }
            }

      //  首次执行
      checkDom();
    },
    beforeOpen(done, type) {
      let that = this;
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
        });
        //控制按钮不可编辑
        this.checkDom("getMapData", (dom) => {
          // dom.init(val, num, value);
          dom[type + "Init"]([
            [that.form.lxname, that.form.lx],
            [that.form.addressname, that.form.address],
          ]);
        });
      }
            //  首次执行
            checkDom()
        },
        beforeOpen (done, type) {
            let that = this
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then((res) => {
                    this.form = res.data.data
                })
                //控制按钮不可编辑
                this.checkDom("getMapData", (dom) => {
                    // dom.init(val, num, value);
                    dom[type + "Init"]([
                        [that.form.lxname, that.form.lx],
                        [that.form.addressname, that.form.address],
                    ])
                })
            }

      done();
            done()
        },
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getList(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        },
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style>
.mapClass {
  margin-left: 88px;
    margin-left: 88px;
}

.mapClass div label {
  display: none;
    display: none;
}

.mapClassMain {
  /* padding-left: 25px !important; */
    /* padding-left: 25px !important; */
}

#getMapData {
  width: calc(100% + 90px);
  position: relative;
  left: -90px;
  height: 400px;
    width: calc(100% + 90px);
    position: relative;
    left: -90px;
    height: 400px;
}
</style>

 src/views/life/life.vue

@@ -1,490 +1,515 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.life_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
        <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
      </template>
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            :permission="permissionList"
            :before-open="beforeOpen"
            v-model="form"
            ref="crud"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @row-del="rowDel"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        >
            <template slot="menuLeft">
                <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    plain
                    v-if="permission.life_delete"
                    @click="handleDelete"
                >删 除</el-button>
            </template>

            <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
                <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
            </template>

            <template slot-scope="{ type, disabled }" slot="xForm">
                <setxy @setData="setXyMapDatas"></setxy>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove } from "@/api/life/life";
import { mapGetters } from "vuex";
import { getList, getDetail, add, update, remove } from "@/api/life/life"
import { mapGetters } from "vuex"

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        align: "center",
        indexLabel: "序号",
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "名称",
            searchSpan: 5,
            prop: "mechanismname",
            searchLabelwidth: 50,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属设施",
            searchLabelWidth: "110",
            prop: "lifetype",
            type: "tree",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=life",
            props: {
              label: "dictValue",
              value: "dictKey",
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            slot: true,
            searchSpan: 5,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入所属设施",
                trigger: "blur",
              },
            ],
          },
          {
            label: "选择地点",
            prop: "chouseJdWd",
            hide: true,
            viewDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "详细地点",
            prop: "addressName",
            hide: true,
            // overHidden: true,
            editDisplay: false,
            addDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "经度",
            disabled: true,
            prop: "jd",
            rules: [
              {
                required: true,
                message: "请输入经度",
                trigger: "blur",
              },
            ],
          },
          {
            label: "纬度",
            prop: "wd",
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入纬度",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属建筑",
            prop: "mtype",
            hide: true,
            type: "select",
            props: {
              label: "dictValue",
              value: "dictKey",
            selectionList: [],
            option: {
                height: "auto",
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                align: "center",
                indexLabel: "序号",
                selection: true,
                dialogClickModal: false,
                column: [
                    {
                        label: "名称",
                        searchSpan: 5,
                        prop: "mechanismname",
                        searchLabelwidth: 50,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属设施",
                        searchLabelWidth: "110",
                        prop: "lifetype",
                        type: "tree",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=life",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        slot: true,
                        searchSpan: 5,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入所属设施",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "2.5维坐标",
                        prop: "x",
                        hide: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请选择2.5维坐标",
                            },
                        ],
                    },

                    {
                        label: "选择地点",
                        prop: "chouseJdWd",
                        hide: true,
                        viewDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "详细地点",
                        prop: "addressName",
                        hide: true,
                        // overHidden: true,
                        editDisplay: false,
                        addDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "经度",
                        disabled: true,
                        prop: "jd",
                        rules: [
                            {
                                required: true,
                                message: "请输入经度",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "纬度",
                        prop: "wd",
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入纬度",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属建筑",
                        prop: "mtype",
                        hide: true,
                        type: "select",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        cascaderItem: ["campus", "loutype"],
                        dataType: "number",
                        cell: true,
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=building",
                        rules: [
                            {
                                required: true,
                                message: "请输入所属建筑",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属校区",
                        searchLabelWidth: "110",
                        prop: "campus",
                        type: "tree",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=campus",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        slot: true,
                        searchSpan: 5,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入所属校区",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属楼",
                        prop: "loutype",
                        hide: true,
                        type: "tree",
                        cell: true,
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        dicUrl:
                            "/api/blade-architecture/architecture/selectType?campus={{key}}&type={{mtype}}",
                        rules: [
                            {
                                required: true,
                                message: "请输入所属楼",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "偏航角",
                        addDisplay: false,
                        hide: true,
                        prop: "heading",
                    },
                    {
                        label: "俯仰角",
                        addDisplay: false,
                        hide: true,
                        prop: "pitch",
                    },
                    {
                        label: "翻转角",
                        addDisplay: false,
                        hide: true,
                        prop: "roll",
                    },
                    {
                        label: "高度",
                        hide: true,
                        addDisplay: false,
                        prop: "gd",
                    },
                    {
                        label: "网站地址",
                        prop: "websiteurl",
                    },
                    {
                        label: "地址",
                        prop: "address",
                        hide: true,
                    },
                    {
                        label: "监控地址",
                        hide: true,
                        prop: "videourl",
                    },
                    {
                        label: "图片",
                        prop: "tpurl",
                        // dataType: 'string',
                        type: "upload",
                        propsHttp: {
                            res: "data",
                            url: "link",
                        },
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请输入图片",
                        //     trigger: "blur",
                        //   },
                        // ],
                        span: 10,
                        listType: "picture-card",
                        tip: "只能上传jpg/png文件，且不超过500kb",
                        action: "/api/blade-resource/oss/endpoint/put-file",
                    },
                    // {
                    //   label: "二维码",
                    //   prop: "codeurl",
                    //   type: 'upload',
                    //   listType: 'picture-card',
                    //   //dataType: 'string',
                    //   action: '/api/blade-resource/oss/endpoint/put-file',
                    //   propsHttp: {
                    //     res: 'data',
                    //     url: 'link',
                    //   },
                    //   span: 10,
                    // },
                    {
                        label: "介绍",
                        prop: "introduce",
                        component: "AvueUeditor",
                        options: {
                            action: "/api/blade-resource/oss/endpoint/put-file",
                            props: {
                                res: "data",
                                url: "link",
                            },
                        },
                        hide: true,
                        minRows: 5,
                        span: 24,
                    },
                ],
            },
            cascaderItem: ["campus", "loutype"],
            dataType: "number",
            cell: true,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=building",
            rules: [
              {
                required: true,
                message: "请输入所属建筑",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属校区",
            searchLabelWidth: "110",
            prop: "campus",
            type: "tree",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=campus",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            slot: true,
            searchSpan: 5,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入所属校区",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属楼",
            prop: "loutype",
            hide: true,
            type: "tree",
            cell: true,
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dicUrl:
              "/api/blade-architecture/architecture/selectType?campus={{key}}&type={{mtype}}",
            rules: [
              {
                required: true,
                message: "请输入所属楼",
                trigger: "blur",
              },
            ],
          },
          {
            label: "偏航角",
            addDisplay: false,
            hide: true,
            prop: "heading",
          },
          {
            label: "俯仰角",
            addDisplay: false,
            hide: true,
            prop: "pitch",
          },
          {
            label: "翻转角",
            addDisplay: false,
            hide: true,
            prop: "roll",
          },
          {
            label: "高度",
            hide: true,
            addDisplay: false,
            prop: "gd",
          },
          {
            label: "网站地址",
            prop: "websiteurl",
          },
          {
            label: "地址",
            prop: "address",
            hide: true,
          },
          {
            label: "监控地址",
            hide: true,
            prop: "videourl",
          },
          {
            label: "图片",
            prop: "tpurl",
            // dataType: 'string',
            type: "upload",
            propsHttp: {
              res: "data",
              url: "link",
            },
            // rules: [
            //   {
            //     required: true,
            //     message: "请输入图片",
            //     trigger: "blur",
            //   },
            // ],
            span: 10,
            listType: "picture-card",
            tip: "只能上传jpg/png文件，且不超过500kb",
            action: "/api/blade-resource/oss/endpoint/put-file",
          },
          // {
          //   label: "二维码",
          //   prop: "codeurl",
          //   type: 'upload',
          //   listType: 'picture-card',
          //   //dataType: 'string',
          //   action: '/api/blade-resource/oss/endpoint/put-file',
          //   propsHttp: {
          //     res: 'data',
          //     url: 'link',
          //   },
          //   span: 10,
          // },
          {
            label: "介绍",
            prop: "introduce",
            component: "AvueUeditor",
            options: {
              action: "/api/blade-resource/oss/endpoint/put-file",
              props: {
                res: "data",
                url: "link",
              },
            },
            hide: true,
            minRows: 5,
            span: 24,
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.life_add, false),
        viewBtn: this.vaildData(this.permission.life_view, false),
        delBtn: this.vaildData(this.permission.life_delete, false),
        editBtn: this.vaildData(this.permission.life_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    getMapDatas(res) {
      this.form["jd"] = res[0];
      this.form["wd"] = res[1];
      this.form["addressName"] = res[2];
    },
    initData() {
      getDeptTree().then((res) => {
        const column = this.findObject(this.option.column, "type");
        column.dicData = res.data.data;
      });
    },
    rowSave(row, done, loading) {
      var d = [];
      // var dk = [];
      for (var k in row.tpurl) {
        d.push(row.tpurl[k].value);
      }
      // for (var ks in row.codeurl) {
      //   dk.push(row.codeurl[ks].value);
      // }
      row.tpurl = d.join(",");
      //row.codeurl = dk.join(",");
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
            data: [],
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.life_add, false),
                viewBtn: this.vaildData(this.permission.life_view, false),
                delBtn: this.vaildData(this.permission.life_delete, false),
                editBtn: this.vaildData(this.permission.life_edit, false),
            }
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    methods: {

        setXyMapDatas (res) {
            this.form["x"] = res
        },

        getMapDatas (res) {
            this.form["jd"] = res[0]
            this.form["wd"] = res[1]
            this.form["addressName"] = res[2]
        },
        initData () {
            getDeptTree().then((res) => {
                const column = this.findObject(this.option.column, "type")
                column.dicData = res.data.data
            })
        },
        rowSave (row, done, loading) {
            var d = []
            // var dk = [];
            for (var k in row.tpurl) {
                d.push(row.tpurl[k].value)
            }
            // for (var ks in row.codeurl) {
            //   dk.push(row.codeurl[ks].value);
            // }
            row.tpurl = d.join(",")
            //row.codeurl = dk.join(",");
            add(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    window.console.log(error)
                }
            )
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    console.log(error)
                }
            )
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then((res) => {
                    this.form = res.data.data

                    this.$store.commit('SET_MAP_X_Y', this.form.x)
                    if (type == "edit") {
                        let that = this
                        this.$store.commit("readDom", {
                            this: that,
                            refName: "chousePointRef",
                            fn: (dom) => {
                                dom.openMaps({
                                    jd: this.form.jd,
                                    wd: this.form.wd,
                                    name: this.form.addressName,
                                })
                            },
                        })
                    }
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getList(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        },
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
          if (type == "edit") {
            let that = this;
            this.$store.commit("readDom", {
              this: that,
              refName: "chousePointRef",
              fn: (dom) => {
                dom.openMaps({
                  jd: this.form.jd,
                  wd: this.form.wd,
                  name: this.form.addressName,
                });
              },
            });
          }
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>


 src/views/mechanism/mechanism.vue

@@ -1,512 +1,535 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.mechanism_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
        <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
      </template>
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            :permission="permissionList"
            :before-open="beforeOpen"
            v-model="form"
            ref="crud"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @row-del="rowDel"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        >
            <template slot="menuLeft">
                <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    plain
                    v-if="permission.mechanism_delete"
                    @click="handleDelete"
                >删 除</el-button>
            </template>
            <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
                <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
            </template>

            <template slot-scope="{ type, disabled }" slot="xForm">
                <setxy @setData="setXyMapDatas"></setxy>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
} from "@/api/mechanism/mechanism";
import { mapGetters } from "vuex";
import { getDeptTree } from "@/api/system/dept";
    getList,
    getDetail,
    add,
    update,
    remove,
} from "@/api/mechanism/mechanism"
import { mapGetters } from "vuex"
import { getDeptTree } from "@/api/system/dept"

export default {
  data() {
    return {
      search: {},
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        align: "center",
        indexLabel: "序号",
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "名称",
            prop: "mechanismname",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "电话",
            prop: "telephone",
            rules: [
              {
                required: true,
                message: "请输入电话",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属机构",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=mechanism",
            props: {
              label: "dictValue",
              value: "dictKey",
    data () {
        return {
            search: {},
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            dataType: "number",
            slot: true,
            prop: "type",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入所属机构",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属建筑",
            prop: "mtype",
            hide: true,
            type: "select",
            props: {
              label: "dictValue",
              value: "dictKey",
            selectionList: [],
            option: {
                height: "auto",
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                align: "center",
                indexLabel: "序号",
                selection: true,
                dialogClickModal: false,
                column: [
                    {
                        label: "名称",
                        prop: "mechanismname",
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "电话",
                        prop: "telephone",
                        rules: [
                            {
                                required: true,
                                message: "请输入电话",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属机构",
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=mechanism",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        dataType: "number",
                        slot: true,
                        prop: "type",
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入所属机构",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属建筑",
                        prop: "mtype",
                        hide: true,
                        type: "select",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        dataType: "number",
                        cell: true,
                        cascaderItem: ["xtype", "loutype"],
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=building",
                        rules: [
                            {
                                required: true,
                                message: "请输入所属建筑",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属校区",
                        hide: true,
                        prop: "xtype",
                        type: "select",
                        cell: true,
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=campus",
                        rules: [
                            {
                                required: true,
                                message: "请输入所属校区",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属楼",
                        prop: "loutype",
                        hide: true,
                        type: "tree",
                        cell: true,
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        dicUrl:
                            "/api/blade-architecture/architecture/selectType?campus={{key}}&type={{mtype}}",
                        rules: [
                            {
                                required: true,
                                message: "请输入所属楼",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "2.5维坐标",
                        prop: "x",
                        hide: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请选择2.5维坐标",
                            },
                        ],
                    },

                    {
                        label: "选择地点",
                        prop: "chouseJdWd",
                        hide: true,
                        viewDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "详细地点",
                        prop: "addressName",
                        hide: true,
                        // overHidden: true,
                        editDisplay: false,
                        addDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "经度",
                        prop: "jd",
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择地点",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "纬度",
                        prop: "wd",
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择纬度",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "监控地址",
                        hide: true,
                        prop: "videourl",
                    },
                    {
                        label: "偏航角",
                        addDisplay: false,
                        hide: true,
                        prop: "heading",
                    },
                    {
                        label: "俯仰角",
                        addDisplay: false,
                        hide: true,
                        prop: "pitch",
                    },
                    {
                        label: "翻转角",
                        addDisplay: false,
                        hide: true,
                        prop: "roll",
                    },
                    {
                        label: "高度",
                        addDisplay: false,
                        hide: true,
                        prop: "gd",
                    },
                    // {
                    //   label: "地址",
                    //   hide: true,
                    //   prop: "address",
                    // },
                    {
                        label: "网站地址",
                        prop: "websiteurl",
                        rules: [
                            {
                                required: true,
                                message: "请输入网站地址",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "图片",
                        prop: "tpurl",
                        type: "upload",
                        listType: "picture-card",
                        //dataType: 'string',
                        action: "/api/blade-resource/oss/endpoint/put-file",
                        propsHttp: {
                            res: "data",
                            url: "link",
                        },
                        span: 12,
                    },
                    // {
                    //   label: "二维码",
                    //   prop: "codeurl",
                    //   type: 'upload',
                    //   listType: 'picture-card',
                    //   dataType: 'string',
                    //   action: '/api/blade-resource/oss/endpoint/put-file',
                    //   propsHttp: {
                    //     res: 'data',
                    //     url: 'link',
                    //   },
                    //   span: 12,
                    // },
                    {
                        label: "介绍",
                        prop: "introduce",
                        component: "AvueUeditor",
                        options: {
                            action: "/api/blade-resource/oss/endpoint/put-file",
                            props: {
                                res: "data",
                                url: "link",
                            },
                        },
                        hide: true,
                        minRows: 6,
                        span: 24,
                    },
                ],
            },
            dataType: "number",
            cell: true,
            cascaderItem: ["xtype", "loutype"],
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=building",
            rules: [
              {
                required: true,
                message: "请输入所属建筑",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属校区",
            hide: true,
            prop: "xtype",
            type: "select",
            cell: true,
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=campus",
            rules: [
              {
                required: true,
                message: "请输入所属校区",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属楼",
            prop: "loutype",
            hide: true,
            type: "tree",
            cell: true,
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dicUrl:
              "/api/blade-architecture/architecture/selectType?campus={{key}}&type={{mtype}}",
            rules: [
              {
                required: true,
                message: "请输入所属楼",
                trigger: "blur",
              },
            ],
          },
          {
            label: "选择地点",
            prop: "chouseJdWd",
            hide: true,
            viewDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "详细地点",
            prop: "addressName",
            hide: true,
            // overHidden: true,
            editDisplay: false,
            addDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "经度",
            prop: "jd",
            disabled: true,
            rules: [
              {
                required: true,
                message: "请选择地点",
                trigger: "blur",
              },
            ],
          },
          {
            label: "纬度",
            prop: "wd",
            disabled: true,
            rules: [
              {
                required: true,
                message: "请选择纬度",
                trigger: "blur",
              },
            ],
          },
          {
            label: "监控地址",
            hide: true,
            prop: "videourl",
          },
          {
            label: "偏航角",
            addDisplay: false,
            hide: true,
            prop: "heading",
          },
          {
            label: "俯仰角",
            addDisplay: false,
            hide: true,
            prop: "pitch",
          },
          {
            label: "翻转角",
            addDisplay: false,
            hide: true,
            prop: "roll",
          },
          {
            label: "高度",
            addDisplay: false,
            hide: true,
            prop: "gd",
          },
          // {
          //   label: "地址",
          //   hide: true,
          //   prop: "address",
          // },
          {
            label: "网站地址",
            prop: "websiteurl",
            rules: [
              {
                required: true,
                message: "请输入网站地址",
                trigger: "blur",
              },
            ],
          },
          {
            label: "图片",
            prop: "tpurl",
            type: "upload",
            listType: "picture-card",
            //dataType: 'string',
            action: "/api/blade-resource/oss/endpoint/put-file",
            propsHttp: {
              res: "data",
              url: "link",
            },
            span: 12,
          },
          // {
          //   label: "二维码",
          //   prop: "codeurl",
          //   type: 'upload',
          //   listType: 'picture-card',
          //   dataType: 'string',
          //   action: '/api/blade-resource/oss/endpoint/put-file',
          //   propsHttp: {
          //     res: 'data',
          //     url: 'link',
          //   },
          //   span: 12,
          // },
          {
            label: "介绍",
            prop: "introduce",
            component: "AvueUeditor",
            options: {
              action: "/api/blade-resource/oss/endpoint/put-file",
              props: {
                res: "data",
                url: "link",
              },
            },
            hide: true,
            minRows: 6,
            span: 24,
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.mechanism_add, false),
        viewBtn: this.vaildData(this.permission.mechanism_view, false),
        delBtn: this.vaildData(this.permission.mechanism_delete, false),
        editBtn: this.vaildData(this.permission.mechanism_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    getMapDatas(res) {
      this.form["jd"] = res[0];
      this.form["wd"] = res[1];
      this.form["addressName"] = res[2];
    },
    initData() {
      getDeptTree().then((res) => {
        const column = this.findObject(this.option.column, "type");
        column.dicData = res.data.data;
      });
    },
    rowSave(row, done, loading) {
      row["address"] = this.form.addressName;
      row["addressName"] = this.form.addressName;
      // console.log(row);
      // loading();
      // return;
      var d = [];
      //var dk = [];
      for (var k in row.tpurl) {
        d.push(row.tpurl[k].value);
      }
      // for (var ks in row.codeurl) {
      //   dk.push(row.codeurl[ks].value);
      // }
      row.tpurl = d.join(",");
      //row.codeurl = dk.join(",");
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
            data: [],
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.mechanism_add, false),
                viewBtn: this.vaildData(this.permission.mechanism_view, false),
                delBtn: this.vaildData(this.permission.mechanism_delete, false),
                editBtn: this.vaildData(this.permission.mechanism_edit, false),
            }
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    methods: {

        setXyMapDatas (res) {
            this.form["x"] = res
        },

        getMapDatas (res) {
            this.form["jd"] = res[0]
            this.form["wd"] = res[1]
            this.form["addressName"] = res[2]
        },
        initData () {
            getDeptTree().then((res) => {
                const column = this.findObject(this.option.column, "type")
                column.dicData = res.data.data
            })
        },
        rowSave (row, done, loading) {
            row["address"] = this.form.addressName
            row["addressName"] = this.form.addressName
            // console.log(row);
            // loading();
            // return;
            var d = []
            //var dk = [];
            for (var k in row.tpurl) {
                d.push(row.tpurl[k].value)
            }
            // for (var ks in row.codeurl) {
            //   dk.push(row.codeurl[ks].value);
            // }
            row.tpurl = d.join(",")
            //row.codeurl = dk.join(",");
            add(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    window.console.log(error)
                }
            )
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    console.log(error)
                }
            )
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["add", "edit"].includes(type)) {
                this.initData()
            }
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then((res) => {
                    // console.log(res.data.data);
                    this.form = res.data.data
                    this.$store.commit('SET_MAP_X_Y', this.form.x)
                    if (type == "edit") {
                        let that = this
                        this.$store.commit("readDom", {
                            this: that,
                            refName: "chousePointRef",
                            fn: (dom) => {
                                dom.openMaps({
                                    jd: this.form.jd,
                                    wd: this.form.wd,
                                    name: this.form.addressName,
                                })
                            },
                        })
                    }
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getList(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        },
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["add", "edit"].includes(type)) {
        this.initData();
      }
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          // console.log(res.data.data);
          this.form = res.data.data;
          if (type == "edit") {
            let that = this;
            this.$store.commit("readDom", {
              this: that,
              refName: "chousePointRef",
              fn: (dom) => {
                dom.openMaps({
                  jd: this.form.jd,
                  wd: this.form.wd,
                  name: this.form.addressName,
                });
              },
            });
          }
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>


 src/views/road/road.vue

@@ -1,306 +1,330 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.road_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
        <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
      </template>
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            :permission="permissionList"
            :before-open="beforeOpen"
            v-model="form"
            ref="crud"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @row-del="rowDel"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        >
            <template slot="menuLeft">
                <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    plain
                    v-if="permission.road_delete"
                    @click="handleDelete"
                >删 除</el-button>
            </template>
            <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
                <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
            </template>

            <template slot-scope="{ type, disabled }" slot="xForm">
                <setxy @setData="setXyMapDatas"></setxy>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove } from "@/api/road/road";
import { mapGetters } from "vuex";
import { getList, getDetail, add, update, remove } from "@/api/road/road"
import { mapGetters } from "vuex"

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "名称",
            search: true,
            prop: "roadname",
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "选择地点",
            prop: "chouseJdWd",
            hide: true,
            viewDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "详细地点",
            prop: "addressName",
            hide: true,
            // overHidden: true,
            editDisplay: false,
            addDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "经度",
            prop: "jd",
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入经度",
                trigger: "blur",
              },
            ],
          },
          {
            label: "纬度",
            disabled: true,
            prop: "wd",
            rules: [
              {
                required: true,
                message: "请输入纬度",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.road_add, false),
        viewBtn: this.vaildData(this.permission.road_view, false),
        delBtn: this.vaildData(this.permission.road_delete, false),
        editBtn: this.vaildData(this.permission.road_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    getMapDatas(res) {
      this.form["jd"] = res[0];
      this.form["wd"] = res[1];
      this.form["addressName"] = res[2];
    },
    initData() {
      getDeptTree().then((res) => {
        const column = this.findObject(this.option.column, "type");
        column.dicData = res.data.data;
      });
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList: [],
            option: {
                height: "auto",
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                dialogClickModal: false,
                column: [
                    {
                        label: "名称",
                        search: true,
                        prop: "roadname",
                        rules: [
                            {
                                required: true,
                                message: "请输入名称",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "2.5维坐标",
                        prop: "x",
                        hide: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请选择2.5维坐标",
                            },
                        ],
                    },

                    {
                        label: "选择地点",
                        prop: "chouseJdWd",
                        hide: true,
                        viewDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "详细地点",
                        prop: "addressName",
                        hide: true,
                        // overHidden: true,
                        editDisplay: false,
                        addDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "经度",
                        prop: "jd",
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入经度",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "纬度",
                        disabled: true,
                        prop: "wd",
                        rules: [
                            {
                                required: true,
                                message: "请输入纬度",
                                trigger: "blur",
                            },
                        ],
                    },
                ],
            },
            data: [],
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.road_add, false),
                viewBtn: this.vaildData(this.permission.road_view, false),
                delBtn: this.vaildData(this.permission.road_delete, false),
                editBtn: this.vaildData(this.permission.road_edit, false),
            }
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    methods: {

        setXyMapDatas (res) {
            this.form["x"] = res
        },

        getMapDatas (res) {
            this.form["jd"] = res[0]
            this.form["wd"] = res[1]
            this.form["addressName"] = res[2]
        },
        initData () {
            getDeptTree().then((res) => {
                const column = this.findObject(this.option.column, "type")
                column.dicData = res.data.data
            })
        },
        rowSave (row, done, loading) {
            add(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    window.console.log(error)
                }
            )
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    console.log(error)
                }
            )
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then((res) => {
                    this.form = res.data.data

                    this.$store.commit('SET_MAP_X_Y', this.form.x)
                    if (type == "edit") {
                        let that = this
                        this.$store.commit("readDom", {
                            this: that,
                            refName: "chousePointRef",
                            fn: (dom) => {
                                dom.openMaps({
                                    jd: this.form.jd,
                                    wd: this.form.wd,
                                    name: this.form.addressName,
                                })
                            },
                        })
                    }
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getList(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        },
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
          if (type == "edit") {
            let that = this;
            this.$store.commit("readDom", {
              this: that,
              refName: "chousePointRef",
              fn: (dom) => {
                dom.openMaps({
                  jd: this.form.jd,
                  wd: this.form.wd,
                  name: this.form.addressName,
                });
              },
            });
          }
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>


 src/views/sp/sp.vue

@@ -1,333 +1,358 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.sp_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
        <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
      </template>
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            :permission="permissionList"
            :before-open="beforeOpen"
            v-model="form"
            ref="crud"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @row-del="rowDel"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        >
            <template slot="menuLeft">
                <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    plain
                    v-if="permission.sp_delete"
                    @click="handleDelete"
                >删 除</el-button>
            </template>
            <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
                <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
            </template>

            <template slot-scope="{ type, disabled }" slot="xForm">
                <setxy @setData="setXyMapDatas"></setxy>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove } from "@/api/sp/sp";
import { mapGetters } from "vuex";
import { getList, getDetail, add, update, remove } from "@/api/sp/sp"
import { mapGetters } from "vuex"

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        align: "center",
        indexLabel: "序号",
        dialogClickModal: false,
        column: [
          {
            label: "视频名称",
            prop: "vrname",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入视频名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "视频格式",
            disabled: true,
            prop: "spgs",
            type: "select",
            value:"m3u8",
            dicData: [
              {
                label: "m3u8",
                value: "m3u8"
              },
            ],
          },
          {
            label: "视频地址",
            prop: "vrurl",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入视频地址",
                trigger: "blur",
              },
            ],
          },
          {
            label: "选择地点",
            prop: "chouseJdWd",
            hide: true,
            viewDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "详细地点",
            prop: "addressName",
            hide: true,
            // overHidden: true,
            editDisplay: false,
            addDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "经度",
            disabled: true,
            prop: "jd",
            rules: [
              {
                required: true,
                message: "请输入经度",
                trigger: "blur",
              },
            ],
          },
          {
            label: "纬度",
            prop: "wd",
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入纬度",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.sp_add, false),
        viewBtn: this.vaildData(this.permission.sp_view, false),
        delBtn: this.vaildData(this.permission.sp_delete, false),
        editBtn: this.vaildData(this.permission.sp_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    getMapDatas(res) {
      this.form["jd"] = res[0];
      this.form["wd"] = res[1];
      this.form["addressName"] = res[2];
    },
    initData() {
      getDeptTree().then((res) => {
        const column = this.findObject(this.option.column, "type");
        column.dicData = res.data.data;
      });
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList: [],
            option: {
                height: "auto",
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                align: "center",
                indexLabel: "序号",
                dialogClickModal: false,
                column: [
                    {
                        label: "视频名称",
                        prop: "vrname",
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入视频名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "视频格式",
                        disabled: true,
                        prop: "spgs",
                        type: "select",
                        value: "m3u8",
                        dicData: [
                            {
                                label: "m3u8",
                                value: "m3u8"
                            },
                        ],
                    },
                    {
                        label: "视频地址",
                        prop: "vrurl",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入视频地址",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "2.5维坐标",
                        prop: "x",
                        hide: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请选择2.5维坐标",
                            },
                        ],
                    },


                    {
                        label: "选择地点",
                        prop: "chouseJdWd",
                        hide: true,
                        viewDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "详细地点",
                        prop: "addressName",
                        hide: true,
                        // overHidden: true,
                        editDisplay: false,
                        addDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "经度",
                        disabled: true,
                        prop: "jd",
                        rules: [
                            {
                                required: true,
                                message: "请输入经度",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "纬度",
                        prop: "wd",
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入纬度",
                                trigger: "blur",
                            },
                        ],
                    },
                ],
            },
            data: [],
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.sp_add, false),
                viewBtn: this.vaildData(this.permission.sp_view, false),
                delBtn: this.vaildData(this.permission.sp_delete, false),
                editBtn: this.vaildData(this.permission.sp_edit, false),
            }
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    methods: {

        setXyMapDatas (res) {
            this.form["x"] = res
        },

        getMapDatas (res) {
            this.form["jd"] = res[0]
            this.form["wd"] = res[1]
            this.form["addressName"] = res[2]
        },
        initData () {
            getDeptTree().then((res) => {
                const column = this.findObject(this.option.column, "type")
                column.dicData = res.data.data
            })
        },
        rowSave (row, done, loading) {
            add(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    window.console.log(error)
                }
            )
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    console.log(error)
                }
            )
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then((res) => {
                    this.form = res.data.data

                    this.$store.commit('SET_MAP_X_Y', this.form.x)
                    if (type == "edit") {
                        let that = this
                        this.$store.commit("readDom", {
                            this: that,
                            refName: "chousePointRef",
                            fn: (dom) => {
                                dom.openMaps({
                                    jd: this.form.jd,
                                    wd: this.form.wd,
                                    name: this.form.addressName,
                                })
                            },
                        })
                    }
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getList(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        },
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
          if (type == "edit") {
            let that = this;
            this.$store.commit("readDom", {
              this: that,
              refName: "chousePointRef",
              fn: (dom) => {
                dom.openMaps({
                  jd: this.form.jd,
                  wd: this.form.wd,
                  name: this.form.addressName,
                });
              },
            });
          }
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>


 src/views/vr/vr.vue

@@ -1,319 +1,343 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.vr_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
        <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
      </template>
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            :permission="permissionList"
            :before-open="beforeOpen"
            v-model="form"
            ref="crud"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @row-del="rowDel"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        >
            <template slot="menuLeft">
                <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    plain
                    v-if="permission.vr_delete"
                    @click="handleDelete"
                >删 除</el-button>
            </template>
            <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
                <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
            </template>

            <template slot-scope="{ type, disabled }" slot="xForm">
                <setxy @setData="setXyMapDatas"></setxy>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove } from "@/api/vr/vr";
import { mapGetters } from "vuex";
import { getList, getDetail, add, update, remove } from "@/api/vr/vr"
import { mapGetters } from "vuex"

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        align: "center",
        indexLabel: "序号",
        dialogClickModal: false,
        column: [
          {
            label: "VR名称",
            search: true,
            prop: "vrname",
            rules: [
              {
                required: true,
                message: "请输入VR名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "VR地址",
            prop: "vrurl",
            rules: [
              {
                required: true,
                message: "请输入VR地址",
                trigger: "blur",
              },
            ],
          },
          {
            label: "选择地点",
            prop: "chouseJdWd",
            hide: true,
            viewDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "详细地点",
            prop: "addressName",
            hide: true,
            // overHidden: true,
            editDisplay: false,
            addDisplay: false,
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择地点",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "经度",
            disabled: true,
            prop: "jd",
            rules: [
              {
                required: true,
                message: "请输入经度",
                trigger: "blur",
              },
            ],
          },
          {
            label: "纬度",
            disabled: true,
            prop: "wd",
            rules: [
              {
                required: true,
                message: "请输入纬度",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.vr_add, false),
        viewBtn: this.vaildData(this.permission.vr_view, false),
        delBtn: this.vaildData(this.permission.vr_delete, false),
        editBtn: this.vaildData(this.permission.vr_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    getMapDatas(res) {
      this.form["jd"] = res[0];
      this.form["wd"] = res[1];
      this.form["addressName"] = res[2];
    },
    initData() {
      getDeptTree().then((res) => {
        const column = this.findObject(this.option.column, "type");
        column.dicData = res.data.data;
      });
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList: [],
            option: {
                height: "auto",
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                align: "center",
                indexLabel: "序号",
                dialogClickModal: false,
                column: [
                    {
                        label: "VR名称",
                        search: true,
                        prop: "vrname",
                        rules: [
                            {
                                required: true,
                                message: "请输入VR名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "VR地址",
                        prop: "vrurl",
                        rules: [
                            {
                                required: true,
                                message: "请输入VR地址",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "2.5维坐标",
                        prop: "x",
                        hide: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请选择2.5维坐标",
                            },
                        ],
                    },

                    {
                        label: "选择地点",
                        prop: "chouseJdWd",
                        hide: true,
                        viewDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "详细地点",
                        prop: "addressName",
                        hide: true,
                        // overHidden: true,
                        editDisplay: false,
                        addDisplay: false,
                        span: 24,
                        // rules: [
                        //   {
                        //     required: true,
                        //     message: "请选择地点",
                        //     trigger: "blur",
                        //   },
                        // ],
                    },
                    {
                        label: "经度",
                        disabled: true,
                        prop: "jd",
                        rules: [
                            {
                                required: true,
                                message: "请输入经度",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "纬度",
                        disabled: true,
                        prop: "wd",
                        rules: [
                            {
                                required: true,
                                message: "请输入纬度",
                                trigger: "blur",
                            },
                        ],
                    },
                ],
            },
            data: [],
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.vr_add, false),
                viewBtn: this.vaildData(this.permission.vr_view, false),
                delBtn: this.vaildData(this.permission.vr_delete, false),
                editBtn: this.vaildData(this.permission.vr_edit, false),
            }
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    methods: {

        setXyMapDatas (res) {
            this.form["x"] = res
        },

        getMapDatas (res) {
            this.form["jd"] = res[0]
            this.form["wd"] = res[1]
            this.form["addressName"] = res[2]
        },
        initData () {
            getDeptTree().then((res) => {
                const column = this.findObject(this.option.column, "type")
                column.dicData = res.data.data
            })
        },
        rowSave (row, done, loading) {
            add(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    window.console.log(error)
                }
            )
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    loading()
                    console.log(error)
                }
            )
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then((res) => {
                    this.form = res.data.data

                    this.$store.commit('SET_MAP_X_Y', this.form.x)
                    if (type == "edit") {
                        let that = this
                        this.$store.commit("readDom", {
                            this: that,
                            refName: "chousePointRef",
                            fn: (dom) => {
                                dom.openMaps({
                                    jd: this.form.jd,
                                    wd: this.form.wd,
                                    name: this.form.addressName,
                                })
                            },
                        })
                    }
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getList(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        },
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
          if (type == "edit") {
            let that = this;
            this.$store.commit("readDom", {
              this: that,
              refName: "chousePointRef",
              fn: (dom) => {
                dom.openMaps({
                  jd: this.form.jd,
                  wd: this.form.wd,
                  name: this.form.addressName,
                });
              },
            });
          }
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>


 vue.config.js

@@ -29,9 +29,9 @@
            "/api": {
                //本地服务接口地址
                // target: "http://192.168.0.107:80",
                // target: "http://192.168.0.102:82",
                target: "http://192.168.0.110:82",
                // target: "http://171.34.197.243:790",
                target: "http://171.34.197.243:782", //服务器
                // target: "http://171.34.197.243:782", //服务器
                // target: 'http://localhost:82',
                //远程演示服务地址,可用于直接启动项目
                //target: 'https://saber.bladex.vip/api',