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%;

src/views/crops/classify/index.vue

@@ -28,6 +28,9 @@
                 </div>
                 <div ref="typesofDiv" class="typesofDiv"></div>
             </div>
+            <div class="leftFoldDiv" @click="leftFoldClick()">
+                <el-icon><ArrowRightBold /></el-icon>
+            </div>
         </div>
         <div class="rightWra">
             <div class="rightTop">
@@ -71,6 +74,9 @@
                 </el-select>
                 <div ref="ASdivisionDiv" class="ASdivision"></div>
             </div>
+            <div class="rightFoldDiv" @click="rightFoldClick()">
+                <el-icon><ArrowLeftBold /></el-icon>
+            </div>
         </div>
         <el-collapse class="legend" accordion>
             <el-collapse-item name="1">
@@ -201,6 +207,8 @@ let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
 const value = ref('370211');
 const clickInfoMap = ref({ info: [] });
 const flag = ref(false);
+let leftWraFlag = ref(true);
+let rightWraFlag = ref(true);
 let dd = {
     小麦: [],
     玉米: [],
@@ -849,6 +857,30 @@ function back() {
     });
     flag.value = false;
 }
+
+//折叠
+
+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 = (item, index) => {
     return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
@@ -916,62 +948,146 @@ const selectTab = () => {
         classData = [302034, 243990, 42344, 34234, 304235];
         deleteEntityByName('townLine');
         removeWms(['village_CQL']);
+        Pie3D = reactive({
+            arr: [
+                {
+                    name: '小麦',
+                    value: 101,
+                    itemStyle: {
+                        opacity: 0.8,
+                        color: 'rgba(110, 209, 84, 0.9)',
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '花生',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(251, 201, 3, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '大豆',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(240, 129, 31, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '地瓜',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(27, 85, 222, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '蓝莓',
+                    value: 56,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(72, 102, 211, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+            ],
+        });
     } else if (value.value) {
         classData = [102034, 173990, 22344, 14234, 104235];
+        Pie3D = reactive({
+            arr: [
+                {
+                    name: '小麦',
+                    value: 101,
+                    itemStyle: {
+                        opacity: 0.8,
+                        color: 'rgba(110, 209, 84, 0.9)',
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '花生',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(251, 201, 3, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '大豆',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(240, 129, 31, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '地瓜',
+                    value: 0,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(27, 85, 222, 1)',
+                    },
+                    label: {
+                        show: false,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '蓝莓',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(72, 102, 211, 0.9)',
+                    },
+                    label: {
+                        show: false,
+                    },
+                },
+            ],
+        });
     }
-
+    typesof();
-    Pie3D.arr = [
-        {
-            name: '小麦',
-            value: 20,
-            itemStyle: {
-                opacity: 0.5,
-                color: 'rgba(110, 209, 84, 0.9)',
-            },
-        },
-        {
-            // 数据项名称
-            name: '花生',
-            value: 10,
-            itemStyle: {
-                // 透明度
-                opacity: 0.5,
-                // 扇形颜色
-                color: 'rgba(251, 201, 3, 1)',
-            },
-            label: {
-                show: true,
-            },
-        },
-        {
-            // 数据项名称
-            name: '大豆',
-            value: 13,
-            itemStyle: {
-                // 透明度
-                opacity: 0.5,
-                // 扇形颜色
-                color: 'rgba(240, 129, 31, 0.9)',
-            },
-            label: {
-                show: true,
-            },
-        },
-        {
-            // 数据项名称
-            name: '地瓜',
-            value: 18,
-            itemStyle: {
-                // 透明度
-                opacity: 0.5,
-                // 扇形颜色
-                color: 'rgba(27, 85, 222, 1)',
-            },
-            label: {
-                show: true,
-            },
-        },
-    ];
     areachar();
     let arr = [...Township.arr];
     arr.forEach(item => {
@@ -1349,50 +1465,7 @@ function typesof() {
                     return '';
                 },
             },
-            // visualMap: [
+
-            //     {
-            //         show: false,
-            //         dimension: 2, // [x, y, z, u, v]
-            //         min: -1,
-            //         seriesIndex: 0,
-            //         max: 1,
-            //         inRange: {
-            //             color: ['#ff0', '#f00'],
-            //         },
-            //     },
-            //     {
-            //         show: false,
-            //         dimension: 4, // [x, y, z, u, v]
-            //         min: 0,
-            //         seriesIndex: 1,
-            //         max: Math.PI * 2,
-            //         inRange: {
-            //             color: ['#0bf', '#0f0', '#0bf'],
-            //         },
-            //     },
-            //     {
-            //         show: false,
-            //         dimension: 3, // [x, y, z, u, v]
-            //         min: 0,
-            //         seriesIndex: 2,
-            //         max: Math.PI * 2,
-            //         inRange: {
-            //             color: [
-            //                 '#a50026',
-            //                 '#d73027',
-            //                 '#f46d43',
-            //                 '#fdae61',
-            //                 '#fee090',
-            //                 '#ffffbf',
-            //                 '#e0f3f8',
-            //                 '#abd9e9',
-            //                 '#74add1',
-            //                 '#4575b4',
-            //                 '#313695',
-            //             ],
-            //         },
-            //     },
-            // ],
             xAxis3D: {
                 min: -1,
                 max: 1,
@@ -1713,7 +1786,7 @@ function ChartClick(item) {
     // 移除作物
     removeWms(['huangdaoqu_town'], true);
     removeWms(['shuzisannong:huangdaoqu_town']);
-    selectTab()
+    selectTab();
     let layername = 'shuzisannong:farmland';
 
     // 判断是否存在避免重复添加
@@ -2080,6 +2153,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;
@@ -2123,7 +2198,17 @@ $height: calc(100vh - 100px);
     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 {
         // height: 35%;
         max-width: calc(100% - 20px);
@@ -2134,8 +2219,8 @@ $height: calc(100vh - 100px);
             width: 100%;
             height: 327px;
             opacity: 1;
-            display: flex;
             padding: 1px;
+            display: flex;
             justify-content: center;
         }
     }
@@ -2170,7 +2255,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%;
@@ -2184,6 +2279,8 @@ $height: calc(100vh - 100px);
             width: 100%;
             height: 340px;
             opacity: 1;
+            display: flex;
+            justify-content: center;
         }
 
         .ProgressBar {
@@ -2223,9 +2320,11 @@ $height: calc(100vh - 100px);
         }
 
         .ASdivision {
-            width: 415px;
+            width: 100%;
             height: 368px;
             opacity: 1;
+            display: flex;
+            justify-content: center;
         }
 
         :deep(.el-select__popper) {