Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-screen

src/components/centerMap.vue

@@ -4,6 +4,48 @@
     <div class="map-pos">
       <custom-echart-maps :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
     </div>
+    <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
+      <i class="el-icon-close" @click="handleCloseInfo"></i>
+      <section>
+        <section class="info_box">
+          <div>
+            <span>产品名称</span>
+            <span>{{ info.productName }}</span>
+          </div>
+          <div>
+            <span>产品批次号</span>
+            <span>{{ info.productCode }}</span>
+          </div>
+          <div>
+            <span>产品规格</span>
+            <span>{{ info.specs }}</span>
+          </div>
+          <div>
+            <span>产品类型</span>
+            <span>{{ info.productType }}</span>
+          </div>
+          <div>
+            <span>生产厂家</span>
+            <span>{{ info.info && info.info.manufacturer }}</span>
+          </div>
+          <div>
+            <span>生产时间</span>
+            <span>{{ info.info && info.info.productTime }}</span>
+          </div>
+          <div>
+            <span>终端零售店</span>
+            <span>{{ info.info && info.info.shop }}</span>
+          </div>
+        </section>
+        <section class="route_box">
+          <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
+            <div class="_circle"></div>
+            <div class="_name">{{ item.name }}</div>
+            <div class="_time">{{ item.time }}</div>
+          </div>
+        </section>
+      </section>
+    </section>
   </div>
 </template>
 <script setup>
@@ -46,9 +88,9 @@ const chartsData = reactive({
     geo3D: {
       map: mapName.value,
       roam: true,
-      zoom: 0.9,
+      zoom: 1.2,
       show: true,
-      zlevel: -2, // 必须设置，
+      zlevel: -1, // 必须设置，
       viewControl: {
         distance: 110,
         alpha: 60,
@@ -62,7 +104,7 @@ const chartsData = reactive({
       },
       itemStyle: {
         // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-        color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
+        color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
         opacity: 1, // 图形的不透明度 [ default: 1 ]
         borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
         borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
@@ -88,19 +130,7 @@ const chartsData = reactive({
           color: '#fff',
         },
         itemStyle: {
-          // show: false,
+          color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
-          color: {
-            type: 'linear', // 线性渐变
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              { offset: 0, color: '#45bfe9' },
-              { offset: 1, color: '#01589c' },
-            ],
-            global: false, // 默认为 false
-          },
         },
       },
     },
@@ -152,7 +182,7 @@ const chartsData = reactive({
       show: true,
       itemStyle: {
         // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-        color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
+        color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
         opacity: 1, // 图形的不透明度 [ default: 1 ]
         borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
         borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ]
@@ -171,27 +201,27 @@ const chartsData = reactive({
           borderColor: '#000',
         },
       },
-      emphasis: {
+      // emphasis: {
-        //高亮状态的效果
+      //   //高亮状态的效果
-        label: {
+      //   label: {
-          show: true,
+      //     show: true,
-          color: '#fff',
+      //     color: '#fff',
-        },
+      //   },
-        itemStyle: {
+      //   itemStyle: {
-          // show: false,
+      //     // show: false,
-          color: {
+      //     areaColor: {
-            type: 'linear', // 线性渐变
+      //       type: 'linear',
-            x: 0,
+      //       x: 0,
-            y: 0,
+      //       y: 0,
-            x2: 0,
+      //       x2: 1,
-            y2: 1,
+      //       y2: 0,
-            colorStops: [
+      //       colorStops: [
-              { offset: 0, color: '#45bfe9' },
+      //         { offset: 0, color: '#4bffb4' },
-              { offset: 1, color: '#01589c' },
+      //         { offset: 1, color: '#4bffb4' },
-            ],
+      //       ],
-          },
+      //     },
-        },
+      //   },
-      },
+      // },
     },
     // 闪烁散点图系列
     {
@@ -258,12 +288,104 @@ div {
     max-height: 1000px;
   }
   .map-pos {
-    width: 80%;
+    width: 100%;
-    height: 80%;
+    height: 100%;
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
   }
+  .line_info {
+    position: fixed;
+    padding: 32px 10px 20px 20px;
+    left: 60px;
+    top: var(--top);
+    max-height: 74vh;
+    width: 400px;
+    color: #fff;
+    background-color: rgb(42 125 235 / 40%);
+    border-radius: 8px;
+    backdrop-filter: blur(4px);
+    z-index: 9999;
+    transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
+    .el-icon-close {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    > section {
+      padding-right: 10px;
+      height: 100%;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: #dddddd;
+        border-radius: 6px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #959191;
+        border-radius: 6px;
+      }
+      &::-webkit-scrollbar-thumb:hover {
+        background-color: #a0a0a0;
+      }
+      .info_box {
+        > div {
+          margin-bottom: 12px;
+          display: grid;
+          grid-template-columns: 40% 60%;
+          span {
+            &:last-child {
+              text-align: right;
+            }
+          }
+        }
+      }
+      .route_box {
+        padding: 0 34px;
+        > div {
+          position: relative;
+          padding-bottom: 16px;
+          &::after {
+            content: '';
+            position: absolute;
+            top: 12px;
+            left: -11px;
+            height: 100%;
+            border: 1px solid #fff;
+          }
+          &:last-child {
+            &::after {
+              display: none;
+            }
+          }
+          > div {
+            position: relative;
+            padding-left: 12px;
+          }
+          ._circle {
+            position: absolute;
+            top: 4px;
+            left: -16px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: #fff;
+            box-shadow: 0 0 3px #fff;
+          }
+          ._name {
+            margin-bottom: 6px;
+            font-size: 20px;
+            font-weight: bold;
+            font-family: '黑体';
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/components/subTop.vue

@@ -3,11 +3,11 @@
     <div
       :style="{
         'background-image': 'url(' + getAssetsFile('images/vsualized/home/titlebg.png') + ')',
-        transform: pos == 'right' ? 'rotateY(180deg)' : '',
+        transform: pos == 'right' ? 'rotateY(0deg)' : '',
       }"
       class="title-top-bg"
     ></div>
-    <span class="title-top-content" :style="{ 'text-align': pos }">{{ topTitle || '--' }}</span>
+    <span class="title-top-content" :style="{ 'text-align': left }">{{ topTitle || '--' }}</span>
   </div>
 </template>
 <script setup>
@@ -70,7 +70,7 @@ watch(
     letter-spacing: 4px;
     text-shadow: -2px 0 0 1px #add8f1;
     width: 100%;
-    padding: 0 36px;
+    padding: 0 36px 0 72px;
     box-sizing: border-box;
     position: absolute;
     left: 0;

src/views/land/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="data-home-index">
+  <el-row style="width: 100%; height: 100%" class="data-home-index">
-    <el-row style="width: 100%; height: 100%">
     <el-col :span="6" class="left-charts">
       <div class="left-charts-item">
         <customBack top-title="耕地面积统计" :top-postion="'left'">
@@ -51,7 +50,6 @@
       </div>
     </el-col>
   </el-row>
-  </div>
 </template>
 <script setup>
 import centerMap from '@/components/centerMap.vue';
@@ -61,7 +59,6 @@ import landareaCharts from './components/landareaCharts.vue';
 import landCirculation from './components/landCirculation.vue';
 import landPlan from './components/landPlan.vue';
 import landPatrol from './components/landPatrol.vue';
-import { reactive } from 'vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {
@@ -73,7 +70,7 @@ import { reactive } from 'vue';
     flex-direction: column;
   }
   .left-charts-item {
-    width: 100%;
+    width: calc(100% - 5px);
     height: calc((100% - 30px) / 3);
   }
 
@@ -85,7 +82,7 @@ import { reactive } from 'vue';
     flex-direction: column;
   }
   .right-charts-item {
-    width: 100%;
+    width: calc(100% - 5px);
     height: calc((100% - 30px) / 3);
   }
 }