Browse Source

bug

wangqin
zhoule 1 year ago
parent
commit
12b5b69e1f
  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

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

@ -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);
});
});
},

Loading…
Cancel
Save