feat

src/components/custom-echart-maps/index.vue

@@ -2,7 +2,7 @@
   <div ref="chartMap" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, reactive, watch, watchEffect } from 'vue';
+import { ref, reactive, watch, watchEffect, nextTick } from 'vue';
 import { cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 

src/utils/echarts.js

@@ -1,8 +1,8 @@
 import * as echarts from 'echarts/core';
-
 import {
   BarChart,
   LineChart,
+  LinesChart,
   PieChart,
   MapChart,
   PictorialBarChart,
@@ -46,6 +46,7 @@ echarts.use([
   ParallelComponent,
   BarChart,
   LineChart,
+  LinesChart,
   PieChart,
   MapChart,
   RadarChart,

src/views/entities/components/entitiesMap.vue

@@ -30,6 +30,7 @@ const list = reactive([
 let currentRegion = ref(null);
 const doMapclick = (data) => {
   currentRegion.value = data;
+  list.forEach((v) => (v.value = (Math.floor(Math.random() * (6.65 - 2.12 + 1)) + 2.12).toFixed(2)));
 };
 </script>
 

src/views/entities/components/entitiesStatistics.vue

@@ -7,15 +7,15 @@ import * as echarts from 'echarts';
 
 const state = reactive({
   data: [
-    { value: 333, value1: 208, name: '耿马镇' },
+    { value: 103, value1: 208, name: '耿马镇' },
-    { value: 222, value1: 157, name: '勐撒镇' },
+    { value: 72, value1: 157, name: '勐撒镇' },
-    { value: 123, value1: 125, name: '勐永镇' },
+    { value: 50, value1: 125, name: '勐永镇' },
-    { value: 156, value1: 146, name: '孟定镇' },
+    { value: 60, value1: 146, name: '孟定镇' },
-    { value: 112, value1: 86, name: '勐简乡' },
+    { value: 40, value1: 86, name: '勐简乡' },
-    { value: 123, value1: 172, name: '贺派乡' },
+    { value: 111, value1: 172, name: '贺派乡' },
-    { value: 121, value1: 180, name: '四排山乡' },
+    { value: 81, value1: 180, name: '四排山乡' },
-    { value: 143, value1: 99, name: '芒洪乡' },
+    { value: 55, value1: 99, name: '芒洪乡' },
-    { value: 123, value1: 84, name: '大兴乡' },
+    { value: 68, value1: 84, name: '大兴乡' },
   ],
   option: {
     grid: {
@@ -30,6 +30,8 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
+      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      borderColor: '#35d0c0',
       formatter: (data) => {
         console.log('data', data);
         const params = data[0];
@@ -182,6 +184,7 @@ const state = reactive({
         symbolSize: 8,
         smooth: true,
         symbol: 'circle',
+        max: 100,
         lineStyle: {
           normal: {
             color: 'rgba(53,208,192,1)',

src/views/inputs/components/inputsMap.vue

@@ -34,6 +34,9 @@ const list = reactive([
 let currentRegion = ref(null);
 const doMapclick = (data) => {
   currentRegion.value = data;
+  list.forEach((v) => {
+    v.value = Number(v.value) + 1 * (Math.floor(Math.random() * (6 - 2 + 1)) + 2.12).toFixed(0);
+  });
 };
 </script>
 

src/views/land/components/landMap.vue

@@ -1,9 +1,9 @@
 <template>
-  <centerMap :dialog-title="'土地类型'">
+  <centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
     <template #header>
       <div class="land-map-pop-header">
         <div class="title">土地类型</div>
-        <div class="value">总：88.5{{ unit }}</div>
+        <div class="value">总：{{ all + unit }}</div>
       </div>
     </template>
     <template #dialogContent>
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, computed } from 'vue';
 
 const unit = ref('万亩');
 const list = reactive([
@@ -34,6 +34,18 @@ const list = reactive([
   { title: '灌溉水田', value: '60.8', color: '#41BDFC' },
   { title: '旱地', value: '60.8', color: '#FC0003' },
 ]);
+function doMapclick() {
+  list.forEach((v) => {
+    v.value = Number(v.value) + 1 * (Math.floor(Math.random() * (6 - 2 + 1)) + 2.12).toFixed(0);
+  });
+}
+const all = computed(() => {
+  let n = 0;
+  list.forEach((v) => {
+    n += v.value;
+  });
+  return n;
+});
 </script>
 
 <style lang="scss" scoped>

src/views/trace/components/codeNumCharts.vue

@@ -7,24 +7,24 @@ import { reactive } from 'vue';
 const state = reactive({
   data: [
     {
-      name: '茶叶',
+      name: '其他',
-      value: 12000,
+      value: 3500,
-    },
-    {
-      name: '核桃',
-      value: 8000,
-    },
-    {
-      name: '甘蔗',
-      value: 6000,
     },
     {
       name: '烟叶',
       value: 4000,
     },
     {
-      name: '其他',
+      name: '甘蔗',
-      value: 3500,
+      value: 6000,
+    },
+    {
+      name: '核桃',
+      value: 8000,
+    },
+    {
+      name: '茶叶',
+      value: 12000,
     },
   ],
   option: {

src/views/trace/components/detectionCharts.vue

@@ -9,7 +9,7 @@
       </div>
       <vue3ScrollSeamless class="list" :class-options="classOptions" :data-list="list">
         <ul class="case-info">
-          <li v-for="(item, index) in list" :key="index">
+          <li v-for="(item, index) in list" :key="index" @click="handleInfo(item)">
             <div>{{ item.productName }}</div>
             <div>{{ item.productCode }}</div>
             <div>{{ item.specs }}</div>
@@ -19,6 +19,48 @@
       </vue3ScrollSeamless>
     </div>
   </div>
+  <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
+    <i class="el-icon-close" @click="handleCloseInfo">X</i>
+    <section>
+      <section class="info_box">
+        <div>
+          <span class="_label">产品名称</span>
+          <span>{{ info.productName }}</span>
+        </div>
+        <div>
+          <span class="_label">产品批次号</span>
+          <span>{{ info.productCode }}</span>
+        </div>
+        <div>
+          <span class="_label">产品规格</span>
+          <span>{{ info.specs }}</span>
+        </div>
+        <div>
+          <span class="_label">产品类型</span>
+          <span>{{ info.productType }}</span>
+        </div>
+        <div>
+          <span class="_label">生产厂家</span>
+          <span>{{ info.info && info.info.manufacturer }}</span>
+        </div>
+        <div>
+          <span class="_label">生产时间</span>
+          <span>{{ info.info && info.info.productTime }}</span>
+        </div>
+        <div>
+          <span class="_label">终端零售店</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>
 </template>
 
 <script setup>
@@ -39,6 +81,15 @@ let list = ref([]);
 const classOptions = {
   singleHeight: 48,
 };
+const info = ref({
+  show: false,
+});
+function handleInfo(item) {
+  info.value = Object.assign({ show: true }, item);
+}
+function handleCloseInfo() {
+  info.value = { show: false };
+}
 </script>
 
 <style scoped lang="scss">
@@ -92,4 +143,102 @@ const classOptions = {
     }
   }
 }
+.line_info {
+  position: fixed;
+  padding: 32px 10px 20px 20px;
+  left: 30%;
+  top: var(--top);
+  max-height: 74vh;
+  width: 400px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 2px solid #01fefd;
+  border-radius: 16px;
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
+  font-size: 18px;
+  ._label {
+    color: #01fefd;
+  }
+  .el-icon-close {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  > section {
+    padding-right: 10px;
+    max-height: calc(74vh - 100px);
+    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: '黑体';
+          color: #01fefd;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/trace/components/productTypeCharts.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="_container">
     <div class="_left">
-      <video src=""></video>
+      <video src="../../../assets/video.mp4" autoplay loop controls></video>
       <div class="video_footer">核桃仁原材料</div>
     </div>
     <div class="_right">

src/views/trace/components/traceMap.vue

@@ -6,7 +6,6 @@
   </div>
 </template>
 <script setup>
-import { isEmpty, getAssetsFile } from '@/utils';
 import { ref, reactive, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import geoJsonData from './china.json'; // 根据实际情况调整路径;

src/views/trace/index.vue

@@ -76,13 +76,7 @@ import productTypeCharts from './components/productTypeCharts.vue';
 import traceBarCharts from './components/traceBarCharts.vue';
 import detectionCharts from './components/detectionCharts.vue';
 
-const one = ref([
+const one = ref([]);
-  { value: 12000, name: '耿马镇' },
-  { value: 8000, name: '勐撒镇' },
-  { value: 862, name: '勐简乡' },
-  { value: 6000, name: '勐永镇' },
-  { value: 4000, name: '孟定镇' },
-]);
 
 const handleCommand = (data) => {
   // state.queryCode = data.value;