mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

bug

wangqin
zhoule 1 year ago
parent
7e75a96f4f
commit
12b5b69e1f
2 changed files with 58 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
  2. 121
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue

4
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
View File

@ -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: {

121
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
View File

@ -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="[
<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"
>
]" 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
<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="请选择"
/>
" 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-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>
@ -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);
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 = context.createLinearGradient(400, 63, 450, 0);
// 填充渐变颜色
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);
});
});
},

Write Preview
Loading…
Cancel
Save