up

src/views/meteorological/remoteSense/freeze/Freeze.vue

@@ -99,7 +99,7 @@
                     <el-select
                         popper-class="select_city"
                         @change="selectTab(item)"
-                        v-model="value"                        
+                        v-model="value"
                         placeholder="全部"
                     >
                         <el-option
@@ -366,7 +366,9 @@ import axios from 'axios';
 import 'echarts-gl';
 import { downLoadFile } from '@/utils/download.js';
 import * as xlsx from 'xlsx'; // Vue3 版本
+import { useRouter } from 'vue-router';
 
+const router = useRouter();
 let viewer = ref(null);
 const areaDiv = ref(null);
 const typesofDiv = ref(null);
@@ -499,6 +501,9 @@ let TypeTime = {
 
 // 组件挂载完成后执行
 onMounted(() => {
+    initonMounted();
+});
+function initonMounted() {
     getstatisticsOfTheAreas('370211'); //冷冻等级面积统计
     getproportionOfAreas('370211'); //冷冻等级面积占比
     geteachFreezingGradeAreas(); //高标准农田冷冻等级面积统计
@@ -525,6 +530,15 @@ onMounted(() => {
     leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
     let rightWra = document.querySelector('.rightWra');
     rightWra.style.transform = 'translate(107%,0)';
+    localStorage.setItem(router.currentRoute.value.path, true);
+}
+onUpdated(() => {
+    console.log(localStorage.getItem(router.currentRoute.value.path));
+    if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
+        document.querySelector('.mode').innerText = '地图模式';
+    } else {
+        document.querySelector('.mode').innerText = '列表模式';
+    }
 });
 
 /*-------------地图------------------------*/
@@ -1548,7 +1562,6 @@ const exportExcel = (tableData, fileName = '用户列表', pageName = 'Sheet1')
         轻度冻害: '轻度冻害(亩)',
         中度冻害: '中度冻害(亩)',
         重度冻害: '重度冻害(亩)',
-        area: '面积(亩)',
     };
     const list = changeTableHead(tableData, fieldNameObj);
     // 创建工作表
@@ -2011,7 +2024,7 @@ function chartModes() {
     const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
     let arr = [];
     let 无冻害 = [];
-    let 轻度冻害=[];
+    let 轻度冻害 = [];
     let 中度冻害 = [];
     let 重度冻害 = [];
     insectarr.value.forEach(item => {
@@ -2022,6 +2035,7 @@ function chartModes() {
         item.重度冻害 !== undefined ? 重度冻害.push(item.重度冻害) : 重度冻害.push(0);
         item.轻度冻害 !== undefined ? 轻度冻害.push(item.轻度冻害) : 轻度冻害.push(0);
     });
+    let ends = (10 / arr.length) * 100;
     let option = {
         tooltip: {
             trigger: 'axis',
@@ -2049,34 +2063,28 @@ function chartModes() {
         },
         dataZoom: [
             {
-                // start: 0,//默认为0
-                // end: 100,//默认为100
                 type: 'slider',
-                show: false,
-                // xAxisIndex: [0],
-                handleSize: 0, //滑动条的 左右2个滑动条的大小
-                startValue: 0, // 初始显示值
-                endValue: 6, // 结束显示值
-                height: 10, //组件高度
-                left: '5%', //左边的距离
-                right: '4%', //右边的距离
-                bottom: 5, //底边的距离
-                borderColor: '#000',
-                fillerColor: '#269cdb',
-                borderRadius: 5,
-                backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
-                showDataShadow: false, //是否显示数据阴影 默认auto
-                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
-                realtime: true, //是否实时更新
-                filterMode: 'filter',
+                width: '40%',
+                top: '90%',
+                start: 0,
+                end: ends,
+                showDataShadow: false,
+                showDetail: false,
+                fillerColor: 'rgba(64, 158, 255)',
+                borderRadius: '50%',
+                moveHandleSize: 0,
+                moveHandleStyle: {},
+                left: '30%',
+                height: 12,
+                handleSize: '80%',
+                handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
+                handleStyle: {
+                    borderWidth: 0,
+                    color: 'rgba(64, 158, 255)',
+                },
             },
-            //下面这个属性是里面拖到
             {
                 type: 'inside',
-                show: true,
-                // xAxisIndex: [0],
-                start: 1, //默认为1
-                end: 100, //默认为100
             },
         ],
         legend: {
@@ -2085,7 +2093,7 @@ function chartModes() {
             icon: 'rect',
             itemWidth: 4, // 图例图表宽度
             itemHeight: 12, // 图例图标高度
-            data: ['餐费', '打车费', '零食', '日用品'],
+            data: [],
         },
         grid: {
             left: '3%',
@@ -2831,7 +2839,7 @@ $height: calc(100vh - 100px);
     }
     .searchDiv {
         display: flex;
-        :deep(.el-input__wrapper){
+        :deep(.el-input__wrapper) {
             width: 100px;
         }
         .dow {
@@ -3050,7 +3058,7 @@ $height: calc(100vh - 100px);
 
     .rightbottom {
         width: 100%;
-        height:59%;
+        height: 59%;
         opacity: 1;
         display: flex;
         flex-direction: column;