From 12b5b69e1f2e2da06631869faf5498ec611d41b1 Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Fri, 8 Mar 2024 16:54:07 +0800
Subject: [PATCH] bug

---
 .../trafficIndicators/assets/chartsRadar.js   |   4 +-
 .../components/trafficIndicators/index.vue    | 147 +++++++-----------
 2 files changed, 58 insertions(+), 93 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
index 92916f39..8cdbbc06 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
@@ -6,7 +6,7 @@ let options = {
   },
   tooltip: {
     trigger: "item",
-    formatter: function (params, ticket, callback) {
+    formatter: function (params) {
       let data = params.data;
       return `交通特征: ${data.value[0]}<br>拥挤度: ${data.value[1]}<br>饱和度: ${data.value[2]}`;
     },
@@ -27,7 +27,7 @@ let options = {
         formatter: function (value) {
           return value + ' '+ (radarData[value] / 10 * 100) + "%";
       },
-        color: "#428BD4",
+        color: "#fff",
       },
       splitArea: {
         areaStyle: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
index e627ceb3..8228bc29 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
@@ -33,87 +33,38 @@
           <el-button type="primary" size="mini" class="btnSearch"  icon="el-icon-search">查询</el-button>
           <el-button class="btnReset"  size="mini" icon="el-icon-refresh-left" >重置</el-button>
         </div> -->
-      <ProgressBar
-        :dataList="dataList"
-        class="keep-ratio progressbar"
-        :selectIndex="7"
-      />
+      <ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" />
       <div class="body">
         <div class="body-l">
           <div class="searchPanel_1">
             <!-- <el-from ref="form"> -->
-            <RadioGroup
-              :options="[
-                { key: '1', label: '菏泽' },
-                { key: '3', label: '济南' },
-              ]"
-              v-model="direction"
-              type="button"
-            />
-            <el-select
-              v-model="type"
-              size="mini"
-              class="selectRoad"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in typeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
+            <RadioGroup :options="[
+      { key: '1', label: '菏泽' },
+      { key: '3', label: '济南' },
+    ]" v-model="direction" type="button" />
+            <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择">
+              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
-            <el-select
-              v-model="quarter"
-              size="medium"
-              v-if="type == '3'"
-              class="selectRoad-medium"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in quarterOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
+            <el-select v-model="quarter" size="medium" v-if="type == '3'" class="selectRoad-medium" placeholder="请选择">
+              <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
             <!-- <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="type == '3'" v-model="dateTime"
             aria-placeholder="请选季度" /> -->
-            <el-date-picker
-              size="mini"
-              v-if="type != '3'"
-              class="selectRoad"
-              v-model="dateTime"
-              style="width: 140px"
-              :type="
-                type == 1
-                  ? 'date'
-                  : type == 2
-                  ? 'month'
-                  : type == 4
-                  ? 'year'
-                  : ''
-              "
-              placeholder="请选择"
-            />
-
-            <el-button
-              type="primary"
-              size="mini"
-              class="btnSearch"
-              @click="searchQuery"
-              icon="el-icon-search"
-              >查询</el-button
-            >
-            <el-button
-              class="btnReset"
-              size="mini"
-              icon="el-icon-refresh-left"
-              @click="handleClear"
-              >重置</el-button
-            >
+            <el-date-picker size="mini" v-if="type != '3'" class="selectRoad" v-model="dateTime" style="width: 140px"
+              :type="type == 1
+      ? 'date'
+      : type == 2
+        ? 'month'
+        : type == 4
+          ? 'year'
+          : ''
+      " placeholder="请选择" />
+
+            <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery"
+              icon="el-icon-search">查询</el-button>
+            <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="handleClear">重置</el-button>
             <!-- </el-from> -->
           </div>
           <!-- <div class="searchPanel_1">
@@ -138,7 +89,7 @@
         <div class="chartOrg">
           <div class="itemChart">
             <div class="title">上月指标</div>
-            <div id="chart2" class="keep-ratio"></div>
+            <div id="chart2" class=""></div>
           </div>
           <div class="itemChart">
             <div class="title">本月指标</div>
@@ -338,7 +289,7 @@ export default {
     };
   },
 
-  created() {},
+  created() { },
   methods: {},
   mounted() {
     setTimeout(() => {
@@ -358,46 +309,60 @@ export default {
         canvas.height = parentDiv.offsetHeight;
         parentDiv.appendChild(canvas);
         const context = canvas.getContext("2d");
+        context.lineWidth = 1; // 设置线段宽度
 
         // 填充渐变颜色
-        var gr = context.createLinearGradient(247, 63, 450, 0);
+        var gr = context.createLinearGradient(140, 0, 180, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-
-        context.lineWidth = 1; // 设置线段宽度
-
         // 绘制圆角矩形
-        drawRoundRect(context, 300, 78, 160, 24, 12, gr);
+        drawRoundRect(context, 98, 1, 90, 22, 12, gr);
 
-        var gr = context.createLinearGradient(240, 63, 450, 0);
+        var gr = context.createLinearGradient(35, 0, 75, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, 300, 148, 160, 24, 12, gr);
+        drawRoundRect(context, -1, 136, 80, 20, 12, gr);
 
-        var gr = context.createLinearGradient(240, 63, 450, 0);
+        var gr = context.createLinearGradient(230, 0, 275, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, 300, 218, 160, 24, 12, gr);
+        context.lineWidth = 1; // 设置线段宽度
+        drawRoundRect(context, 211, 136, 220, 20, 12, gr);
+
 
-        var gr = context.createLinearGradient(400, 63, 450, 0);
+        const domMap3 = document.getElementById("chart3");
+        let parentDiv3 = domMap3.firstChild;
+        // 创建canvas
+        let canvas3 = document.createElement("canvas");
+        canvas3.width = parentDiv3.offsetWidth;
+        canvas3.height = parentDiv3.offsetHeight;
+        parentDiv3.appendChild(canvas3);
+        const context3 = canvas3.getContext("2d");
+        context3.lineWidth = 1; // 设置线段宽度
+
+        // 填充渐变颜色
+        var gr = context3.createLinearGradient(140, 0, 180, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        // 绘制圆角矩形
+        drawRoundRect(context3, 98, 4, 90, 20, 12, gr);
 
-        drawRoundRect(context, 460, 78, 160, 24, 12, gr);
-        var gr = context.createLinearGradient(350, 63, 450, 0);
+        var gr = context3.createLinearGradient(35, 0, 75, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, 460, 148, 160, 24, 12, gr);
-        var gr = context.createLinearGradient(300, 63, 450, 0);
+        drawRoundRect(context3, -1, 138, 80, 20, 12, gr);
+
+        var gr = context3.createLinearGradient(240, 0, 290, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, 460, 218, 160, 24, 12, gr);
+        context3.lineWidth = 1; // 设置线段宽度
+        drawRoundRect(context3, 211, 138, 220, 20, 12, gr);
       });
     });
   },
@@ -420,7 +385,7 @@ export default {
     width: 100%;
     font-size: 14px;
 
-    > div {
+    >div {
       display: inline-flex;
       flex-direction: column;
       height: 100%;
@@ -436,7 +401,7 @@ export default {
     .chartOrg {
       flex-direction: row !important;
 
-      > div {
+      >div {
         display: inline-flex;
         flex-direction: column;
         width: 50%;
@@ -444,7 +409,7 @@ export default {
       }
 
       .itemChart {
-        > .title {
+        >.title {
           display: inline-flex;
           width: 100%;
           height: 30px;