From 8af98e4c9bbdd6033f1817e8594f043237ec35bc Mon Sep 17 00:00:00 2001
From: lau572 <1010031226@qq.com>
Date: Wed, 30 Oct 2024 10:36:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E7=B1=BB=E4=BA=A4=E8=B0=83=E7=AB=99?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1echarts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../perception/trafficFlow/survey/charts.js   | 316 ++++++++++++++++++
 .../perception/trafficFlow/survey/index.vue   | 187 ++++++++++-
 2 files changed, 494 insertions(+), 9 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/charts.js

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/charts.js
new file mode 100644
index 00000000..53162a7a
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/charts.js
@@ -0,0 +1,316 @@
+import * as echarts from "echarts";
+var options = {
+  tooltip: {
+    show: true,
+    trigger: "axis",
+    position: function (point, params, dom, rect, size) {
+      // 提示框位置
+      var x = 0; // x坐标位置
+      var y = 0; // y坐标位置
+      // 当前鼠标位置
+      var pointX = point[0];
+      var pointY = point[1];
+      // 提示框大小
+      var boxWidth = size.contentSize[0];
+      var boxHeight = size.contentSize[1];
+      // boxWidth > pointX 说明鼠标左边放不下提示框
+      if (boxWidth > pointX) {
+        x = 5;
+      } else {
+        // 左边放的下
+        x = pointX - boxWidth;
+      }
+      // boxHeight > pointY 说明鼠标上边放不下提示框
+      if (boxHeight > pointY) {
+        y = 5;
+      } else {
+        // 上边放得下
+        y = pointY - boxHeight;
+      }
+      return [point[0] + 10, y];
+    },
+    formatter: (params) => {
+
+      let name = params[0].name.replace(/-/g, "")
+      let name1 = '济南-' + name
+      let name2 = '菏泽-' + name
+      if(params[0].axisIndex === 1){
+        name1 = '菏泽-' + name
+        name2 = '济南-' + name
+      }
+      let tip = `${name1}<br/>`;
+      params.forEach((item,index) =>{
+        if (item.axisIndex === 0){
+          tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value}  辆</span><br/>`
+        }
+      })
+      tip = tip + `<br/>${name2}<br/>`
+      params.forEach((item,index) =>{
+        if (item.axisIndex === 1){
+          tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value}  辆</span><br/>`
+        }
+      })
+      return tip;
+    },
+  },
+  axisPointer: {
+    link: [
+      {
+        xAxisIndex: "all",
+      },
+    ],
+  },
+  legend: {
+    top: 0,
+    right: 0,
+    icon:'rect',
+    textStyle: {
+      color: "#fff",
+    },
+    itemHeight: 5,
+    itemWidth: 10,
+    data: [
+      {
+        name: "本期车流量",
+        itemStyle: {
+          color: '#6DBBFB'
+        }
+
+      },{
+        name: "去年同期",
+        itemStyle: {
+          color: '#5FA52B'
+        }
+
+      },
+    ],
+  },
+  grid: [
+    {
+      left: 60,
+      top: '25%',
+      right: 10,
+      height: "35%",
+    },
+    {
+      left: 60,
+      right: 10,
+      top: "60%",
+      height: "35%",
+    },
+  ],
+  xAxis: [
+    {
+      type: "category",
+      data: [],
+      axisLabel: {
+        show:false
+      },
+      z: 10,
+      splitLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    {
+      onZero: true,
+      axisLine: { show: false },
+      gridIndex: 1,
+      type: "category",
+      z: 10,
+      data: [],
+      position: "top",
+      axisLabel: {
+        color: "#fff",
+        margin: -20,
+        formatter: function (params) {
+          return `${params.substr(0,params.length-2)}\n\n${params.substr(params.length-2)}`;
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  yAxis: [
+    {
+      name: "车流量          ",
+      type: "value",
+      axisLabel: {
+        color: "#FFF",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#00D1FF",
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    {
+      gridIndex: 1,
+      name: "",
+      type: "value",
+      inverse: true,
+      axisLabel: {
+        color: "#FFF",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#06AED3",
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "本期车流量",
+      type: "line",
+      symbolSize: 0,
+      lineStyle: {
+        color: "#06AED3",
+      },
+      smooth: true,
+      areaStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 1,
+                color: "#06AED300",
+              },
+              {
+                offset: 0,
+                color: "#06AED3",
+              },
+            ],
+            false
+          ),
+        },
+      },
+      data: [
+        57, 36, 56, 95, 125, 194, 94, 94, 74, 34, 125, 194, 94, 94, 74, 34,
+      ],
+    },
+    {
+      name: "去年同期",
+      type: "line",
+      symbol: 'none',
+      smooth: true,
+      lineStyle: {
+        type:'dashed',
+        width: 1
+      },
+      areaStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 1,
+                color: "#5FA52B00",
+              },
+              {
+                offset: 0,
+                color: "#5FA52B55",
+              },
+            ],
+            false
+          ),
+        },
+      },
+      data: [
+        94, 74, 34, 125, 194, 94, 94, 74, 34,57, 36, 56, 95, 125, 194, 94,
+      ],
+    },
+    {
+      name: "本期车流量",
+      type: "line",
+      symbol: "circle",
+      symbolSize: 0,
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      smooth: true,
+      lineStyle: {
+        color: "#06AED3",
+      },
+      areaStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "#06AED300",
+              },
+              {
+                offset: 1,
+                color: "#06AED3",
+              },
+            ],
+            false
+          ),
+        },
+      },
+      data: [
+        67, 36, 56, 195, 25, 194, 94, 94, 74, 21, 195, 25, 194, 94, 94, 74, 21,
+      ],
+    },
+    {
+      name: "去年同期",
+      type: "line",
+      symbol: 'none',
+      smooth: true,
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      lineStyle: {
+        type:'dashed',
+        width: 1
+      },
+      areaStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 1,
+                color: "#5FA52B00",
+              },
+              {
+                offset: 0,
+                color: "#5FA52B55",
+              },
+            ],
+            false
+          ),
+        },
+      },
+      data: [
+        195,25, 194, 94, 94, 7, 25, 194, 94, 94, 74, 21, 67, 36, 56, 195, 4, 21,
+      ],
+    },
+  ],
+};
+
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/index.vue
index 99d8f012..f65e0252 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/index.vue
@@ -10,18 +10,23 @@
           导出
         </ButtonGradient>
         <ButtonGradient @click="onRefreshForm" class="refresh-btn">
-        <template #prefix>
-          <img src="@screen/images/refresh.svg" />
-        </template>
-        刷新
-      </ButtonGradient>
+          <template #prefix>
+            <img src="@screen/images/refresh.svg" />
+          </template>
+          刷新
+        </ButtonGradient>
       </div>
 
       <InputSearch ref="searchComp" style="width: 400px" :formList="searchFormList" @handleSearch="handleSearch" />
     </div>
     <!-- 内容 -->
     <div class="body">
-      <Table :data="tableData" :span-method="mergeRow" >
+      <div class="flowstate">
+        <div class="tag1" >方向：济南<span>←</span></div>
+        <div class="tag2"><span>→</span>方向：菏泽</div>
+        <div class="chartsFs " id="surveyChart"></div>
+      </div>
+      <Table :data="tableData" :span-method="mergeRow" :height="'50%'">
 
         <ElTableColumn label="设备名称" prop="stakeMark" width="200"  align="center" header-align="center" >
           <template slot-scope="scope">
@@ -57,6 +62,9 @@ import Form from "@screen/components/FormConfig";
 import Dialog from "@screen/components/Dialog/index.vue";
 import {  mapState } from "vuex";
 import moment from 'moment';
+import * as echarts from "echarts";
+import chartOptions from "./charts";
+
 
 export default {
   name: 'survey',
@@ -87,9 +95,20 @@ export default {
     this.initData();
   },
   mounted(){
+    this.$nextTick(()=>{
+      if(!this.myChart){
+        this.myChart = echarts.init(document.getElementById("surveyChart"));
+      }
+      this.initData();
+      // this.searchQuery()
+    })
+
+    window.addEventListener("resize", () => {
+      if(this.myChart)
+        this.myChart.resize();
+    });
   },
   methods: {
-
     mergeRow({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 0) {
         const start = this.tableData.findIndex(data => data.stakeMark === row.stakeMark);
@@ -126,7 +145,8 @@ export default {
         data: this.searchData,
       });
     },
-    initData() {
+    async initData() {
+
       if(!this.searchData.timestamp){
         this.searchData.timestamp = moment().format('YYYY-MM-DD') + " 00:00:01"
       }
@@ -140,6 +160,7 @@ export default {
       }).then((result) => {
         this.columnList = result.data.columnList
         this.tableData = result.data.rowList
+        this.loadCharts(result.data)
       });
     },
     onSizeChange(pageSize) {
@@ -147,12 +168,160 @@ export default {
       this.searchData.pageSize = pageSize;
       this.searchData.pageNum = 1;
       this.initData();
-    }
+    },
+    loadCharts(data){
+
+      const xAxis = data.columnList.map(x=>x.label);
+      chartOptions.xAxis[0].data = xAxis;
+      chartOptions.xAxis[1].data = xAxis;
+
+      let color = ["#2ef7f5", "#4780f5", "#b346f6", "#25ea77", "#d2040a", "#eadb06", "#0600f2", "#e67500"]
+      let series = []
+      let legendData = []
+      const stakeMarkMap = new Map();
+      data.rowList.forEach(item => {
+        stakeMarkMap.set(item.stakeMark, item);
+      });
+      data.rowList.forEach(item => {
+        const stakeMark = item.stakeMark;
+        if (!stakeMarkMap[stakeMark]) {
+          stakeMarkMap[stakeMark] = [];
+        }
+        stakeMarkMap[stakeMark].push(item);
+      });
+
+      stakeMarkMap.keys().forEach((stakeMark,index) =>{
+
+        legendData.push({
+          name: stakeMark,
+          itemStyle: {
+            color: color[index]
+          }
+        })
+        stakeMarkMap[stakeMark].forEach(stakeMarkData => {
+          let seriesData = []
+          data.columnList.forEach(x =>{
+            seriesData.push(stakeMarkData[x.key])
+          })
+          debugger
+
+          if (stakeMarkData.direction == '3'){
+            series.push({
+              name: stakeMark,
+              type: "line",
+              symbolSize: 0,
+              lineStyle: {
+                color: color[index],
+              },
+              smooth: true,
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 1,
+                        color: "#06AED300",
+                      },
+                      {
+                        offset: 0,
+                        color: color[index],
+                      },
+                    ],
+                    false
+                  ),
+                },
+              },
+              data: seriesData,
+            },)
+          } else {
+            series.push({
+              name: stakeMark,
+              type: "line",
+              symbol: "circle",
+              symbolSize: 0,
+              xAxisIndex: 1,
+              yAxisIndex: 1,
+              smooth: true,
+              lineStyle: {
+                color: color[index],
+              },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: "#06AED300",
+                      },
+                      {
+                        offset: 1,
+                        color: color[index],
+                      },
+                    ],
+                    false
+                  ),
+                },
+              },
+              data: seriesData,
+            })
+          }
+        })
+
+      })
+      debugger
+      chartOptions.series = series
+      chartOptions.legend.data = legendData
+      this.myChart.setOption(chartOptions);
+    },
   }
 }
 </script>
 
 <style lang='scss' scoped>
+  .flowstate {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .chartsFs {
+      height: 35vh;
+      width: 200vh;
+    }
+
+    .tag1 {
+      position: absolute;
+      margin-top: -15%;
+      margin-left: 2%;
+      font-size: 12px;
+      span{
+        color: #8be8fe;
+        font-weight: bold;
+        margin-left: 10px;
+      }
+    }
+
+    .tag2 {
+      position: absolute;
+      font-size: 12px;
+      margin-top: 15%;
+      margin-left: 90%;
+      span{
+        color: #8be8fe;
+        font-weight: bold;
+        margin-right: 10px;
+      }
+    }
+  }
 .board_record {
   width:100%;
   height: 100%;