no message

src/components/Screenfull/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
+    <svg-icon :className="className" :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
   </div>
 </template>
 
@@ -9,6 +9,12 @@ import screenfull from 'screenfull'
 
 export default {
   name: 'Screenfull',
+  props:{
+    className: {
+      type: String,
+      default: ''
+    },
+  },
   data() {
     return {
       isFullscreen: false

src/views/bigViews/dataView1/components/mapDataStatistics.vue

@@ -112,20 +112,28 @@ export default {
       }
     };
   },
-  watch: {
-    
+  computed: {
+    userInfo() {
+      return JSON.parse(localStorage.getItem('greemall_user'))
+    },
   },
-  mounted() {
-    this.getBigGetLarge1()
-  },
-  beforeUnmount() {
+  watch:{
+    "userInfo.type":{
+      handler(newVal, oldVal) {
+        this.getBigGetLarge1()
+      },
+      deep: true,
+      immediate: true,
+    }
   },
   methods: {
    getBigGetLarge1(pam){
-    bigGetLarge1(pam).then(res=>{
-      this.info = res.data
-      console.log(this.info,"niunpionpoimo;i")
-    })
+    if(this.userInfo){
+      (this.userInfo.type == 2 ? bigGetLarge1 : bigGetLarge2)(pam).then(res=>{
+        this.info = res.data
+        console.log(this.info,"niunpionpoimo;i")
+      })
+    }
    }
   },
 };

src/views/bigViews/dataView1/components/mapdata.vue

@@ -50,33 +50,33 @@ import * as echarts from 'echarts';
 import { bigGetRegion, bigGetLarge9 } from '@/api/common.js';
 // 计算 GeoJSON 数据的边界框
 function calculateBoundingBox(geoJsonData) {
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    geoJsonData.features.forEach((feature) => {
-        const coordinates = feature.geometry.coordinates;
-        const type = feature.geometry.type;
-        if (type === 'Polygon') {
-            coordinates.forEach((polygon) => {
-                polygon.forEach((coord) => {
-                    minX = Math.min(minX, coord[0]);
-                    minY = Math.min(minY, coord[1]);
-                    maxX = Math.max(maxX, coord[0]);
-                    maxY = Math.max(maxY, coord[1]);
-                });
-            });
-        } else if (type === 'MultiPolygon') {
-            coordinates.forEach((multiPolygon) => {
-                multiPolygon.forEach((polygon) => {
-                    polygon.forEach((coord) => {
-                        minX = Math.min(minX, coord[0]);
-                        minY = Math.min(minY, coord[1]);
-                        maxX = Math.max(maxX, coord[0]);
-                        maxY = Math.max(maxY, coord[1]);
-                    });
-                });
-            });
-        }
-    });
-    return { minX, minY, maxX, maxY };
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  geoJsonData.features.forEach((feature) => {
+    const coordinates = feature.geometry.coordinates;
+    const type = feature.geometry.type;
+    if (type === 'Polygon') {
+      coordinates.forEach((polygon) => {
+        polygon.forEach((coord) => {
+          minX = Math.min(minX, coord[0]);
+          minY = Math.min(minY, coord[1]);
+          maxX = Math.max(maxX, coord[0]);
+          maxY = Math.max(maxY, coord[1]);
+        });
+      });
+    } else if (type === 'MultiPolygon') {
+      coordinates.forEach((multiPolygon) => {
+        multiPolygon.forEach((polygon) => {
+          polygon.forEach((coord) => {
+            minX = Math.min(minX, coord[0]);
+            minY = Math.min(minY, coord[1]);
+            maxX = Math.max(maxX, coord[0]);
+            maxY = Math.max(maxY, coord[1]);
+          });
+        });
+      });
+    }
+  });
+  return { minX, minY, maxX, maxY };
 }
 export default {
   components: {
@@ -103,177 +103,165 @@ export default {
       getLarge9: []
     };
   },
+  computed: {
+    userInfo() {
+      return JSON.parse(localStorage.getItem('greemall_user'))
+    },
+  },
+  watch:{
+    "userInfo.type":{
+      handler(newVal, oldVal) {
+        if(this.userInfo){
+          if (this.userInfo.type == 2){
+            this.getbigGetLarge9({ country: 100000 });
+          }else{
+            this.getbigGetLarge9({ province:this.userInfo.province, city: this.userInfo.city });
+          }
+        }
+      },
+      deep: true,
+      immediate: true,
+    }
+  },
   mounted() {
     this.getbigGetLarge9();
-    
   },
   methods: {
-    getbigGetLarge9(){
-      bigGetLarge9().then(res=>{
+    getbigGetLarge9(pam) {
+      bigGetLarge9().then(res => {
         this.getLarge9 = res.data
-        this.echart_7();
+        this.echart_7(pam);
       })
     },
-    echart_7(pam={ 
-      country: 100000, // province:"广东省", // city: "广州市"
-    }) {
-        var that = this;
-        if (that.myChart) {
-          that.myChart.dispose();
-        }
-        bigGetRegion(pam).then(res => {
-          // 初始化 ECharts 实例
-          that.myChart = echarts.init(document.getElementById('chart_7'));
-          const geoJsonData = JSON.parse(res.data);
-          // 计算边界框
-          const boundingBox = calculateBoundingBox(geoJsonData);
-          // 计算中心点
-          const center = [
-            (boundingBox.minX + boundingBox.maxX) / 2,
-            (boundingBox.minY + boundingBox.maxY) / 2
-          ];
-          echarts.registerMap('china', geoJsonData);
-          // 指定城市和颜色
-          var cityColors = {};
-          this.getLarge9.map(name => {
-            cityColors[name] = "#009eff";
-          });
-          // 构建 series 数据
-          var seriesData = Object.keys(cityColors).map(function (city) {
-            return {
-              name: city,
-              itemStyle: {
-                normal: {
-                  areaColor: cityColors[city],
-                  borderColor: 'none'
-                },
-                emphasis: {
-                  areaColor: cityColors[city],
-                  borderColor: 'none'
-                }
-              },
-              silent: true
-            };
-          });
-          // 配置项
-          var option = {
-            tooltip: {
-              trigger: 'item',
-              formatter: '{b}'
-            },
-            geo: {
-              map: 'china',
-              roam: true,
-              zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
-              center: center,
-              itemStyle: {
-                normal: {
-                  areaColor: 'none',
-                  borderColor: '#096DF3'
-                },
-                emphasis: {
-                  areaColor: '#7024fb'
-                }
+    echart_7(pam) {
+      var that = this;
+      if (that.myChart) {
+        that.myChart.dispose();
+      }
+      bigGetRegion(pam).then(res => {
+        // 初始化 ECharts 实例
+        that.myChart = echarts.init(document.getElementById('chart_7'));
+        const geoJsonData = JSON.parse(res.data);
+        // 计算边界框
+        const boundingBox = calculateBoundingBox(geoJsonData);
+        // 计算中心点
+        const center = [
+          (boundingBox.minX + boundingBox.maxX) / 2,
+          (boundingBox.minY + boundingBox.maxY) / 2
+        ];
+        echarts.registerMap('china', geoJsonData);
+        // 指定城市和颜色
+        var cityColors = {};
+        this.getLarge9.map(name => {
+          cityColors[name] = "#009eff";
+        });
+        // 构建 series 数据
+        var seriesData = Object.keys(cityColors).map(function (city) {
+          return {
+            name: city,
+            itemStyle: {
+              normal: {
+                areaColor: cityColors[city],
+                borderColor: 'none'
               },
-              regions: [
-                ...seriesData,
-                {
-                  name: "南海诸岛",
-                  itemStyle: {
-                    normal: {
-                      opacity: 0,
-                    }
-                  },
-                  label: {
-                    show: false
-                  }
-                }
-              ]
+              emphasis: {
+                areaColor: cityColors[city],
+                borderColor: 'none'
+              }
             },
-            series: [{
-              type: 'map',
-              map: 'china',
-              geoIndex: 0,
-              data: seriesData
-            }]
           };
-
-          // 使用配置项生成图表
-          that.myChart.setOption(option);
-
-          // 监听点击事件
-          that.myChart.on('click', function (params) {
-            // 更新地区颜色
-            var updatedSeriesData = seriesData.map(function (item) {
-              if (item.name === params.name) {
-                return {
-                  name: item.name,
-                  itemStyle: {
-                    normal: {
-                      areaColor: 'red',
-                      borderColor: 'none'
-                    },
-                    emphasis: {
-                      areaColor: 'none',
-                    }
+        });
+        var mapcon = {
+          itemStyle: {
+            normal: {
+              borderColor: 'rgba(0,144,255, 1)',
+              borderWidth: 1,
+              areaColor: {
+                type: 'radial',
+                x: 0.4,
+                y: 0.5,
+                r: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0,144,255, 0)', // 0% 处的颜色
                   },
-                  silent: true
-                };
-              } else {
-                return {
-                  name: item.name,
-                  itemStyle: {
-                    normal: {
-                      areaColor: cityColors[item.name] || 'none',
-                      borderColor: 'none'
-                    },
-                    emphasis: {
-                      areaColor: 'none',
-                    }
+                  {
+                    offset: 1,
+                    color: 'rgba(0,144,255, .1)', // 100% 处的颜色
                   },
-                  silent: true
-                };
-              }
-            });
-            if(!updatedSeriesData.find(item=>item.name === params.name)){
-              updatedSeriesData.push({
-                name: params.name,
+                  {
+                    offset: 1,
+                    color: 'rgba(0,144,255, 1)', // 100% 处的颜色
+                  },
+                ],
+                globalCoord: false, // 缺省为 false
+              },
+              shadowColor: 'rgba(0,144,255, 1)',
+              shadowOffsetX: -1,
+              shadowOffsetY: 1,
+              shadowBlur: 10,
+            },
+            emphasis: {
+              areaColor: '#0082ff',
+              borderWidth: 0,
+            },
+          },
+          select: {
+            // 地图选中区域样式
+            label: {
+              // 选中区域的label(文字)样式
+              color: '#fff',
+            },
+            itemStyle: {
+              // 选中区域的默认样式
+              areaColor: '#7024fb',
+            },
+          },
+          animation: false,
+        };
+        // 配置项
+        var option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b}'
+          },
+          geo: {
+            map: 'china',
+            roam: true,
+            zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
+            center: center,
+            ...mapcon,
+            regions: [
+              ...seriesData,
+              {
+                name: "南海诸岛",
                 itemStyle: {
                   normal: {
-                    areaColor: 'red',
-                    borderColor: 'none'
-                  },
-                  emphasis: {
-                    areaColor: 'none',
+                    opacity: 0,
                   }
                 },
-                silent: true
-              })
-            };
-            // 更新图表
-            that.myChart.setOption({
-              geo: {
-                regions: [
-                  ...updatedSeriesData,
-                  {
-                    name: "南海诸岛",
-                    itemStyle: {
-                      normal: {
-                        opacity: 0,
-                      }
-                    },
-                    label: {
-                      show: false
-                    }
-                  }
-                ]
-              },
-              series: [{
-                data: updatedSeriesData
-              }]
-            });
-          });
+                label: {
+                  show: false
+                }
+              }
+            ]
+          },
+          series: [{
+            type: 'map',
+            map: 'china',
+            ...mapcon,
+            geoIndex: 0,
+            data: seriesData
+          }]
+        };
+        // 使用配置项生成图表
+        that.myChart.setOption(option);
+        // 监听点击事件
+        that.myChart.on('click', function (params) {
+          
         });
+      });
 
     },
   },
@@ -281,31 +269,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.shujuxianshi {
-  position: absolute;
-  top: 40px;
-  left: 55px;
-  width: 177px;
-  height: auto;
-  background: #092a66;
-  border: 2px solid #0462b5;
-  border-radius: 5px;
-  box-sizing: border-box;
-  padding: 16px 20px;
-
-  .shujuxianshiTitle {
-    font-size: 16px;
-    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
-    font-weight: 400;
-    text-align: left;
-    color: #5fe3ff;
-    margin-bottom: 12px;
-  }
-
-  .shujuxianshidw {
-    margin-left: 5px;
-  }
-}
 
 .leixingxianshi {
   width: 120px;
@@ -377,28 +340,4 @@ export default {
   background: linear-gradient(0deg, #3ce783 0%, #3ce783 100%);
 }
 
-@keyframes xing {
-  0% {
-    transform: scale(1);
-  }
-
-  25% {
-    transform: scale(1.1);
-  }
-
-  50% {
-    transform: scale(0.95);
-  }
-
-  75% {
-    transform: scale(1.05);
-  }
-}
-
-.my_xing {
-  -webkit-animation-name: xing;
-  -webkit-animation-timing-function: ease-in-out;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-duration: 1s;
-}
 </style>

src/views/bigViews/index.vue

@@ -20,12 +20,18 @@
         <zj-page-fill>
           <dataView1/>
         </zj-page-fill>
+        <div @click="shuxinyemian" :style="`position: fixed;right: 20px;bottom: 60px;background-image: url(${shuaxin});background-size: 100%;width:30px;height: 30px;z-index: 9999;`">
+        </div>
+        <div :style="`position: fixed;right: 20px;bottom: 20px;background-image: url(${quanpin});background-size: 100%;width:30px;height: 30px;z-index: 9999;display: flex;justify-content: center;align-items: center;`">
+          <screenfull id="screenfull" :className="'hahahdkdjshakdhssk'"/>
+        </div>
       </zj-page-container>
     </div>
   </page-size-limit>
 </template>
 
 <script>
+import Screenfull from '@/components/Screenfull'
 import pageSizeLimit from '@/components/page-size-limit.vue';
 import headView from '@/components/head.vue';
 import { delayPerform } from 'js-perform-lock';
@@ -33,6 +39,8 @@ import { login } from '@/api/bigView.js';
 import Cookies from 'js-cookie';
 import { commonly } from '@/api/bigView.js';
 import loginbg from '@/assets/loginbg.png';
+import quanpin from '@/assets/全屏@2x.png';
+import shuaxin from '@/assets/刷新@2x.png';
 import { ElMessage, ElLoading } from 'element-ui';
 var d;
 import dataView1 from './dataView1/index.vue';
@@ -42,9 +50,12 @@ export default {
     headView,
     dataView1,
     pageSizeLimit,
+    Screenfull
   },
   data() {
     return {
+      quanpin,
+      shuaxin,
       dayIndex: (new Date().getDate() - 1) % 5,
       loginbg,
       dialogVisible: Cookies.get('token') ? false : true,
@@ -74,6 +85,9 @@ export default {
     window.removeEventListener('resize', d);
   },
   methods: {
+    shuxinyemian(){
+      location.reload();
+    },
     changeswiper(index) {
       this.swindex = index;
     },
@@ -126,6 +140,10 @@ export default {
 </script>
 
 <style lang="scss">
+.hahahdkdjshakdhssk{
+  fill: #fff !important;
+  color: #fff !important;
+}
 .el-carousel__arrow {
   top: 75% !important;
 }