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;