|
|
|
@ -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; |
|
|
|
|
hui
1 year ago