2023年2月24日17:58:49 更新

public/gd-sdk/gd.base.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("GD",[],t):"object"==typeof exports?exports.GD=t():e.GD=t()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";n.r(t);var r=["version","accessToken","baseUrl","author","init","ready","use","mixin","Namespace","Initialized"];var i={version:"1.0.0",accessToken:"",baseUrl:"./gd-sdk/resources/",author:"liuce",Namespace:{},Initialized:!1};!function(e){e.mixin=function(t){for(var n in t)r.indexOf(n)<0&&(e[n]=t[n]);return this}}(i),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=[];return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}(i),i.init=function(e){e&&e()},i.cesiumLoad=function(e){i.Namespace.Cesium=e};t.default=i}]).default}));

src/assets/text/font.css

@@ -0,0 +1,56 @@
+@font-face {  
+
+    font-family: 'AlimamaShuHeiTi-Bold';
+
+    src: url('./AlimamaShuHeiTi-Bold.ttf');
+
+    font-weight: normal;  
+
+    font-style: normal;  
+
+  }
+  @font-face {  
+
+    font-family: 'PingFang SC Regular';
+
+    src: url('./PingFang SC Regular.ttf');
+
+    font-weight: normal;  
+
+    font-style: normal;  
+
+  }
+  @font-face {  
+
+    font-family: 'PingFang-SC-Semibold';
+
+    src: url('./PingFang-SC-Semibold.otf');
+
+    font-weight: normal;  
+
+    font-style: normal;  
+
+  }
+  
+  @font-face {  
+
+    font-family: 'DINAlternate-bold';
+
+    src: url('./DINAlternate-bold.otf');
+
+    font-weight: normal;  
+
+    font-style: normal;  
+
+  }
+  @font-face {  
+
+    font-family: 'PingFang Medium';
+
+    src: url('./PingFang Medium_downcc.otf');
+
+    font-weight: normal;  
+
+    font-style: normal;  
+
+  }

src/axios/api.js

@@ -30,6 +30,17 @@ export const api ={
 	landList:(param)=>{
 		return request('POST', '/api/land/list', param)
 	},
-	
+	soil_stat:(param)=>{
+		return request('POST', '/api/land/soil_stat', param)
+	},
+	soil_cutline:()=>{
+		return request('POST', '/api/land/soil_cutline', "{}")
+	},
+	estimate_stat:(param)=>{
+		return request('POST', '/api/land/estimate_stat', param)
+	},
+	crop_cutline:()=>{
+		return request('POST', '/api/land/crop_cutline', '{}')
+	},
 }
 export default api

src/components/TimeAxis/index.vue

@@ -26,25 +26,6 @@ export default {
     props:['currentLaber'],
     watch:{
         currentLaber(newVal, oldVal) {
-            // if(newVal == '产量预测' || newVal == '种植类型'){
-            //     this.isShowTimeAxis =true;
-            //     if(this.timelin){
-            //         this.timelin.clear()
-            //         this.timelin= null;
-            //         document.getElementById('timelin').innerHTML =  ''
-            //     }
-            //     // setTimeout(() => {
-            //     //     console.log(document.getElementById('timelin').clientWidth);
-            //     //     this.setEcharts(document.getElementById('timelin').clientWidth)
-            //     //     this.setTimeLine()
-            //     // }, 1000);
-            // }else{
-            //     this.isShowTimeAxis =false;
-            //     if(this.timelin){
-            //         this.timelin.clear()
-            //         this.timelin= null;
-            //     }
-            // }
         },
 
     },

src/components/cesuimMap/index.vue

@@ -12,7 +12,7 @@
         <div class="lp-title"><span class="s">地块信息</span></div>
         <div class="lp-context">
           <el-table
-            class="oneMap"
+            class="plotDataTable"
             :data="plotData"
             style="height: 100%;background-color: #00000000"
             :show-header = 'false'
@@ -29,17 +29,27 @@
         </div>
       </div>
     </div>
-    <toolbar v-if="viewerCreated" @triggerMapCpt="triggerMapMethods"></toolbar>
-    <toolparPosition v-if="viewerCreated"></toolparPosition>
+    <toolbar v-if="viewerCreated" v-show="showToolbar" @triggerMapCpt="triggerMapMethods"></toolbar>
+    <div class="main-left">
+      <div class="main-left-img">
+
+      </div>
+    </div>
+    <div class="main-right">
+      <div class="main-right-img">
+
+      </div>
+    </div>
   </div>
 </template>
 <script>
   import  toolbar from "@/components/toolbar/index.vue"
-  import toolparPosition from "@/components/toolparPosition/index.vue"
   import addMapJson from "./js/addMapJson"
   import LaserPolylineTrailLinkMaterialProperty from "./js/LaserPolylineTrailLinkMaterialProperty"
   import DynamicWallMaterialProperty from "./js/DynamicWallMaterialProperty"
   import PlotClickQuery from "@/components/cesuimMap/js/plotClickQuery";
+  import { CesiumFPSUtil } from '@/components/cesuimMap/js/cesiumFPSUtil'
+  let plotClick
   export default {
     data() {
       return {
@@ -50,7 +60,8 @@
         smart:null,
         landAreaStatus:[],
         plotData:[],
-        showPlotData: false
+        showPlotData: false,
+        showToolbar: true
       };
     },
     watch:{
@@ -62,9 +73,13 @@
               }
               if(newVal[0].length ==3){
                 this.addWms(newVal[0][2]);
+                plotClick && plotClick.activate() // 加载地块图层激活地块点击事件
+              } else {
+                plotClick && plotClick.deactivate()  //关闭地块图层点击事件
               }
               if(this.mapJson){
                 this.mapJson.clear()
+                // this.mapJson =null;
               }
               this.mapJson = new addMapJson(this,newVal)
             },
@@ -117,10 +132,35 @@
             immediate: true,
             deep: true
         },
+        '$store.state.getCFLegendList': {
+            handler(newVal, oldVal) {
+              if(this.smart){
+                  viewer.imageryLayers.remove(this.smart)
+                  this.smart= null;
+              }
+              this.landAreaStatus =[];
+              if(this.$store.state.localDistrict[0].length ==3){
+                  this.addWms(this.$store.state.localDistrict[0][2]);
+              }
+
+            },
+            immediate: true,
+            deep: true
+        },
+      '$store.state.getCropStat': {
+        handler(newVal, oldVal) {
+          if(this.$store.state.getCropStat && plotClick){
+            plotClick.activate()
+            plotClick.removeAll()
+            this.showToolbar = true
+          }
+        },
+        immediate: true,
+        deep: true
+      },
     },
     components: {
       toolbar,
-      toolparPosition,
     },
     computed: {},
     created() { },
@@ -148,30 +188,61 @@
               // skyAtmosphere: false,
               shouldAnimate: true,
               vrButton: false, // 双屏模式,默认不显示false
-              imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
-                  url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+webKey,
-                        layer: "tdtBasicLayer",
-                        style: "default",
-                        format: "image/jpeg",
-                        tileMatrixSetID: "GoogleMapsCompatible",
-                        show: true
-                })
+              imageryProvider: new Cesium.UrlTemplateImageryProvider({
+                url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=bbb5e5f7bc87d6036db9af06ffe8f133',
+                subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+                tilingScheme: new Cesium.WebMercatorTilingScheme(),
+                maximumLevel: 18
+              }),
+              // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
+              //   url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
+              // }),
+              contextOptions: {
+                webgl: {
+                  alpha: true,
+                }
+              },
             })
-            this.activatePlotClick()
+          viewer.scene.skyBox.show = false //关闭天空盒，否则会显示天空颜色
+          //背景透明
+          // viewer.scene.backgroundColor = new Cesium.Color(0.0, 1.0, 1.0, 0.0);
+
+          //关闭大气
+          viewer.scene.skyAtmosphere.show = false
+          //抗锯齿
+          viewer.scene.fxaa = true;
+          viewer.scene.postProcessStages.fxaa.enabled = true;
+          //清除月亮太阳
+          viewer.scene.moon.show = false
+          viewer.scene.sun.show = false
+            this.initPlotClick()
+            // this.activateFPS()
             this.viewerCreated = true
             if(this.$store.state.localDistrict[0].length ==3){
                 this.addWms(this.$store.state.localDistrict[0][2]);
               }
         },
-      activatePlotClick(){
-        let plotClick = new PlotClickQuery(viewer)
-        plotClick.plotClickEvent((data) =>{
-          console.log(data);
+      activateFPS(){
+        const fpsInfo = new CesiumFPSUtil(viewer)
+        let fpsPostEvent = function () {
+          fpsInfo.update()
+        }
+        viewer.scene.postRender.addEventListener(fpsPostEvent)
+      },
+      initPlotClick(){
+        plotClick = new PlotClickQuery(viewer,this)
+        plotClick.plotEnterEvent((data) =>{
           this.plotData = data
           this.showPlotData = true
         })
-        plotClick.clickNullEvent(() =>{
+        plotClick.plotOutEvent(() =>{
+          this.showPlotData = false
+        })
+        plotClick.plotClickEvent(() =>{
+          plotClick.deactivate()
+          this.$store.commit('setCropStat',false);
           this.showPlotData = false
+          this.showToolbar = false
         })
       },
         // 加载默认的cesium
@@ -204,7 +275,7 @@
         addWms(id){
           let currentMenu = this.$store.state.getCurrentMenu;
           let styles;
-
+          this.landAreaStatus= [];
           let CQL_FILTER ='town_id = '+id;
           if(currentMenu =='农业地块'){
             for(let i of this.$store.state.getLandAreaStatus){
@@ -235,7 +306,6 @@
 
                 }
             }
-            // console.log(this.$store.state.getCropAreaStat);
             if(this.landAreaStatus.length >0){
               CQL_FILTER +=' and ('
               for(let i =0;i<this.landAreaStatus.length;i++){
@@ -249,7 +319,32 @@
               return
             }
           }
+          if(currentMenu =='产量预测'){
+            styles ='leizhou_land_crop_type'
+            for(let i of this.$store.state.getCFLegendList){
+                if(i.open){
+                  this.landAreaStatus.push(i.type);
+
+                }
+            }
+            if(this.landAreaStatus.length >0){
+              CQL_FILTER +=' and ('
+              for(let i =0;i<this.landAreaStatus.length;i++){
+                CQL_FILTER +='crop_type='+"'"+this.landAreaStatus[i]+"'"
+                if(i !=this.landAreaStatus.length-1){
+                  CQL_FILTER += ' or '
+                }
+              }
+              CQL_FILTER +=')'
+            }else{
+              return
+            }
+          }
+          this.$store.commit('setCurrentPlotType',this.landAreaStatus);
+          console.log('currentMenu',currentMenu);
+          console.log('landAreaStatus',this.landAreaStatus)
           let smart = new Cesium.WebMapServiceImageryProvider({
+            // id:'leizhou_land',
             url : 'http://change.zylfsm.com/geoserver/wuhan/wms',
             layers : 'wuhan:leizhou_land',
             parameters : {
@@ -261,8 +356,7 @@
             }
           });
           this.smart =viewer.imageryLayers.addImageryProvider(smart);
-
-
+          this.smart.id = 'leizhou_land'
         },
     }
   };
@@ -303,17 +397,19 @@
 
 .bx-popup-ctn {
   position: absolute;
-  z-index: 999;
-  background: #01010112;
-  border-radius: 5px;
-  color: white;
-  border: 1px solid white;
+  z-index: 1;
+  background: linear-gradient(162deg, #FFE3AA 0%, #00FBFF 61%);
+  border-radius: 0;
+  color: black;
+  border: 1px solid #FFFFFF;
   cursor: pointer;
+  padding: 0 8px;
+  margin-top: -10px;
 }
 
 .bx-popup-tip-container {
   width: 40px;
-  height: 20px;
+  height: 40px;
   position: absolute;
   left: 50%;
   margin-left: -20px;
@@ -322,15 +418,11 @@
 }
 
 .bx-popup-tip {
-  width: 14px;
-  background: #fff;
-  height: 14px;
+  width: 34px;
+  height: 37px;
+  background-image: url('../../../public/images/mapPins.png');
   padding: 1px;
-  margin: -10px auto 0;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
+  margin: 0 auto 0;
 }
 
 .bx-popup-header-ctn {
@@ -352,12 +444,50 @@
   color: #fff;
   cursor: pointer;
 }
+.main-right-img{
+  /*position: relative;*/
+  background: url("./img/right.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  width: 50px;
+  height: 100vh;
+  left: 105px;
+}
+.main-right{
+  position: fixed;
+  /*width: 165px;*/
+  top: 0px;
+  height: 100vh;
+  right: 0px;
+  z-index: 1;
+  /*background-image: linear-gradient(to left , #2d5f6a66, #2d5f6aa1,#2d5f6a57,#0c192800);*/
+}
+.main-left-img{
+  background: url("./img/left.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  width: 50px;
+  height: 100vh;
+}
+.main-left{
+  position: fixed;
+  /*width: 165px;*/
+  top: 0px;
+  height: 100vh;
+  z-index: 1;
+  /*background-image: linear-gradient(to right , #2d5f6a66, #2d5f6aa1,#2d5f6a57,#0c192800);*/
+}
 </style>
 <style lang="scss" scoped>
+@font-face {
+  font-family: "UnidreamLED";
+  src: url(../../../public/css/mechanicalFont/UnidreamLED.eot); /***兼容ie9***/
+  src: url(../../../public/css/mechanicalFont/UnidreamLED.eot?#iefix) format("embedded-opentype"),
+    /***兼容ie6-ie8***/ url("../../../public/css/mechanicalFont/UnidreamLED.woff") format("woff"),
+  local("UnidreamLED"), url("../../../public/css/mechanicalFont/UnidreamLED.woff"); /***默认使用本地的***/
+}
 .plotDataContainer {
   position: absolute;
-  right: 20px;
-  top: 90px;
+  right: 25px;
+  top: 150px;
   margin: 10px;
   min-height: 100px;
   min-width: 300px;
@@ -401,4 +531,7 @@
 .lp-context{
   padding: 10px 0px;
 }
+.plotDataTable{
+  //font-family: "UnidreamLED";
+}
 </style>

src/components/cesuimMap/js/addMapJson.js

@@ -93,7 +93,7 @@ class addMapJson{
                                     material: Cesium.Color.fromBytes(230, 160, 60).withAlpha(0.7)
                                 }
                             })
-                       
+
 
                         }
                     }

src/components/cesuimMap/js/cesiumFPSUtil.js

@@ -0,0 +1,88 @@
+export class CesiumFPSUtil {
+  constructor(viewer) {
+    this.viewer = viewer
+    this._lastFpsSampleTime = getTimestamp();
+    this._lastMsSampleTime = getTimestamp();
+    this._fpsFrameCount = 0;
+    this._msFrameCount = 0;
+    this.init()
+    this.createDiv();
+  }
+
+  init() {
+    const parentDiv = (this.viewer && this.viewer.container) || document.body
+    const div = document.createElement('div')
+    div.className = 'fpsContainer'
+    div.id = 'fpsContainer'
+    div.style.cssText = `position: absolute;
+    bottom: 20px;
+    left: 140px;
+    font-size: 14px;
+    min-width: 200px;
+    z-index: 99;
+    padding: 10px 20px;
+    color:white;
+    background-color: rgba(0, 0, 0, 0.4);`
+    parentDiv.appendChild(div)
+  }
+
+  createDiv() {
+    const parent = document.getElementById('fpsContainer');
+    const fpsDiv = document.createElement('div');
+    fpsDiv.className = 'info-content';
+    this._fpsText = document.createElement('span');
+    this._fpsText.style.margin = '20px'
+    this._msText = document.createElement('span');
+    fpsDiv.append(this._fpsText);
+    fpsDiv.append(this._msText);
+    parent.append(fpsDiv);
+  }
+
+  update() {
+    let time = getTimestamp();
+    this._fpsFrameCount++;
+    let updateDisplay = true;
+    let fpsElapsedTime = time - this._lastFpsSampleTime;
+    if (fpsElapsedTime > 1000) {
+      var fps = 'N/A';
+      if (updateDisplay) {
+        fps = ((this._fpsFrameCount * 1000) / fpsElapsedTime) | 0;
+      }
+
+      this._fpsText.innerText = fps + ' FPS';
+      this._lastFpsSampleTime = time;
+      this._fpsFrameCount = 0;
+    }
+    this._msFrameCount++;
+    let msElapsedTime = time - this._lastMsSampleTime;
+    if (msElapsedTime > 200) {
+      let ms = 'N/A';
+      if (updateDisplay) {
+        ms = (msElapsedTime / this._msFrameCount).toFixed(2);
+      }
+
+      this._msText.innerText = ms + ' MS';
+      this._lastMsSampleTime = time;
+      this._msFrameCount = 0;
+    }
+  }
+}
+
+function getTimestamp() {
+  var getTime;
+
+  if (
+    typeof performance !== 'undefined' &&
+    typeof performance.now === 'function' &&
+    isFinite(performance.now())
+  ) {
+    getTime = function () {
+      return performance.now();
+    };
+  } else {
+    getTime = function () {
+      return Date.now();
+    };
+  }
+  return getTime();
+}

src/components/cesuimMap/js/plotClickQuery.js

@@ -5,70 +5,349 @@
  */
 
 class PlotClickQuery {
-  constructor(viewer) {
+  //鼠标拾取Features属性Promise队列
+  queryQueue = []
+  //标志是否正在处理队列中的请求
+  running = false
+  //当前城镇id
+  currentTown_id = ''
+  currentMenu = ''
+  currentPlotTypeAll = []
+  currentPlotType = null
+  currentCropType = null
+  //鼠标事件激活状态
+  isActivate = false
+  //选中地块轮廓线
+  plotOutLine = null
+  //选中地块轮廓线坐标顶点数组
+  plotOutLinePosition = []
+  // entity管理器
+  _layer = null
+  // model管理器
+  primitiveCollection = null
+  constructor(viewer,_th) {
     this.viewer = viewer
+    this._th = _th
     this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
+    this.primitiveCollection = this.viewer.scene.primitives.add(
+      new Cesium.PrimitiveCollection()
+    );
+  }
+
+  //激活鼠标事件
+  activate(){
+    if (this.isActivate) return
+    // 鼠标移动过地块查询属性事件
+    this.handler.setInputAction((e) => {
+      // let pickedObject = viewer.scene.pick(e.endPosition);
+      // console.log('pickedObject',pickedObject);
+      // let pickRay = viewer.camera.getPickRay(e.endPosition);
+      // let pickPromise = await viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
+      // console.log('rayPick',rayPick);
+      console.log('移动坐标',e.endPosition);
+      this.addQueryQueue(e.endPosition)
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    //鼠标点击地块事件
     this.handler.setInputAction(async (e) => {
-      let pickedObject = viewer.scene.pick(e.position);
-      console.log('pickedObject',pickedObject);
       let pickRay = viewer.camera.getPickRay(e.position);
-      try {
-        this.clickfeaturesPromise = await viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
-        let queryPlot = 'leizhou_land'
-        if (this.clickfeaturesPromise && this.clickfeaturesPromise[0].data.id.indexOf(queryPlot) !== -1) {
-          console.log('clickfeature',this.clickfeaturesPromise);
-          let plotData = this.clickfeaturesPromise[0].properties
-          let poltType
-          switch (plotData.parcel_type){
-            case 0:
-              poltType = '其他'
-              break
-            case 1:
-              poltType = '水田'
-              break
-            case 2:
-              poltType = '水浇地'
-              break
-            case 3:
-              poltType = '旱地'
-              break
-            case 4:
-              poltType = '果园'
-              break
-          }
-          let property = [{
-            propertyId: '地块编码',
-            value: plotData.number
-          },{
-            propertyId: '地块类型',
-            value: poltType
-          },{
-            propertyId: '面积',
-            value: `${plotData.area_ha}公顷`
-          },{
-            propertyId: '高程',
-            value: `${plotData.elevation}米`
-          },{
-            propertyId: '坡度',
-            value: plotData.slope
-          },{
-            propertyId: '坡向',
-            value: plotData.aspect
-          }]
-          this.plotClickCallBack && this.plotClickCallBack(property)
-        }
-      } catch (error) {
-        this.clickfeaturesPromise = '没有选择到图层'
-        console.log(this.clickfeaturesPromise);
-        this.clickNullCallBack && this.clickNullCallBack()
+      this.clickfeaturesData = await viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
+      console.log('点击属性',this.clickfeaturesData);
+      this.currentTown_id = this._th.$store.state.localDistrict[0][2]
+      if (this.clickfeaturesData && this.clickfeaturesData[0].properties.town_id === this.currentTown_id) {
+        this.plotClickDrawEvent()
+        this._th.$store.commit('setCurrentPlotData',this.clickfeaturesData[0].properties);
+        this.plotClickCallBack && this.plotClickCallBack()
       }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.isActivate = true
+  }
+
+  //关闭鼠标事件
+  deactivate(){
+    if (!this.isActivate) return
+    console.log('关闭鼠标事件');
+    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    this.isActivate = false
+  }
+
+  //添加查询地块的坐标列表，限制每次查询一个坐标
+  addQueryQueue(position){
+    if (this.queryQueue.length > 0){
+      this.queryQueue.pop()
+    }
+    this.queryQueue.push(position)
+    if (this.queryQueue.length > 0 && !this.running) {
+      this.running = true
+      this.processMulti()
+    }
+  }
+  //根据等待查询的坐标查看对应地块数据
+  processMulti(){
+    const position = this.queryQueue.shift()
+    if(position) {
+      console.log('查询坐标',position);
+      let pickRay = viewer.camera.getPickRay(position);
+      this.clickfeaturesPromise = viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
+      Promise.resolve(this.clickfeaturesPromise).then(res=>{
+        if (!this.isActivate) return
+        this.featuresDataProcessing(res)
+        this.processMulti()
+      })
+    } else {
+      this.running = false
+    }
+  }
+
+  // 处理查询到的地块数据
+  featuresDataProcessing(data) {
+    // 条件过滤
+    if (!data) {
+      console.log('未拾取到地块数据');
+      return
+    }
+    this.currentTown_id = this._th.$store.state.localDistrict[0][2]
+    this.currentMenu = this._th.$store.state.getCurrentMenu;
+    this.currentPlotTypeAll = this._th.$store.state.getCurrentPlotType;
+    this.currentPlotType = data[0].properties.parcel_type;
+    this.currentCropType = data[0].properties.crop_type;
+    if (data[0].properties.town_id !== this.currentTown_id) {
+      this.enterfeaturesData = '地块数据不匹配'
+      console.log(this.enterfeaturesData);
+      this.plotOutCallBack && this.plotOutCallBack()
+      return;
+    }
+    let plotType, plotProperty
+    if (this.currentMenu === '农业地块') {
+      if (!this.currentPlotTypeAll.includes(this.currentPlotType)) {
+        this.enterfeaturesData = '地块数据与当前类型不匹配'
+        console.log(this.enterfeaturesData);
+        this.plotOutCallBack && this.plotOutCallBack()
+        return;
+      }
+      plotProperty = '地块类型'
+      switch (this.currentPlotType) {
+        case 0:
+          plotType = '其他'
+          break
+        case 1:
+          plotType = '水田'
+          break
+        case 2:
+          plotType = '水浇地'
+          break
+        case 3:
+          plotType = '旱地'
+          break
+        case 4:
+          plotType = '果园'
+          break
+      }
+    } else {
+      if (!this.currentPlotTypeAll.includes(this.currentCropType)) {
+        this.enterfeaturesData = '地块数据与当前类型不匹配'
+        console.log(this.enterfeaturesData);
+        this.plotOutCallBack && this.plotOutCallBack()
+        return
+      }
+      plotProperty = '作物类型'
+      switch (this.currentCropType) {
+        case 'corn':
+          plotType = '玉米'
+          break
+        case 'rice':
+          plotType = '水稻'
+          break
+        case 'other':
+          plotType = '其他'
+          break
+      }
+    }
+    // console.log('查询信息',data);
+    this.enterfeaturesData = data
+
+    let plotData = this.enterfeaturesData[0].properties
+    let property = [{
+      propertyId: '地块编码',
+      value: plotData.number
+    }, {
+      propertyId: plotProperty,
+      value: plotType
+    }, {
+      propertyId: '面积',
+      value: `${plotData.area_ha}公顷`
+    }, {
+      propertyId: '高程',
+      value: `${plotData.elevation}米`
+    }, {
+      propertyId: '坡度',
+      value: plotData.slope
+    }, {
+      propertyId: '坡向',
+      value: plotData.aspect
+    }]
+    // console.log('property',property)
+    this.plotEnterCallBack && this.plotEnterCallBack(property)
+
+  }
+  plotClickDrawEvent(){
+    this._layer = new Cesium.CustomDataSource('plotClick-layer')
+    this.viewer.dataSources.add(this._layer)
+    this.primitiveCollection = this.viewer.scene.primitives.add(
+      new Cesium.PrimitiveCollection()
+    );
+    let coordinates = this.clickfeaturesData[0].data.geometry.coordinates[0]
+    for (let i = 0, len = coordinates.length; i < len; i++) {
+      this.drawPlotOutLine(coordinates[i])
+    }
+    let polygon = coordinates[0]
+    let modelType = this.clickfeaturesData[0].properties.parcel_type
+    this.addModel(polygon,modelType)
+  }
+
+  drawPlotOutLine(position){
+    position = position.flat()
+    if (!this.plotOutLine){
+      this.plotOutLinePosition = position
+      this.plotOutLine = this._layer.entities.add({
+        polyline: {
+          positions:Cesium.Cartesian3.fromDegreesArray(position),
+          width: 5,
+          material: new Cesium.LaserPolylineTrailLinkMaterialProperty(
+            1000,
+            Cesium.Color.fromBytes(230, 160, 60).withAlpha(0.7)
+          )
+        }
+      })
+    } else {
+      this._layer.entities.add({
+        polyline: {
+          positions:Cesium.Cartesian3.fromDegreesArray(position),
+          width: 5,
+          material: new Cesium.LaserPolylineTrailLinkMaterialProperty(
+            1000,
+            Cesium.Color.fromBytes(230, 160, 60).withAlpha(0.7)
+          )
+        }
+      })
+    }
+    viewer.flyTo(this.plotOutLine,{
+      // offset: new Cesium.HeadingPitchRange(heading, pitch, range)
+    })
+  }
+
+  addModel(points, type){
+    // console.log('model',points, type);
+    let modelUrl,plotType,scale
+    switch (type){
+      case 0:
+        plotType = '其他'
+        modelUrl = require('../../../../public/model/plants04.glb')
+        scale = 8
+        break
+      case 1:
+        plotType = '水田'
+        modelUrl = require('../../../../public/model/plants05.glb')
+        scale = 8
+        break
+      case 2:
+        plotType = '水浇地'
+        modelUrl = require('../../../../public/model/plants05.glb')
+        scale = 8
+        break
+      case 3:
+        plotType = '旱地'
+        modelUrl = require('../../../../public/model/plants03.glb')
+        scale = 2
+        break
+      case 4:
+        plotType = '果园'
+        modelUrl = require('../../../../public/model/plants03.glb')
+        scale = 2
+        break
+    }
+
+    let positions = this.createEqualPoints(points)
+    let position
+    for (let i = 0, len = positions.length; i < len; i++) {
+      position = Cesium.Cartesian3.fromDegrees(positions[i][0], positions[i][1])
+      this.primitiveCollection.add(
+        Cesium.Model.fromGltf({
+          id: URL.createObjectURL(new Blob()).substr(-36),
+          modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
+          url: modelUrl,
+          minimumPixelSize: 64,
+          scale: scale
+        })
+      );
+    }
+    return this.primitiveCollection;
+  }
+
+  createEqualPoints(points){
+    let lngArray = []
+    let latArray = []
+    for (let i = 0, len = points.length; i < len; i++) {
+      lngArray.push(points[i][0])
+      latArray.push(points[i][1])
+    }
+    let lngMax = Math.max.apply(null, lngArray);
+    let lngMin = Math.min.apply(null, lngArray);
+    let latMax = Math.max.apply(null, latArray);
+    let latMin = Math.min.apply(null, latArray);
+    let lngSpacing = (lngMax - lngMin) / 4
+    let latSpacing = (latMax - latMin) / 4
+    let lng, lat, inPolygon
+    let positions = []  // 均分坐标点
+    for (let i = lngMin; i < lngMax; i = i + lngSpacing) {
+      lng = i
+      for (let j = latMin; j < latMax; j = j + latSpacing) {
+        lat = j
+        inPolygon = this.isInPolygon([lng, lat], points)
+        if (inPolygon === true) {
+          positions.push([lng, lat])
+        }
+      }
+    }
+    return positions
+  }
+
+  isInPolygon(point, polygon) {
+    let [x, y] = [point[0], point[1]]
+    let inside = false
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+      let [xi, yi] = [polygon[i][0], polygon[i][1]]
+      let [xj, yj] = [polygon[j][0], polygon[j][1]]
+      let intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)
+      if (intersect) inside = !inside
+    }
+    return inside
+  }
+
+  removeAll(){
+    if (this._layer) {
+      this.viewer.dataSources.remove(this._layer)
+      this._layer = null
+    }
+    if (this.primitiveCollection) {
+      this.primitiveCollection.removeAll()
+      this.primitiveCollection = null
+    }
+
+    this.plotOutLine = null
+  }
+
+  plotEnterEvent(callBack) {
+    this.plotEnterCallBack = callBack
+  }
+  plotOutEvent(callBack){
+    this.plotOutCallBack = callBack
   }
-  plotClickEvent(callBack) {
+  plotClickEvent(callBack){
     this.plotClickCallBack = callBack
   }
-  clickNullEvent(callBack){
-    this.clickNullCallBack = callBack
+  plotClickNullEvent(callBack){
+    this.plotClickNullCallBack = callBack
   }
 }
 

src/components/createProject/index.vue

@@ -9,14 +9,18 @@
 <template>
     <div class="project">
       <headers></headers>
-      <rightContext></rightContext>
+      
+      <rightContext v-show="$store.state.getCropStat"></rightContext>
       <cesuimMap></cesuimMap>
+      <landPopur v-show="!$store.state.getCropStat"></landPopur>
     </div>
   </template>
   <script>
   import  Headers  from '@/components/header/index.vue';
   import  rightContext  from '@/components/rightContext/index.vue';
   import  cesuimMap from '@/components/cesuimMap/index.vue';
+  import  landPopur from '@/components/landPopur/index.vue';
+
   export default {
     data() {
       return {
@@ -27,6 +31,7 @@
       Headers,
       rightContext,
       cesuimMap,
+      landPopur,
     },
     computed: {},
     created() { },

src/components/header/index.vue

@@ -9,7 +9,7 @@
     <div>
       <div class="main-header">
         <div class="title-cn"><span>农业产业数字孪生平台</span></div>
-        <div class="title-en"><span>DIGITAL TWIN PLATFORM FOR AGRICULTURAL INDUSTRY</span></div>
+        <div class="title-time"> {{ data }}</div>
       </div>
     </div>
   </template>
@@ -19,36 +19,54 @@
     },
     data() {
       return {
-
+         data:null,
+         timer:null,
       };
     },
     computed: {},
     created() { },
-    mounted() { },
+    mounted() {
+      this.getTime()
+     },
     methods: {
+      getTime(){
+        this.timer = setInterval(() => {
+          let data  = new Date()
+          data = data.toLocaleString( )
+          this.data=data.replace(/\//g,'-');
+        }, 1000);
+      },
+    },
+    destroyed() {
+
     }
+    
   };
   </script>
-  <style scoped>
+  <style scoped >
+  .title-time{
+    position: absolute;
+    left: 45px;
+    font-family:'PingFang SC Regular';
+    cursor: pointer;
+    
+  }
   .title-cn{
     font-size: 29px;
     top: 10px;
     position: relative;
-  }
-  .title-en{
-    font-size: 10px;
-    position: relative;
-    top: 10px;
-    
+    font-family:'AlimamaShuHeiTi-Bold';
   }
   .main-header{
     position: absolute;
     width: 100vw;
-    height: 80px;
-    background: #044060;
+    height: 72px;
+    background: url('./img/header.png') no-repeat 0px 0px;
+    background-size:100% 100%;  
     color: white;
     text-align: center;
-    z-index: 1;
+
+    z-index: 2;
   }
   </style>
   

src/components/landPopur/img/clear.svg

@@ -0,0 +1 @@
+<svg t="1676603596201" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25190" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F55300" p-id="25191"></path><path d="M258.56 358.912l434.432 434.432a51.2 51.2 0 0 0 72.3968-72.3968L330.9568 286.5152A51.2 51.2 0 1 0 258.56 358.912z" fill="#F9F9F9" p-id="25192"></path><path d="M258.56 712.192l434.432-434.432a51.2 51.2 0 0 1 72.448 72.3968l-434.4832 434.432A51.2 51.2 0 1 1 258.56 712.192z" fill="#F9F9F9" p-id="25193"></path></svg>

src/components/landPopur/img/fangzi.svg

@@ -0,0 +1 @@
+<svg t="1676595482226" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3035" width="200" height="200"><path d="M550.9 390.8L340.5 559.5V780c0 23.2 22.7 42.1 50.7 42.1H745c28 0 50.7-18.8 50.7-42.1V559.5L585.4 390.8c-9.8-7.6-24.7-7.6-34.5 0z" fill="#E8CB3A" p-id="3036"></path><path d="M601.5 853.8H401.9V567.2c0-44.6 36.3-81 81-81h42c42.3 0 76.7 34.4 76.7 76.7v290.9z m-165.3-34.3h131V562.9c0-23.4-19-42.4-42.4-42.4h-42c-25.7 0-46.6 20.9-46.6 46.6v252.4zM801.1 345.9V207c0-14.8-12-26.8-26.8-26.8h-26.2c-16.4 0-29.7 13.3-29.7 29.7v65.9l82.7 70.1z" fill="#A53B24" p-id="3037"></path><path d="M149.6 552.7c-17.4 0-34.2-5.7-46.9-17.4-12.5-11.5-19.5-27.4-19.5-44.8 0-20.6 9.8-41.4 26.7-56.9l340.6-289.5c3.9-3.6 8.7-7.2 14-10.4 12.1-8.9 27-13.5 43.5-13 16.5-0.5 31.5 4.1 43.5 13 5.3 3.2 10.2 6.8 14.5 10.8l340.1 289.1c17 15.5 26.7 36.3 26.7 57 0 17.4-6.9 33.3-19.5 44.8-27.9 25.5-74.7 22.6-106.7-6.7L528 291.7c-11.6-9.8-28.3-9.8-39.9 0L208.9 529.1c-17.1 15.6-38.7 23.6-59.3 23.6zM506.1 155c-8.5 0-15.9 2.3-21.6 6.6l-1.7 1.1c-3.6 2.1-6.8 4.5-9.6 7.1L132.6 459.3c-9.4 8.6-15.1 20.2-15.1 31.2 0 5.4 1.4 13.2 8.3 19.4 14.4 13.2 42 10.1 60.4-6.7l279.7-237.8c24.4-20.8 59.9-20.8 84.3 0l279.3 237.4c18.8 17.2 46.5 20.2 60.9 7.1 6.9-6.3 8.3-14 8.3-19.4 0-11-5.6-22.4-15.4-31.4L543.4 170.2c-3.3-3-6.5-5.3-10.1-7.5l-1.7-1.1c-6-4.6-13.9-6.8-23.1-6.6h-2.4z" fill="#050505" p-id="3038"></path><path d="M738.2 853.5H277.9c-45.9 0-83.2-32.3-83.2-71.9V495.3L475 261.6c19.1-14.7 46.8-14.7 65.9 0l280.3 233.7v286.3c0.2 39.7-37.1 71.9-83 71.9zM229.1 511.4v270.3c0 20.7 21.9 37.6 48.8 37.6h460.3c26.9 0 48.8-16.9 48.8-37.6V511.4l-267.5-223c-6-4.6-16.7-4.7-23.3 0.2L229.1 511.4z" fill="#050505" p-id="3039"></path></svg>

src/components/landPopur/index.vue

@@ -0,0 +1,697 @@
+
+<!--
+ * @FileDescription:  创建项目页面
+ * @Author: wg
+ * @Date: 2022/12/28 17:34:26
+ * @LastEditors: wg
+ * @LastEditTime: 2022/12/28 17:34:26
+ -->
+ <template>
+   <div class="project">
+     <div class="project-context">
+       <div class="pc-con">
+         <div class="pc-header">
+           <span>地块信息</span>
+           <img src="./img/Union.png" alt="">
+         </div>
+
+         <div class="pc-basic-information">
+           <div class="pbi_title">
+             <span>基本信息</span>
+           </div>
+           <div>
+             <div class="pbi-list">
+               <div class="pbil-t">
+                 <i class="el-icon-discount"></i>
+                 <span>地块编号</span>
+               </div>
+               <div class="pbil-c">
+                 {{ landAttri.number }}
+               </div>
+             </div>
+             <div class="pbi-list">
+               <div class="pbil-t">
+                 <i class="el-icon-discount"></i>
+                 <span>地块类别</span>
+               </div>
+               <div class="pbil-c">
+                 {{ landAttri.cropTypeName }}
+               </div>
+
+             </div>
+             <div class="pbi-list">
+               <div class="pbil-t">
+                 <i class="el-icon-discount"></i>
+                 <span>地块面积</span>
+               </div>
+               <div class="pbil-c">
+                 {{ landAttri.area }}
+               </div>
+             </div>
+             <div class="pbi-list">
+               <div class="pbil-t">
+                 <i class="el-icon-discount"></i>
+                 <span>地块高程</span>
+               </div>
+               <div class="pbil-c">
+                 {{ landAttri.area_ha }}
+               </div>
+
+             </div>
+             <div class="pbi-list">
+               <div class="pbil-t">
+                 <i class="el-icon-discount"></i>
+                 <span>地块坡向</span>
+               </div>
+               <div class="pbil-c">
+                 一 一
+               </div>
+             </div>
+             <div class="pbi-list">
+               <div class="pbil-t">
+                 <i class="el-icon-discount"></i>
+                 <span>地块坡度</span>
+               </div>
+               <div class="pbil-c">
+                 一 一
+               </div>
+             </div>
+             <div class="pbi-list">
+               <div class="pbil-t">
+                 <i class="el-icon-discount"></i>
+                 <span>地块编码</span>
+               </div>
+               <div class="pbil-c">
+                 一 一
+               </div>
+             </div>
+             <div class="pbi-list">
+               <div class="pbil-t">
+                 <i class="el-icon-discount"></i>
+                 <span>利用类型</span>
+               </div>
+               <div class="pbil-c">
+                 {{ landAttri.parcelTypeName }}
+
+               </div>
+             </div>
+             <div class="pbi-list">
+               <div class="pbil-t">
+                 <i class="el-icon-discount"></i>
+                 <span>种植属性</span>
+               </div>
+               <div class="pbil-c">
+                 一 一
+               </div>
+             </div>
+           </div>
+
+         </div>
+         <div class="pc-title1">
+           <span>种植作物</span>
+           <h3>查看作物生长情况</h3>
+         </div>
+         <div class="pct-c">
+           <div class="pct-picture">
+             暂无图片
+           </div>
+           <div class="pct-list">
+             <div class="pct-t">- -</div>
+             <div class="pct-z"><span>长势：- -</span></div>
+             <div class="pct-z"><span>更新时间：- -</span></div>
+           </div>
+         </div>
+         <div class="pc-title1">
+           <span>预估产量</span>
+         </div>
+         <div class="pcts-list" v-for="(item,index) in data" :key="index">
+           <img class="s-home" :src="imgSrc">
+           <div class="s-list">
+             <div class="s-title">{{ item.value }}</div>
+             <div class="s-lista">单产：{{ item.perUnitYield }} kg | 总产：{{ item.totalOutput }} kg</div>
+           </div>
+         </div>
+       </div>
+
+     </div>
+     <div class="project-right">
+       <div class="pc-cons">
+         <div class="lp-title">
+           <i class="YllePoint"></i>
+           <span class="s">土壤要素</span>
+           <i class="yellrece"></i>
+         </div>
+         <div class="landy">
+           <div class="landy-list">
+             <div class="imgContainer">
+               <img :src="imgsSrc[0]">
+             </div>
+             <div class="spanContainer">
+               <span class="span1">土壤酸碱度：</span>
+               <span class="span2">- -</span>
+             </div>
+           </div>
+           <div class="landy-list">
+             <div class="imgContainer">
+               <img :src="imgsSrc[1]">
+             </div>
+             <div class="spanContainer">
+               <span class="span1">土壤总磷：</span>
+               <span class="span2">- -</span>
+             </div>
+           </div>
+           <div class="landy-list">
+             <div class="imgContainer">
+               <img :src="imgsSrc[2]">
+             </div>
+             <div class="spanContainer">
+               <span class="span1">土壤有机物：</span>
+               <span class="span2">- -</span>
+             </div>
+           </div>
+           <div class="landy-list">
+             <div class="imgContainer">
+               <img :src="imgsSrc[3]">
+             </div>
+             <div class="spanContainer">
+               <span class="span1">土壤总氮：</span>
+               <span class="span2">- -</span>
+             </div>
+           </div>
+           <div class="landy-list">
+             <div class="imgContainer">
+               <img :src="imgsSrc[4]">
+             </div>
+             <div class="spanContainer">
+               <span class="span1">土壤碳：</span>
+               <span class="span2">- -</span>
+             </div>
+           </div>
+           <div class="landy-list">
+             <div class="imgContainer">
+               <img :src="imgsSrc[5]">
+             </div>
+             <div class="spanContainer">
+               <span class="span1">土壤总钾：</span>
+               <span class="span2">- -</span>
+             </div>
+           </div>
+
+         </div>
+         <div class="lp-title" style="margin-top: 10px;">
+           <i class="YllePoint"></i>
+           <span class="s">风险评估</span>
+           <i class="yellrece"></i>
+         </div>
+         <div class="fenx">
+           <div class="fenx-list">
+             <div class="fenx-left"><img src="./img/UnionLeft.png" alt=""></div>
+             <div class="fenx-title">适宜性得分</div>
+             <div class="line-s">
+               12
+             </div>
+             <div class="fenx-right"><img src="./img/UnionRight.png" alt=""></div>
+           </div>
+           <div class="fenx-list">
+             <div class="fenx-left"><img src="./img/UnionLeft.png" alt=""></div>
+             <div class="fenx-title">适宜性水平</div>
+             <div class="line-s">
+               12
+             </div>
+             <div class="fenx-right"><img src="./img/UnionRight.png" alt=""></div>
+           </div>
+           <div class="fenx-list">
+             <div class="fenx-left"><img src="./img/UnionLeft.png" alt=""></div>
+             <div class="fenx-title">病害风险得分</div>
+             <div class="line-s">
+               12
+             </div>
+             <div class="fenx-right"><img src="./img/UnionRight.png" alt=""></div>
+           </div>
+           <div class="fenx-list">
+             <div class="fenx-left"><img src="./img/UnionLeft.png" alt=""></div>
+             <div class="fenx-title">病害风险等级</div>
+             <div class="line-s">
+               12
+             </div>
+             <div class="fenx-right"><img src="./img/UnionRight.png" alt=""></div>
+           </div>
+         </div>
+       </div>
+     </div>
+     <div class="project-title">
+       <div class="item-c">
+         编号[{{ landAttri.number }}]
+       </div>
+       <i class="closeBtn el-icon-close" @click="clear"></i>
+     </div>
+   </div>
+ </template>
+<script>
+
+  export default {
+    data() {
+      return {
+          data:[{
+            value:'第一轮作物',
+            perUnitYield:0,
+            totalOutput:0,
+          },{
+            value:'第二轮作物',
+            perUnitYield:564.35,
+            totalOutput:945.32,
+          }],
+          imgSrc:require("./img/fangzi.svg"),
+          s:1212,
+          imgBackSrc: require("./img/Group 315.png"),
+          imgsSrc:[require("./img/icon／酸碱度.png"),
+            require("./img/icon／总磷.png"),
+            require("./img/icon／有机物.png"),
+            require("./img/icon／氮.png"),
+            require("./img/icon／碳.png"),
+            require("./img/icon／钾.png"),],
+          projectImg:require("./img/clear.svg"),
+          landAttri:{},
+      };
+    },
+    watch: {
+      '$store.state.getCurrentPlotData': {
+        handler(newVal, oldVal) {
+          this.landAttri = newVal;
+          if (this.landAttri.area_ha) {
+            let res = this.landAttri.area_ha.toString().split('.')
+            let len = res[1].toString().split('').length
+            console.log('len', len);
+            if (len == 2) return
+            this.landAttri.area_ha = this.landAttri.area_ha.toFixed(2)
+          }
+        },
+        immediate: true,
+        deep: true
+      },
+    },
+    components: {
+
+    },
+    computed: {},
+    created() { },
+    mounted() {
+
+    },
+    methods: {
+        clear(){
+            this.$store.commit('setCropStat',true);
+        }
+    }
+  };
+  </script>
+<style scoped>
+.item-c {
+  color: white;
+  font-size: 20px;
+  position: relative;
+  float: left;
+  margin-left: 30px;
+}
+
+.closeBtn {
+  color: #ffffffb8;
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+.item-i {
+  width: 28px;
+  margin: 6px 9px;
+  border: 3px solid #f55300;
+  padding: 1px;
+  text-align: center;
+  line-height: 2px;
+  float: left;
+  cursor: pointer;
+}
+
+.projectImg {
+  width: 25px;
+  height: 25px;
+}
+
+.project-title {
+  position: fixed;
+  right: calc(50vw - 180px);
+  width: 360px;
+  height: 45px;
+  top: 90px;
+  z-index: 2;
+  background: url("./img/Group275.png");
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.line-s {
+  margin: auto -6px auto auto;
+  font-size: 32px;
+  font-family: DIN Alternate-Bold, DIN Alternate;
+  font-weight: bold;
+  line-height: 28px;
+  background: linear-gradient(180deg, #00FBEC 0%, rgba(0, 251, 236, 0.5) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.line {
+  height: 1px;
+  /* background: wheat; */
+  background-image: linear-gradient(to right, #ffffff00, #eaa33a, #ffffff00);
+}
+
+.el-icon-c-scale-to-original {
+  font-size: 18px;
+  position: relative;
+  top: 2px;
+  padding: 0px 5px;
+  background-image: linear-gradient(to top, #e6a23c, 8px, #ffffff);
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.fenx-title {
+  margin: auto -5px;
+  color: white;
+  font-size: 16px;
+  font-family: PingFang SC-Regular, PingFang SC;
+}
+
+.fenx-list {
+  height: 80px;
+  width: 175px;
+  margin-top: 10px;
+  background: linear-gradient(180deg, rgba(0, 22, 35, 0.4) 100%, rgba(101, 124, 137, 0.05) 0%);
+  display: flex;
+  justify-content: space-between;
+}
+
+.fenx {
+  height: 190px;
+  margin: 10px 0px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.fenx-right {
+  display: flex;
+}
+
+.fenx-right img {
+  align-self: flex-end;
+}
+
+.span1 {
+  margin-left: 5px;
+}
+
+.span2 {
+
+}
+
+.imgContainer {
+  width: 36px;
+  height: 36px;
+  background: url("./img/Group 315.png");
+  display: flex;
+  align-items: center;
+}
+
+.landy-list img {
+  width: 16px;
+  height: 16px;
+  margin: auto;
+}
+
+.landy-list {
+  position: relative;
+  width: 165px;
+  height: 32px;
+  margin: 5px;
+  /*background: #ffffff45;*/
+  float: left;
+  display: flex;
+  align-items: center;
+}
+
+.landy {
+  height: 125px;
+  margin: 10px 0;
+}
+
+.project-right {
+  position: fixed;
+  right: 50px;
+  top: 90px;
+  width: 384px;
+  height: 452px;
+  background: rgba(255, 255, 255, 0.08);
+  z-index: 2;
+}
+
+.s-lista {
+  position: relative;
+  right: 100px;
+  width: 380px;
+  top: 29px;
+  font-size: 14px;
+}
+
+.s-title {
+  font-size: 20px;
+  position: relative;
+  right: 100px;
+  top: 10px;
+  color: #e8cb3a;
+  font-weight: bold;
+}
+
+.s-list {
+  position: relative;
+  height: 100%;
+  background: #ffffff00;
+  width: 250px;
+  left: 123px;
+}
+
+.s-home {
+  width: 115px;
+  height: 80px;
+  position: relative;
+  background: #ffffff42;
+  float: left;
+}
+
+.el-icon-s-home {
+  color: transparent;
+  font-size: 100px;
+  background: #ffffff5c;
+  background-image: linear-gradient(to top, #e6a23c, #fefefe);
+  -webkit-background-clip: text;
+}
+
+.pcts-list {
+  height: 80px;
+  /* background: white; */
+  margin: 10px 0px;
+  border: 1px solid #929292;
+  border-radius: 2px;
+
+}
+
+.pct-t {
+  color: #e6a23c;
+  position: relative;
+  top: 30px;
+  text-align: left;
+
+}
+
+.pct-z {
+  background-image: linear-gradient(to right, #ffffff29, #0c192800);
+  position: relative;
+  top: 40px;
+  margin: 9px 0px;
+}
+
+.pct-list {
+  position: relative;
+  width: 206px;
+  left: 10px;
+  float: left;
+}
+
+.pct-c {
+  height: 150px;
+}
+
+.pct-picture {
+  height: 100px;
+  width: 150px;
+  border: 1px solid;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 100px;
+  float: left;
+  margin: 20px 0px;
+}
+
+.el-icon-discount {
+  padding: 0px 5px;
+  background-image: linear-gradient(to top, #5f3b079c, #fefefe);
+  -webkit-background-clip: text;
+}
+
+.pbil-t {
+  background-image: linear-gradient(to top, #e6a23c, #e6a23cc9);
+  margin: 3px 0px;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: 16px;
+  font-weight: bold;
+
+}
+
+.pbi-list {
+  height: 60px;
+  width: 130px;
+  margin: 5px;
+  text-align: center;
+  float: left;
+  background-image: linear-gradient(to top, #ffffff3b, #0c192800);
+}
+
+.pbi_title span {
+  position: relative;
+  left: 10px;
+
+}
+
+.pbi_title {
+  height: 30px;
+  line-height: 30px;
+  background-image: linear-gradient(to right bottom, #ffffff7d, #0c192800);
+}
+
+.pc-basic-information {
+  height: 245px;
+  margin-top: 20px;
+  border: 1px solid #929292;
+}
+
+.pc-title1 h3 {
+  position: absolute;
+  right: 20px;
+  font-size: 10px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.pc-title1 span {
+  left: 10px;
+  position: relative;
+  float: left;
+}
+
+.pc-title1 {
+  position: relative;
+  width: 360px;
+  height: 36px;
+  background: linear-gradient(90deg, #00b8bf78 0%, rgb(0 134 140 / 4%) 100%);
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  border-top: 2px solid;
+  -o-border-image: linear-gradient(90deg, rgba(0, 245, 249, 1), rgba(126, 247, 253, 0)) 2 2;
+  border-image: linear-gradient(90deg, rgb(0 245 249), rgba(126, 247, 253, 0)) 2 2;
+}
+
+.pc-header {
+  display: flex;
+  justify-content: space-between;
+}
+.pc-header span{
+  width: 84px;
+  height: 22px;
+  font-size: 20px;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #FFFFFF;
+  line-height: 22px;
+  letter-spacing: 1px;
+}
+.pc-header img{
+  height: 6px;
+  width: 27px;
+}
+.project-context {
+  position: fixed;
+  height: 80vh;
+  width: 460px;
+  top: 80px;
+  left: 40px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.pc-con {
+  color: white;
+  margin: 10px;
+  /* border: 1px solid; */
+  height: calc(100vh - 120px);
+}
+
+.pc-cons {
+  color: white;
+  margin: 10px;
+  /* border: 1px solid; */
+  height: calc(100vh - 565px);
+}
+
+.YllePoint {
+  background: url(./img/ellipse.png) no-repeat 0px 0px;
+  background-size: 100% 100%;
+  width: 35px;
+  position: absolute;
+  height: 35px;
+
+}
+
+.lp-title {
+  position: relative;
+  width: 360px;
+  height: 36px;
+  background: linear-gradient(90deg, #00b8bf78 0%, rgb(0 134 140 / 4%) 100%);
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  border-top: 2px solid;
+  -o-border-image: linear-gradient(90deg, rgba(0, 245, 249, 1), rgba(126, 247, 253, 0)) 2 2;
+  border-image: linear-gradient(90deg, rgb(0 245 249), rgba(126, 247, 253, 0)) 2 2;
+}
+
+.yellrece {
+  background: url(./img/group4.png) no-repeat 0px 0px;
+  background-size: 100% 100%;
+  position: absolute;
+  right: 0px;
+  width: 36px;
+  height: 36px;
+}
+
+.lp-title .s {
+  position: absolute;
+  top: 6px;
+  color: white;
+  left: 40px;
+}
+
+.spanContainer {
+  background: linear-gradient(90deg, #00b8bf78 0%, rgb(0 134 140 / 4%) 100%);
+  padding: 3px;
+}
+</style>

src/components/legendAndCredibility/index.vue

@@ -73,7 +73,6 @@ export default {
       this.credibilityopen = !this.credibilityopen
     },
     openAllLegend() {
-      // console.log("sasa");
       for (let i of this.legendData) {
         i.open = this.lengthChecked
       }
@@ -190,15 +189,4 @@ export default {
   text-align: left;
   background-image: linear-gradient(to right, #5a9490, #0c192800);
 }
-</style>
-<style>
-.el-checkbox__inner {
-  background-color: #fff0;
-  border: 1px solid #e6a23c;
-}
-
-.el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: #fff0;
-  border-color: #e6a23c;
-}
 </style>

src/components/loadding/index.vue

@@ -0,0 +1,249 @@
+<template>
+  <!-- v-show="this.randomVal !=100" -->
+  <div class="loadding"  v-show="show">
+     <div id="fourth"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['loaddingShow'],
+  data() {
+    return {
+      option:null,
+      timer:null,
+      myChart:null,
+      randomVal:20,
+      show:true,
+    };
+  },
+  watch:{
+    loaddingShow(newVal){
+      this.randomVal =newVal
+      this.option.series[0].data[0].value = this.randomVal;//定时更新圆环1数值
+      this.option.series[0].data[1].value = 100 - this.randomVal;//圆环1无颜色填充区域占比
+      this.option.series[1].data[0].value = this.randomVal;//定时更新圆环2数值
+      this.option.series[1].data[1].value = 100 - this.randomVal;//圆环2无颜色填充区域占比
+      this.myChart.setOption(this.option, true);
+      setTimeout(() => {
+        this.show =false
+      }, 200);
+  
+    },
+    randomVal(newVal){
+      if(newVal ==100){
+        setTimeout(() => {
+          this.show =false
+        }, 200);
+      }
+    }
+  },
+  mounted() {
+    this.drawCharts();
+  },
+  methods: {
+    drawCharts() {
+      this.myChart = this.$echarts.init(document.getElementById("fourth"));
+      this.option =this.getOption();
+      this.myChart.setOption(this.option);
+      this.settInterval();
+    },
+    getRandomVal(){
+      var maxVal = 100;//圆环极大值
+      var randomVal = (Math.random() * 100).toFixed(2) - 0;
+      return ((randomVal / maxVal) * 100).toFixed(2);
+    },
+    /**
+     * @author wg
+     * @protected 设置时间
+     * @param
+     */
+    settInterval(){
+      let _this= this;
+      this.timer = setInterval(function () {//定时调用刷新
+        if(_this.randomVal >=90){
+            clearInterval(_this.timer) 
+            _this.timer =null;
+          }
+          let math = Math.random()
+          _this.randomVal += math.toFixed(1)*15
+          _this.option.series[0].data[0].value = _this.randomVal;//定时更新圆环1数值
+          _this.option.series[0].data[1].value = 100 - _this.randomVal;//圆环1无颜色填充区域占比
+          _this.option.series[1].data[0].value = _this.randomVal;//定时更新圆环2数值
+          _this.option.series[1].data[1].value = 100 - _this.randomVal;//圆环2无颜色填充区域占比
+          _this.myChart.setOption(_this.option, true);
+     
+      },1000);
+    },
+    /**
+     * @author wg
+     * @protected 得到echart参数
+     * @param
+     */
+    getOption(){
+      let _this = this;
+      var maxVal = 100;//圆环极大值
+      var textStyle={
+          "fontSize": 16,
+          "fontWeight": "bold",
+          "fontFamily":'华文细黑'
+      }
+      
+      var itemStyle={
+          "normal": {
+              "label": {
+                  "show": false
+              },
+              "labelLine": {
+                  "show": false
+              },
+              "color": 'rgba(0,0,0,0)',
+              "borderColor": 'rgba(0,0,0,0)',
+              "borderWidth": 0
+          },
+          "emphasis": {
+              "color": 'rgba(0,0,0,0)',
+              "borderColor": 'rgba(0,0,0,0)',
+              "borderWidth": 0
+          }
+      };
+      return  {
+          "title": {
+              "text": '数据加载中，请稍等。。。',
+              x: 'center',
+              y: '75%',
+              "textStyle": {
+                  "fontSize": 16,
+                  "color": 'rgba(255,255,255,1)'
+              }
+          },
+          "tooltip": {
+              "trigger": 'item',
+              "formatter": "{a} : {d}%"
+          },
+          "series": [
+            {
+              "name": '负载',
+              "center": ["50%","50%"],
+              "radius": ["28%","30%"],
+              "clockWise": false,
+              "hoverAnimation": false,
+              "type": "pie",
+              "data": [{
+                  "value": _this.randomVal,
+                  "label": {
+                      "normal": {
+                          "show": true,
+                          "formatter": '{d}%',
+                          "textStyle":textStyle,
+                          "position": "center",
+                          "color": 'rgba(255,255,255,1)'
+                      }
+                  },
+                  "labelLine": {
+                      "show": false
+                  },
+                  "itemStyle": {
+                      "normal": {
+                          "color": "#5886f0",
+                          "borderColor": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                              offset: 0,
+                              color: '#00a2ff'
+                          }, {
+                              offset: 1,
+                              color: '#70ffac'
+                          }]),
+                          "borderWidth": 15
+                      },
+                      "emphasis": {
+                          "color": "#5886f0",
+                          "borderColor": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                              offset: 0,
+                              color: '#85b6b2'
+                          }, {
+                              offset: 1,
+                              color: '#6d4f8d'
+                          }]),
+                          "borderWidth": 15
+                      }
+                  }
+              }, {
+                  "value": maxVal - _this.randomVal,
+                  "itemStyle": itemStyle
+              }]
+          }, {
+              "name": '负载',
+              "center": [ "50%","50%"],
+              "radius": ["40%","43%"],
+              "clockWise": false,
+              "hoverAnimation": false,
+              "type": "pie",
+              "data": [{
+                  "value": _this.randomVal,
+                  "label": {
+                      "normal": {
+                          "show": false,
+                          "formatter": '',
+                          "textStyle": textStyle,
+                          "position": "center"
+                      }
+                  },
+                  "labelLine": {
+                      "show": false
+                  },
+                  "itemStyle": {
+                      "normal": {
+                          "color": "#5886f0",
+                          "borderColor": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                              offset: 0,
+                              color: '#00a2ff'
+                          }, {
+                              offset: 1,
+                              color: '#70ffac'
+                          }]),
+                          "borderWidth": 2
+                      },
+                      "emphasis": {
+                          "color": "#5886f0",
+                          "borderColor": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                              offset: 0,
+                              color: '#85b6b2'
+                          }, {
+                              offset: 1,
+                              color: '#6d4f8d'
+                          }]),
+                          "borderWidth": 2
+                      }
+                  }
+              }, {
+                  "value": maxVal - _this.randomVal,
+                  "itemStyle": itemStyle
+              }]
+          }]
+      };
+    },
+  },
+};
+</script>
+<style>
+#fourth{
+  position: relative;
+  z-index: 3000;
+  width:  50vw;
+  height:  50vh;
+  /* background: wheat; */
+  top: 25vh;
+  left: 25vw;
+
+}
+.loadding{
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+  z-index: 3000;
+  top: 0;
+  left: 0;
+  background: #000000d4;
+}
+</style>

src/components/plotField/index.vue

@@ -9,7 +9,7 @@
    <div class="ap-context">
      <div class="main">
        <div class="submoduleContainer clockModule">
-         <div class="title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
+         <div class="submodule-title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
            <div class="checkContainer">
              <el-checkbox v-model="timeCheck" class="timeCheck" style="height: 100%; width: 100%">时间</el-checkbox>
            </div>
@@ -27,7 +27,7 @@
          </div>
        </div>
        <div class="submoduleContainer plotTypeModule">
-         <div class="title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
+         <div class="submodule-title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
            <div class="checkContainer">
              <el-checkbox v-model="plotCheck" class="plotCheck" style="height: 100%; width: 100%">地块类型</el-checkbox>
            </div>
@@ -42,7 +42,7 @@
          </div>
        </div>
        <div class="submoduleContainer cropTypeModule">
-         <div class="title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
+         <div class="submodule-title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
            <div class="checkContainer">
              <el-checkbox v-model="cropCheck" class="cropCheck" style="height: 100%; width: 100%">种植作物</el-checkbox>
            </div>
@@ -59,7 +59,7 @@
          </div>
        </div>
        <div class="submoduleContainer yieldModule">
-         <div class="title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
+         <div class="submodule-title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
            <div class="checkContainer">
              <el-checkbox v-model="yieldCheck" class="yieldCheck" style="height: 100%; width: 100%">产量</el-checkbox>
            </div>
@@ -77,7 +77,7 @@
          </div>
        </div>
        <div class="submoduleContainer soilModule">
-         <div class="title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
+         <div class="submodule-title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
            <div class="checkContainer">
              <el-checkbox v-model="soilCheck" class="soilCheck" style="height: 100%; width: 100%">土壤</el-checkbox>
            </div>
@@ -235,7 +235,7 @@
          </div>
        </div>
        <div class="submoduleContainer resultModule" style="margin-bottom: 10px;">
-         <div class="title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
+         <div class="submodule-title" :style="{backgroundImage: 'url('+titleBackImgUrl+')'}">
            <div class="checkContainer">
              <el-checkbox v-model="cropCheck" class="cropCheck" style="height: 100%; width: 100%">显示结果</el-checkbox>
            </div>
@@ -357,7 +357,7 @@ export default {
     methods: {
       showPlotModule(){
         this.isOpenPlot = !this.isOpenPlot
-        // console.log(this.isOpenPlot);
+  
       },
       showCropModule(){
         this.isOpenCrop = !this.isOpenCrop
@@ -366,7 +366,6 @@ export default {
         this.isOpenSoil = !this.isOpenSoil
       },
       soilCheckChange(val) {
-        // console.log(val);
       },
     }
 };
@@ -401,7 +400,7 @@ export default {
     border-color: #e6a23c !important;
   }
 }
-.title{
+.submodule-title{
   height: 30px;
 }
 .checkContainer{

src/components/rightContext/index.vue

@@ -7,31 +7,33 @@
  * @LastEditTime: 2023年2月7日15:53:03
  -->
 <template>
-  <div class="rightContext">
-    <div class="ml-list" v-for="item, index in listData" :key="index" @click="clickMeun(item, index)">
-      <div class="menu-list">
-        <i class="el-icon-menu"></i>
-        <div :class="item.open ? 'rc-titles' : 'rc-title'">{{ item.label }}</div>
-      </div>
-      <el-divider v-if="item.label != '地块字段'" class="rc-divider"><i class="el-icon-star-on"></i></el-divider>
+  <div>
+      <div class="rightContext">
+        <div  :class="item.open ? 'ml-list-open' : 'ml-list-close'" v-for="item, index in listData" :key="index" @click="clickMeun(item, index)">
+          <div class="menu-list">
+            {{ item.label }}
+          </div>
+        </div>
+        <mainPage :popoverTitle="currentLaber" @administration="administration">
+          <agricultural-plot v-show="currentLaber == '农业地块'" :cityStle="cityStle"  :listData="listData[0]"></agricultural-plot>
+          <planting-type v-show="currentLaber == '种植类型'" :cityStle="cityStle" ></planting-type>
+          <capacityForecasting v-show="currentLaber == '产量预测'" :cityStle="cityStle" :listData="listData[2]">
+          </capacityForecasting>
+          <soilInformation v-show="currentLaber == '土壤信息'" :cityStle="cityStle"></soilInformation>
+          <plotField v-show="currentLaber == '地块字段'"></plotField>
+        </mainPage>
+
     </div>
-    <mainPage :popoverTitle="currentLaber" @administration="administration">
-      <agricultural-plot v-show="currentLaber == '农业地块'" :cityStle="cityStle"  :listData="listData[0]"></agricultural-plot>
-      <planting-type v-show="currentLaber == '种植类型'" :cityStle="cityStle" ></planting-type>
-      <capacityForecasting v-show="currentLaber == '产量预测'" :cityStle="cityStle" :listData="listData[2]">
-      </capacityForecasting>
-      <soilInformation v-show="currentLaber == '土壤信息'" :cityStle="cityStle"></soilInformation>
-      <plotField v-show="currentLaber == '地块字段'"></plotField>
-    </mainPage>
+
   </div>
+
 </template>
 <script>
-import agriculturalPlot from "@/components/agriculturalPlot/index.vue"
+import agriculturalPlot from "@/components/agriculturalPlot/agriculturalPlot.vue"
 import plantingType from "@/components/plantingType/index.vue"
 import capacityForecasting from "@/components/capacityForecasting/index.vue"
 import soilInformation from "@/components/soilInformation/index.vue"
 import mainPage from '@/popover/mainPage.vue';
-import legendAndCredibility from "@/components/legendAndCredibility/index.vue"
 import plotField from "@/components/plotField/index.vue"
 export default {
   data() {
@@ -351,8 +353,6 @@ export default {
     plantingType,
     capacityForecasting,
     soilInformation,
-    // legendAndCredibility,
-    // TimeAxis,
     plotField
   },
   computed: {},
@@ -363,10 +363,9 @@ export default {
   methods: {
     /**
      *  点击菜单栏
-     * 
+     *
      */
     clickMeun(item, index) {
-      // console.log(item);
       this.$store.commit('setCurrentMenu',item.label);
       this.currentLaber = item.label;
       for (let i of this.listData) {
@@ -383,14 +382,14 @@ export default {
     },
     /**
      *  关闭左边弹窗
-     * 
+     *
      */
     administration(node) {
       this.cityStle = node;
     },
     /**
     *  图例变化事件
-    * 
+    *
     */
     changeLegendData(item) {
       for (let i of this.listData) {
@@ -409,8 +408,50 @@ export default {
 };
 </script>
 <style scoped>
-.ml-list {
-  padding: 10px 0px;
+.main-right-img{
+    position: relative;
+    background: url("./img/right.png") no-repeat 0px 0px;
+    background-size: 100% 100%;
+    width: 50px;
+    height: 100vh;
+    left: 105px;
+}
+.main-right{
+    position: fixed;
+    width: 165px;
+    top: 0px;
+    height: 100vh;
+    right: 0px;
+    z-index: 1;
+    background-image: linear-gradient(to left , #2d5f6a66, #2d5f6aa1,#2d5f6a57,#0c192800);
+}
+.main-left-img{
+    background: url("./img/left.png") no-repeat 0px 0px;
+    background-size: 100% 100%;
+    width: 50px;
+    height: 100vh;
+}
+.main-left{
+  position: fixed;
+    width: 165px;
+    top: 0px;
+    height: 100vh;
+    z-index: 1;
+    background-image: linear-gradient(to right , #2d5f6a66, #2d5f6aa1,#2d5f6a57,#0c192800);
+}
+.ml-list-close {
+  margin: 0px 0px 20px 10px;
+  background: url("./img/Group.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  width: 106px;
+  height: 46px;
+}
+.ml-list-open{
+  margin: 0px 0px 20px 10px;
+  background: url("./img/Group3.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  width: 106px;
+  height: 46px;
 }
 
 .el-icon-star-on {
@@ -418,10 +459,9 @@ export default {
 }
 
 .menu-list {
-  padding: 10px;
-  color: white;
-  cursor: pointer;
-  height: 57px;
+    color: white;
+    cursor: pointer;
+    line-height: 46px;
 }
 
 .rc-divider {
@@ -455,11 +495,11 @@ export default {
   position: relative;
   float: left;
   z-index: 1000;
-  top: 80px;
+  top: 96px;
   width: 113px;
   text-align: center;
   height: 100vh;
-  background: #a4b3ba;
+  left: 20px;
 }
 
 .el-icon-right {
@@ -542,4 +582,23 @@ export default {
     border-radius: 20;
     background: #ececec00;
 }
-</style>
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #00fbff;
+    border-color: #5a616a;
+}
+.el-checkbox__inner::after{
+    box-sizing: content-box;
+    content: "";
+    border: 1px solid #000;
+    border-left: 0;
+    border-top: 0;
+    height: 7px;
+    left: 4px;
+    position: absolute;
+    top: 1px;
+    transform: rotate(45deg) scaleY(0);
+    width: 3px;
+    transition: transform .15s ease-in .05s;
+    transform-origin: center;
+}
+</style>

src/components/soilInformation/index.vue

@@ -14,30 +14,30 @@
                         <i class="el-icon-food"></i>
                         平均值
                     </div>
-                    <div class="mpt-mu">6.16</div>
+                    <div class="mpt-mu">{{ getSoilstat[0].value }}</div>
                 </el-col>
                 <el-col :span="8">
                     <div class="mpt-area">
                         <i class="el-icon-food"></i>
                         最大值
                     </div>
-                    <div class="mpt-mu">705万亩</div>
+                    <div class="mpt-mu">{{getSoilstat[1].value}}万亩</div>
                 </el-col>
                 <el-col :span="8">
                     <div class="mpt-area">
                         <i class="el-icon-food"></i>
                         最小值
                     </div>
-                    <div class="mpt-mu">705万亩</div>
+                    <div class="mpt-mu">{{getSoilstat[2].value}}万亩</div>
                 </el-col>
             </el-row>
         </div>
         <div class="list-play" v-if="$store.state.localDistrict[0].length <3">
             <div class="lp-title"><span class="s">各区县土壤酸碱度</span> <span class="m"></span></div>
             <div class="lp-contexts">
-                <div v-for="item,index in ($store.state.localDistrict[0].length==2?($store.state.localDistrict[0][1] =='区级1'?listLand[0]:listLand[1]):listAreaData)" :key="index" class="lp-context">
+                <div v-for="item,index in curretPlayData" :key="index" class="lp-context">
                     
-                    <div class="townName">{{ item.label }}</div>
+                    <div class="townName">{{ item.townName }}</div>
                     <div :id="'sfbar' + index"></div>
                     <div class="xAxis">
                         <span class="a">SPH</span>
@@ -47,9 +47,66 @@
                 </div>
                 </div>
             </div>
-            <!-- <div class="lp-contexts" v-if="$store.state.localDistrict[0].length==3">
-                <townAttribute :listLand='curretTwanData.townLand' :crodName="['asdsa','sadasd']" ></townAttribute>
-            </div> -->
+        </div>
+        <div class="list-playx" v-if="$store.state.localDistrict[0].length ==3">
+            <div class="lp-title"><span class="s">土壤属性列表</span></div>
+            <!-- <el-empty v-if="getlandList.length == 0 && !getlandListLoading" :image-size="100" style="height: 195px;" description="暂无数据"></el-empty> -->
+             <div class="lp-contextss" 
+             v-loading="getlandListLoading"  
+              element-loading-text="拼命加载中"  
+               element-loading-spinner="el-icon-loading"
+                element-loading-background="rgba(0, 0, 0, 0.8)"
+                >
+                <div v-for="item,index in getlandList" :key="index" class="listcrop">
+                    <div class="abs">
+                        <div class="a">{{ index }}</div>
+                        <span class="b">[编号{{ item.number}}]</span>
+                    </div>
+                    <div class="cropstatus">
+                        <div class="cropslist1">
+                            <div class="growingTendency"> 酸碱度:{{ item.ph }} </div>
+                            <div class="growingTendency"> 有机物:{{ item.toc }}</div>
+                            <div class="growingTendency">土壤碳:{{ item.c }}</div>
+                            <div class="growingTendency">总氮：{{ item._2n }}</div> 
+
+                        </div>
+                       
+                        <div>
+                            <div class="growingTendency">总磷：{{ item.p }}</div>
+                            <div class="growingTendency">总钾：{{ item.k }}</div>
+                        </div>
+              
+                    </div>
+                </div> 
+            </div>
+            <div      class="pagination">
+                <el-pagination
+               
+                    layout="prev, pager, next"
+                    :total="count"
+                    :pager-count=5
+                    @current-change="currentChange"
+                    >
+                </el-pagination>
+            </div>
+        </div>
+        <div class="legend">
+            <div class="legend-headr">图例   </div>
+            <div>
+                <div class="legend-list" >
+                    <span :class="expansion? 'el-icon-caret-bottom':'el-icon-caret-right'"  @click="clickStatus()">{{currentLegend.text }}</span>
+                </div>
+            </div>
+            <div class="leg-list" v-show="expansion">
+                <div v-for="item,index of $store.state.getSFLegendList" class="leg-l" :key="index" @click="clickLeList(item)">
+                    <span >{{ item.text }}</span>
+                </div>
+            </div>
+            <div v-for="item,index of currentLegend.child" :key="index">
+                <div class="le-d" :style="{'background':item.colors}"></div> 
+                <span class="le-span">{{item.names}}</span>
+                <input  class="legend-check" type="checkbox"  value="2" name="assess_mode"   :checked="item.opens">
+            </div>
         </div>
     </div>
 </template>
@@ -63,219 +120,209 @@ export default {
     watch:{
         '$store.state.localDistrict': {
             handler(newVal, oldVal) {
+                if(this.$store.state.localDistrict[0].length==3){
+                    this.landList()
+                }
                 if(newVal.length<3){
                     setTimeout(() => {
                         this.setlistLand()
                     }, 200);
-
+                    this.setSoilStat()
                 }
+            
              
              
             },
             immediate: true,
             deep: true
         },
+        '$store.state.getSFLegendList': {
+            handler(newVal, oldVal) {
+                // this.landAreaStatus = newVal
+                // this.chartData =[];
+                // this.treeData =[];
+                // this.resetEchart();
+          
+            },
+            immediate: true,
+            deep: true
+        },
     },
     data() {
         return {
-            curretTwanData:null,
-            listLand: [[
+            getlandList: [],
+            sfbarArr: [],
+            curretPlayData:[],
+            getSoilstat:[],
+            expansion:false,
+            currentLegend:null,
+            count:[],
+            legendList:[
                 {
-                    label: "镇级1",
-                    num: "12312.00",
-                    townLand: [
-                        {
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },
-
-                    ]
-                }, {
-                    label: "镇级2",
-                    num: "12312.00",
-                    townLand: [
-                        {
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },
-
-                    ]
-                }, {
-                    label: "镇级3",
-                    num: "12312.00",
-
-                    townLand: [
-                    {
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },
-
-                    ]
-                }, {
-                    label: "镇级3",
-                    num: "12312.00",
-                    townLand: [
-                    {
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },
-
-                    ]
-                }
-            ],[
-            {
-                    label: "镇级4",
-                    num: "12312.00",
-
-                    townLand: [
-                    {
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },
-
-                    ]
+                    text:'土壤酸碱度',
+                    open:true,
+                    value:'ph',
+                    expansion:false,
                 },{
-                    label: "镇级5",
-                    num: "12312.00",
-
-                    townLand: [
-                    {
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },
-
-                    ]
-                }
-            ]],
-            listAreaData:[
-            {
-                    label: "区级1",
-                    num: "12312.00",
-                    townLand: [
-                    {
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },{
-                            icona:['类型','','cftype'],
-                            iconb:['长势','- -','cfarea'],
-                            iconc:['单产','442.35kg','ptdan'],
-                            icond:['总产','135.35kg','cfzong'],
-                        },
-
-                    ]
-                }, {
-                    label: "区级2",
-                    num: "12312.00",
-                    townLand: [
-                        {
-                            label: 20,
-                            color: "#5470c6"
-                        }, {
-                            label: 50,
-                            color: "#91cc75"
-                        }, {
-                            label: 20,
-                            color: "#fac858"
-                        }
-
-                    ]
-                }
+                    text:'土壤有机物',
+                    open:false,
+                    value:'toc',
+                    expansion:false,
+                },{
+                    text:'土壤碳',
+                    open:false,
+                    value:'c',
+                    expansion:false,
+                },{
+                    text:'土壤总氮',
+                    open:false,
+                    value:'_2n',
+                    expansion:false,
+                },{
+                    text:'土壤总磷',
+                    open:false,
+                    value:'p',
+                    expansion:false,
+                },{
+                    text:'土壤总钾',
+                    open:false,
+                    value:'k',
+                    expansion:false,
+                },
             ],
-            sfbarArr: [],
-            curretPlayData:[],
         };
     },
     computed: {},
     created() { },
     mounted() {
-        this.curretPlayData =  this.listAreaData
-        if(this.$store.state.localDistrict[0].length<3){
-                    setTimeout(() => {
-                        this.setlistLand()
-                    }, 200);
-
-        }
+        this.landList()
+        this.setSoilCutline()
     },
     methods: {
+        currentChange(i){
+ 
+            this.page =i;
+            this.landList()
+        },
+             /**
+         * 地块列表
+         */
+         landList(){
+            let localDistrict = this.$store.state.localDistrict[0]
+            let param={
+                city:localDistrict[0]?localDistrict[0]:'',
+                district:localDistrict[1]?localDistrict[1]:'',
+                town:localDistrict[2]?localDistrict[2]:'',
+                limit:25,
+                page:this.page
+            }
+            this.$http.landList(param).then(res=>{
+                this.getlandListLoading=false
+                this.getlandList= res.data
+                for(let i of res.data){
+                    i.area=i.area.toFixed(2);
+                    i.perimeter=i.perimeter.toFixed(2);
+                    i.name= this.landAreaStatus[i.parcelType].name
+
+                }
+                this.count = res.count
+            })
+
+        },
+        clickLeList(item){
+            this.currentLegend = item
+            this.expansion =false
+            this.setSoilStat()
+        },
+        openSimple(event,index,indexs){
+            // let getSFLegendList = this.$store.state.getSFLegendList
+            // this.openAllLegend(index)
+            // this.$set(getSFLegendList[index].child[indexs],'opens',event.target.checked)
+            // getSFLegendList = JSON.parse(JSON.toString(getSFLegendList)) 
+            // this.$store.commit('setSFLegendList',getSFLegendList)
+        },
+        openAllLegend(index){
+       
+        },
+        setSoilCutline(){
+            let _r =this;
+            _r.$http.soil_cutline().then(res=>{
+                  for(let i of _r.legendList){
+                        i.child = []
+                        for(let z = 0;z<res.data[i.value].colors.length; z++){
+                            i.child.push({
+                                colors:res.data[i.value].colors[z],
+                                names:res.data[i.value].names[z],
+                                opens:false,
+                            })
+                         
+                      
+                        }
+                  }
+                  _r.currentLegend = _r.legendList[0]
+                  _r.setSoilStat()
+                  _r.$store.commit('setSFLegendList',_r.legendList)
+            })
+         
+        },
+        clickStatus(index){
+            this.expansion =!this.expansion
+        },
+        resetEchart(){
+
+        },
+        setSoilStat(){
+            let localDistrict = this.$store.state.localDistrict[0]
+            let param={
+                statType:this.currentLegend.value,
+                city:localDistrict[0]?localDistrict[0]:'',
+                district:localDistrict[1]?localDistrict[1]:'',
+            }
+            this.$http.soil_stat(param).then(res=>{
+                if(this.$store.state.localDistrict[0].length<3){
+                    this.setTwoLevelList(res)
+                }else{
+                    this.setThreeLevelList(res)
+                }
+            })
+        },
+             /**
+         * 镇级行政区
+         */
+         setThreeLevelList(res){
+     
+        },
+         /**
+         * 得到echarts图表
+         */
+         getEchartData(data){
+
+            let resdata =[];
+            for(let z of data){
+
+                z.open = true;
+                resdata.push(z)
+            }
+            // this.$store.commit('setSoilStat',resdata);
+
+        },
+        /**
+         * 二级行政区
+         */
+        setTwoLevelList(res){
+            this.cityData =[]
+            this.curretPlayData = []
+                for(let i of res.data){
+                    if(i.townName ==  "汇总信息"){
+                        this.getEchartData(i.list);
+                        this.getSoilstat =i.list;
+                        this.getSoilstat[1].value=(this.getSoilstat[1].value).toFixed(2)
+                    }else{
+                        this.curretPlayData.push(i);
+                    }
+                }
+            this.setlistLand()
+        },
         /**
          * 生成动态图标
          */
@@ -283,22 +330,35 @@ export default {
            
             this.curretPlayData.forEach((item, index) => {
                 // debugger
-            const settimelinWH = {
-                width: 370,
-                height: 150
-            };
-        
-            let sfbar = this.$echarts.init(document.getElementById('sfbar' + index),
-                null,
-                settimelinWH
-            );
-            this.sfbarArr.push(sfbar);
-
-            this.setbarsf(sfbar)
+                const settimelinWH = {
+                    width: 370,
+                    height: 150
+                };
+                let data = [];
+                if(document.getElementById('sfbar' + index)){
+                    let sfbar = this.$echarts.init(document.getElementById('sfbar' + index),
+                    null,
+                    settimelinWH
+                    );
+                    this.sfbarArr.push(sfbar);
+                    
+                    for(let i of item.list){
+                        data.push({
+                                value: i.value,
+                                itemStyle: {
+                                    color: i.color,
+                                    borderRadius:5,
+                                }
+                            })
+                    }
+                    this.setbarsf(sfbar,data)
+
+                }
+                
         })
 
         },
-        setbarsf(echarts) {
+        setbarsf(echarts,data) {
             let option = {
                 grid: {
                     left: '5%',
@@ -318,38 +378,8 @@ export default {
                 series: [
                     // 图标列设置
                     { type: "bar", 
-                    data:  [
-                            {
-                                value: 400,
-                                itemStyle: {
-                                    color: '#5470c6',
-                                    borderRadius:5,
-                                }
-                            },{
-                                value: 300,
-                                itemStyle: {
-                                    color: '#e6a23c',
-                                    borderRadius:5,
-                                }
-                            },{
-                                value: 100,
-                                itemStyle: {
-                                    color: '#67c23a',
-                                    borderRadius:5,
-                                }
-                            },{
-                                value: 200,
-                                itemStyle: {
-                                    color: '#66b1ff',
-                                    borderRadius:5,
-                                }
-                            },{
-                                value: 900,
-                                itemStyle: {
-                                    color: '#510c00',
-                                    borderRadius:5,
-                                }
-                            },] },
+                    data:  data 
+                    },
                 ],
                 tooltip: {
                     // 提示框组件
@@ -377,6 +407,176 @@ export default {
 };
 </script>
 <style scoped>
+
+.cropslist1{
+    position: relative;
+    width: 100%;
+    height: 21px;
+}
+.abs{
+    width: 100%;
+    height: 50px;
+}
+/* .perimeter{
+    position: relative;
+    color: white;
+    float: left;
+    font-size: 15px;
+} */
+
+.growingTendency{
+    position: relative;
+    padding: 0px 5px 0px 0px;
+    font-size: 14px;
+    float: left;
+    color: white;
+}
+.el-icon-location {
+    position: absolute;
+    right: 19px;
+    font-size: 25px;
+    color: #e6a23c;
+    top: 8px;
+    cursor: pointer;
+}
+.b {
+    color: white;
+    position: relative;
+    top: 10px;
+    left: 11px;
+    float: left;
+}
+
+.a {
+    height: 25px;
+    background-image: linear-gradient(to right, #e6a23c, #0c192800);
+    width: 38px;
+    text-align: center;
+    position: relative;
+    top: 10px;
+    left: 10px;
+    float: left;
+    color: white;
+    line-height: 25px;
+}
+.listcrop {
+    position: relative;
+    background: #ffffff47;
+    margin: 13px 10px;
+    height: 100px;
+
+}
+.leg-l{
+    color: white;
+    font-size: 14px;
+    margin: 4px 10px;
+    cursor: pointer;
+}
+.leg-l :hover{
+    color: #e6a23c;
+}
+.leg-list{
+    position: fixed;
+    color: white;
+    background: #000000fa;
+    border: 1px solid #b5acac;
+    border-radius: 3px;
+    width: 120px;
+    z-index: 10;
+
+}
+.el-icon-caret-bottom{
+    cursor: pointer; 
+}
+.el-icon-caret-right{
+    cursor: pointer;
+}
+.le-span{
+    font-size: 10px;
+    color: white;
+}
+.le-d{
+    width: 29px;
+    height: 10px;
+    /* background: wheat; */
+    float: left;
+    position: relative;
+    top: 3px;
+    margin: 0px 3px 0px 2px;
+}
+.lp-title .s {
+    position: absolute;
+    top: 2px;
+    color: white;
+    left: 10px;
+}
+.lp-title .m {
+    position: absolute;
+    top: 2px;
+    color: white;
+    right: 10px;
+}
+.lp-title {
+    position: relative;
+    height: 27px;
+    background-image: linear-gradient(to right bottom, #ffffff7d, #0c192800);
+}
+
+.list-playx {
+    position: relative;
+    margin: 10px;
+    height: calc(100vh - 390px);
+    border: 1px solid #6e6d6d;
+    overflow: auto;
+}
+.legend-check{
+    position: absolute;
+    right: 10px;
+}
+.legend-checks{
+    position: absolute;
+    right: 10px;
+}
+
+.my-checkbox-input:checked{
+  border-color: #fff;
+  -webkit-transform: rotate(45deg) scale(1);
+  transform: rotate(45deg) scale(1);
+}
+
+.legend-checks:checked+.my-checkbox-core {
+  background-color: #26a2ff;
+  border-color: #26a2ff;
+}
+.legend-list{
+    position: relative;
+    color: white;
+    height: auto;
+    background-image: linear-gradient(to right, #ffffff7d, #0c192800);
+    margin: 3px 0px;
+    font-size: 10px;
+    height: 20px;
+    line-height: 20px;
+}
+.header-check{
+    position: absolute;
+    right: 20px;
+    top: 9px;
+}
+.legend-headr{
+    color: white;
+    padding: 5px 10px;
+}
+.legend{
+    width: 129px;
+    height: 200px;
+    /* overflow: auto; */
+    position: fixed;
+    top: 96px;
+    z-index: -1;
+    left: 570px;
+    background-image: linear-gradient(to right bottom, #044060c7, #223b5954);
+}
 .xAxis .a{
     position: relative;
     color: white;
@@ -533,3 +733,33 @@ export default {
     height: auto;
 }
 </style>
+<style>
+input[type="checkbox"]{
+    /* -webkit-appearance: none; */
+    vertical-align:middle;
+    margin-top:0;
+    background: none;
+    border:#dcdfe6 solid 1px;
+    border-radius: 2px;
+    min-height: 14px;
+    min-width: 14px;
+    cursor: pointer;
+}
+/* 下面这个可以注释掉 只是想以后要改的时候方便些 */
+input[type="checkbox"]:checked {
+    background: none;
+} 
+
+input[type=checkbox]:checked::after{
+    position: absolute;
+    content: '';
+    top: 3px;
+    left: 2px;
+    border: #fff solid 1px;
+    border-top: none;
+    border-right: none;
+    height: 3px;
+    width: 7px;
+    transform: rotate(318deg);
+} 
+</style>

src/components/toolbar/index.vue

@@ -6,75 +6,210 @@
  * @LastEditTime: 2022/12/28 17:34:26
  -->
  <template>
-   <div class="toolbar">
-     <div class="ml-list" v-for="(item,index) in listData" :key="index" >
-       <i class="iconfont" :class="[item.icon]"></i>
-       <span @click="showWidget(item)">{{ item.label }}</span>
-       <div
-         v-if="currentWidget === item.label && listData.indexOf(currentWidget) === -1"
-         class="scene-export-box"
-       >
-         <component
-           :is="currentComponent"
-           @currentComponent="goBack"
-         ></component>
+
+     <div class="toolbar">
+       <div class="expandBtn" title="工具栏" @click="expandToolbar">
+         <i class="" :style="{backgroundImage: 'url('+arrowImgUrl+')'}"
+            style="margin: auto; color: #FFFFFF; width: 16px; height: 16px"></i>
        </div>
+       <transition name="fade">
+         <div v-show="showToolbar" class="toolbar-list-container">
+           <div class="ml-list" v-for="(item,index) in listData" :key="index" :title="item.label"
+                @click="showWidget(item)">
+             <i :class="item.icon" style="margin: auto;"></i>
+           </div>
+         </div>
+       </transition>
+       <layerTree class="layerTree" v-show="showLayerTree" @clearLayerTree="clearLayerTree"></layerTree>
+       <!--     <layerTree v-show="showLayerTree" @clearLayerTree="clearLayerTree"></layerTree>-->
+       <measure v-show="showMeasure" @clearMeasure="clearMeasure"></measure>
      </div>
-   </div>
+
   </template>
   <script>
+  let cameraController
+
   import layerTree from './layerTree/index'
   import measure from './measure/index'
-  import celestialEye from './celestialEye/index'
-  import fullScreen from './fullScreen/index'
   export default {
     components: {
       layerTree,
       measure,
-      celestialEye,
-      fullScreen
+      // celestialEye,
+      // fullScreen
     },
     data() {
       return {
+        arrowImgUrl: require('../../../public/images/arrow-left.png'),
+        showToolbar: false,
+        showLayerTree:false,
+        showMeasure:false,
         listData:[
           {
             label: "图层管理",
-            icon: 'icontucengshu',
-            key: 'layerTree'
+            icon: 'iconfont icontucengshu',
+            key: 'layerTree',
+            show:false,
           },
           {
             label: "测量工具",
-            icon: 'iconfuzhugongju',
-            key: 'measure'
+            icon: 'iconfont iconfuzhugongju',
+            key: 'measure',
+            show:false,
           },
           {
             label: "天眼视角",
-            icon: 'iconyulan',
-            key: 'celestialEye'
+            icon: 'iconfont iconyulan',
+            key: 'celestialEye',
+            show:false,
           },
           {
             label: "地图全屏",
-            icon: 'iconquanping',
-            key: 'fullScreen'
+            icon: 'iconfont iconquanping',
+            key: 'fullScreen',
+            show:false,
+          },
+          {
+            label:"定位",
+            icon:"el-icon-s-help",
+          },
+          {
+            label:"放大",
+            icon:"el-icon-zoom-in",
+          },
+          {
+            label:"缩小",
+            icon:"el-icon-zoom-out",
           }
         ],
         showTools: false,
         currentWidget: '',
         currentComponent: '',
+        position: {
+          "x": -2202770.691935922,
+          "y": 5904938.774980082,
+          "z": 2156981.640544505,
+          "heading": 6.031885883568496,
+          "pitch": -0.9378027808776026,
+          "roll":0.00003519559671438799,
+        },
       };
     },
     computed: {},
     created() { },
-    mounted() { },
+    mounted() {
+      cameraController = new GD.CameraController(viewer)
+      cameraController.setCameraPosition(this.position)
+    },
     methods: {
+      expandToolbar(){
+        this.showToolbar = !this.showToolbar
+      },
       showWidget(item) {
-        if (this.currentWidget && this.currentWidget === item.label) {
-          this.goBack()
-          return
+        let position = cameraController.getCameraPosition()
+        let distance = position.wgs84Position.alt / 5
+        switch (item.label) {
+          case "地图全屏":
+            this.showMeasure = false
+            this.showLayerTree =false
+            if(this.isFullscreen()){
+              this.exitFullscreen()
+            }else{
+              this.RequestFullScreen()
+            }
+            break
+          case "天眼视角":
+            this.showLayerTree =false
+            this.showMeasure = false
+            this.setCaram()
+            break
+          case "图层管理":
+            this.showMeasure = false
+            this.showLayerTree =!this.showLayerTree
+            break
+          case "测量工具":
+            this.showLayerTree =false
+            this.showMeasure =!this.showMeasure
+            break
+          case "定位":
+            cameraController.flyToPosition(this.position)
+            break
+          case '放大':
+            cameraController.zoomOut(distance)
+            break
+          case '缩小':
+            cameraController.zoomIn(distance)
+            break
         }
-        this.currentWidget = item.label
-        this.currentComponent = item.key
-        this.showTools = true
+      },
+      clearLayerTree(){
+        this.showLayerTree =false
+      },
+      clearMeasure(){
+        this.showMeasure = false
+      },
+      /**
+       * 监听全屏
+       */
+      isFullscreen () {
+            const screen = window.screen
+            const body = document.body.getBoundingClientRect()
+            return screen.height === body.height && screen.width === body.width
+      },
+        /**
+       * 设置全屏
+       */
+      RequestFullScreen(){
+        if(document.documentElement.RequestFullScreen){
+            document.documentElement.RequestFullScreen();
+          }
+          //兼容火狐
+          if(document.documentElement.mozRequestFullScreen){
+            document.documentElement.mozRequestFullScreen();
+          }
+          //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
+          if(document.documentElement.webkitRequestFullScreen){
+            document.documentElement.webkitRequestFullScreen();
+          }
+          //兼容IE,只能写msRequestFullscreen
+          if(document.documentElement.msRequestFullscreen){
+            document.documentElement.msRequestFullscreen();
+          }
+
+      },
+           /**
+       * 退出全屏
+       */
+       exitFullscreen(){
+        if(document.exitFullScreen){
+            document.exitFullscreen()
+          }
+          //兼容火狐
+          if(document.mozCancelFullScreen){
+            document.mozCancelFullScreen()
+          }
+          //兼容谷歌等
+          if(document.webkitExitFullscreen){
+            document.webkitExitFullscreen()
+          }
+          //兼容IE
+          if(document.msExitFullscreen){
+            document.msExitFullscreen()
+          }
+      },
+      /**
+       * 设置视角
+       */
+      setCaram(){
+        let cameraController = new GD.CameraController(viewer)
+        cameraController.flyToPosition({
+            "x": -2202770.691935922,
+            "y": 5904938.774980082,
+            "z": 2156981.640544505,
+            "heading": 6.031885883568496,
+            "pitch": -0.9378027808776026,
+            "roll":0.00003519559671438799,
+          })
       },
       goBack() {
         // 无二级弹窗面板取消标题点击事件
@@ -87,29 +222,57 @@
   <style scoped>
   .toolbar{
     position: fixed;
-    width: 100px;
-    height: 220px;
-    /* background: white; */
+    width: 327px;
+    height: 40px;
+    /*background: rgba(255,255,255,0.08);*/
+    border-radius: 0;
+    opacity: 1;
     z-index: 1;
-    right: 10px;
-    bottom: 300px;
-}
-.ml-list span{
-
+    right: 50px;
+    top: 105px;
 }
-.ml-list{
-    background: #ffffff4d;
-    color: white;
-    font-size: 16px;
+  .expandBtn{
+    width: 40px;
     height: 40px;
-    line-height: 40px;
-    text-align: center;
-    border-left: 1px solid;
-    border-radius: 5px;
-    margin: 10px 0px;
+    background: linear-gradient(54deg, #FFE0A0 0%, #48F6FF 100%);
+    border-radius: 0;
+    opacity: 1;
+    float: right;
+    display: flex;
+    align-items: center;
     cursor: pointer;
+  }
+  .toolbar-list-container{
+    position: fixed;
+    width: 287px;
+    height: 40px;
+    background: rgba(255,255,255,0.08);
+    border-radius: 0;
+    opacity: 1;
+    /* background: white; */
+    float: left;
+    right: 90px;
+    overflow: hidden;
+  }
+.ml-list{
+  width: 40px;
+  height: 40px;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  float: left;
+  color: white;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 }
 .iconfont{
   margin-right: 5px;
 }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: width .25s
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+    width: 0
+  }
   </style>

src/components/toolbar/layerTree/index.vue

@@ -1,25 +1,31 @@
-/**
-* @author 刘策
-* @date 2023-02-07 14:32
-* @description
-*/
+<!--
+ * @FileDescription:  工具栏
+ * @Author:  刘策
+ * @Date: 2023-02-07 14:32
+ * @LastEditors: wg
+ * @LastEditTime: 2023年2月17日11:48:08
+ -->
 <template>
-  <div class="layerTreeContainer" ref="currentComponent">
-    <div class="title">
-      <div class="title-text">图层管理</div>
+  <div class="layerTreeContainer" >
+    <div class="titles">
+      <div class="title-textz">图层管理</div>
       <div class="title-icon"><i class="iconfont iconguanbi" @click="closeBox"></i></div>
     </div>
     <div class="main">
-      <div class="layerContainer" style="border-bottom: 1px dashed #FFF;">
-        <div class="title-text">基础图层</div>
-        <el-checkbox v-model="checked" @change="changeLayer">行政区划</el-checkbox>
+      <div class="layerContainer">
+        <i class="basieIcon"></i>
+        <div class="title-text"> 基础图层</div>
+        <el-checkbox class="dis-check" v-model="checked" @change="changeLayer">行政区划</el-checkbox>
+        <el-checkbox class="dis-check" v-model="landChecked" @change="changeland">地块图层</el-checkbox>
       </div>
       <div class="layerContainer">
+        <i class="basieIcon"></i>
         <div class="title-text">底图</div>
         <ul>
-        <li v-for="(item, i) in dataList" :key="i" class="" @click="imgClick(item,i)">
-          <img :src="item.imgUrl" alt="">
-        </li>
+        <div :class="item.open?'list-open':'list-close'" v-for="(item, i) in dataList" :key="i" @click="imgClick(item,i)">
+          <img class="openStatus" :src="item.imgUrl" alt="">
+          <div :class="item.open?'openStatu-o':'openStatu-c'">{{ item.label }}</div>
+        </div>
         </ul>
       </div>
     </div>
@@ -27,6 +33,7 @@
 </template>
 
 <script>
+let layerController
 export default {
   name: "index",
   components: {},
@@ -35,80 +42,195 @@ export default {
       checked: true,
       dataList: [{
         label: '影像图',
-        imgUrl: require('../../../../public/images/image-base-act.5606f391.png'),
+        open:true,
+        imgUrl: require('../img/imgMap1.png'),
       },{
         label: '晕染图',
-        imgUrl: require('../../../../public/images/image-yxt.6e5ded39.png')
-      }]
+        open:false,
+        imgUrl: require('../img/imgMap2.png'),
+        options: {
+          id: '黑色底图',
+          url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
+          layerType: 'imagery',
+          imageryType: 'arcgis',
+          show: false,
+        }
+      }],
+      landChecked:true,
     };
   },
+  watch:{
+      '$store.state.localDistrict': {
+          handler(newVal, oldVal) {
+            this.landChecked =true
+            this.checked=true
+          },
+          immediate: true,
+          deep: true
+      }
+  },
   computed: {},
   created() {
   },
   mounted() {
+    layerController = new GD.LayerController(viewer)
+    layerController.addLayer(this.dataList[1].options)
   },
   methods: {
     changeLayer(data) {
-      this.$bus.$emit("changeAdministrativeDivision", data);
+      for(let i of viewer.dataSources._dataSources){
+           i.show = data
+        }
+        for(let i of viewer.entities._entities._array){
+           i.show = data
+        }
+        for(let i of document.getElementsByClassName('bx-popup-ctn')){
+            i.style.display =data?'':'none'
+        }
     },
     imgClick(item){
-      this.$bus.$emit("changeImagery", item.label);
+      console.log();
       switch (item.label) {
         case '影像图':
-          this.dataList[0].imgUrl = require('../../../../public/images/image-base-act.5606f391.png')
-          this.dataList[1].imgUrl = require('../../../../public/images/image-yxt.6e5ded39.png')
+          this.dataList[0].open = true
+          this.dataList[1].open = false
+          layerController.hideLayer(this.dataList[1].options.id)
           break
         case '晕染图':
-          this.dataList[0].imgUrl = require('../../../../public/images/image-base.e75261a1.png')
-          this.dataList[1].imgUrl = require('../../../../public/images/image-yxt-act.926e593e.png')
+          this.dataList[0].open = false
+          this.dataList[1].open = true
+          layerController.showLayer(this.dataList[1].options.id)
           break
       }
     },
+    changeland(data){
+      for(let i of viewer.imageryLayers._layers){
+          if(i.id){
+            i.show = data;
+          }
+        }
+
+    },
     closeBox() {
-      this.$parent.goBack()
+      // this.checked=true;
+      // this.landChecked=true;
+      this.$emit('clearLayerTree',false)
     }
   }
 }
 </script>
 
 <style scoped>
-.layerTreeContainer {
-  width: 150px;
-  height: 220px;
-  background: #ffffff4d;
-  color: white;
+.openStatu-c{
+  width: 47%;
+    height: 45%;
+    position: absolute;
+    bottom: 0px;
+    background: linear-gradient(90deg, rgb(12 12 12 / 50%) 0%, rgb(1 17 18 / 60%) 100%);
+    font-size: 10px;
+    text-align: center;
+    color: white;
+}
+.closeStatus{
+    height: 40px;
+    width: 56px;
+    float: left;
+}
+.openStatu-o{
+  width: 47%;
+  height: 45%;
   position: absolute;
+  bottom: 0px;
+  background: linear-gradient(90deg, rgb(255 224 160 / 87%) 0%, rgb(72 246 255 / 60%) 100%);
+  font-size: 10px;
+  text-align: center;
+  color: black;
+}
+.openStatus{
+  height: 40px;
+    width: 56px;
+    float: left;
+
+}
+.basieIcon{
+    background: url(../img/Group255.png) no-repeat 0px 0px;
+    background-size: 100% 100%;
+    width: 20px;
+    position: absolute;
+    height: 20px;
+    left: 0px;
+
+}
+.line{
+  height: 1px;
+  background: wheat;
+  margin: 0px 10px;
+}
+.dis-check{
+  position: relative;
+  left: 25px;
   top: 10px;
-  right: 120px;
+  font-family: 'PingFang SC Regular';
 }
-.title{
-  height: 15%;
+.list-close{
+    float: left;
+    width: auto;
+    margin: 0px 1px;
+      cursor: pointer;
 }
-.title-text{
+.list-open{
+  float: left;
+    width: auto;
+    margin: 0px 1px;
+    border: 1px solid rgba(0, 251, 236, 1);
+      cursor: pointer;
+
+}
+.layerTreeContainer {
+    width: 150px;
+    height: auto;
+    /* background: #1a2f48; */
+    color: white;
+    margin-top: 50px;
+    z-index: 4;
+    position: fixed;
+}
+.titles{
+  height: 40px;
+  line-height: 40px;
+  background: linear-gradient(90deg, rgb(255 224 160 / 48%) 0%, rgb(72 246 255 / 26%) 100%);
+}
+.title-textz{
   float: left;
   margin-left: 10px;
 }
+.title-text{
+  float: left;
+  margin-left: 20px;
+  font-family: 'PingFang SC Regular';
+}
 .title-icon{
   float: right;
   margin-right: 10px;
 }
 .iconguanbi{
   border-radius: 5px;
-  background: #ffffff4a;
+  background: #e6a23c;
   padding: 2px;
+  cursor: pointer;
 }
 .main{
   height: 85%;
   background: #14202dcf;
 }
 .layerContainer{
-  height: 50%;
+  height: 80px;
 }
-/deep/ .el-checkbox__label{
+::v-deep .el-checkbox__label{
   color: #FFF;
   font-size: 16px;
 }
-/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
+::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
   color: #FFF;
   font-size: 16px;
 }
@@ -118,8 +240,14 @@ ul{
   justify-content: space-between;
   width: 80%;
   margin-left: 15px;
+  position: relative;
+  top: 8px;
+}
+li{
+  list-style: none;
+  cursor: pointer;
+  float: left;
 }
-li{ list-style: none;}
 .imgContainer{
   position: absolute;
   margin-top: 40px;

src/components/toolbar/measure/index.vue

@@ -1,11 +1,13 @@
-/**
-* @author 刘策
-* @date 2023-02-06 14:43
-* @description  测量工具
-*/
+<!--
+ * @FileDescription:  工具栏
+ * @Author:  刘策
+ * @Date: 2023-02-07 14:32
+ * @LastEditors: wg
+ * @LastEditTime: 2023年2月17日11:48:08
+ -->
 <template>
-  <div class="measureContainer" ref="currentComponent">
-    <div class="title">
+  <div class="measureContainer" >
+    <div class="titles">
       <div class="title-text">测量工具</div>
       <div class="title-icon"><i class="iconfont iconguanbi" @click="closeBox"></i></div>
     </div>
@@ -39,16 +41,13 @@ export default {
   created() {
   },
   mounted() {
-    console.log('加载测量');
     measure = new GD.Measure(viewer)
   },
   destroyed() {
-    console.log('退出测量');
     measure.deactivate()
   },
   methods: {
     show(item) {
-      console.log(item);
       this.clear()
       if (this.currentActivate && this.currentActivate === item.label) {
         this.currentActivate = ''
@@ -57,11 +56,9 @@ export default {
       this.currentActivate = item.label
       switch (this.currentActivate) {
         case '距离测量' :
-          console.log('激活距离测量');
           measure.distance()
           break
         case '面积测量':
-          console.log('激活面积测量');
           measure.area()
           break
       }
@@ -70,7 +67,8 @@ export default {
       measure.clearLayer()
     },
     closeBox() {
-      this.$parent.goBack()
+      this.clear()
+      this.$emit('clearMeasure',false)
     }
   }
 }
@@ -79,15 +77,17 @@ export default {
 <style scoped>
 .measureContainer {
   width: 150px;
-  height: 180px;
-  background: #ffffff4d;
+  height: auto;
+  /* background: #1a2f48; */
   color: white;
-  position: absolute;
-  top: 60px;
-  right: 120px;
+  position: fixed;
+  margin-top: 50px;
+  z-index: 4;
 }
-.title{
-  height: 20%;
+.titles{
+  height: 40px;
+  line-height: 40px;
+  background: linear-gradient(90deg, rgb(255 224 160 / 48%) 0%, rgb(72 246 255 / 26%) 100%);
 }
 .title-text{
   float: left;
@@ -99,25 +99,27 @@ export default {
 }
 .iconguanbi{
   border-radius: 5px;
-  background: #ffffff4a;
+  background: #e6a23c;
   padding: 2px;
+  cursor: pointer;
 }
 .main{
-  height: 80%;
+  height: 140px;
   background: #14202dcf;
 }
 .measureList{
-  background: #ffffff4d;
   color: white;
-  font-size: 16px;
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  border-left: 1px solid;
-  border-radius: 5px;
-  margin: 12px 10px;
-  position: absolute;
-  width: 85%;
+    font-size: 16px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    border: 1px solid #9b9898;
+    border-radius: 5px;
+    margin: 12px 10px;
+    position: absolute;
+    width: 85%;
+    cursor: pointer;
+
 }
 .iconfont{
   margin-right: 5px;

src/components/townAttribute/index.vue

@@ -50,10 +50,6 @@ export default {
         },
     },
     watch: {
-        // listLand(news){
-        //     console.log('sasass',news);
-
-        // }
     },
     computed: {},
     created() { },