1/6 代码更新

config/index.js

@@ -12,7 +12,7 @@ module.exports = {
     proxyTable: {
       '/api': {
         // target: 'http://182.92.193.64:8002/',
-        // target: 'http://192.168.1.76:8000/',
+        // target: 'http://192.168.1.76:8000/',//杨明明
         target: 'http://8.136.98.49:8005/',
         // target: "http://182.92.193.64:8002", //测试环境
         // target:'http://192.168.1.200:8005',

index.html

@@ -7,6 +7,8 @@
     content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <title>高标准农田管理系统</title>
   <link rel="SHORTCUT ICON" href="./static/images/gaobiao.ico">
+  <link rel="stylesheet" href="http://192.168.1.17:10086/example/css/divGraphic.css">
+  <link rel="stylesheet" href="http://192.168.1.17:10086/example/css/style.css">
   <!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
@@ -24,6 +26,13 @@
   <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
   <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
   <script src="https://unpkg.com/gcoord/dist/gcoord.js"></script>
+
+  <!--引入cesium基础lib-->
+  <link href="https://unpkg.com/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
+  <script src="https://unpkg.com/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script> 
+  <!--引入mars3d库lib-->
+  <link href="https://unpkg.com/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
+  <script src="https://unpkg.com/mars3d/dist/mars3d.js" type="text/javascript" ></script> 
   <style>
     .figEldialog .el-dialog {
       background: rgba(12, 20, 44, 0.8);

src/components/index.vue

@@ -6,7 +6,7 @@
         <!-- {{currTopMenuId}} -->
         <!-- logo -->
         <div class="logoinfo">
-          <div>
+          <div @click="toremotesensing">
             <img
               :src="$imghost + logoIcon"
               width="40"
@@ -645,6 +645,9 @@ export default {
       });
     },
     resetPassDialogClosed() {},
+    toremotesensing(){
+      this.$router.push("/RemoteSensing");
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},

src/pages/geoservers/geoservers.vue

@@ -245,14 +245,12 @@ export default {
     };
   },
   methods: {
-    equipLocate() {},
-    enterBase() {},
     getEquipList(item, index) {
       this.equipListactive = index;
     },
     init(basedetails) {
       // ol-viewport
-      var gridsetName = "EPSG:900999";
+      var gridsetName = "EPSG:9009991024";
       var gridNames = [
         "0",
         "1",
@@ -297,8 +295,7 @@ export default {
         axisOrientation: "neu",
       });
       var resolutions = [
-        1252344.27125, 626172.135625, 313086.0678125, 156543.03390625,
-        78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625,
+        39135.7584765625, 19567.87923828125, 9783.939619140625,
         4891.9698095703125, 2445.9849047851562, 1222.9924523925781,
         611.4962261962891, 305.74811309814453, 152.87405654907226,
         76.43702827453613, 38.218514137268066, 19.109257068634033,
@@ -306,7 +303,9 @@ export default {
         1.194328566789627, 0.5971642833948135, 0.2985821416974068,
         0.1492910708487034, 0.0746455354243517, 0.0373227677121758,
         0.0186613838560879, 0.009330691928044, 0.004665345964022,
-        0.002332672982011, 0.0011663364910055,
+        0.002332672982011, 0.0011663364910055, 5.831682455027e-4,
+        2.915841227514e-4, 1.457920613757e-4, 7.28960306878e-5,
+        3.64480153439e-5,
       ];
       var baseParams = [
         "VERSION",
@@ -343,9 +342,11 @@ export default {
           format: params["FORMAT"],
           projection: projection,
           tileGrid: new ol.tilegrid.WMTS({
-            tileSize: [32, 32],
-            extent: [-2.003750834E7,-2.003750834E7,2.003750834E7,2.003750834E7],
-            origin: [-2.003750834E7, 2.003750834E7],
+            tileSize: [1024, 1024],
+            extent: [
+              -2.003750834e7, -2.003750834e7, 2.003750834e7, 2.003750834e7,
+            ],
+            origin: [-2.003750834e7, 2.003750834e7],
             resolutions: resolutions,
             matrixIds: params["TILEMATRIX"],
           }),
@@ -483,86 +484,6 @@ export default {
         layer.setSource(constructSource());
         map.updateSize();
       };
-
-      var createLabelStyle = function (feature) {
-        //返回一个样式
-        return new ol.style.Style({
-          image: new ol.style.Icon({
-            //控制标注图片和文字之间的距离
-            anchor: [0.5, 60],
-            //标注样式的起点位置
-            anchorOrigin: "top-right",
-            //X方向单位：分数
-            anchorXUnits: "fraction",
-            //Y方向单位：像素
-            anchorYUnits: "pixels",
-            //偏移起点位置的方向
-            offsetOrigin: "top-right",
-            //透明度
-            opacity: 0.75,
-            //图片路径
-            src: "../../../../static/images/jidi2.png",
-          }),
-          //文本样式
-          text: new ol.style.Text({
-            //对齐方式
-            textAlign: "center",
-            //文本基线
-            textBaseline: "middle",
-            //字体样式
-            font: "normal 14px 微软雅黑",
-            //文本内容
-            text: feature.get("name"),
-            //填充样式
-            fill: new ol.style.Fill({
-              color: "#aa3300",
-            }),
-            //笔触
-            stroke: new ol.style.Stroke({
-              color: "#ffcc33",
-              width: 2,
-            }),
-          }),
-        });
-      };
-      var arr = basedetails.equipmentlocation;
-      console.log(arr);
-      var arr2 = [];
-      for (var i = 0; i < arr.length; i++) {
-        var didian = gcoord.transform(
-          arr[i].location,
-          gcoord.GCJ02,
-          gcoord.EPSG3857
-        );
-        var iconFeature = new ol.Feature({
-          //点要素
-          geometry: new ol.geom.Point(didian),
-          //名称属性
-          name: arr[i].name,
-          //人口属性
-          population: {
-            name: arr[i].name,
-            type: arr[i].type,
-            device_id: arr[i].device_id,
-            location: arr[i].location,
-          },
-        });
-        iconFeature.setStyle(createLabelStyle(iconFeature));
-        arr2.push(iconFeature);
-      }
-      console.log(arr2);
-      //为点要素添加样式
-      //初始化矢量数据源
-      var vectorSource = new ol.source.Vector({
-        //指定要素
-        features: arr2,
-      });
-
-      //初始化矢量图层
-      var vectorLayer = new ol.layer.Vector({
-        //数据源
-        source: vectorSource,
-      });
       // ************************************************************************
       var layer = new ol.layer.Tile({
         source: constructSource(),
@@ -572,7 +493,8 @@ export default {
         zoom: 2,
         resolutions: resolutions,
         projection: projection,
-        extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
+        // extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
+        extent: [-20037508.34, -20037508.34, 22146719.744210523, 20037508.34],
       });
       // var newelement = document.createElement("div");
       // newelement.id = "map";
@@ -597,7 +519,7 @@ export default {
         controls: ol.control
           .defaults({ attribution: false })
           .extend([new ol.control.MousePosition()]),
-        layers: [l3, layer, l2, l4, vectorLayer],
+        layers: [l3, layer, l2, l4],
         target: "map",
         view: view,
       });
@@ -605,7 +527,6 @@ export default {
       map.getView().fit(basedetails.basemap, map.getSize(21));
 
       //将矢量图层添加到map中
-      layerarea.setIndex = -1;
       map.addLayer(layerarea);
       map.on("singleclick", (e) => {
         // style.getStroke().setColor("black");
@@ -631,12 +552,6 @@ export default {
       if (canbox.length > 1) {
         fatherbox.removeChild(canbox[0]);
       }
-
-      //   console.log(canbox)
-      //   for (var i = 0; i < canbox.length; i++) {
-      //     canbox[i].style.display = "none";
-      //     canbox[canbox.length - 1].style.display = "block";
-      //   }
     },
     setecharts() {
       var obj = {};
@@ -731,7 +646,7 @@ export default {
               "<br/>" +
               data.seriesName +
               "：" +
-              item.croparea * (data.value * 0.01) +
+              (item.croparea * (data.value * 0.01)).toFixed(2) +
               "万亩"
             ); //将小数转化为百分数显示
           },

src/pages/plantGuard/geoinfo/map2.vue

@@ -2,9 +2,6 @@
 <template>
   <div class="mapbox">
     <div id="container"></div>
-    <!-- <div id="map" v-loading="loading" v-show="canvasdisplay">
-      <div class="mapdel" @click="canvasdisplay = false">×</div>
-    </div> -->
     <div id="mapbox">
       <div id="map" v-loading="loading" v-show="canvasdisplay">
         <!-- <div class="mapdel" @click="addInteraction">划分地块</div> -->
@@ -14,7 +11,7 @@
     </div>
     <div class="listBox">
       <div class="projectSearch">
-        <div>项目列表</div>
+        <div>基地列表</div>
         <div>
           <el-input
             size="small"
@@ -80,7 +77,7 @@ export default {
     //这里存放数据
     return {
       canvasdisplay: true,
-      loading: true,
+      loading: false,
       map: null,
       input: "",
       mapData: [
@@ -135,24 +132,24 @@ export default {
               device_id: "866193059738670",
             },
           ], //设备点定位
-          Basename: "yunfei:result", //贴图名称
-          basemap: [
-            //贴图地图
-            12654161.262852993, 4138228.39035618, 12654499.539666895,
-            4138560.780442763,
-          ],
+          Basename: "yunfei:beisanhuan", //贴图名称
+          // basemap: [
+          //   //贴图地图
+          //   12654161.262852993, 4138228.39035618, 12654499.539666895,
+          //   4138560.780442763,
+          // ],
+          basemap: [12654161.262852995, 4138228.39035618,12654499.539666897, 4138560.780442763]
         },
         {
-          projectname: "河南省小麦长势遥感图",
+          projectname: "河南省开封市尉氏县基地",
           uuid: 3,
-          latlng: [113.681471, 34.810371], //基地定位
+          latlng: [114.19284,34.41223], //基地定位
           Baselocation: [],
           equipmentlocation: [], //设备点定位
-          Basename: "yunfei:xiaomaizhangshi", //贴图名称
+          Basename: "yunfei:weishi", //贴图名称
           basemap: [
             //贴图地图
-            12264222.56268119, 3671219.7387323463, 13021605.592033587,
-            4377641.963339285,
+            12720250.438352395,4077648.4271950293,12722174.052177684,4079390.7616211823
           ],
         },
       ],
@@ -174,129 +171,9 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    initmap(item) {
-      this.map = new AMap.Map("container", {
-        resizeEnable: true,
-        expandZoomRange: true,
-        center: item.latlng, //中心点
-        zoom: 16, //初始化缩放等级
-        zooms: [3, 24], //设置最大、最小缩放等级
-        layers: [new AMap.TileLayer.Satellite()], //加载卫星图
-      });
-      this.map.on("click", (e) => {
-        console.log(e.lnglat);
-        // var arr = [e.lnglat.lng, e.lnglat.lat];
-        // this.addmarker(e.lnglat.lng, e.lnglat.lat);
-        // this.path.push(arr);
-      });
-      // this.addpolygon(item.Baselocation);
-      // this.addmarker();
-      // this.addWMSLayer();
-    },
-    addpolygon(path) {
-      var polygon = new AMap.Polygon({
-        path: path,
-        strokeColor: "#FF33FF", //外围边框颜色
-        strokeWeight: 6,
-        strokeOpacity: 0.2,
-        fillOpacity: 0.4,
-        fillColor: "#1791fc", //内部颜色
-        zIndex: 50,
-      });
-      polygon.on("click", (e) => {
-        this.canvasdisplay = true;
-        console.log(e);
-      });
-      this.polygon = polygon;
-      this.map.add(polygon);
-      // 缩放地图到合适的视野级别
-      // this.map.setFitView([polygon]);
-    },
-    addmarker() {
-      var marker = new AMap.Marker({
-        icon: "../../../../static/images/jidi2.png",
-        position: [113.68258608341216, 34.811427520353476],
-      });
-      marker.on("click", (e) => {
-        this.dialogbaseinfo = true;
-        // this.canvasdisplay = true;
-      });
-      // marker.setMap(this.map);
-      this.map.add(marker);
-      // this.marker = marker
-      // this.markers.push(marker);
-    },
-    tile2lon(x, z) {
-      return (x / Math.pow(2, z)) * 360 - 180;
-    },
-    // 切片转纬度
-    tile2lat(y, z) {
-      var n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z);
-      return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
-    },
-    addWMSLayer() {
-      var that = this;
-      var resolutions = [];
-      for (var i = 0; i < 19; i++) {
-        resolutions[i] = Math.pow(2, 18 - i);
-      }
-      var tileLayer = new AMap.TileLayer({
-        tileSize: 256,
-        tileUrl: function (x, y, z) {
-          let xmin = that.tile2lon(x, z);
-          let xmax = that.tile2lon(x + 1, z);
-          let ymin = that.tile2lat(y + 1, z);
-          let ymax = that.tile2lat(y, z);
-          // console.log(xmin, ymin)
-          // 转换对应坐标
-          // console.log(xmin, ymin);
-          // console.log(xmax, ymax);
-          let t1 = gcoord.transform(
-            [xmin, ymin],
-            gcoord.GCJ02,
-            gcoord.EPSG3857
-          );
-          let t2 = gcoord.transform(
-            [xmax, ymax],
-            gcoord.GCJ02,
-            gcoord.EPSG3857
-          );
-          // console.log(t1,t2)
-          // 查询对象
-          let url = "http://8.136.98.49:18080/geoserver/yunfei/wms?";
-          let params = {
-            service: "WMS",
-            version: "1.1.0",
-            transparent: true,
-            request: "GetMap",
-            layers: "yunfei:result",
-            width: 769,
-            height: 620,
-            srs: "EPSG:3857",
-            format: "image/png",
-            bbox: [t1[0], t1[1], t2[0], t2[1]].join(","),
-          };
-          // 构建查询字符串
-          let str = that.objToParams(params);
-
-          return url + str;
-        },
-        zIndex: 10,
-      });
-      this.map.add(tileLayer);
-    },
-    objToParams(obj) {
-      return Object.keys(obj)
-        .map(function (key) {
-          return ""
-            .concat(encodeURIComponent(key), "=")
-            .concat(encodeURIComponent(obj[key]));
-        })
-        .join("&");
-    },
     init(basedetails) {
       // ol-viewport
-      var gridsetName = "EPSG:900999";
+      var gridsetName = "EPSG:900999256";
       var gridNames = [
         "0",
         "1",
@@ -341,16 +218,16 @@ export default {
         axisOrientation: "neu",
       });
       var resolutions = [
-        1252344.27125, 626172.135625, 313086.0678125, 156543.03390625,
-        78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625,
-        4891.9698095703125, 2445.9849047851562, 1222.9924523925781,
-        611.4962261962891, 305.74811309814453, 152.87405654907226,
-        76.43702827453613, 38.218514137268066, 19.109257068634033,
-        9.554628534317017, 4.777314267158508, 2.388657133579254,
-        1.194328566789627, 0.5971642833948135, 0.2985821416974068,
-        0.1492910708487034, 0.0746455354243517, 0.0373227677121758,
-        0.0186613838560879, 0.009330691928044, 0.004665345964022,
-        0.002332672982011, 0.0011663364910055,
+        156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125,
+        9783.939619140625, 4891.9698095703125, 2445.9849047851562,
+        1222.9924523925781, 611.4962261962891, 305.74811309814453,
+        152.87405654907226, 76.43702827453613, 38.218514137268066,
+        19.109257068634033, 9.554628534317017, 4.777314267158508,
+        2.388657133579254, 1.194328566789627, 0.5971642833948135,
+        0.2985821416974068, 0.1492910708487034, 0.0746455354243517,
+        0.0373227677121758, 0.0186613838560879, 0.009330691928044,
+        0.004665345964022, 0.002332672982011, 0.0011663364910055,
+        5.831682455027e-4, 2.915841227514e-4, 1.457920613757e-4,
       ];
       var baseParams = [
         "VERSION",
@@ -388,7 +265,7 @@ export default {
           format: params["FORMAT"],
           projection: projection,
           tileGrid: new ol.tilegrid.WMTS({
-            tileSize: [32, 32],
+            tileSize: [256, 256],
             extent: [
               -2.003750834e7, -2.003750834e7, 2.003750834e7, 2.003750834e7,
             ],
@@ -631,7 +508,6 @@ export default {
       var l3 = new ol.layer.Tile({
         source: new ol.source.XYZ({
           url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=6e5cb1bfc017afcac7a21836cf81a884", // 地图
-          cacheSize: [64, 64],
         }),
       });
       var l4 = new ol.layer.Tile({
@@ -662,10 +538,12 @@ export default {
           (event) => {
             // style.getStroke().setColor("green");
             // statusElement.innerHTML = " 一个要素被选中了!";
-            console.log(event.H);
-            this.deviceinfo = event.H.population;
-            this.cityanalysis(this.deviceinfo.location);
-            this.dialogbaseinfo = true;
+            console.log(event.H.population);
+            if (event.H.population) {
+              this.deviceinfo = event.H.population;
+              this.cityanalysis(this.deviceinfo.location);
+              this.dialogbaseinfo = true;
+            }
           },
           {
             hitTolerance: 1,
@@ -674,10 +552,14 @@ export default {
       });
       var canbox = document.getElementsByClassName("ol-viewport");
       // mapbox.removeChild(canbox)
-      for (var i = 0; i < canbox.length; i++) {
-        canbox[i].style.display = "none";
-        canbox[canbox.length - 1].style.display = "block";
+      var fatherbox = document.getElementById("map");
+      if (canbox.length > 1) {
+        fatherbox.removeChild(canbox[0]);
       }
+      // for (var i = 0; i < canbox.length; i++) {
+      //   canbox[i].style.display = "none";
+      //   canbox[canbox.length - 1].style.display = "block";
+      // }
     },
     //基地搜索
     getEquipList() {},
@@ -685,10 +567,6 @@ export default {
     equipLocate(item, index) {
       console.log(this.equipListactive, index);
       this.equipListactive = index;
-      console.log(this.equipListactive, index);
-      // this.initmap(item);
-      // this.zoom = 10;
-      // console.log(item);
       this.init(item);
     },
     //基地双击
@@ -761,170 +639,40 @@ export default {
     },
     // 构建多边形结束
     drawingEnd(evt) {
+      var area = evt.feature.getGeometry().getArea(); //获取绘制的地区面积
+      var unit = "";
+      if (area > 1000000) {
+        area = area / 1000000;
+        unit = "km²";
+      } else {
+        unit = "m²";
+      }
+      console.log(area + unit);
+      console.log((area + area / 2) / 1000 + "亩"); //平方米换算成亩
+      var y = (area + area / 2) / 1000;
+      console.log((y * 2000) / 3); //亩换算成平方米
+
       let that = this;
       const geo = evt.feature.getGeometry();
       const t = geo.getType();
       if (t === "Polygon") {
         // 获取坐标点
         const points = geo.getCoordinates();
+        console.log(geo);
         console.warn(points, "绘制结束，点坐标");
-        console.log(this.source);
+        // console.log(this.source);
         this.source.clear();
         // this.aerialmap.addInteraction(this.draw);
         this.aerialmap.removeInteraction(this.draw); // 移除绘制
       }
     },
     clealdraw() {
-      console.log(1);
-      // this.drawVector.getSource().removeFeature();
-      console.log(this.drawarr);
+      // console.log(1);
+      // // this.drawVector.getSource().removeFeature();
+      // console.log(this.drawarr);
       this.aerialmap.removeLayer(this.drawarr[this.drawarr.length - 1]);
       this.drawarr.pop();
     },
-    // addInteraction() {
-    //   this.drawVector = new ol.layer.Vector({
-    //     //数据源
-    //     source: new ol.source.Vector(),
-    //     //样式
-    //     style: new ol.style.Style({
-    //       //样式填充
-    //       fill: new ol.style.Fill({
-    //         //填充颜色
-    //         color: "rgba(37,241,239,0.2)",
-    //       }),
-    //       //笔触
-    //       stroke: new ol.style.Stroke({
-    //         //笔触颜色
-    //         color: "#264df6",
-    //         //笔触宽度
-    //         width: 2,
-    //       }),
-    //       //图形样式，主要适用于点样式
-    //       image: new ol.style.Circle({
-    //         //半径大小
-    //         radius: 7,
-    //         //填充
-    //         fill: new ol.style.Fill({
-    //           //填充颜色
-    //           color: "#e81818",
-    //         }),
-    //       }),
-    //     }),
-    //   });
-    //   this.aerialmap.addLayer(this.drawVector);
-    //   //设置矢量图层的数据源为空
-    //   this.drawVector.setSource(null);
-    //   var typeSelect = "Polygon"; //Point 点  LineString 线  Polygon 多边形  Circle 圆  Square 正方形  Rectangle 长方形
-
-    //   //添加绘图交互的函数
-    //   // var source = new ol.source.Vector({ wrapX: false });
-    //   //获取当前选择的绘图类型
-    //   var value = typeSelect;
-    //   //如果当前选择的绘图类型不为"None"的话，则进行相应绘图操作
-    //   //如果当前选择的绘图类型为"None"的话，则清空矢量数据源
-    //   if (value !== "None") {
-    //     //如果当前的矢量数据源为空的话，则重新创建和设置数据源
-    //     //因为当你选择的绘图类型为"None"时，会清空数据源
-    //     if (this.drawVector.getSource() == null) {
-    //       this.drawVector.setSource(new ol.source.Vector({ wrapX: false }));
-    //     }
-    //     //geometryFunction变量，用来存储绘制图形时的回调函数
-    //     //maxPoints变量，用来存储最大的点数量
-    //     var geometryFunction, maxPoints;
-    //     //如果当前选择的绘图类型是"Square"的话，则将value设置为Circle
-    //     //然后调用createRegularPolygon()方法
-    //     if (value === "Square") {
-    //       value = "Circle";
-    //       //根据圆来创建一个四边形
-    //       geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
-    //     } else if (value === "Rectangle") {
-    //       //长方形
-    //       //如果当前选择的绘图类型是"Square"的话，则将value设置为LineString
-    //       value = "LineString";
-
-    //       //设置最大点数为2
-    //       maxPoints = 2;
-
-    //       geometryFunction = function (coordinates, geometry) {
-    //         //source.clear();
-
-    //         //如果geometry对象不存在或者为空，则创建
-    //         if (!geometry) {
-    //           geometry = new ol.geom.Polygon(null);
-    //         }
-    //         //开始点的坐标
-    //         var start = coordinates[0];
-    //         //结束点的坐标
-    //         var end = coordinates[1];
-    //         //根据开始坐标和结束坐标设置绘图点坐标
-    //         geometry.setCoordinates([
-    //           [start, [start[0], end[1]], end, [end[0], start[1]], start],
-    //         ]);
-
-    //         return geometry;
-    //       };
-    //     }
-
-    //     //将交互绘图对象赋给draw对象
-    //     //初始化交互绘图对象
-    //     var draw = new ol.interaction.Draw({
-    //       //图层数据源
-    //       source: this.drawVector.getSource(),
-    //       //绘制类型
-    //       type: value,
-    //       //回调函数
-    //       //Function that is called when a geometry's coordinates are updated
-    //       geometryFunction: geometryFunction,
-    //       //最大点数
-    //       maxPoints: maxPoints,
-    //     });
-    //     //将draw对象添加到map中，然后就可以进行图形绘制了
-    //     this.aerialmap.addInteraction(draw);
-
-    //     draw.setActive(true);
-    //   }
-
-    //   //监听开始事件
-
-    //   draw.on("drawstart", () => {
-    //     //alert("111");
-    //     // this.drawVector.getSource().clear();
-    //   });
-
-    //   //获取坐标
-    //   draw.on("drawend", function (evt) {
-    //     //alert("111");
-    //     var feature = evt.feature;
-    //     var geometry = feature.getGeometry();
-
-    //     //获取多边形的坐标
-    //     //var coordinate = geometry.getCoordinates();
-    //     //获取圆的坐标
-    //     //var coordinate = geometry.getCenter();
-
-    //     var lnglat = [];
-    //     //for(var i =0;i<)
-    //     var points = [];
-
-    //     //获取坐标
-    //     if (typeSelect == "Circle") {
-    //       points = geometry.getCenter();
-    //       lnglat = ol.proj.transform(points, "EPSG:3857", "EPSG:4326");
-    //       //radius = circle.getRadius();
-    //       console.log(geometry.getRadius());
-    //       console.log(lnglat);
-    //     } else {
-    //       points = geometry.getCoordinates();
-    //       console.log(points);
-    //       for (var i = 0; i < points.length; i++) {
-    //         lnglat.push(ol.proj.transform(points[i], "EPSG:3857", "EPSG:4326"));
-    //       }
-    //     }
-
-    //     console.log(lnglat);
-    //     // console.log(geometry.getCoordinates());
-    //   });
-    // },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -932,16 +680,19 @@ export default {
   beforeMount() {}, //生命周期 - 挂载之前
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    // this.initmap(this.mapData[0]);
     this.init(this.mapData[0]);
-    // 482740.5626,3377273.7481,1055990.5626,3924273.7481
-    console.log(
-      gcoord.transform(
-        [482740.5626, 3377273.7481],
-        gcoord.EPSG3857,
-        gcoord.GCJ02
-      )
+    // '113.67426470134029', '113.67730349366221', '34.811014906789666', '34.81346642108534'
+    var a = gcoord.transform(
+      [113.67426470134029, 34.811014906789666],
+      gcoord.EPSG4326,
+      gcoord.EPSG3857
+    );
+    var b = gcoord.transform(
+      [113.67730349366221, 34.81346642108534],
+      gcoord.EPSG4326,
+      gcoord.EPSG3857
     );
+    console.log(a, b);
   },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后

src/pages/plantGuard/geoinfo/mars3d.vue

@@ -0,0 +1,294 @@
+<!--  -->
+<template>
+  <div class="">
+    <div id="mars3dContainer" class="mars3d-container"></div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      map: null,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    initmap() {
+      this.map = new mars3d.Map("mars3dContainer", {
+        scene: {
+          center: {
+            lat: 34.3699,
+            lng: 114.276536,
+            alt: 1000,
+            heading: 0,
+            pitch: -45,
+          },
+          scene3DOnly: false,
+          shadows: false,
+          removeDblClick: true,
+          sceneMode: 3,
+          showSun: true,
+          showMoon: true,
+          showSkyBox: true,
+          showSkyAtmosphere: true,
+          fog: true,
+          fxaa: true,
+          requestRenderMode: false,
+          globe: {
+            depthTestAgainstTerrain: false,
+            baseColor: "#546a53",
+            showGroundAtmosphere: true,
+            enableLighting: false,
+          },
+          cameraController: {
+            zoomFactor: 3,
+            minimumZoomDistance: 1,
+            maximumZoomDistance: 50000000,
+            enableRotate: true,
+            enableTranslate: true,
+            enableTilt: true,
+            enableZoom: true,
+            enableCollisionDetection: true,
+            minimumCollisionTerrainHeight: 15000,
+          },
+        },
+        control: {
+          baseLayerPicker: true, //basemaps底图切换按钮
+          homeButton: true, //视角复位按钮
+          sceneModePicker: true, //二三维切换按钮
+          navigationHelpButton: true, //帮助按钮
+          fullscreenButton: true, //全屏按钮
+        },
+        terrain: {
+          url: "http://data.mars3d.cn/terrain",
+          show: true,
+        },
+        basemaps: [
+          {
+            id: 10,
+            name: "地图底图",
+            type: "group",
+          },
+          {
+            id: 2021,
+            pid: 10,
+            name: "天地图影像",
+            icon: "http://mars3d.cn/img/basemaps/tdt_img.png",
+            type: "tdt",
+            layer: "img_d",
+            key: ["9ae78c51a0a28f06444d541148496e36"],
+            show: true,
+          },
+          {
+            pid: 10,
+            name: "天地图电子",
+            icon: "http://mars3d.cn/img/basemaps/tdt_vec.png",
+            type: "group",
+            layers: [
+              {
+                name: "底图",
+                type: "tdt",
+                layer: "vec_d",
+                key: ["9ae78c51a0a28f06444d541148496e36"],
+              },
+              {
+                name: "注记",
+                type: "tdt",
+                layer: "vec_z",
+                key: ["9ae78c51a0a28f06444d541148496e36"],
+              },
+            ],
+          },
+          {
+            pid: 10,
+            name: "高德影像",
+            type: "group",
+            icon: "http://mars3d.cn/img/basemaps/gaode_img.png",
+            layers: [
+              {
+                name: "底图",
+                type: "gaode",
+                layer: "img_d",
+              },
+              {
+                name: "注记",
+                type: "gaode",
+                layer: "img_z",
+              },
+            ],
+          },
+          {
+            pid: 10,
+            name: "高德电子",
+            type: "gaode",
+            icon: "http://mars3d.cn/img/basemaps/gaode_vec.png",
+            layer: "vec",
+          },
+          {
+            pid: 10,
+            name: "百度影像",
+            type: "group",
+            icon: "http://mars3d.cn/img/basemaps/bd-img.png",
+            layers: [
+              {
+                name: "底图",
+                type: "baidu",
+                layer: "img_d",
+              },
+              {
+                name: "注记",
+                type: "baidu",
+                layer: "img_z",
+              },
+            ],
+          },
+          {
+            pid: 10,
+            name: "百度电子",
+            icon: "http://mars3d.cn/img/basemaps/bd-vec.png",
+            type: "baidu",
+            layer: "vec",
+          },
+          {
+            pid: 10,
+            name: "腾讯影像",
+            icon: "http://mars3d.cn/img/basemaps/gaode_img.png",
+            type: "group",
+            layers: [
+              {
+                name: "底图",
+                type: "tencent",
+                layer: "img_d",
+              },
+              {
+                name: "注记",
+                type: "tencent",
+                layer: "img_z",
+              },
+            ],
+          },
+          {
+            pid: 10,
+            name: "腾讯电子",
+            icon: "http://mars3d.cn/img/basemaps/gaode_vec.png",
+            type: "tencent",
+            layer: "vec",
+          },
+          {
+            pid: 10,
+            name: "ArcGIS影像",
+            icon: "http://mars3d.cn/img/basemaps/esriWorldImagery.png",
+            type: "xyz",
+            url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+            enablePickFeatures: false,
+          },
+          {
+            pid: 10,
+            name: "微软影像",
+            icon: "http://mars3d.cn/img/basemaps/bingAerial.png",
+            type: "bing",
+            key: "AuKhM0WRkjhX8E4y1OM0TukYycaw_4Vh3eSfXONDf7OARls-WEB3K_Rfx89bWxof",
+            layer: "Aerial",
+          },
+          {
+            pid: 10,
+            name: "OSM地图",
+            type: "xyz",
+            icon: "http://mars3d.cn/img/basemaps/osm.png",
+            url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+            subdomains: "abc",
+          },
+          {
+            id: 2017,
+            pid: 10,
+            name: "蓝色底图",
+            icon: "http://mars3d.cn/img/basemaps/bd-c-midnight.png",
+            type: "xyz",
+            url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+            chinaCRS: "GCJ02",
+            enablePickFeatures: false,
+          },
+          {
+            pid: 10,
+            name: "黑色底图",
+            icon: "http://mars3d.cn/img/basemaps/bd-c-dark.png",
+            type: "tencent",
+            layer: "custom",
+            style: "4",
+          },
+          {
+            pid: 10,
+            name: "灰色底图",
+            icon: "http://mars3d.cn/img/basemaps/bd-c-grayscale.png",
+            type: "mapbox",
+            username: "marsgis",
+            styleId: "cki0a92b123qo1aluk0e5v7sb",
+            scaleFactor: true,
+          },
+          {
+            pid: 10,
+            name: "离线地图  (供参考)",
+            type: "xyz",
+            icon: "http://mars3d.cn/img/basemaps/mapboxSatellite.png",
+            url: "http://data.mars3d.cn/tile/googleImg/{z}/{x}/{y}.jpg",
+            minimumLevel: 1,
+            maximumLevel: 18,
+            minimumTerrainLevel: 1,
+            maximumTerrainLevel: 18,
+            rectangle: {
+              xmin: -180,
+              xmax: 180,
+              ymin: -85,
+              ymax: 85,
+            },
+          },
+          {
+            pid: 10,
+            name: "单张图片 (本地离线)",
+            icon: "http://mars3d.cn/img/basemaps/offline.png",
+            type: "image",
+            url: "//data.mars3d.cn/file/img/world/world.jpg",
+          },
+        ],
+      });
+    },
+    loadlayer() {
+      var layer = mars3d.LayerUtil.create({
+        type: "wmts",
+        url: "http://8.136.98.49:18080/geoserver/gwc/service/wmts",
+        layer: "yunfei:weishi",
+        style: "",
+        format: "image/png",
+        tileMatrixSetID: "EPSG:900999256",
+      });
+      this.map.addLayer(layer);
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+      this.initmap()
+      this.loadlayer()
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style>
+</style>

src/pages/plantGuard/geoinfo/three.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - loaders - OBJ MTL loader</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+		</style>
+	</head>
+
+	<body>
+
+		<script src="jszip-master/dist/jszip.js"></script>
+		<!-- <script src="https://cdn.bootcss.com/jszip/2.1.0/jszip.min.js"></script> -->
+		<script src="jszip-master/vendor/FileSaver.js"></script>
+        <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js"></script>
+		<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/MTLLoader.js"></script>
+		<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/OBJMTLLoader.js"></script>
+		<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/OrbitControls.js"></script>
+
+
+
+		<script>
+			console.log(THREE)
+			// const ZipFiles = []
+			
+			// JSZipUtils.getBinaryContent('https://cdn.meixuan3d.com.cn/AI/2020/8/19/zip/6972277f46c24ac5a184167c2d930c7c.zip', function(err, data) {
+			//     if(err) {
+			//         throw err; // or handle err
+			//     }
+			
+			//     JSZip.loadAsync(data).then(function (e) {
+			// 		console.error(e)
+			// 		for(let [i,j] of Object.entries(e.files)){
+			// 			console.log(j)
+						
+			// 			// e.file(j.name).async("string").then(function (data) {
+			// 			// 	ZipFiles.push(data)
+			// 			//   console.log(data)
+			// 			// });
+						
+			// 			// if (JSZip.support.uint8array) {
+			// 			//   zip.file("hello.txt").async("uint8array").then(function (data) {
+			// 			//     // 使用二进制数组存储文本内容
+			// 			//   });
+			// 			// }
+						
+			// 		}
+			//     });
+			// });
+			// let FN = ()=>{
+			// 	new Promise((RES,REJ)=>{
+			// 		RES({
+			// 			OBJ:
+			// 		})
+			// 	})
+			// }
+
+
+			var container, stats;
+			var camera, scene, renderer;
+			var mouseX = 0,
+				mouseY = 0;
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			init();
+			// animate();
+
+			function init() {
+				container = document.createElement('div');
+				document.body.appendChild(container);
+				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
+				camera.position.z = 1.5; //̹��40
+				scene = new THREE.Scene();
+				var light = new THREE.AmbientLight("#deebf7", 0.9); // soft white light
+				scene.add(light);
+				var onProgress = function(xhr) {
+					if (xhr.lengthComputable) {
+						var percentComplete = xhr.loaded / xhr.total * 100;
+						console.log(Math.round(percentComplete, 2) + '% downloaded');
+					}
+				};
+				var onError = function(xhr) {};
+				var loader = new THREE.OBJMTLLoader();
+				var textureLoader = new THREE.TextureLoader();
+				loader.load('https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/mesh.obj', 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/mesh.mtl', function(object) {
+					console.log(object)
+					object.position.y = -0;
+					object.scale.x = 4;
+					object.scale.y = 4;
+					object.scale.z = 4;
+					textureLoader.load('mesh.png', function(texture) {
+						object.children[0].material.map = texture;
+						object.children[1].material.map = texture;
+						object.children[0].material.needsUpdate = true;
+						object.children[1].material.needsUpdate = true;
+						scene.add(object);
+					})
+					var start = new Date().getTime(),
+						delta;
+					(function anime() {
+						delta = new Date().getTime() - start;
+						object.rotation.y = delta / 1000;
+						renderer.render(scene, camera);
+						// requestAnimationFrame(anime);
+						return
+					})();
+				}, onProgress, onError);
+				
+				
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio(window.devicePixelRatio);
+				renderer.setSize(window.innerWidth, window.innerHeight);
+				container.appendChild(renderer.domElement);
+				window.addEventListener('resize', onWindowResize, false);
+				var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
+				controls.addEventListener('change', render); //监听鼠标、键盘事件
+			}
+
+			function onWindowResize() {
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize(window.innerWidth, window.innerHeight);
+			}
+
+			function animate() {
+				requestAnimationFrame(animate);
+				render();
+			}
+
+			function render() {
+				camera.lookAt(scene.position);
+				renderer.render(scene, camera);
+			}
+			setTimeout(()=>{
+				render()
+			},1000)
+		</script>
+
+	</body>
+</html>

src/pages/plantGuard/waterPrice/icmanage.vue

@@ -41,24 +41,24 @@
         <el-table :data="userdata" stripe style="width: 100%">
           <el-table-column prop="city" label="所属城市" width="180">
           </el-table-column>
-          <el-table-column prop="iccid" label="卡号" width="180">
+          <el-table-column prop="card_id" label="卡号" width="180">
           </el-table-column>
           <el-table-column
-            prop="peasantname"
+            prop="user_name"
             label="农户名称"
             width="200px"
           ></el-table-column>
           <el-table-column
-            prop="usewateragg"
+            prop="water_use"
             label="累计用水"
           ></el-table-column>
           <el-table-column
-            prop="useelectricityagg"
+            prop="electric_use"
             label="累计用电"
           ></el-table-column>
-          <el-table-column prop="moneyagg" label="累计金额"></el-table-column>
+          <el-table-column prop="money_use" label="累计金额"></el-table-column>
           <el-table-column
-            prop="moneyresidue"
+            prop="balance"
             label="剩余金额"
           ></el-table-column>
           <el-table-column prop="uptime" label="更新时间" width="200px">
@@ -72,7 +72,12 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination background layout="prev, pager, next" :total="1000">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="totalnum"
+          @current-change="currentchange"
+        >
         </el-pagination>
       </div>
     </el-card>
@@ -114,72 +119,13 @@ export default {
         wellname: "",
         wellID: "",
       },
-      userdata: [
-        {
-          city: "河南省郑州市金水区", //所属城市
-          iccid: "88454515151", //ic卡id
-          peasantname: "李建国",
-          usewateragg: "50", //累计用水
-          useelectricityagg: "3000", //累计用电
-          moneyagg: "50", //累计金额
-          moneyresidue: "50", //剩余金额
-          uptime: "1636007408", //最新更新时间
-        },
-        {
-          city: "河南省郑州市金水区", //所属城市
-          iccid: "88454515151", //ic卡id
-          peasantname: "李建国",
-          usewateragg: "50", //累计用水
-          useelectricityagg: "3000", //累计用电
-          moneyagg: "50", //累计金额
-          moneyresidue: "50", //剩余金额
-          uptime: "1636007408", //最新更新时间
-        },
-        {
-          city: "河南省郑州市金水区", //所属城市
-          iccid: "88454515151", //ic卡id
-          peasantname: "李建国",
-          usewateragg: "50", //累计用水
-          useelectricityagg: "3000", //累计用电
-          moneyagg: "50", //累计金额
-          moneyresidue: "50", //剩余金额
-          uptime: "1636007408", //最新更新时间
-        },
-        {
-          city: "河南省郑州市金水区", //所属城市
-          iccid: "88454515151", //ic卡id
-          peasantname: "李建国",
-          usewateragg: "50", //累计用水
-          useelectricityagg: "3000", //累计用电
-          moneyagg: "50", //累计金额
-          moneyresidue: "50", //剩余金额
-          uptime: "1636007408", //最新更新时间
-        },
-        {
-          city: "河南省郑州市金水区", //所属城市
-          iccid: "88454515151", //ic卡id
-          peasantname: "李建国",
-          usewateragg: "50", //累计用水
-          useelectricityagg: "3000", //累计用电
-          moneyagg: "50", //累计金额
-          moneyresidue: "50", //剩余金额
-          uptime: "1636007408", //最新更新时间
-        },
-        {
-          city: "河南省郑州市金水区", //所属城市
-          iccid: "88454515151", //ic卡id
-          peasantname: "李建国",
-          usewateragg: "50", //累计用水
-          useelectricityagg: "3000", //累计用电
-          moneyagg: "50", //累计金额
-          moneyresidue: "50", //剩余金额
-          uptime: "1636007408", //最新更新时间
-        },
-      ],
+      userdata: [],
       formLabelAlign: {
         peasantname: "",
         city: "",
       },
+      totalnum: 10,
+      page: 1,
     };
   },
   //监听属性 类似于data概念
@@ -203,13 +149,33 @@ export default {
         this.formLabelAlign[key] = "";
       }
     },
+    // water_price.water_price.card_manage
+    getuserdatas() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=water_price.water_price.card_manage",
+        data: this.qs.stringify({
+          page: this.page,
+        }),
+      }).then((res) => {
+        this.userdata = res.data.data.list;
+        this.totalnum = res.data.data.nums;
+      });
+    },
+    currentchange(e) {
+      console.log(e);
+      this.pege = e;
+      this.getuserdatas();
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   beforeMount() {}, //生命周期 - 挂载之前
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.getuserdatas()
+  },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
@@ -284,7 +250,7 @@ export default {
     }
   }
 }
-/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
+/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #0195ff !important;
 }
 </style>

src/pages/plantGuard/waterPrice/peasantnorm.vue

@@ -40,26 +40,26 @@
         <el-table :data="userdata" stripe style="width: 100%">
           <el-table-column prop="city" label="所属城市" width="180">
           </el-table-column>
-          <el-table-column prop="username" label="农户名称" width="180">
+          <el-table-column prop="user_name" label="农户名称" width="180">
           </el-table-column>
-          <el-table-column prop="IC" label="卡号"></el-table-column>
+          <el-table-column prop="card_id" label="卡号"></el-table-column>
           <el-table-column
-            prop="irrigationarea"
+            prop="area"
             label="灌溉面积(亩)"
           ></el-table-column>
           <el-table-column
-            prop="averagequota"
+            prop="area_average"
             label="亩均定额(吨/亩)"
           ></el-table-column>
           <el-table-column
-            prop="wateryield"
+            prop="water"
             label="水量定额(吨)"
           ></el-table-column>
           <el-table-column
-            prop="usewater"
+            prop="water_use"
             label="已用水量(吨)"
           ></el-table-column>
-          <el-table-column prop="pricing" label="定价"></el-table-column>
+          <el-table-column prop="water_price" label="定价"></el-table-column>
           <el-table-column prop="uptime" label="更新时间">
             <template slot-scope="scope">{{
               (scope.row.uptime * 1000) | formatTime
@@ -79,7 +79,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination background layout="prev, pager, next" :total="1000">
+        <el-pagination background layout="prev, pager, next" :total="totalnum" @current-change="currentchange">
         </el-pagination>
       </div>
     </el-card>
@@ -91,7 +91,7 @@
           :model="formLabelAlign"
         >
           <el-form-item label="农户名称">
-            <el-input v-model="formLabelAlign.username"></el-input>
+            <el-input v-model="formLabelAlign.user_name"></el-input>
           </el-form-item>
           <el-form-item label="所属城市">
             <el-input v-model="formLabelAlign.city"></el-input>
@@ -100,20 +100,20 @@
             <el-input v-model="formLabelAlign.year"></el-input>
           </el-form-item>
           <el-form-item label="农户卡号">
-            <el-input v-model="formLabelAlign.IC"></el-input>
+            <el-input v-model="formLabelAlign.card_id"></el-input>
           </el-form-item>
           <el-form-item label="灌溉面积">
-            <el-input v-model="formLabelAlign.irrigationarea"></el-input>亩
+            <el-input v-model="formLabelAlign.area"></el-input>亩
           </el-form-item>
           <el-form-item label="亩均定额">
-            <el-input v-model="formLabelAlign.averagequota"></el-input>吨/亩
+            <el-input v-model="formLabelAlign.area_average"></el-input>吨/亩
           </el-form-item>
           <el-form-item label="水量配额">
-            <el-input v-model="formLabelAlign.wateryield"></el-input>吨
+            <el-input v-model="formLabelAlign.water"></el-input>吨
           </el-form-item>
           <el-form-item label="执行定价">
             <el-select
-              v-model="formLabelAlign.pricing"
+              v-model="formLabelAlign.water_price"
               placeholder="请选择执行定价"
             >
               <el-option
@@ -149,77 +149,16 @@ export default {
         username: "",
         annual: "",
       },
-      userdata: [
-        {
-          city: "郑州", //所属城市
-          username: "李建国", //用户名称
-          year: "2021", //年度
-          IC: "4841121211", //ic卡
-          irrigationarea: "100", //灌溉面积
-          averagequota: "30", //亩均定额
-          wateryield: "3000", //水量定额
-          usewater: "1580", //已用水
-          pricing: "一号水价", //定价
-          uptime: "1636007408",
-        },
-        {
-          city: "郑州", //所属城市
-          username: "李建国", //用户名称
-          year: "2021", //年度
-          IC: "4841121211", //ic卡
-          irrigationarea: "100", //灌溉面积
-          averagequota: "30", //亩均定额
-          wateryield: "3000", //水量定额
-          usewater: "1580", //已用水
-          pricing: "一号水价", //定价
-          uptime: "1636007408",
-        },
-        {
-          city: "郑州", //所属城市
-          username: "李建国", //用户名称
-          year: "2021", //年度
-          IC: "4841121211", //ic卡
-          irrigationarea: "100", //灌溉面积
-          averagequota: "30", //亩均定额
-          wateryield: "3000", //水量定额
-          usewater: "1580", //已用水
-          pricing: "一号水价", //定价
-          uptime: "1636007408",
-        },
-        {
-          city: "郑州", //所属城市
-          username: "李建国", //用户名称
-          year: "2021", //年度
-          IC: "4841121211", //ic卡
-          irrigationarea: "100", //灌溉面积
-          averagequota: "30", //亩均定额
-          wateryield: "3000", //水量定额
-          usewater: "1580", //已用水
-          pricing: "一号水价", //定价
-          uptime: "1636007408",
-        },
-        {
-          city: "郑州", //所属城市
-          username: "李建国", //用户名称
-          year: "2021", //年度
-          IC: "4841121211", //ic卡
-          irrigationarea: "100", //灌溉面积
-          averagequota: "30", //亩均定额
-          wateryield: "3000", //水量定额
-          usewater: "1580", //已用水
-          pricing: "一号水价", //定价
-          uptime: "1636007408",
-        },
-      ],
+      userdata: [],
       formLabelAlign: {
         city: "", //城市名
-        username: "", //用户数量
+        user_name: "", //用户名称
         year: "", //年度
-        irrigationarea: "", //灌溉面积
-        IC: "", //ic卡
-        averagequota: "", //亩均定额
-        wateryield: "", //水量定额
-        pricing: "",
+        area: "", //灌溉面积
+        card_id: "", //ic卡
+        area_average: "", //亩均定额
+        water: "", //水量定额
+        water_price: "",
       },
       pricing: [
         {
@@ -235,6 +174,8 @@ export default {
           value: "3",
         },
       ], //定价
+      page:1,
+      totalnum:10
     };
   },
   //监听属性 类似于data概念
@@ -249,13 +190,13 @@ export default {
     compilewater(item) {
       this.dialogVisible = !this.dialogVisible;
       this.formLabelAlign.city = item.city;
-      this.formLabelAlign.username = item.username;
+      this.formLabelAlign.user_name = item.user_name;
       this.formLabelAlign.year = item.year;
-      this.formLabelAlign.irrigationarea = item.irrigationarea;
-      this.formLabelAlign.IC = item.IC;
-      this.formLabelAlign.averagequota = item.averagequota;
-      this.formLabelAlign.wateryield = item.wateryield;
-      this.formLabelAlign.pricing = item.pricing;
+      this.formLabelAlign.area = item.area;
+      this.formLabelAlign.card_id = item.card_id;
+      this.formLabelAlign.area_average = item.area_average;
+      this.formLabelAlign.water = item.water;
+      this.formLabelAlign.water_price = item.water_price;
     },
     watersubmit() {
       //弹框确认键盘
@@ -264,13 +205,33 @@ export default {
         this.formLabelAlign[key] = "";
       }
     },
+    // water_price.water_price.user_price
+    getuserdatas(){
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=water_price.water_price.user_price",
+        data: this.qs.stringify({
+          page: this.page,
+        }),
+      }).then((res) => {
+        this.userdata = res.data.data.list
+        this.totalnum = res.data.data.nums
+      })
+    },
+    currentchange(e){
+      console.log(e)
+      this.pege = e
+      this.getuserdatas()
+    }
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   beforeMount() {}, //生命周期 - 挂载之前
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.getuserdatas()
+  },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前

src/pages/plantGuard/waterPrice/watercalculate.vue

@@ -24,35 +24,34 @@
       </div>
       <div class="peasantnorm_table">
         <el-table :data="userdata" stripe style="width: 100%">
-          <el-table-column prop="watername" label="名称" >
+          <el-table-column prop="water_name" label="名称"> </el-table-column>
+          <el-table-column prop="one_water" label="一阶水量(吨)">
           </el-table-column>
-          <el-table-column prop="firstwan" label="一阶水量(吨)" >
+          <el-table-column prop="one_water_price" label="一阶水价(元)">
           </el-table-column>
-          <el-table-column prop="firstwam" label="一阶水价(元)" >
+          <el-table-column prop="one_electric" label="一阶电量(度)">
           </el-table-column>
-          <el-table-column prop="firsteln" label="一阶电量(度)" >
+          <el-table-column prop="one_electric_price" label="一阶电价(元)">
           </el-table-column>
-          <el-table-column prop="firstelm" label="一阶电价(元)" >
+          <el-table-column prop="two_water" label="二阶水量(吨)">
           </el-table-column>
-          <el-table-column prop="secondwan" label="二阶水量(吨)" >
+          <el-table-column prop="two_water_price" label="二阶水价(元)">
           </el-table-column>
-          <el-table-column prop="secondwam" label="二阶水价(元)" >
+          <el-table-column prop="two_electric" label="二阶电量(度)">
           </el-table-column>
-          <el-table-column prop="secondeln" label="二阶电量(度)" >
+          <el-table-column prop="two_electric_price" label="二阶电价(元)">
           </el-table-column>
-          <el-table-column prop="secondelm" label="二阶电价(元)" >
+          <el-table-column prop="three_water" label="三阶水量(吨)">
           </el-table-column>
-          <el-table-column prop="thirdwan" label="三阶水量(吨)" >
+          <el-table-column prop="three_water_price" label="三阶水价(元)">
           </el-table-column>
-          <el-table-column prop="thirdwam" label="三阶水价(元)" >
+          <el-table-column prop="three_electric" label="三阶电量(度)">
           </el-table-column>
-          <el-table-column prop="thirdeln" label="三阶电量(度)" >
+          <el-table-column prop="three_electric_price" label="三阶电价(元)">
           </el-table-column>
-          <el-table-column prop="thirdelm" label="三阶电价(元)" >
-          </el-table-column>
-          <el-table-column prop="settime" label="更新时间" width="180px">
+          <el-table-column prop="uptime" label="更新时间" width="180px">
             <template slot-scope="scope">{{
-              (scope.row.settime * 1000) | formatTime
+              (scope.row.uptime * 1000) | formatTime
             }}</template>
           </el-table-column>
           <el-table-column label="操作">
@@ -61,7 +60,12 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination background layout="prev, pager, next" :total="1000">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="tonums"
+          @current-change="currentchange"
+        >
         </el-pagination>
       </div>
     </el-card>
@@ -73,40 +77,40 @@
           :model="formLabelAlign"
         >
           <el-form-item label="一阶水量">
-            <el-input v-model="formLabelAlign.firstwan"></el-input>吨；
+            <el-input v-model="formLabelAlign.one_water"></el-input>吨；
           </el-form-item>
           <el-form-item label="一阶水价">
-            <el-input v-model="formLabelAlign.firstwam"></el-input>元/吨；
+            <el-input v-model="formLabelAlign.one_water_price"></el-input>元/吨；
           </el-form-item>
           <el-form-item label="二阶水量">
-            <el-input v-model="formLabelAlign.secondwan"></el-input>吨；
+            <el-input v-model="formLabelAlign.two_water"></el-input>吨；
           </el-form-item>
           <el-form-item label="二阶水价">
-            <el-input v-model="formLabelAlign.secondwam"></el-input>元/吨；
+            <el-input v-model="formLabelAlign.two_water_price"></el-input>元/吨；
           </el-form-item>
           <el-form-item label="三阶水量">
-            <el-input v-model="formLabelAlign.thirdwan"></el-input>吨；
+            <el-input v-model="formLabelAlign.three_water"></el-input>吨；
           </el-form-item>
           <el-form-item label="三阶水价">
-            <el-input v-model="formLabelAlign.thirdwam"></el-input>元/吨；
+            <el-input v-model="formLabelAlign.three_water_price"></el-input>元/吨；
           </el-form-item>
           <el-form-item label="一阶电量">
-            <el-input v-model="formLabelAlign.firsteln"></el-input>度；
+            <el-input v-model="formLabelAlign.one_electric"></el-input>度；
           </el-form-item>
           <el-form-item label="一阶电价">
-            <el-input v-model="formLabelAlign.firstelm"></el-input>元/度；
+            <el-input v-model="formLabelAlign.one_electric_price"></el-input>元/度；
           </el-form-item>
           <el-form-item label="二阶电量">
-            <el-input v-model="formLabelAlign.secondeln"></el-input>度；
+            <el-input v-model="formLabelAlign.two_electric"></el-input>度；
           </el-form-item>
           <el-form-item label="二阶电价">
-            <el-input v-model="formLabelAlign.secondelm"></el-input>元/度；
+            <el-input v-model="formLabelAlign.two_electric_price"></el-input>元/度；
           </el-form-item>
           <el-form-item label="三阶电量">
-            <el-input v-model="formLabelAlign.thirdeln"></el-input>度；
+            <el-input v-model="formLabelAlign.three_electric"></el-input>度；
           </el-form-item>
           <el-form-item label="三阶电价">
-            <el-input v-model="formLabelAlign.thirdelm"></el-input>元/度；
+            <el-input v-model="formLabelAlign.three_electric_price"></el-input>元/度；
           </el-form-item>
         </el-form>
       </div>
@@ -131,118 +135,23 @@ export default {
       serterinfo: {
         watername: "",
       },
-      userdata: [
-        {
-          watername:"一号水价",//水价名称
-          firstwan:"10",//一阶水量(吨)
-          firstwam:"10",//一阶水价(元)
-          firsteln:"10",//一阶电量(度)
-          firstelm:"10",//一阶电价(元)
-          secondwan:"10",//二阶水量(吨)
-          secondwam:"10",//二阶水价(元)
-          secondeln:"10",//二阶电量(度)
-          secondelm:"10",//二阶电价(元)
-          thirdwan:"10",//三阶水量(吨)
-          thirdwam:"10",//三阶水价(元)
-          thirdeln:"10",//三阶电量(度)
-          thirdelm:"10",//三阶电价(元)
-          settime:"1636076311",//设置时间
-        },
-        {
-          watername:"一号水价",//水价名称
-          firstwan:"10",//一阶水量(吨)
-          firstwam:"10",//一阶水价(元)
-          firsteln:"10",//一阶电量(度)
-          firstelm:"10",//一阶电价(元)
-          secondwan:"10",//二阶水量(吨)
-          secondwam:"10",//二阶水价(元)
-          secondeln:"10",//二阶电量(度)
-          secondelm:"10",//二阶电价(元)
-          thirdwan:"10",//三阶水量(吨)
-          thirdwam:"10",//三阶水价(元)
-          thirdeln:"10",//三阶电量(度)
-          thirdelm:"10",//三阶电价(元)
-          settime:"1636076311",//设置时间
-        },
-        {
-          watername:"一号水价",//水价名称
-          firstwan:"10",//一阶水量(吨)
-          firstwam:"10",//一阶水价(元)
-          firsteln:"10",//一阶电量(度)
-          firstelm:"10",//一阶电价(元)
-          secondwan:"10",//二阶水量(吨)
-          secondwam:"10",//二阶水价(元)
-          secondeln:"10",//二阶电量(度)
-          secondelm:"10",//二阶电价(元)
-          thirdwan:"10",//三阶水量(吨)
-          thirdwam:"10",//三阶水价(元)
-          thirdeln:"10",//三阶电量(度)
-          thirdelm:"10",//三阶电价(元)
-          settime:"1636076311",//设置时间
-        },
-        {
-          watername:"一号水价",//水价名称
-          firstwan:"10",//一阶水量(吨)
-          firstwam:"10",//一阶水价(元)
-          firsteln:"10",//一阶电量(度)
-          firstelm:"10",//一阶电价(元)
-          secondwan:"10",//二阶水量(吨)
-          secondwam:"10",//二阶水价(元)
-          secondeln:"10",//二阶电量(度)
-          secondelm:"10",//二阶电价(元)
-          thirdwan:"10",//三阶水量(吨)
-          thirdwam:"10",//三阶水价(元)
-          thirdeln:"10",//三阶电量(度)
-          thirdelm:"10",//三阶电价(元)
-          settime:"1636076311",//设置时间
-        },
-        {
-          watername:"一号水价",//水价名称
-          firstwan:"10",//一阶水量(吨)
-          firstwam:"10",//一阶水价(元)
-          firsteln:"10",//一阶电量(度)
-          firstelm:"10",//一阶电价(元)
-          secondwan:"10",//二阶水量(吨)
-          secondwam:"10",//二阶水价(元)
-          secondeln:"10",//二阶电量(度)
-          secondelm:"10",//二阶电价(元)
-          thirdwan:"10",//三阶水量(吨)
-          thirdwam:"10",//三阶水价(元)
-          thirdeln:"10",//三阶电量(度)
-          thirdelm:"10",//三阶电价(元)
-          settime:"1636076311",//设置时间
-        },
-        {
-          watername:"一号水价",//水价名称
-          firstwan:"10",//一阶水量(吨)
-          firstwam:"10",//一阶水价(元)
-          firsteln:"10",//一阶电量(度)
-          firstelm:"10",//一阶电价(元)
-          secondwan:"10",//二阶水量(吨)
-          secondwam:"10",//二阶水价(元)
-          secondeln:"10",//二阶电量(度)
-          secondelm:"10",//二阶电价(元)
-          thirdwan:"10",//三阶水量(吨)
-          thirdwam:"10",//三阶水价(元)
-          thirdeln:"10",//三阶电量(度)
-          thirdelm:"10",//三阶电价(元)
-          settime:"1636076311",//设置时间
-        },
-      ],
+      userdata: [],
       formLabelAlign: {
-          firstwan:"",//一阶水量(吨)
-          firstwam:"",//一阶水价(元)
-          firsteln:"",//一阶电量(度)
-          firstelm:"",//一阶电价(元)
-          secondwan:"",//二阶水量(吨)
-          secondwam:"",//二阶水价(元)
-          secondeln:"",//二阶电量(度)
-          secondelm:"",//二阶电价(元)
-          thirdwan:"",//三阶水量(吨)
-          thirdwam:"",//三阶水价(元)
-          thirdeln:"",//三阶电量(度)
-          thirdelm:"",//三阶电价(元)
+        one_electric: "", //一阶电量(度)
+        one_electric_price: "", //一阶电价(元)
+        one_water: "", //一阶水量(吨)
+        one_water_price: "", //一阶水价(元)
+        three_electric: "", //三阶电量(度)
+        three_electric_price: "", //三阶电价(元)
+        three_water: "", //三阶水量(吨)
+        three_water_price: "", //三阶水价(元)
+        two_electric: "", //二阶电量(度)
+        two_electric_price: "", //二阶电价(元)
+        two_water: "", //二阶水量(吨)
+        two_water_price: "", //二阶水价(元)
       },
+      tonums: 10,
+      page: 1,
     };
   },
   //监听属性 类似于data概念
@@ -264,13 +173,35 @@ export default {
         this.formLabelAlign[key] = "";
       }
     },
+    getculatedata() {
+      //获取设备定位
+      // water_price.water_price.water_page
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=water_price.water_price.implement_pricing",
+        data: this.qs.stringify({
+          page: this.pege,
+        }),
+      }).then((res) => {
+        console.log(res.data.data);
+        this.tonums = res.data.data.nums;
+        this.userdata = res.data.data.pricing;
+      });
+    },
+    currentchange(e) {
+      console.log(e);
+      this.pege = e;
+      this.getculatedata();
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   beforeMount() {}, //生命周期 - 挂载之前
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.getculatedata();
+  },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
@@ -333,14 +264,14 @@ export default {
 .adddialog {
   width: 85%;
   margin: 0 auto;
-  /deep/.el-form{
+  /deep/.el-form {
     display: flex;
     flex-wrap: wrap;
   }
-  /deep/.el-input{
+  /deep/.el-input {
     width: 180px !important;
   }
-  /deep/.el-input__inner{
+  /deep/.el-input__inner {
     height: 30px;
   }
   /deep/.el-form-item {
@@ -354,7 +285,7 @@ export default {
     }
   }
 }
-/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
+/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #0195ff !important;
 }
 </style>

src/pages/plantGuard/waterPrice/waterindex.vue

@@ -54,22 +54,67 @@
               <p></p>
             </div>
             <div class="base_info">
-              <div
-                class="base_info_item"
-                v-for="(item, index) in baseinfodata"
-                :key="index"
-              >
-                <img
-                  :src="
-                    '../../../../static/images/waterindex/' +
-                    (index + 1) +
-                    '.png'
-                  "
-                  alt=""
-                />
+              <div class="base_info_item">
+                <img src="../../../../static/images/waterindex/1.png" alt="" />
+                <div class="base_info_item_p">
+                  <p>水井数目(口)</p>
+                  <p>{{ baseinfodata.well }}</p>
+                </div>
+              </div>
+              <div class="base_info_item">
+                <img src="../../../../static/images/waterindex/2.png" alt="" />
+                <div class="base_info_item_p">
+                  <p>使用电量(度)</p>
+                  <p>{{ baseinfodata.well }}</p>
+                </div>
+              </div>
+              <div class="base_info_item">
+                <img src="../../../../static/images/waterindex/3.png" alt="" />
+                <div class="base_info_item_p">
+                  <p>使用水量(方)</p>
+                  <p>{{ baseinfodata.water_use }}</p>
+                </div>
+              </div>
+              <div class="base_info_item">
+                <img src="../../../../static/images/waterindex/4.png" alt="" />
+                <div class="base_info_item_p">
+                  <p>用户数量(户)</p>
+                  <p>{{ baseinfodata.users_num }}</p>
+                </div>
+              </div>
+              <div class="base_info_item">
+                <img src="../../../../static/images/waterindex/5.png" alt="" />
+                <div class="base_info_item_p">
+                  <p>灌溉面积(亩)</p>
+                  <p>{{ baseinfodata.area }}</p>
+                </div>
+              </div>
+              <div class="base_info_item">
+                <img src="../../../../static/images/waterindex/6.png" alt="" />
+                <div class="base_info_item_p">
+                  <p>亩均水量(方)</p>
+                  <p>{{ baseinfodata.area_water }}</p>
+                </div>
+              </div>
+              <div class="base_info_item">
+                <img src="../../../../static/images/waterindex/7.png" alt="" />
+                <div class="base_info_item_p">
+                  <p>使用金额(元)</p>
+                  <p>{{ baseinfodata.money }}</p>
+                </div>
+              </div>
+              <div class="base_info_item">
+                <img src="../../../../static/images/waterindex/8.png" alt="" />
+                <div class="base_info_item_p">
+                  <p>亩均金额(元)</p>
+                  <p>{{ baseinfodata.area_money }}</p>
+                </div>
+              </div>
+              <div class="base_info_item">
+                <img src="../../../../static/images/waterindex/9.png" alt="" />
                 <div class="base_info_item_p">
-                  <p>{{ item.name }}</p>
-                  <p>{{ item.num }}</p>
+                  <p>计划水量(方)</p>
+                  <p>{{ baseinfodata.plant_water }}</p>
                 </div>
               </div>
             </div>
@@ -192,20 +237,7 @@ export default {
         type: "",
         model: "",
       },
-      markers: [
-        {
-          addr: [93.659071, 35.133279],
-          projectname: "21号井基地",
-        },
-        {
-          addr: [89.791884, 41.734331],
-          projectname: "22号井基地",
-        },
-        {
-          addr: [112.028212, 36.628648],
-          projectname: "23号井基地",
-        },
-      ],
+      markers: [],
       markersStatus: {
         iconOffset: [-70, -70],
         textOffset: [-35, 0],
@@ -241,60 +273,9 @@ export default {
       infoWindow: null,
       sidebarSJIndex: 0,
       drawer: false, //详细菜单
-      optionsvalue: "21号井基地",
-      options: [
-        {
-          value: "选项1",
-          label: "21号井基地",
-        },
-        {
-          value: "选项2",
-          label: "22号井基地",
-        },
-        {
-          value: "选项3",
-          label: "23号井基地",
-        }
-      ],
-      baseinfodata: [
-        //基地信息模拟数据
-        {
-          name: "水井数目(口)",
-          num: "6438",
-        },
-        {
-          name: "使用电量(度)",
-          num: "6438",
-        },
-        {
-          name: "使用水量(方)",
-          num: "6438",
-        },
-        {
-          name: "用户数量(户)",
-          num: "6438",
-        },
-        {
-          name: "灌溉面积(亩)",
-          num: "6438",
-        },
-        {
-          name: "亩均水量(方)",
-          num: "6438",
-        },
-        {
-          name: "使用金额(元)",
-          num: "6438",
-        },
-        {
-          name: "亩均金额(元)",
-          num: "6438",
-        },
-        {
-          name: "计划水量(方)",
-          num: "6438",
-        },
-      ],
+      optionsvalue: "",
+      options: [],
+      baseinfodata: [], //基地信息模拟数据
       hisoptions: [], //折线图
       hiscolumn: {
         //柱状图
@@ -317,7 +298,7 @@ export default {
           },
         },
         xAxis: {
-          categories: ["2017", "2018", "2019", "2020", "2021"],
+          categories: [],
           crosshair: true,
           lineColor: "#fff",
           labels: {
@@ -355,19 +336,19 @@ export default {
         series: [
           {
             name: "实际用水量(方)",
-            data: [49.9, 71.5, 106.4, 129.2, 144.0],
+            data: [],
           },
           {
             name: "计划用水量(方)",
-            data: [83.6, 78.8, 98.5, 93.4, 106.0],
+            data: [],
           },
           {
             name: "计划亩均(方)",
-            data: [48.9, 38.8, 39.3, 41.4, 47.0],
+            data: [],
           },
           {
             name: "实际亩均(方)",
-            data: [42.4, 33.2, 34.5, 39.7, 52.6],
+            data: [],
           },
         ],
         colors: ["#00e29d", "#6cbbff", "#ff3f3f", "#f44ef2"],
@@ -425,7 +406,7 @@ export default {
       });
       this.map.add(this.tileLayer1);
       this.map.add(this.tileLayer2);
-      this.getEquipList();
+      this.getbaselocation();
     },
     changeMapType(val) {
       if (val == 0) {
@@ -456,7 +437,7 @@ export default {
         AMap.event.addListener(this.marker, "click", (event) => {
           // this.switchWindow(item.addr, 1);
           this.drawer = true;
-          this.optionsvalue = item["projectname"]
+          this.optionsvalue = item["projectname"];
           console.log(event, item);
         });
         AMap.event.addListener(this.marker, "dblclick", (event) => {
@@ -591,72 +572,95 @@ export default {
         previous: 0,
       };
     },
-    statistical() {
-      this.ChartData = [
-        {
-          name: "总金额",
-          data: [],
-        },
-        {
-          name: "亩均水量",
-          data: [],
-        },
-        {
-          name: "总使用水量",
-          data: [],
+    refreshData() {
+      HighCharts.setOptions({
+        // 所有语言文字相关配置都设置在 lang 里
+        lang: {
+          resetZoom: "刷新",
+          resetZoomTitle: "重置缩放比例",
         },
-      ];
+      });
+    },
+    tobase() {
+      //跳转页面--基地详情
+      this.$router.push("/plantGuard/WaterIndexBase");
+    },
+    basechange(e) {
+      //基地切换
+      console.log(Number(e.slice(-1)) - 1);
+      this.map.setCenter(this.markers[Number(e.slice(-1)) - 1].addr);
+      this.map.setZoom(10);
+    },
+    getbaselocation() {
+      //获取设备定位
+      // water_price.water_price.water_page
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=water_price.water_price.water_page",
+      }).then((res) => {
+        console.log(res.data.data.ids);
+        var arr = res.data.data.ids;
+        this.optionsvalue = arr[0].device_name;
+        for (var i = 0; i < arr.length; i++) {
+          var obj = {
+            addr: [arr[i].lng, arr[i].lat],
+            projectname: arr[i].device_name,
+          };
+          this.markers.push(obj);
+          var obj2 = {
+            value: "选项" + (i + 1),
+            label: arr[i].device_name,
+          };
+          this.options.push(obj2);
+        }
+        // this.markers = res.data.data.ids
+        console.log(this.markers);
+        this.getEquipList();
+      });
+    },
+    // water_price.water_price.water_status 获取水井信息
+    getwellinfo() {
       this.$axios({
         method: "POST",
-        url: "/api/api_gateway?method=forecast.worm_lamp.device_polyline_data",
-        data: this.qs.stringify({
-          device_type_id: 3,
-          d_id: "819",
-          end_time: Math.floor(+new Date/1000),
-          start_time: Math.floor(+new Date/1000-24*60*60*1000),
-        }),
+        url: "/api/api_gateway?method=water_price.water_price.water_status",
       }).then((res) => {
-        this.dataLoading = false;
-        if (res.data.data.length) {
-          var data = res.data.data;
-          for (let item of data) {
-            this.ChartData[0].data.unshift([
-              item.addtime * 1000 + 8 * 3600000,
-              Number(item.temperature),
-            ]);
-            this.ChartData[1].data.unshift([
-              item.addtime * 1000 + 8 * 3600000,
-              Number(item.humidity),
-            ]);
-            this.ChartData[2].data.unshift([
-              item.addtime * 1000 + 8 * 3600000,
-              Number(item.others),
-            ]);
+        console.log(res);
+        this.baseinfodata = res.data.data.base;
+        var energydata = res.data.data.energy_data;
+        this.ChartData = [
+          {
+            name: "亩均水量",
+            data: [],
+          },
+        ];
+        if (energydata.length) {
+          var arr = [];
+          for (let item of energydata) {
+            // this.ChartData[0].data.push([
+            //   item.time * 1000,
+            //   Number(item.area_water),
+            // ]);
+            var obj = [item.time * 1000, Number(item.area_water)];
+            arr.push(obj);
           }
+          console.log(this.ChartData[0]);
+          this.ChartData[0].data = arr;
           this.hisoptions = this.optionFn(this.ChartData);
           // this.loadingInstance.close();
         } else {
           this.hisoptions = {};
         }
+        var yearplant = res.data.data.year_plant;
+        console.log(yearplant)
+        for(var i=0;i<yearplant.length; i++){
+          this.hiscolumn.xAxis.categories.push(yearplant[i].year)
+          this.hiscolumn.series[0].data.push(yearplant[i].area_water)
+          this.hiscolumn.series[1].data.push(yearplant[i].area_water_plant)
+          this.hiscolumn.series[2].data.push(yearplant[i].water_use)
+          this.hiscolumn.series[3].data.push(yearplant[i].water_use_plant)
+        }
       });
     },
-    refreshData() {
-      HighCharts.setOptions({
-        // 所有语言文字相关配置都设置在 lang 里
-        lang: {
-          resetZoom: "刷新",
-          resetZoomTitle: "重置缩放比例",
-        },
-      });
-    },
-    tobase() {//跳转页面--基地详情
-      this.$router.push("/plantGuard/WaterIndexBase");
-    },
-    basechange(e){//基地切换
-      console.log(Number(e.slice(-1))-1)
-      this.map.setCenter(this.markers[Number(e.slice(-1))-1].addr);
-        this.map.setZoom(10)
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -665,8 +669,8 @@ export default {
     this.initMap();
     console.log(this.markers);
     this.currentWindow = this.windows[0];
-    this.statistical();
     this.refreshData();
+    this.getwellinfo();
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

src/pages/plantGuard/waterPrice/waterindexbase.vue

@@ -39,39 +39,41 @@
             <div class="base_info">
               <div class="base_info_item">
                 <div class="base_info_item_L">设备号</div>
-                <div class="base_info_item_R">888888888</div>
+                <div class="base_info_item_R">{{ baseinfo.device_id }}</div>
               </div>
               <div class="base_info_item">
                 <div class="base_info_item_L">所属村庄</div>
-                <div class="base_info_item_R">李家村</div>
+                <div class="base_info_item_R">{{ baseinfo.addr }}</div>
               </div>
               <div class="base_info_item">
                 <div class="base_info_item_L">已用电量</div>
-                <div class="base_info_item_R">50度</div>
+                <div class="base_info_item_R">{{ baseinfo.electric_use }}</div>
               </div>
               <div class="base_info_item">
                 <div class="base_info_item_L">已用水量</div>
-                <div class="base_info_item_R">200方</div>
+                <div class="base_info_item_R">{{ baseinfo.water_use }}</div>
               </div>
               <div class="base_info_item">
                 <div class="base_info_item_L">关联卡数</div>
-                <div class="base_info_item_R">55张</div>
+                <div class="base_info_item_R">{{ baseinfo.card_num }}</div>
               </div>
               <div class="base_info_item">
                 <div class="base_info_item_L">建立日期</div>
-                <div class="base_info_item_R">2021-11-08 14:00:00</div>
+                <div class="base_info_item_R">
+                  {{ (baseinfo.creat_time * 1000) | formatTime }}
+                </div>
               </div>
               <div class="base_info_item">
                 <div class="base_info_item_L">用水额度</div>
-                <div class="base_info_item_R">5000吨</div>
+                <div class="base_info_item_R">{{ baseinfo.water_plant }}</div>
               </div>
               <div class="base_info_item">
                 <div class="base_info_item_L">剩余水量</div>
-                <div class="base_info_item_R">50吨</div>
+                <div class="base_info_item_R">{{ baseinfo.water_surplus }}</div>
               </div>
               <div class="base_info_item">
                 <div class="base_info_item_L">详细地址</div>
-                <div class="base_info_item_R">郑州市金水区瀚海北金</div>
+                <div class="base_info_item_R">{{ baseinfo.city }}</div>
               </div>
             </div>
           </div>
@@ -103,26 +105,27 @@
           </div>
           <div class="mapinfo_base_footer">
             <div class="base_body_title">
-              <p>消费记录<span>2021/11/9</span></p>
-              <img src="../../../../static/images/jiantou.png" alt="" />
+              <p>消费记录</p>
+              <img
+                src="../../../../static/images/jiantou.png"
+                alt=""
+                @click="dialogVisible = true"
+              />
             </div>
             <div class="base_line">
               <p></p>
             </div>
             <div class="base_footer_table">
               <el-table :data="basetabledata" style="width: 100%">
-                <el-table-column prop="statetime" label="开始时间">
-                  <!-- <template slot-scope="scope">{{
-                    (scope.row.statetime * 1000) | formatTime
-                  }}</template> -->
+                <el-table-column prop="uptimest" label="开始时间" width="110">
                 </el-table-column>
-                <el-table-column prop="iccid" label="卡号" width="120">
+                <el-table-column prop="card_id" label="卡号" width="110">
                 </el-table-column>
-                <el-table-column prop="useelectricity" label="使用电量">
+                <el-table-column prop="electric_use" label="使用电量">
                 </el-table-column>
-                <el-table-column prop="usewater" label="使用水量">
+                <el-table-column prop="water_use" label="使用水量">
                 </el-table-column>
-                <el-table-column prop="usemoney" label="使用金钱">
+                <el-table-column prop="use_money" label="使用金钱">
                 </el-table-column>
               </el-table>
             </div>
@@ -130,6 +133,38 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      title="消费记录详情"
+      :visible.sync="dialogVisible"
+      width="40%"
+      top="10%"
+      :modal="false"
+    >
+      <div class="eldialog">
+        <div class="base_footer_table">
+          <el-table :data="basetabledata" style="width: 100%">
+            <el-table-column prop="uptimest" label="开始时间" width="170">
+            </el-table-column>
+            <el-table-column prop="card_id" label="卡号" width="170">
+            </el-table-column>
+            <el-table-column prop="electric_use" label="使用电量">
+            </el-table-column>
+            <el-table-column prop="water_use" label="使用水量">
+            </el-table-column>
+            <el-table-column prop="use_money" label="使用金钱">
+            </el-table-column>
+          </el-table>
+        </div>
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="8"
+          :total="tonums"
+          @current-change="currentchange"
+        >
+        </el-pagination>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -155,65 +190,13 @@ export default {
       markerList: [],
       marker: null,
       drawer: true, //弹框
+      baseinfo: {},
       basetabledata: [
         //表格数据
-        {
-          statetime: "10:50", //开始时间
-          iccid: "88454515151", //卡号
-          usewater: "200方", //使用水量(方)
-          useelectricity: "200度", //使用电量(度)
-          usemoney: "200元", //使用金钱
-        },
-        {
-          statetime: "10:50", //开始时间
-          iccid: "88454515151", //卡号
-          usewater: "200方", //使用水量(方)
-          useelectricity: "200度", //使用电量(度)
-          usemoney: "200元", //使用金钱
-        },
-        {
-          statetime: "10:50", //开始时间
-          iccid: "88454515151", //卡号
-          usewater: "200方", //使用水量(方)
-          useelectricity: "200度", //使用电量(度)
-          usemoney: "200元", //使用金钱
-        },
-        {
-          statetime: "10:50", //开始时间
-          iccid: "88454515151", //卡号
-          usewater: "200方", //使用水量(方)
-          useelectricity: "200度", //使用电量(度)
-          usemoney: "200元", //使用金钱
-        },
-        {
-          statetime: "10:50", //开始时间
-          iccid: "88454515151", //卡号
-          usewater: "200方", //使用水量(方)
-          useelectricity: "200度", //使用电量(度)
-          usemoney: "200元", //使用金钱
-        },
-        {
-          statetime: "10:50", //开始时间
-          iccid: "88454515151", //卡号
-          usewater: "200方", //使用水量(方)
-          useelectricity: "200度", //使用电量(度)
-          usemoney: "200元", //使用金钱
-        },
-        {
-          statetime: "10:50", //开始时间
-          iccid: "88454515151", //卡号
-          usewater: "200方", //使用水量(方)
-          useelectricity: "200度", //使用电量(度)
-          usemoney: "200元", //使用金钱
-        },
-        {
-          statetime: "10:50", //开始时间
-          iccid: "88454515151", //卡号
-          usewater: "200方", //使用水量(方)
-          useelectricity: "200度", //使用电量(度)
-          usemoney: "200元", //使用金钱
-        },
       ],
+      dialogVisible: false,
+      tonums: 10,
+      pege: 1,
     };
   },
   //监听属性 类似于data概念
@@ -635,6 +618,110 @@ export default {
       //   this.infoWindow.open(this.map, item.lnglat);
       // }
     },
+    getbaselocation() {
+      //获取设备定位
+      // water_price.water_price.water_page
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=water_price.water_price.water_data",
+        data: this.qs.stringify({
+          page: this.pege,
+        }),
+      }).then((res) => {
+        console.log(res.data.data);
+        //设备详情*********************************************
+        this.baseinfo = res.data.data.info;
+        // 使用统计*********************************************
+        var useful = res.data.data.useful;
+        var obj = {
+          name: "总消费",
+          num: useful.all_use,
+          nums: useful.all_use,
+        };
+        var obj2 = {
+          name: "电力消费",
+          num: useful.electric_use,
+          nums: useful.all_use,
+        };
+        var obj3 = {
+          name: "水费消费",
+          num: useful.water_use,
+          nums: useful.all_use,
+        };
+        this.myChart = echarts.init(document.getElementById("progress"));
+        this.myChart2 = echarts.init(document.getElementById("progress2"));
+        this.myChart3 = echarts.init(document.getElementById("progress3"));
+        this.intcharts(this.myChart, obj);
+        this.intcharts(this.myChart2, obj2);
+        this.intcharts(this.myChart3, obj3);
+        window.addEventListener("resize", () => {
+          this.myChart.resize();
+          this.myChart2.resize();
+          this.myChart3.resize();
+        });
+        // 使用统计*********************************************
+        this.basetabledata = res.data.data.expense;
+        this.tonums = res.data.data.nums;
+        for (var i = 0; i < this.basetabledata.length; i++) {
+          var date = new Date(this.basetabledata[i].uptime * 1000);
+          var F = date.getFullYear();
+          F = (F + "").slice(2);
+          var M =
+            date.getMonth() + 1 < 10
+              ? "0" + (date.getMonth() + 1)
+              : date.getMonth() + 1;
+          var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+          var H =
+            date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+          var Mi =
+            date.getMinutes() < 10
+              ? "0" + date.getMinutes()
+              : date.getMinutes();
+          // console.log()
+          this.basetabledata[i].uptimest =
+            F + "-" + M + "-" + D + " " + H + ":" + Mi;
+        }
+      });
+    },
+    getbaselocation2() {
+      //获取设备定位
+      // water_price.water_price.water_page
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=water_price.water_price.water_data",
+        data: this.qs.stringify({
+          page: this.pege,
+        }),
+      }).then((res) => {
+        // 使用统计*********************************************
+        this.basetabledata = res.data.data.expense;
+        this.tonums = res.data.data.nums;
+        for (var i = 0; i < this.basetabledata.length; i++) {
+          var date = new Date(this.basetabledata[i].uptime * 1000);
+          var F = date.getFullYear();
+          F = (F + "").slice(2);
+          var M =
+            date.getMonth() + 1 < 10
+              ? "0" + (date.getMonth() + 1)
+              : date.getMonth() + 1;
+          var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+          var H =
+            date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+          var Mi =
+            date.getMinutes() < 10
+              ? "0" + date.getMinutes()
+              : date.getMinutes();
+          // console.log()
+          this.basetabledata[i].uptimest =
+            F + "-" + M + "-" + D + " " + H + ":" + Mi;
+        }
+      });
+    },
+    currentchange(e) {
+      console.log(e);
+      this.pege = e;
+      this.getbaselocation2();
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -643,32 +730,7 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.initMap();
-    var obj = {
-      name: "总消费",
-      num: "22358",
-      nums: "22358",
-    };
-    var obj2 = {
-      name: "电力消费",
-      num: "10061.1",
-      nums: "22358",
-    };
-    var obj3 = {
-      name: "水费消费",
-      num: "12296.9",
-      nums: "22358",
-    };
-    this.myChart = echarts.init(document.getElementById("progress"));
-    this.myChart2 = echarts.init(document.getElementById("progress2"));
-    this.myChart3 = echarts.init(document.getElementById("progress3"));
-    this.intcharts(this.myChart, obj);
-    this.intcharts(this.myChart2, obj2);
-    this.intcharts(this.myChart3, obj3);
-    window.addEventListener("resize", () => {
-      this.myChart.resize();
-      this.myChart2.resize();
-      this.myChart3.resize();
-    });
+    this.getbaselocation();
   },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
@@ -860,4 +922,56 @@ export default {
     }
   }
 }
+.eldialog {
+  .base_footer_table {
+    font-size: 10px;
+    /deep/.el-table {
+      font-size: 14px;
+      background-color: transparent;
+      /deep/.el-table__row {
+        height: 40px;
+        padding: 0;
+      }
+      tr {
+        background-color: transparent;
+      }
+      td,
+      th {
+        height: 30px;
+        padding: 0;
+        background-color: transparent;
+      }
+      td {
+        color: #e1ffff;
+      }
+      th {
+        color: #79ace1;
+        // background-color: rgb(24, 32, 55);
+      }
+    }
+    /deep/.el-table th.is-leaf,
+    /deep/.el-table td {
+      border: none;
+    }
+    /deep/.el-table--group::after,
+    /deep/.el-table--border::after,
+    /deep/.el-table::before {
+      background-color: transparent;
+    }
+  }
+}
+/deep/.el-dialog {
+  background-color: rgba(12, 20, 44, 0.8);
+}
+/deep/.el-dialog .el-dialog__header {
+  border-bottom: 1px solid #0c142c;
+  background: #0c142c;
+  .el-dialog__title {
+    color: #fff;
+  }
+}
+/deep/.el-dialog .el-dialog__body {
+  padding: 10px 20px 20px;
+  // background-color: rgba(12,20,44,0.1);
+}
 </style>

src/pages/plantGuard/waterPrice/wellsmanage.vue

@@ -39,39 +39,28 @@
       </div>
       <div class="peasantnorm_table">
         <el-table :data="userdata" stripe style="width: 100%">
-          <el-table-column prop="wellname" label="机井名称" width="180">
+          <el-table-column prop="well_name" label="机井名称" width="180">
           </el-table-column>
-          <el-table-column prop="wellid" label="机井ID" width="180">
+          <el-table-column prop="well_id" label="机井ID" width="180">
           </el-table-column>
           <el-table-column
             prop="city"
             label="所属城市"
             width="200px"
           ></el-table-column>
-          <el-table-column prop="lnglat" label="经纬度"></el-table-column>
-          <el-table-column prop="waterlevel" label="水位"></el-table-column>
+          <el-table-column prop="water_level" label="水位"></el-table-column>
           <el-table-column
-            prop="wateryield"
+            prop="water_num"
             label="水量定额(吨)"
           ></el-table-column>
           <el-table-column
-            prop="usewater"
+            prop="water_use"
             label="已用水量(吨)"
           ></el-table-column>
           <el-table-column
-            prop="useelectricity"
+            prop="electric_use"
             label="已用电量(度)"
           ></el-table-column>
-          <el-table-column prop="state" label="状态">
-            <template slot-scope="scope">
-              <span
-                :style="{
-                  color: scope.row.state == '在线' ? '#0195ff' : '#f00',
-                }"
-                >{{ scope.row.state }}</span
-              >
-            </template>
-          </el-table-column>
           <el-table-column prop="uptime" label="更新时间" width="200px">
             <template slot-scope="scope">{{
               (scope.row.uptime * 1000) | formatTime
@@ -91,7 +80,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination background layout="prev, pager, next" :total="1000">
+        <el-pagination background layout="prev, pager, next" :total="totalnum" @current-change="currentchange">
         </el-pagination>
       </div>
     </el-card>
@@ -105,9 +94,9 @@
           <el-form-item label="机井名称">
             <el-input v-model="formLabelAlign.wellname"></el-input>
           </el-form-item>
-          <el-form-item label="经纬度">
+          <!-- <el-form-item label="经纬度">
             <el-input v-model="formLabelAlign.lnglat"></el-input>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item label="所属城市">
             <el-input v-model="formLabelAlign.city"></el-input>
           </el-form-item>
@@ -140,70 +129,10 @@ export default {
         wellID: "",
       },
       userdata: [
-        {
-          wellname: "机井一号", //机井名称
-          wellid: "88454515151", //机井id
-          city: "河南省郑州市金水区", //所属城市
-          lnglat: "236.25,12.5484", //经纬度
-          waterlevel: "100", //水位
-          wateryield: "3000", //水量配额
-          usewater: "50", //已用水
-          useelectricity: "50", //已用电
-          state: "在线", //状态
-          uptime: "1636007408", //最新更新时间
-        },
-        {
-          wellname: "机井一号", //机井名称
-          wellid: "88454515151", //机井id
-          city: "河南省郑州市金水区", //所属城市
-          lnglat: "236.25,12.5484", //经纬度
-          waterlevel: "100", //水位
-          wateryield: "3000", //水量配额
-          usewater: "50", //已用水
-          useelectricity: "50", //已用电
-          state: "在线", //状态
-          uptime: "1636007408", //最新更新时间
-        },
-        {
-          wellname: "机井一号", //机井名称
-          wellid: "88454515151", //机井id
-          city: "河南省郑州市金水区", //所属城市
-          lnglat: "236.25,12.5484", //经纬度
-          waterlevel: "100", //水位
-          wateryield: "3000", //水量配额
-          usewater: "50", //已用水
-          useelectricity: "50", //已用电
-          state: "在线", //状态
-          uptime: "1636007408", //最新更新时间
-        },
-        {
-          wellname: "机井一号", //机井名称
-          wellid: "88454515151", //机井id
-          city: "河南省郑州市金水区", //所属城市
-          lnglat: "236.25,12.5484", //经纬度
-          waterlevel: "100", //水位
-          wateryield: "3000", //水量配额
-          usewater: "50", //已用水
-          useelectricity: "50", //已用电
-          state: "离线", //状态
-          uptime: "1636007408", //最新更新时间
-        },
-        {
-          wellname: "机井一号", //机井名称
-          wellid: "88454515151", //机井id
-          city: "河南省郑州市金水区", //所属城市
-          lnglat: "236.25,12.5484", //经纬度
-          waterlevel: "100", //水位
-          wateryield: "3000", //水量配额
-          usewater: "50", //已用水
-          useelectricity: "50", //已用电
-          state: "离线", //状态
-          uptime: "1636007408", //最新更新时间
-        },
       ],
       formLabelAlign: {
         wellname: "", //机井名称
-        lnglat: "", //经纬度
+        // lnglat: "", //经纬度
         city: "",
         wateryield: "", //水量配额
       },
@@ -221,6 +150,8 @@ export default {
           value: "3",
         },
       ], //定价
+      totalnum:10,
+      page:1
     };
   },
   //监听属性 类似于data概念
@@ -234,10 +165,10 @@ export default {
     },
     compilewater(item) {
       this.dialogVisible = !this.dialogVisible;
-      this.formLabelAlign.wellname = item.wellname;
-      this.formLabelAlign.lnglat = item.lnglat;
+      this.formLabelAlign.wellname = item.well_name;
+      // this.formLabelAlign.lnglat = item.lnglat;
       this.formLabelAlign.city = item.city;
-      this.formLabelAlign.wateryield = item.wateryield;
+      this.formLabelAlign.wateryield = item.water_num;
     },
     watersubmit() {
       //弹框确认键
@@ -246,13 +177,33 @@ export default {
         this.formLabelAlign[key] = "";
       }
     },
+    // water_price.water_price.well_manage
+    getuserdatas(){
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=water_price.water_price.well_manage",
+        data: this.qs.stringify({
+          page: this.page,
+        }),
+      }).then((res) => {
+        this.userdata = res.data.data.list
+        this.totalnum = res.data.data.nums
+      })
+    },
+    currentchange(e){
+      console.log(e)
+      this.pege = e
+      this.getuserdatas()
+    }
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   beforeMount() {}, //生命周期 - 挂载之前
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.getuserdatas()
+  },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前

src/router/index.js

@@ -68,11 +68,12 @@ const WarnPhoto = () => import('@/Pages/plantGuard/disasterWarn/warnPhoto') //
 const DisasterWarnList = () => import('@/Pages/plantGuard/disasterWarn/disasterWarnList') //灾害预警-预警历史记录
 const DisasterWarnSet = () => import('@/Pages/plantGuard/disasterWarn/disasterWarnSet') //灾害预警-预警历史记录
 
-//---------------------------------------农林植保----------------------------------------------------
+//---------------------------------------地理信息----------------------------------------------------
 const MapDisplay = () => import('@/Pages/plantGuard/geoinfo/map2') //测试地图
+// const MapDisplay = () => import('@/Pages/plantGuard/geoinfo/mars3d') //测试地图
 
-
-const RemoteSensing = () => import('@/Pages/geoservers/geoservers') 
+// const RemoteSensing = () => import('@/Pages/geoservers/geoservers') //geoserver
+const RemoteSensing = () => import('@/Pages/geoservers/geoservers2')//mars3d  
 
 Vue.use(Router)
 

src/util/http.js

@@ -3,11 +3,11 @@ import {DOMIN} from './server.js'
 import Vue from 'vue'
 Vue.prototype.DOMIN = DOMIN
 
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
-axios.defaults.timeout = 30000;
-axios.defaults.baseURL = DOMIN 
-axios.defaults.withCredentials = true //axios请求时携带session
-axios.defaults.crossDomain = true 
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+// axios.defaults.timeout = 30000;
+// axios.defaults.baseURL = DOMIN 
+// axios.defaults.withCredentials = true //axios请求时携带session
+// axios.defaults.crossDomain = true 
 
 // axios请求前的拦截
 axios.interceptors.request.use(req => {