xzt
11 months ago
18 changed files with 694 additions and 38 deletions
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,563 @@ |
|||
<template> |
|||
<div class="page"> |
|||
<div class="page_left"> |
|||
<div class="left_head"> |
|||
<div class="head_title"> |
|||
<div class="iconSpan"> |
|||
<span class="first"></span> |
|||
<span class="second"></span> |
|||
</div> |
|||
<span class="text">预警分布情况</span> |
|||
</div> |
|||
<div |
|||
:class="{ |
|||
head_btn: true, |
|||
head_btn_al: isActive == '1', |
|||
head_btn_ar: isActive == '2', |
|||
}" |
|||
> |
|||
<div |
|||
:class="{ btn_left: true, activeBtn: isActive == '1' }" |
|||
@click="chooseBtn(1)" |
|||
> |
|||
红灯/黄灯 |
|||
</div> |
|||
<div |
|||
:class="{ btn_right: true, activeBtn: isActive == '2' }" |
|||
@click="chooseBtn(2)" |
|||
> |
|||
正常 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="left_content"> |
|||
<div ref="myEcharts" class="myEharts"></div> |
|||
</div> |
|||
</div> |
|||
<div class="page_right"> |
|||
<div class="right_head"> |
|||
<div class="head_title"> |
|||
<div class="iconSpan"> |
|||
<span class="first"></span> |
|||
<span class="second"></span> |
|||
</div> |
|||
<span class="text">项目法人效率监督</span> |
|||
</div> |
|||
<div class="head_btn"> |
|||
<div |
|||
:class="{ btnYear: true, activeBtn: activeTime == '1' }" |
|||
@click="chooseTime('1')" |
|||
> |
|||
本年 |
|||
</div> |
|||
<div |
|||
:class="{ btnMonth: true, activeBtn: activeTime == '2' }" |
|||
@click="chooseTime('2')" |
|||
> |
|||
本月 |
|||
</div> |
|||
<div |
|||
:class="{ btnWeek: true, activeBtn: activeTime == '3' }" |
|||
@click="chooseTime('3')" |
|||
> |
|||
本周 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right_content"> |
|||
<div class="wait"> |
|||
<div class="wait_title">待办事项(个)</div> |
|||
<div class="wait_no">16</div> |
|||
<img src="@/assets/image/Frame1.png" alt="" /> |
|||
</div> |
|||
<div class="finishAndDelay"> |
|||
<div class="finish"> |
|||
<div class="finish_title">待办事项(个)</div> |
|||
<div class="finish_no">16</div> |
|||
<img src="@/assets/image/Frame2.png" alt="" /> |
|||
</div> |
|||
<div class="delay"> |
|||
<div class="delay_title">待办事项(个)</div> |
|||
<div class="delay_no">16</div> |
|||
<img src="@/assets/image/Frame3.png" alt="" /> |
|||
</div> |
|||
</div> |
|||
<div class="rate"> |
|||
<div class="finishRate"> |
|||
<div class="finishRateTitle">完成率</div> |
|||
<el-progress |
|||
type="circle" |
|||
:percentage="88" |
|||
:width="88" |
|||
:stroke-width="10" |
|||
stroke-linecap="square" |
|||
define-back-color="rgba(0, 0, 0, 0.05)" |
|||
text-color="#12C299" |
|||
></el-progress> |
|||
</div> |
|||
<div class="delayRate"> |
|||
<div class="delayRateTitle">延办率</div> |
|||
<el-progress |
|||
type="circle" |
|||
:percentage="2" |
|||
:width="88" |
|||
:stroke-width="10" |
|||
stroke-linecap="square" |
|||
define-back-color="rgba(0, 0, 0, 0.05)" |
|||
text-color="#FF6400" |
|||
></el-progress> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- svg --> |
|||
<svg width="0" height="0"> |
|||
<defs> |
|||
<linearGradient id="green" x1="0%" y1="0%" x2="100%" y2="0%"> |
|||
<stop offset="0%" style="stop-color: #12c299; stop-opacity: 1" /> |
|||
<stop offset="100%" style="stop-color: #12c299; stop-opacity: 0.4" /> |
|||
</linearGradient> |
|||
</defs> |
|||
</svg> |
|||
<svg width="0" height="0"> |
|||
<defs> |
|||
<linearGradient id="orange" x1="0%" y1="0%" x2="100%" y2="0%"> |
|||
<stop offset="0%" style="stop-color: #ff6400; stop-opacity: 1" /> |
|||
<stop offset="100%" style="stop-color: #ff6400; stop-opacity: 0.4" /> |
|||
</linearGradient> |
|||
</defs> |
|||
</svg> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
isActive: "1", |
|||
activeTime: "1", |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.initEcharts(); |
|||
}, |
|||
methods: { |
|||
chooseBtn(key) { |
|||
this.isActive = key; |
|||
}, |
|||
chooseTime(key) { |
|||
this.activeTime = key; |
|||
}, |
|||
initEcharts() { |
|||
var chartDom = this.$refs.myEcharts; |
|||
console.log(111, chartDom); |
|||
var myChart = echarts.init(chartDom); |
|||
var option; |
|||
|
|||
option = { |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "shadow", |
|||
}, |
|||
}, |
|||
color: ["#36A3D9", "#F29130"], |
|||
legend: { |
|||
right: 10, |
|||
itemHeight: 10, |
|||
itemWidth: 10, |
|||
}, |
|||
grid: { |
|||
left: "3%", |
|||
right: "4%", |
|||
bottom: "3%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: "category", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"广州", |
|||
"深圳", |
|||
"佛山", |
|||
"中山", |
|||
"惠州", |
|||
"东莞", |
|||
"阳江", |
|||
"韶关", |
|||
"河源", |
|||
"肇庆", |
|||
"珠海", |
|||
"江门", |
|||
"汕头", |
|||
"潮州", |
|||
"揭阳", |
|||
"湛江", |
|||
"茂名", |
|||
"清远", |
|||
"梅州", |
|||
], |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
//网格线 |
|||
show: false, //是否显示 |
|||
// lineStyle: { |
|||
// //网格线样式 |
|||
// // color: "#0735a2", //网格线颜色 |
|||
// // width: 1, //网格线的加粗程度 |
|||
// type: "dashed", //网格线类型 |
|||
// }, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "红灯", |
|||
type: "bar", |
|||
// 重叠 |
|||
stack: "Ad", |
|||
barMaxWidth: "25%", |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "rgba(54, 163, 217, 1)" }, |
|||
{ offset: 1, color: "rgba(54, 163, 217, 0.2)" }, |
|||
]), |
|||
}, |
|||
emphasis: { |
|||
focus: "series", |
|||
}, |
|||
data: [ |
|||
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, |
|||
210, 120, 132, 101, 134, 90, |
|||
], |
|||
}, |
|||
{ |
|||
name: "黄灯", |
|||
type: "bar", |
|||
stack: "Ad", |
|||
barMaxWidth: "25%", |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "rgba(242, 145, 48, 1)" }, |
|||
{ offset: 1, color: "rgba(242, 145, 48, 0.2)" }, |
|||
]), |
|||
}, |
|||
emphasis: { |
|||
focus: "series", |
|||
}, |
|||
data: [ |
|||
220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, |
|||
310, 220, 182, 191, 234, 290, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.page { |
|||
width: 1200px; |
|||
height: 488px; |
|||
// background: skyblue; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.page_left { |
|||
width: 808px; |
|||
height: 100%; |
|||
// border: 1px solid red; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.left_head { |
|||
width: 792px; |
|||
height: 76px; |
|||
background: #f3feff; |
|||
padding: 16px 24px 16px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.head_title { |
|||
height: 26px; |
|||
display: flex; |
|||
.iconSpan { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-evenly; |
|||
margin-right: 8px; |
|||
.first { |
|||
width: 6px; |
|||
height: 6px; |
|||
background: #f86220; |
|||
} |
|||
.second { |
|||
width: 6px; |
|||
height: 6px; |
|||
background: #36b29e; |
|||
} |
|||
} |
|||
.text { |
|||
font-size: 18px; |
|||
line-height: 26px; |
|||
} |
|||
} |
|||
.head_btn { |
|||
font-size: 14px; |
|||
display: flex; |
|||
border: 1px solid #36b29e; |
|||
.btn_left { |
|||
padding: 5px 16px; |
|||
// border: 1px solid #d9d9d9; |
|||
border-right: 1px solid #d9d9d9; |
|||
cursor: pointer; |
|||
} |
|||
.btn_right { |
|||
padding: 5px 16px; |
|||
// border: 1px solid #d9d9d9; |
|||
cursor: pointer; |
|||
} |
|||
.activeBtn { |
|||
color: #36b29e; |
|||
} |
|||
} |
|||
.head_btn_al { |
|||
border-radius: 4px 0px 0px 4px; |
|||
} |
|||
.head_btn_ar { |
|||
border-radius: 0px 4px 4px 0px; |
|||
} |
|||
} |
|||
.left_content { |
|||
flex: 1; |
|||
.myEharts { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
.page_right { |
|||
width: 384px; |
|||
height: 100%; |
|||
// border: 1px solid red; |
|||
background: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.right_head { |
|||
height: 58px; |
|||
padding: 16px 16px; |
|||
background: #f3feff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.head_title { |
|||
height: 26px; |
|||
display: flex; |
|||
.iconSpan { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-evenly; |
|||
margin-right: 8px; |
|||
.first { |
|||
width: 6px; |
|||
height: 6px; |
|||
background: #f86220; |
|||
} |
|||
.second { |
|||
width: 6px; |
|||
height: 6px; |
|||
background: #36b29e; |
|||
} |
|||
} |
|||
.text { |
|||
font-size: 18px; |
|||
line-height: 26px; |
|||
} |
|||
} |
|||
.head_btn { |
|||
display: flex; |
|||
font-size: 14px; |
|||
.btnYear, |
|||
.btnMonth, |
|||
.btnWeek { |
|||
padding: 5px 16px 5px 16px; |
|||
border: 1px solid #d9d9d9; |
|||
cursor: pointer; |
|||
box-sizing: border-box; |
|||
} |
|||
.btnYear { |
|||
border-radius: 4px 0px 0px 4px; |
|||
} |
|||
.btnMonth { |
|||
border-left: 0; |
|||
border-right: 0; |
|||
} |
|||
.btnWeek { |
|||
border-radius: 0px 4px 4px 0px; |
|||
} |
|||
.activeBtn { |
|||
border: 1px solid #36b29e; |
|||
color: #36b29e; |
|||
} |
|||
} |
|||
} |
|||
.right_content { |
|||
flex: 1; |
|||
padding: 24px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
.wait { |
|||
height: 102px; |
|||
padding: 16px 24px; |
|||
border-radius: 4px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#cff3f6 0%, |
|||
rgba(207, 243, 246, 0.3) 100% |
|||
); |
|||
position: relative; |
|||
.wait_title { |
|||
font-size: 14px; |
|||
color: #262626; |
|||
margin-bottom: 5px; |
|||
} |
|||
.wait_no { |
|||
font-size: 40px; |
|||
color: #36b29e; |
|||
} |
|||
& > img { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 5px; |
|||
} |
|||
} |
|||
.finishAndDelay { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 98px; |
|||
.finish { |
|||
width: 160px; |
|||
padding: 16px 24px; |
|||
border-radius: 4px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#c7f3e3 0%, |
|||
rgba(199, 243, 227, 0.3) 100% |
|||
); |
|||
|
|||
position: relative; |
|||
.finish_title { |
|||
font-size: 14px; |
|||
color: #262626; |
|||
margin-bottom: 5px; |
|||
} |
|||
.finish_no { |
|||
font-size: 40px; |
|||
color: #72bf4c; |
|||
} |
|||
& > img { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 5px; |
|||
} |
|||
} |
|||
.delay { |
|||
width: 160px; |
|||
padding: 16px 24px; |
|||
border-radius: 4px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#ffe4d2 0%, |
|||
rgba(255, 228, 210, 0.3) 100% |
|||
); |
|||
|
|||
position: relative; |
|||
.delay_title { |
|||
font-size: 14px; |
|||
color: #262626; |
|||
margin-bottom: 5px; |
|||
} |
|||
.delay_no { |
|||
font-size: 40px; |
|||
color: #ff6400; |
|||
} |
|||
& > img { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 5px; |
|||
} |
|||
} |
|||
} |
|||
.rate { |
|||
height: 154px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.finishRate { |
|||
width: 160px; |
|||
padding: 16px 24px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#c7f3e3 0%, |
|||
rgba(199, 243, 227, 0.3) 100% |
|||
); |
|||
.finishRateTitle { |
|||
align-self: flex-start; |
|||
} |
|||
/deep/ svg > path:nth-child(2) { |
|||
stroke: url(#green); |
|||
} |
|||
/deep/ .el-progress__text { |
|||
font-size: 24px !important; |
|||
} |
|||
} |
|||
.delayRate { |
|||
width: 160px; |
|||
padding: 16px 24px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#ffe4d2 0%, |
|||
rgba(255, 228, 210, 0.3) 100% |
|||
); |
|||
.delayRateTitle { |
|||
align-self: flex-start; |
|||
} |
|||
/deep/ svg > path:nth-child(2) { |
|||
stroke: url(#orange); |
|||
} |
|||
/deep/ .el-progress__text { |
|||
font-size: 24px !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
<div>资金控制情况</div> |
|||
</template> |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
<router-view /> |
|||
</template> |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
<div>一张图</div> |
|||
</template> |
|||
Loading…
Reference in new issue