up

src/views/crops/area/index.vue

@@ -104,6 +104,9 @@
                     </div>
                 </div>
             </div>
+            <div class="leftFoldDiv" @click="leftFoldClick()">
+                <el-icon><ArrowRightBold /></el-icon>
+            </div>
         </div>
         <div class="rightWra">
             <div class="rightTop">
@@ -159,6 +162,9 @@
                 </el-select>
                 <div ref="ASdivisionDiv" class="ASdivision"></div>
             </div>
+            <div class="rightFoldDiv" @click="rightFoldClick()">
+                <el-icon><ArrowLeftBold /></el-icon>
+            </div>
         </div>
 
         <div class="bottom_center">
@@ -217,6 +223,8 @@ const clickInfoMap = ref({ name: '', value: '' });
 const checkedCities = ref([]);
 const formLandRef = ref([]);
 const flag = ref(false);
+let leftWraFlag = ref(true);
+let rightWraFlag = ref(true);
 let ff = ref('{x:765,y:191}');
 let Pie3D = reactive({
     arr: [
@@ -472,6 +480,8 @@ function initMap() {
             // // maximumLevel: 18
         }),
     });
+    // 去除logo
+    viewer.cesiumWidget.creditContainer.style.display = 'none';
     //加载地图服务
     // let map = new Cesium.WebMapServiceImageryProvider({
     //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
@@ -935,10 +945,32 @@ function deleteEntityByName(name) {
         }
     }
 }
+//折叠
+
+function leftFoldClick() {
+    leftWraFlag.value = !leftWraFlag.value;
+    if (leftWraFlag.value) {
+        let leftWra = document.querySelector('.leftWra');
+        leftWra.style.transform = 'translate(0,0)';
+    } else {
+        let leftWra = document.querySelector('.leftWra');
+        leftWra.style.transform = 'translate(-107%,0)';
+    }
+}
+function rightFoldClick() {
+    rightWraFlag.value = !rightWraFlag.value;
+    if (rightWraFlag.value) {
+        let rightWra = document.querySelector('.rightWra');
+        rightWra.style.transform = 'translate(0,0)';
+    } else {
+        let rightWra = document.querySelector('.rightWra');
+        rightWra.style.transform = 'translate(107%,0)';
+    }
+}
 
 /*------------------接口--------------------*/
 const getArea = () => {
-    getarea({ time: '2023-04-19', subregion: '1', parent: '黄岛区' }).then(res => {
+    getarea({ time: '2023-04-25', subregion: '1', parent: '黄岛区' }).then(res => {
         console.log(res);
     });
 };
@@ -1200,7 +1232,7 @@ const selectTab = () => {
                 },
             ],
         });
-        hiddenOverlayChart()
+        hiddenOverlayChart();
     }
     areatext = '1293842';
     tableData = [
@@ -1271,7 +1303,7 @@ const selectTab = () => {
     removeWms(['aaa']);
     // 添加村
     addvillage(`XZDM=${value.value}`, 'aaa');
-    getarea({ time: '2023-04-19', subregion: '1', parent: '黄岛区' }).then(res => {
+    getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
         let arr = [];
         res.data.map((item, index) => {
             if (item.region == townData.properties.XZMC) {
@@ -1315,7 +1347,6 @@ function areachar() {
         '2023/06/06',
         '2023/07/06',
         '2023/08/06',
-        '2023/09/06',
     ];
     const areaDivIntance = echarts.init(areaDiv.value);
     var option = {
@@ -2358,7 +2389,7 @@ function ASdivision() {
                 return (
                     params.seriesName +
                     '<span style="font-size: 14px; color: #f00;">' +
-                    params.value +
+                    (params.value / 66.72).toFixed(2) +
                     '</span>' +
                     '亩'
                 );
@@ -3036,6 +3067,8 @@ $height: calc(100vh - 100px);
         width: 100%;
         height: 45px;
         background: url('@/assets/images/title.png');
+        background-repeat: no-repeat;
+        background-size: 110% 100%;
         color: #fff;
         font-size: 18px;
         font-weight: 700;
@@ -3076,10 +3109,20 @@ $height: calc(100vh - 100px);
     top: 10px;
     left: 20px;
     height: $height;
-    width: 25%;
+    width: 23%;
     background: rgba(2, 31, 26, 0.85);
     box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
-
+    transition: transform 1s;
+    .leftFoldDiv {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        right: -12%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 30px;
+        color: #ccc;
+    }
     .leftTop {
         width: 100%;
         display: flex;
@@ -3180,7 +3223,7 @@ $height: calc(100vh - 100px);
     position: absolute;
     top: 10px;
     right: 20px;
-    width: 25%;
+    width: 23%;
     height: $height;
     opacity: 1;
     display: flex;
@@ -3188,7 +3231,17 @@ $height: calc(100vh - 100px);
     align-items: center;
     background: rgba(2, 31, 26, 0.85);
     box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
-
+    transition: transform 1s;
+    .rightFoldDiv {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        left: -8%;
+        top: 50%;
+        transform: translate(0, -50%);
+        font-size: 30px;
+        color: #ccc;
+    }
     .rightTop {
         width: 100%;
         height: 40%;