From 61f04ce90e547d1131af47074c6e01384bc52730 Mon Sep 17 00:00:00 2001
From: lx <826276471@qq.com>
Date: Mon, 21 Apr 2025 15:51:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=BA=AF=E6=BA=90=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dataV/index.vue                |   2 +-
 src/views/dataV/pageFive/index.vue       | 161 ++++++-
 src/views/dataV/pageFive/list.json       | 574 +++++++++++++++++++++++
 src/views/dataV/pageFive/tracecode.vue   | 232 ++++-----
 src/views/dataV/pageFive/tracemap.vue    | 108 ++---
 src/views/dataV/pageFive/tracepecent.vue | 279 +++--------
 6 files changed, 963 insertions(+), 393 deletions(-)
 create mode 100644 src/views/dataV/pageFive/list.json

diff --git a/src/views/dataV/index.vue b/src/views/dataV/index.vue
index aded007..4e89883 100644
--- a/src/views/dataV/index.vue
+++ b/src/views/dataV/index.vue
@@ -66,7 +66,7 @@ export default {
         transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
       },
       current: 0,
-      key: 'pageOne',
+      key: 'pageFive',
       scale: {},
     };
   },
diff --git a/src/views/dataV/pageFive/index.vue b/src/views/dataV/pageFive/index.vue
index dab0851..c87c671 100644
--- a/src/views/dataV/pageFive/index.vue
+++ b/src/views/dataV/pageFive/index.vue
@@ -2,18 +2,60 @@
   <div>
     <LayOut :bg="bg" :title="title">
       <template v-slot:two>
-        <trace-pecent :baseId="baseId"></trace-pecent>
-      </template>
-      <template v-slot:three>
         <trace-analyze :baseId="baseId"></trace-analyze>
       </template>
+      <template v-slot:three>
+        <trace-pecent :baseId="baseId"></trace-pecent>
+      </template>
       <template v-slot:six>
-        <trace-code :baseId="baseId"></trace-code>
+        <trace-code :baseId="baseId" :dataType="dataType" @showDetail="handleShowDetail"></trace-code>
       </template>
       <template v-slot:seven>
-        <trace-map :baseId="baseId"></trace-map>
+        <trace-map :baseId="baseId" @dataType="handleDataType"></trace-map>
       </template>
     </LayOut>
+    <section class="line_info" :style="{ '--top': info.show ? '18vh' : '120vh' }">
+      <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>
 
@@ -37,9 +79,24 @@ export default {
   data() {
     return {
       bg: require('../img/bg.png'),
-      title: ['溯源扫码占比', '溯源统计分析', '', '', '溯源扫码TOP5'],
+      title: ['溯源统计分析', '农产品销售流向TOP5', '', '', '渊源列表'],
+      info: {
+        show: false,
+      },
+      dataType: '0',
     };
   },
+  methods: {
+    handleShowDetail(info) {
+      this.info = info;
+    },
+    handleCloseInfo() {
+      this.info = Object.assign({}, { show: false });
+    },
+    handleDataType(type) {
+      this.dataType = type;
+    },
+  },
 };
 </script>
 
@@ -49,4 +106,96 @@ export default {
   border: none;
   color: #fff;
 }
+.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>
diff --git a/src/views/dataV/pageFive/list.json b/src/views/dataV/pageFive/list.json
new file mode 100644
index 0000000..4578b35
--- /dev/null
+++ b/src/views/dataV/pageFive/list.json
@@ -0,0 +1,574 @@
+{
+  "data": [
+    {
+      "productName": "核桃",
+      "productCode": "10062787341458",
+      "specs": "袋装",
+      "productType": "核桃仁",
+      "type": "2",
+      "info": {
+        "productName": "核桃",
+        "productCode": "10062787341458",
+        "specs": "袋装",
+        "productType": "核桃仁",
+        "manufacturer": "老灶坊食品加工厂",
+        "shop": "深圳市吉祥干果店",
+        "productTime": "2025年03月23日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-27 23:59.04"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-28 08:30.28"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-28 13:23.54"
+          },
+          {
+            "name": "到达深圳市",
+            "time": "2025-03-29 14:30.40"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-30 13:35.54"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "核桃",
+      "productCode": "10062787348741",
+      "specs": "袋装",
+      "productType": "核桃仁",
+      "type": "2",
+      "info": {
+        "productName": "核桃",
+        "productCode": "10062787348741",
+        "specs": "袋装",
+        "productType": "核桃仁",
+        "manufacturer": "九鼎香食品有限公司",
+        "shop": "秦岭核香店",
+        "productTime": "2025年02月18日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-18 22:39.24"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-19 05:37.18"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-19 23:58.45"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-03-20 11:38.40"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-22 09:28.45"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "核桃",
+      "productCode": "10062787349847",
+      "specs": "袋装",
+      "productType": "核桃仁",
+      "type": "2",
+      "info": {
+        "productName": "核桃",
+        "productCode": "10062787349847",
+        "specs": "袋装",
+        "productType": "核桃仁",
+        "manufacturer": "绿源智造食品加工厂",
+        "shop": "晋南核味店",
+        "productTime": "2025年01月20日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-01-23 06:39.35"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-01-23 23:50.34"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-01-24 21:58.40"
+          },
+          {
+            "name": "到达香港市",
+            "time": "2025-01-25 11:35.45"
+          },
+          {
+            "name": "出售",
+            "time": "2025-01-26 10:28.50"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "核桃",
+      "productCode": "10062787346574",
+      "specs": "袋装",
+      "productType": "核桃仁",
+      "type": "2",
+      "info": {
+        "productName": "核桃",
+        "productCode": "10062787346574",
+        "specs": "袋装",
+        "productType": "核桃仁",
+        "manufacturer": "绿源智造食品加工厂",
+        "shop": "福核斋店",
+        "productTime": "2025年01月13日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-01-14 06:50.35"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-01-14 23:45.50"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-01-15 21:58.40"
+          },
+          {
+            "name": "到达东莞市",
+            "time": "2025-01-16 11:50.44"
+          },
+          {
+            "name": "出售",
+            "time": "2025-01-17 08:29.55"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "核桃",
+      "productCode": "10062787341478",
+      "specs": "袋装",
+      "productType": "核桃仁",
+      "type": "2",
+      "info": {
+        "productName": "核桃",
+        "productCode": "10062787341478",
+        "specs": "袋装",
+        "productType": "核桃仁",
+        "manufacturer": "一口鲜食品加工厂",
+        "shop": "核养坊",
+        "productTime": "2025年01月04日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-01-05 07:30.55"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-01-05 22:45.58"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-01-06 22:55.43"
+          },
+          {
+            "name": "到达深圳市",
+            "time": "2025-01-07 11:55.44"
+          },
+          {
+            "name": "出售",
+            "time": "2025-01-09 13:29.43"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "红茶",
+      "productCode": "10062787346524",
+      "specs": "袋装",
+      "productType": "红茶",
+      "type": "1",
+      "info": {
+        "productName": "红茶",
+        "productCode": "10062787346524",
+        "specs": "袋装",
+        "productType": "红茶",
+        "manufacturer": "粤膳坊食品加工厂",
+        "shop": "茗香居店",
+        "productTime": "2025年03月04日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-06 09:30.54"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-06 18:47.45"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-07 04:54.50"
+          },
+          {
+            "name": "到达香港市",
+            "time": "2025-03-07 23:55.44"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-10 12:21.45"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "白茶",
+      "productCode": "10062787343574",
+      "specs": "袋装",
+      "productType": "白茶",
+      "type": "1",
+      "info": {
+        "productName": "白茶",
+        "productCode": "10062787343574",
+        "specs": "袋装",
+        "productType": "白茶",
+        "manufacturer": "粤膳坊食品加工厂",
+        "shop": "茗香居店",
+        "productTime": "2025年03月21日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-22 05:32.45"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-22 21:43.41"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-23 04:15.20"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-03-23 22:55.05"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-25 07:23.46"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "乌龙茶",
+      "productCode": "10062787348745",
+      "specs": "袋装",
+      "productType": "乌龙茶",
+      "type": "1",
+      "info": {
+        "productName": "乌龙茶",
+        "productCode": "10062787348745",
+        "specs": "袋装",
+        "productType": "乌龙茶",
+        "manufacturer": "粤膳坊食品加工厂",
+        "shop": "茗香居店",
+        "productTime": "2025年03月21日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-22 05:32.45"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-22 21:43.41"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-23 04:15.20"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-03-23 22:55.05"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-25 07:23.46"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "黄茶",
+      "productCode": "10062787343254",
+      "specs": "袋装",
+      "productType": "黄茶",
+      "type": "1",
+      "info": {
+        "productName": "黄茶",
+        "productCode": "10062787343254",
+        "specs": "袋装",
+        "productType": "黄茶",
+        "manufacturer": "粤膳坊食品加工厂",
+        "shop": "茗香居店",
+        "productTime": "2025年03月21日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-22 05:32.45"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-22 21:43.41"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-23 04:15.20"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-03-23 22:55.05"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-25 07:23.46"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "核桃",
+      "productCode": "10062787346958",
+      "specs": "袋装",
+      "productType": "核桃仁",
+      "type": "1",
+      "info": {
+        "productName": "核桃",
+        "productCode": "10062787346958",
+        "specs": "袋装",
+        "productType": "核桃仁",
+        "manufacturer": "粤膳坊食品加工厂",
+        "shop": "茗香居店",
+        "productTime": "2025年03月21日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-22 05:32.45"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-22 21:43.41"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-23 04:15.20"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-03-23 22:55.05"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-25 07:23.46"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "核桃",
+      "productCode": "10062787346923",
+      "specs": "袋装",
+      "productType": "核桃仁",
+      "type": "1",
+      "info": {
+        "productName": "核桃",
+        "productCode": "10062787346923",
+        "specs": "袋装",
+        "productType": "核桃仁",
+        "manufacturer": "粤膳坊食品加工厂",
+        "shop": "茗香居店",
+        "productTime": "2025年03月21日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-22 05:32.45"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-22 21:43.41"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-23 04:15.20"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-03-23 22:55.05"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-25 07:23.46"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "核桃",
+      "productCode": "10062787343256",
+      "specs": "袋装",
+      "productType": "核桃仁",
+      "type": "1",
+      "info": {
+        "productName": "核桃",
+        "productCode": "10062787343256",
+        "specs": "袋装",
+        "productType": "核桃仁",
+        "manufacturer": "粤膳坊食品加工厂",
+        "shop": "茗香居店",
+        "productTime": "2025年03月21日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-22 05:32.45"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-22 21:43.41"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-23 04:15.20"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-03-23 22:55.05"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-25 07:23.46"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "白茶",
+      "productCode": "10062787347489",
+      "specs": "袋装",
+      "productType": "白茶",
+      "type": "1",
+      "info": {
+        "productName": "白茶",
+        "productCode": "10062787347489",
+        "specs": "袋装",
+        "productType": "白茶",
+        "manufacturer": "粤膳坊食品加工厂",
+        "shop": "茗香居店",
+        "productTime": "2025年03月21日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-22 05:32.45"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-22 21:43.41"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-23 04:15.20"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-03-23 22:55.05"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-25 07:23.46"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "核桃",
+      "productCode": "10062787347536",
+      "specs": "袋装",
+      "productType": "核桃仁",
+      "type": "2",
+      "info": {
+        "productName": "核桃",
+        "productCode": "10062787347536",
+        "specs": "袋装",
+        "productType": "核桃仁",
+        "manufacturer": "一口鲜食品加工厂",
+        "shop": "茗香居店",
+        "productTime": "2025年03月23日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-03-25 07:30.46"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-03-25 14:38.41"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-03-26 00:15.35"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-03-26 16:55.08"
+          },
+          {
+            "name": "出售",
+            "time": "2025-03-27 09:26.40"
+          }
+        ]
+      }
+    },
+    {
+      "productName": "红茶",
+      "productCode": "10062787345641",
+      "specs": "袋装",
+      "productType": "红茶",
+      "type": "2",
+      "info": {
+        "productName": "红茶",
+        "productCode": "10062787345641",
+        "specs": "袋装",
+        "productType": "红茶",
+        "manufacturer": "九鼎香食品有限公司",
+        "shop": "云栖茶寮店",
+        "productTime": "2025年02月20日",
+        "route": [
+          {
+            "name": "出库",
+            "time": "2025-02-22 02:32.45"
+          },
+          {
+            "name": "到达临沧市",
+            "time": "2025-02-22 10:43.47"
+          },
+          {
+            "name": "到达昆明市",
+            "time": "2025-02-22 17:13.47"
+          },
+          {
+            "name": "到达广州市",
+            "time": "2025-02-23 13:08.44"
+          },
+          {
+            "name": "出售",
+            "time": "2025-02-25 07:03.41"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/src/views/dataV/pageFive/tracecode.vue b/src/views/dataV/pageFive/tracecode.vue
index 987bae8..e0af310 100644
--- a/src/views/dataV/pageFive/tracecode.vue
+++ b/src/views/dataV/pageFive/tracecode.vue
@@ -1,128 +1,136 @@
 <template>
-  <div>
-    <div class="echart" id="mychart5" style="height: 250px"></div>
+  <div class="productPrices">
+    <div class="box">
+      <div class="label">
+        <div>产品名称</div>
+        <div>产品批次号</div>
+        <div>产品规格</div>
+        <div>产品类型</div>
+      </div>
+      <vue-seamless-scroll :data="scrollList" class="list" :class-option="defaultOption(scrollList)">
+        <ul class="case-info">
+          <li v-for="(item, index) in scrollList" :key="index" @click="handleInfo(item)">
+            <div>{{ item.productName }}</div>
+            <div>{{ item.productCode }}</div>
+            <div>{{ item.specs }}元</div>
+            <div>{{ item.productType }}元</div>
+          </li>
+        </ul>
+      </vue-seamless-scroll>
+    </div>
   </div>
 </template>
+
 <script>
-import { selectRecordGroupBySellpro } from '@/api/trace/dataStatistics';
+import vueSeamlessScroll from 'vue-seamless-scroll';
 export default {
-  data() {
-    return {};
+  components: {
+    vueSeamlessScroll,
   },
   props: {
-    baseId: Number,
+    dataType: {
+      type: String,
+      default: '0',
+    },
   },
-  watch: {
-    baseId: {
-      handler: async function (n) {
-        if (n) {
-          await this.$nextTick();
-          this.initEcharts();
-        }
+  created() {
+    this.data = require('./list.json').data;
+    this.scrollList = this.data;
+  },
+  data() {
+    return {
+      scrollList: [],
+      data: [],
+      info: {
+        show: true,
       },
-      immediate: true,
+    };
+  },
+  computed: {
+    defaultOption() {
+      return (data) => {
+        return {
+          step: 0.1, // 数值越大速度滚动越快
+          limitMoveNum: this.scrollList.length, // 开始无缝滚动的数据量 this.dataList.length
+          hoverStop: true, // 是否开启鼠标悬停stop
+          direction: 1, // 0向下 1向上 2向左 3向右
+          openWatch: true, // 开启数据实时监控刷新dom
+          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+          waitTime: 0, // 单步运动停止的时间(默认值1000ms)
+        };
+      };
     },
   },
   methods: {
-    async initEcharts() {
-      let { rows } = await selectRecordGroupBySellpro(this.baseId);
-      console.log(444, rows);
-      let names = [],
-        values = [];
-      rows.forEach((item) => {
-        values.push(item.value);
-        names.push(item.name);
-      });
-      let option = {
-        grid: {
-          left: '2%',
-          right: '5%',
-          bottom: '4%',
-          top: '3%',
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-          formatter: function (params) {
-            return (
-              params[0].name +
-              '<br/>' +
-              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
-              params[0].value +
-              '次'
-            );
-          },
-        },
-        xAxis: {
-          type: 'value',
-          axisLine: {
-            show: true,
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#ccefff',
-              fontSize: '14',
-            },
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgb(33, 62, 73)',
-            },
-          },
-        },
-        yAxis: [
-          {
-            type: 'category',
-            inverse: true,
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#ccefff',
-                fontSize: '14',
-              },
-            },
-            splitLine: {
-              show: false,
-            },
-            axisTick: {
-              show: true,
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgb(33, 62, 73)',
-              },
-            },
-            data: names,
-          },
-        ],
-        series: [
-          {
-            name: '完成率',
-            type: 'bar',
-            zlevel: 1,
-            itemStyle: {
-              normal: {
-                borderRadius: [0, 10, 10, 0], // 设置两个数值
-                color: (params) => {
-                  return this.$colorList[params.dataIndex];
-                },
-              },
-            },
-            barWidth: 12,
-            data: values,
-          },
-        ],
-      };
-      const myChart = this.$echarts.init(document.getElementById('mychart5'));
-      myChart.setOption(option);
+    handleInfo(item) {
+      this.$emit('showDetail', Object.assign({ show: true }, item));
+    },
+  },
+  watch: {
+    dataType(val) {
+      if (val == '0') {
+        this.scrollList = this.data;
+      } else if (val == '1') {
+        this.scrollList = this.data.filter((item) => item.type == '1');
+      } else if (val == '2') {
+        this.scrollList = this.data.filter((item) => item.type == '2');
+      }
     },
   },
 };
 </script>
-<style lang="scss" scoped></style>
+
+<style lang="scss" scoped>
+.productPrices {
+  height: 100%;
+  .box {
+    height: 100%;
+    .label {
+      display: grid;
+      grid-template-columns: 25% 40% 18% 17%;
+      background: #203c4999;
+      color: #c5d0d4;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 4px;
+      padding-left: 20px;
+      box-sizing: border-box;
+      div {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        &:nth-of-type(1) {
+          flex: 1.5;
+        }
+      }
+    }
+    .list {
+      height: calc(100% - 30px);
+      overflow: hidden;
+      .case-info {
+        color: #fff;
+        padding: 0;
+        margin: 0;
+        padding-left: 20px;
+        box-sizing: border-box;
+        li {
+          display: grid;
+          grid-template-columns: 25% 40% 18% 17%;
+          height: 34px;
+          line-height: 34px;
+          cursor: pointer;
+          div {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: 13px;
+            color: #007aff;
+            // pointer-events: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/dataV/pageFive/tracemap.vue b/src/views/dataV/pageFive/tracemap.vue
index 91a8396..f6b4f89 100644
--- a/src/views/dataV/pageFive/tracemap.vue
+++ b/src/views/dataV/pageFive/tracemap.vue
@@ -11,70 +11,18 @@ export default {
   data() {
     return {
       chinaGeoCoordMap: {
-        黑龙江: [127.9688, 45.368],
-        内蒙古: [110.3467, 41.4899],
-        吉林: [125.8154, 44.2584],
-        北京市: [116.4551, 40.2539],
-        辽宁: [123.1238, 42.1216],
-        河北: [114.4995, 38.1006],
-        天津: [117.4219, 39.4189],
-        山西: [112.3352, 37.9413],
-        陕西: [109.1162, 34.2004],
-        甘肃: [103.5901, 36.3043],
-        宁夏: [106.3586, 38.1775],
-        青海: [101.4038, 36.8207],
-        新疆: [87.9236, 43.5883],
-        西藏: [91.11, 29.97],
-        四川: [103.9526, 30.7617],
-        重庆: [108.384366, 30.439702],
-        山东: [117.1582, 36.8701],
-        河南: [113.4668, 34.6234],
-        江苏: [118.8062, 31.9208],
-        安徽: [117.29, 32.0581],
-        湖北: [114.3896, 30.6628],
-        浙江: [119.5313, 29.8773],
-        福建: [119.4543, 25.9222],
-        江西: [116.0046, 28.6633],
-        湖南: [113.0823, 28.2568],
-        贵州: [106.6992, 26.7682],
         云南: [102.9199, 25.4663],
         广东: [113.12244, 23.009505],
-        广西: [108.479, 23.1152],
-        海南: [110.3893, 19.8516],
-        上海: [121.4648, 31.2891],
+        香港: [114.133834, 22.381374],
+        四川: [104.063707, 30.658753],
+        河北: [114.511072, 38.054693],
       },
       chinaDatas: [
-        [{ name: '黑龙江', value: 500 }],
-        [{ name: '内蒙古', value: 300 }],
-        [{ name: '北京市', value: 200 }],
-        [{ name: '吉林', value: 300 }],
-        [{ name: '辽宁', value: 500 }],
-        [{ name: '河北', value: 600 }],
-        [{ name: '天津', value: 500 }],
-        [{ name: '山西', value: 700 }],
-        [{ name: '陕西', value: 600 }],
-        [{ name: '甘肃', value: 500 }],
-        [{ name: '宁夏', value: 500 }],
-        [{ name: '青海', value: 700 }],
-        [{ name: '新疆', value: 300 }],
-        [{ name: '西藏', value: 300 }],
-        [{ name: '四川', value: 1000 }],
-        [{ name: '重庆', value: 900 }],
-        [{ name: '广东', value: 300 }],
-        [{ name: '山东', value: 600 }],
-        [{ name: '河南', value: 1800 }],
-        [{ name: '江苏', value: 1000 }],
-        [{ name: '安徽', value: 900 }],
-        [{ name: '湖北', value: 3200 }],
-        [{ name: '浙江', value: 1600 }],
-        [{ name: '福建', value: 900 }],
-        [{ name: '湖南', value: 2400 }],
-        [{ name: '贵州', value: 800 }],
-        [{ name: '广西', value: 700 }],
-        [{ name: '海南', value: 700 }],
-        [{ name: '上海', value: 170 }],
-        [{ name: '江西', value: 170 }],
-        [{ name: '云南', value: 500 }],
+        [{ name: '云南' }],
+        [{ name: '广东', value: 62256 }],
+        [{ name: '香港', value: 9256 }],
+        [{ name: '四川', value: 1256 }],
+        [{ name: '河北', value: 382 }],
       ],
     };
   },
@@ -94,11 +42,11 @@ export default {
   },
   methods: {
     convertData(data) {
-      console.info('convertData',data)
+      console.info('convertData', data);
       var res = [];
       for (var i = 0; i < data.length; i++) {
         var dataItem = data[i];
-        var fromCoord = [114.3896, 30.6628];
+        var fromCoord = [102.9199, 25.4663];
         var toCoord = this.chinaGeoCoordMap[dataItem[0].name];
         if (fromCoord && toCoord) {
           res.push([
@@ -116,9 +64,8 @@ export default {
     },
     getSeries() {
       let list = [];
-      let _this=this;
-      [['湖北', _this.chinaDatas]].forEach(function (item, i) {
-        console.log('getSeries',_this);
+      let _this = this;
+      [['云南', _this.chinaDatas]].forEach(function (item, i) {
         list.push(
           {
             type: 'lines',
@@ -166,7 +113,7 @@ export default {
             },
             symbol: 'circle',
             symbolSize: function (val) {
-              return 3 + (val[2] / 100) * 1; //圆环大小
+              return 3 + (val[2] / 2000) * 1; //圆环大小
             },
             itemStyle: {
               normal: {
@@ -221,7 +168,7 @@ export default {
       return list;
     },
     async loadMapChart() {
-      let _this=this;
+      let _this = this;
       var option = {
         title: {
           text: '地图统计图表',
@@ -250,11 +197,16 @@ export default {
           transitionDuration: 0,
           extraCssText: 'z-index:100',
           formatter: function (params, ticket, callback) {
+            let val = 0;
+            if (typeof params.value == 'number') {
+              val = params.value;
+            } else {
+              val = params.value[params.value.length - 1];
+            }
             //根据业务自己拓展要显示的内容
             var res = '';
             var name = params.name;
-            var value = params.value[params.seriesIndex + 1];
-            res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value;
+            res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
             return res;
           },
         },
@@ -262,7 +214,7 @@ export default {
         visualMap: {
           //图例值控制
           min: 1,
-          max: 4000,
+          max: 500,
           calculable: true,
           show: true,
           color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
@@ -273,7 +225,7 @@ export default {
         geo: {
           map: 'china',
           zoom: 1.2,
-          top:250,
+          top: 250,
           label: {
             emphasis: {
               show: false,
@@ -300,13 +252,23 @@ export default {
       //   value: [item.queryCoordinate.split(',')[0], item.queryCoordinate.split(',')[1], item.queryCount],
       // }));
       //查询次数
-      let i = 0;
+      let i = 956;
       rows.forEach((item) => {
         i += item.queryCount;
       });
-      option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
+      // option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
+      option.title.subtext = `我们的产品走过了18个城市，被客户查询了3589次`;
       let myChart = this.$echarts.init(this.$refs.chart);
       this.$echarts.registerMap('china', { geoJSON: chinaMap });
+      myChart.on('click', (params) => {
+        if (params.name.includes('广东')) {
+          this.$emit('dataType', '2');
+        } else if (params.name.includes('香港')) {
+          this.$emit('dataType', '1');
+        } else {
+          this.$emit('dataType', '0');
+        }
+      });
       myChart.setOption(option);
       window.onresize = function () {
         myChart.resize();
diff --git a/src/views/dataV/pageFive/tracepecent.vue b/src/views/dataV/pageFive/tracepecent.vue
index 1b9ef7c..cec803d 100644
--- a/src/views/dataV/pageFive/tracepecent.vue
+++ b/src/views/dataV/pageFive/tracepecent.vue
@@ -1,209 +1,86 @@
 <template>
-  <div class="box">
-    <div>
-      <div class="echart" id="mychart1" ref="chart"></div>
+  <div class="bomRight">
+    <div class="a">
+      <span>广州</span>
+      <span class="num">62,256</span>
     </div>
-    <div>
-      <div class="echart" id="mychart2"></div>
+    <div class="b">
+      <span>香港</span>
+      <span class="num">9,256</span>
+    </div>
+    <div class="c">
+      <span>珠海</span>
+      <span class="num">823</span>
+    </div>
+    <div class="d">
+      <span>深圳</span>
+      <span class="num">4,958</span>
+    </div>
+    <div class="e">
+      <span>佛山</span>
+      <span class="num">94</span>
     </div>
   </div>
 </template>
-<script>
-import { selectRecordGroupByCity } from '@/api/trace/dataStatistics';
-import { autoHover } from '../echartsOption';
-export default {
-  data() {
-    return {};
-  },
-  props: {
-    baseId: Number,
-  },
-  watch: {
-    baseId: {
-      handler: async function (n) {
-        if (n) {
-          await this.$nextTick();
-          this.initEcharts();
-        }
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    async initEcharts() {
-      let { rows } = await selectRecordGroupByCity(this.baseId);
-      let list1 = [],
-        list2 = [];
-      rows.forEach((item) => {
-        list1.push(item.value);
-        list2.push(item.name);
-      });
-      let sum = rows.reduce((sum, item) => sum + item.value, 0);
-      let option = {
-        color: this.$colorList,
-        series: [
-          {
-            type: 'pie',
-            center: ['40%', '50%'],
-            radius: ['50%', '60%'],
-            data: rows,
-            startAngle: 180,
-            label: {
-              show: true,
-              position: 'center',
-              formatter: () => `{title|合计次数}\n{titleValue|${sum}}{titleUnit|次}`,
-              rich: {
-                name: {
-                  color: '#DEDEDE',
-                  fontSize: 16,
-                  align: 'left',
-                  padding: [0, 10, 20, 0],
-                },
-                name1: {
-                  color: '#DEDEDE',
-                  fontSize: 16,
-                  align: 'left',
-                  padding: [0, 0, 0, 10],
-                },
-                value: {
-                  color: '#ccc',
-                  fontSize: 14,
-                  align: 'left',
-                },
-                title: {
-                  color: '#fff',
-                  fontSize: 14,
-                },
-                titleUnit: {
-                  color: '#fff',
-                  fontSize: 16,
-                  padding: [15, 0, 0, 0],
-                },
-                titleValue: {
-                  color: '#fff',
-                  fontSize: 18,
-                  fontWeight: 700,
-                  padding: [15, 5, 5, 5],
-                },
-              },
-            },
-          },
-        ],
-      };
-      const myChart = this.$echarts.init(document.getElementById('mychart1'));
-      myChart.setOption(option);
-      autoHover(myChart, option, 1500);
-
-      let option2 = {
-        grid: {
-          top: '6%',
-          left: '1%',
-          right: '20%',
-          bottom: '30%',
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-          formatter: '{b0}: {c0}',
-        },
-
-        xAxis: {
-          show: false, //是否显示x轴
-          type: 'value',
-        },
-        yAxis: {
-          type: 'category',
-          inverse: true, //让y轴数据逆向
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#666', //y轴字体颜色
-            },
-            formatter: function (value, index) {
-              return ['{title|' + value + '} '].join('\n');
-            },
-            //定义富文本标签
-            rich: {
-              lg: {
-                fontWeight: 'bold',
-                fontSize: 12, //字体默认12
-                color: '#08C',
-                padding: [0, 5, 0, 0],
-              },
-              title: {
-                color: '#fff',
-                fontWeight: 'lighter',
-              },
-            },
-          },
-          splitLine: { show: false }, //横向的线
-          axisTick: { show: false }, //y轴的端点
-          axisLine: { show: false }, //y轴的线
-          data: list2,
-        },
-        series: [
-          {
-            name: '数据内框',
-            type: 'bar',
-            label: {
-              normal: {
-                show: true,
-                position: 'right', // top, right, inside, insideTop,...
-                textStyle: {
-                  color: 'white',
-                  fontSize: 12,
-                },
-                formatter: '{c}' + '次',
-              },
-            },
-            itemStyle: {
-              normal: {
-                barBorderRadius: 30,
-                color: (params) => {
-                  return this.$colorList[params.dataIndex];
-                },
-              },
-            },
-            barWidth: 10,
-            data: list1,
-          },
-          {
-            name: '外框',
-            type: 'bar',
-
-            itemStyle: {
-              normal: {
-                barBorderRadius: 30,
-                color: '#285079',
-              },
-            },
-            barGap: '-100%',
-            z: 0,
-            barWidth: 10,
-            data: [50, 50, 50, 50, 50],
-          },
-        ],
-      };
-      const myChart2 = this.$echarts.init(document.getElementById('mychart2'));
-      myChart2.setOption(option2);
-      autoHover(myChart2, option2, 1500);
-    },
-  },
-};
-</script>
+<script></script>
 <style lang="scss" scoped>
-.box {
-  display: flex;
-}
-#mychart1 {
-  width: 300px;
-  height: 296px;
-}
-#mychart2 {
-  width: 360px;
-  height: 380px;
+.bomRight {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  div {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    background-size: 100% 100%;
+    position: absolute;
+    border-radius: 50%;
+    span {
+      margin-bottom: 4px;
+      color: #fff;
+      text-align: center;
+    }
+    .num {
+      font-size: 18px;
+      text-shadow: 0 0 4px #fff;
+      color: rgba($color: #fff, $alpha: 0.8);
+      font-weight: bold;
+    }
+  }
+  .a {
+    top: 5px;
+    left: 175px;
+    width: 160px;
+    height: 160px;
+    background: url('../img/27.png') no-repeat center/cover;
+  }
+  .b {
+    bottom: 18px;
+    left: 50px;
+    width: 140px;
+    height: 140px;
+    background: url('../img/26.png') no-repeat center/cover;
+  }
+  .c {
+    bottom: 0px;
+    left: 300px;
+    width: 110px;
+    height: 110px;
+    background: url('../img/25.png') no-repeat center/cover;
+  }
+  .d {
+    top: 32px;
+    right: 110px;
+    width: 120px;
+    height: 120px;
+    background: url('../img/26.png') no-repeat center/cover;
+  }
+  .e {
+    bottom: 28px;
+    right: 58px;
+    width: 90px;
+    height: 90px;
+    background: url('../img/25.png') no-repeat center/cover;
+  }
 }
 </style>